:root {
  --surface_base: var(--black);
  --surface_elevated: var(--grey-800);
  --surface_subtle: var(--grey-700);
  --surface_muted: var(--grey-600);
  --surface_inverse: var(--grey-100);
  --surface_overlay: rgba(0, 0, 0, 0.60);
  --surface_accent: var(--grey-500);
  --surface_permanent_dark: var(--grey-600);
  --surface_permanent_light: var(--grey-200);

  --text_primary: var(--white);
  --text_secondary: var(--grey-300);
  --text_tertiary: var(--grey-400);
  --text_disabled: var(--grey-600);
  --text_inverse: var(--black);
  --text_inverse-disabled: var(--grey-400);
  --text_link: var(--violet-300);
  --text_permanent_light: var(--white);
  --text_permanent_dark: var(--grey-800);

  --border_subtle: var(--grey-800);
  --border_light: var(--grey-700);
  --border_medium: var(--grey-600);
  --border_default: var(--grey-500);
  --border_strong: var(--grey-400);
  --border_inverse: var(--white);

  --interactive_primary: var(--white);
  --interactive_primary-hover: var(--grey-400);
  --interactive_primary-active: var(--grey-500);
  --interactive_primary-disabled: var(--grey-800);
  --interactive_secondary: var(--grey-700);
  --interactive_secondary-hover: var(--grey-800);
  --interactive_secondary-active: var(--black);
  --interactive_accent: var(--violet-400);
  --interactive_accent-subtle: var(--violet-800);
  --interactive_disabled-bg: var(--grey-800);
  --interactive_disabled-fg: var(--grey-600);
  --focus_ring: var(--violet-400);

  --status_success: var(--green-400);
  --status_success-hover: var(--green-300);
  --status_success-active: var(--green-200);
  --status_success-subtle: var(--green-800);
  --status_danger: var(--red-400);
  --status_danger-hover: var(--red-300);
  --status_danger-active: var(--red-200);
  --status_danger-subtle: var(--red-800);
  --status_warning: var(--yellow-400);
  --status_warning-hover: var(--yellow-300);
  --status_warning-active: var(--yellow-200);
  --status_warning-subtle: var(--yellow-800);
  --status_info: var(--blue-400);
  --status_info-hover: var(--blue-300);
  --status_info-active: var(--blue-200);
  --status_info-subtle: var(--blue-800);
  --status_attention: var(--violet-400);
  --status_attention-hover: var(--violet-300);
  --status_attention-active: var(--violet-200);
  --status_attention-subtle: var(--violet-800);
}
