/* Roma tokens: the Tomato Lab design system.
   GENERATED from _data/tokens.json. Do not edit by hand. */

:root {
  /* Primitives. Components use the roles below, not these. */
  --color-tomato-100: #FFE4E8;
  --color-tomato-300: #FF9CA7;
  --color-tomato-500: #FF223C; /* Tomato */
  --color-tomato-600: #E01E35;
  --color-tomato-700: #BF1A2D;
  --color-tomato-900: #470A11;
  --color-water-100: #E0EEFF;
  --color-water-300: #8CC1FF;
  --color-water-500: #0075FF; /* Water */
  --color-water-700: #0058BF;
  --color-water-900: #002147;
  --color-vine-500: #BAFF8F; /* Fluorescent Vine */
  --color-vine-900: #344728;
  --color-burlap-500: #F8E6D2; /* Burlap Sack */
  --color-burlap-900: #37332E;
  --color-neutral-0: #FFFFFF;
  --color-neutral-50: #F7F7F7; /* Lab Coat */
  --color-neutral-100: #EFEFEF;
  --color-neutral-200: #E2E2E2;
  --color-neutral-300: #CFCFCF;
  --color-neutral-400: #A8A8A8;
  --color-neutral-500: #6E6E6E;
  --color-neutral-600: #555555;
  --color-neutral-700: #3D3D3D;
  --color-neutral-800: #2E2E2E;
  --color-neutral-900: #232323; /* Dirt */

  /* Layout */
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 999px;
  --border-width-1: 1px;
  --border-width-2: 2px;
  --control-height-sm: 32px;
  --control-height-md: 44px;
  --control-height-lg: 56px;

  /* Type */
  --font-display: neue-haas-grotesk-display, "Neue Haas Grotesk Display Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-text: neue-haas-grotesk-text, "Neue Haas Grotesk Text Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-reading: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --text-heading-xl: 900 2.75rem/1.05 var(--font-display);
  --text-heading-l: 900 2.0rem/1.1 var(--font-display);
  --text-heading-m: 900 1.5rem/1.15 var(--font-display);
  --text-heading-s: 900 1.25rem/1.2 var(--font-display);
  --text-action-lg: 900 1.375rem/1.0 var(--font-display);
  --text-action-md: 900 1.1875rem/1.0 var(--font-display);
  --text-label-m: 700 0.875rem/1.0 var(--font-text);
  --text-label-s: 700 0.75rem/1.0 var(--font-text);
  --text-body-l: 400 1.125rem/1.4 var(--font-text);
  --text-body-m: 400 1.0rem/1.4 var(--font-text);
  --text-body-s: 400 0.875rem/1.4 var(--font-text);
  --text-caption: 400 0.75rem/1.4 var(--font-text);
  --text-reading-m: 400 1.125rem/1.4 var(--font-reading);
  --text-reading-l: 400 1.375rem/1.4 var(--font-reading);
}

:root,
[data-theme="light"] {
  color-scheme: light;
  --color-bg-page: var(--color-neutral-50);
  --color-bg-surface: var(--color-neutral-0);
  --color-bg-muted: var(--color-neutral-100);
  --color-bg-inverse: var(--color-neutral-900);
  --color-bg-accent: var(--color-tomato-500);
  --color-bg-accent-subtle: var(--color-tomato-100);
  --color-bg-warm: var(--color-burlap-500);
  --color-text-primary: var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-600);
  --color-text-muted: var(--color-neutral-500);
  --color-text-inverse: var(--color-neutral-50);
  --color-text-accent: var(--color-tomato-700);
  --color-text-link: var(--color-water-700);
  --color-text-on-accent: var(--color-neutral-50);
  --color-border-subtle: var(--color-neutral-300);
  --color-border-default: var(--color-neutral-900);
  --color-border-focus: var(--color-water-500);
  --color-border-accent: var(--color-tomato-500);
  --color-action-primary-bg: var(--color-tomato-500);
  --color-action-primary-bg-hover: var(--color-tomato-600);
  --color-action-primary-bg-pressed: var(--color-tomato-700);
  --color-action-primary-text: var(--color-neutral-50);
  --color-action-secondary-bg: var(--color-neutral-900);
  --color-action-secondary-bg-hover: var(--color-neutral-700);
  --color-action-secondary-bg-pressed: var(--color-neutral-600);
  --color-action-secondary-text: var(--color-neutral-50);
  --color-action-disabled-bg: var(--color-neutral-200);
  --color-action-disabled-text: var(--color-neutral-500);
  --color-feedback-danger-bg: var(--color-tomato-100);
  --color-feedback-danger-fg: var(--color-tomato-700);
  --color-feedback-success-bg: var(--color-vine-500);
  --color-feedback-success-fg: var(--color-neutral-900);
  --color-feedback-info-bg: var(--color-water-100);
  --color-feedback-info-fg: var(--color-water-700);
  --color-feedback-warning-bg: var(--color-burlap-500);
  --color-feedback-warning-fg: var(--color-neutral-900);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg-page: var(--color-neutral-900);
    --color-bg-surface: var(--color-neutral-800);
    --color-bg-muted: var(--color-neutral-700);
    --color-bg-inverse: var(--color-neutral-50);
    --color-bg-accent: var(--color-tomato-500);
    --color-bg-accent-subtle: var(--color-tomato-900);
    --color-bg-warm: var(--color-burlap-900);
    --color-text-primary: var(--color-neutral-50);
    --color-text-secondary: var(--color-neutral-300);
    --color-text-muted: var(--color-neutral-400);
    --color-text-inverse: var(--color-neutral-900);
    --color-text-accent: var(--color-tomato-300);
    --color-text-link: var(--color-water-300);
    --color-text-on-accent: var(--color-neutral-50);
    --color-border-subtle: var(--color-neutral-700);
    --color-border-default: var(--color-neutral-50);
    --color-border-focus: var(--color-water-500);
    --color-border-accent: var(--color-tomato-500);
    --color-action-primary-bg: var(--color-tomato-500);
    --color-action-primary-bg-hover: var(--color-tomato-600);
    --color-action-primary-bg-pressed: var(--color-tomato-700);
    --color-action-primary-text: var(--color-neutral-50);
    --color-action-secondary-bg: var(--color-neutral-50);
    --color-action-secondary-bg-hover: var(--color-neutral-200);
    --color-action-secondary-bg-pressed: var(--color-neutral-300);
    --color-action-secondary-text: var(--color-neutral-900);
    --color-action-disabled-bg: var(--color-neutral-700);
    --color-action-disabled-text: var(--color-neutral-500);
    --color-feedback-danger-bg: var(--color-tomato-900);
    --color-feedback-danger-fg: var(--color-tomato-300);
    --color-feedback-success-bg: var(--color-vine-900);
    --color-feedback-success-fg: var(--color-vine-500);
    --color-feedback-info-bg: var(--color-water-900);
    --color-feedback-info-fg: var(--color-water-300);
    --color-feedback-warning-bg: var(--color-burlap-900);
    --color-feedback-warning-fg: var(--color-burlap-500);
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-bg-page: var(--color-neutral-900);
  --color-bg-surface: var(--color-neutral-800);
  --color-bg-muted: var(--color-neutral-700);
  --color-bg-inverse: var(--color-neutral-50);
  --color-bg-accent: var(--color-tomato-500);
  --color-bg-accent-subtle: var(--color-tomato-900);
  --color-bg-warm: var(--color-burlap-900);
  --color-text-primary: var(--color-neutral-50);
  --color-text-secondary: var(--color-neutral-300);
  --color-text-muted: var(--color-neutral-400);
  --color-text-inverse: var(--color-neutral-900);
  --color-text-accent: var(--color-tomato-300);
  --color-text-link: var(--color-water-300);
  --color-text-on-accent: var(--color-neutral-50);
  --color-border-subtle: var(--color-neutral-700);
  --color-border-default: var(--color-neutral-50);
  --color-border-focus: var(--color-water-500);
  --color-border-accent: var(--color-tomato-500);
  --color-action-primary-bg: var(--color-tomato-500);
  --color-action-primary-bg-hover: var(--color-tomato-600);
  --color-action-primary-bg-pressed: var(--color-tomato-700);
  --color-action-primary-text: var(--color-neutral-50);
  --color-action-secondary-bg: var(--color-neutral-50);
  --color-action-secondary-bg-hover: var(--color-neutral-200);
  --color-action-secondary-bg-pressed: var(--color-neutral-300);
  --color-action-secondary-text: var(--color-neutral-900);
  --color-action-disabled-bg: var(--color-neutral-700);
  --color-action-disabled-text: var(--color-neutral-500);
  --color-feedback-danger-bg: var(--color-tomato-900);
  --color-feedback-danger-fg: var(--color-tomato-300);
  --color-feedback-success-bg: var(--color-vine-900);
  --color-feedback-success-fg: var(--color-vine-500);
  --color-feedback-info-bg: var(--color-water-900);
  --color-feedback-info-fg: var(--color-water-300);
  --color-feedback-warning-bg: var(--color-burlap-900);
  --color-feedback-warning-fg: var(--color-burlap-500);
}

/* Focus ring: Water, never Tomato, so focus never reads as an error. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--border-width-2) solid var(--color-border-focus);
  outline-offset: 2px;
}