/* ===========================================================================
   DesignOS — semantic tokens (Light Mode)
   ---------------------------------------------------------------------------
   GENERATED from the Figma variable export. Do not edit by hand; edit
   variables.json's source export and re-run: node design-os/build-tokens.mjs

   Naming follows DesignOS §14.1 — lowercase, slashes and spaces collapse to
   single hyphens, suffix identical to the Figma variable.

   Light Mode only, by request. The export's Blue and Teal modes are
   intentionally unsupported. The 385 tokens in `7. _Primitive` are excluded
   by the §2 primitive gate — use a semantic role, never a primitive.

   Lines marked "corrected" depart from the raw export for a documented
   accessibility reason; lines marked "added" cover roles the export leaves
   undefined. Both are listed in the reference page.
   =========================================================================== */

:root {
  /* --- 1. Colors — 149 tokens ------------------------------- */
  --text-primary: #0a0a0a;
  --text-secondary: #404040;
  --text-tertiary: #525252;
  --text-quarternary: #737373;
  --text-disabled: #a3a3a3;
  --text-error: #b91c1c;
  --text-error-secondary: #f87171;
  --text-warning: #b45309;
  --text-warning-secondary: #fbbf24;
  --text-success: #047857;
  --text-brand: #171717;
  --text-brand-secondary: #a3a3a3;
  --border-primary: #f0f0f0;
  --border-secondary: #e5e5e5;
  --border-tertiary: #d4d4d4;
  --border-disabled: #f0f0f0;
  --border-error: #dc2626;
  --border-error-secondary: #fecaca;
  --border-warning: #b45309;
  --border-warning-secondary: #fde68a;
  --border-success: #059669;
  --border-brand: #171717;
  --border-brand-secondary: #e5e5e5;
  --icon-primary: #171717;
  --icon-secondary: #525252;
  --icon-tertiary: #737373;
  --icon-disabled: #a3a3a3;
  --icon-error: #dc2626;
  --icon-error-secondary: #f87171;
  --icon-warning: #b45309;
  --icon-warning-secondary: #fbbf24;
  --icon-success: #059669;
  --icon-brand: #171717;
  --icon-brand-secondary: #a3a3a3;
  --bg-primary: #ffffff;
  --bg-primary_hover: #f7f7f7;
  --bg-secondary: #f7f7f7;
  --bg-tertiary: #f0f0f0;
  --bg-quarternary: #e5e5e5;
  --bg-disabled: #f7f7f7;
  --bg-error: #fef2f2;
  --bg-error-secondary: #fee2e2;
  --bg-warning: #fffbeb;
  --bg-warning-secondary: #fef3c7;
  --bg-success: #ecfdf5;
  --bg-brand-primary: #f7f7f7;
  --bg-brand-secondary: #f0f0f0;
  --bg-alt: #171717;
  --opacity-light-10: #ffffff1a;
  --opacity-light-20: #ffffff33;
  --opacity-light-30: #ffffff4d;
  --opacity-light-40: #ffffff66;
  --opacity-light-50: #ffffff80;
  --opacity-light-60: #ffffff99;
  --opacity-light-70: #ffffffb2;
  --opacity-light-80: #ffffffcc;
  --opacity-light-90: #ffffffe5;
  --opacity-dark-10: #0000001a;
  --opacity-dark-20: #00000033;
  --opacity-dark-30: #0000004d;
  --opacity-dark-40: #00000066;
  --opacity-dark-50: #00000080;
  --opacity-dark-60: #00000099;
  --opacity-dark-70: #000000b2;
  --opacity-dark-80: #000000cc;
  --opacity-dark-90: #000000e5;
  --bg-error-solid: #b91c1c;
  --bg-success-secondary: #d1fae5;
  --bg-success-solid: #059669;
  --bg-warning-solid: #f59e0b;
  --bg-brand-primary_hover: #f0f0f0;
  --bg-brand-solid: #0a0a0a;
  --icon-success-secondary: #34d399;
  --border-success-secondary: #a7f3d0;
  --text-alt: #ffffff;
  --text-placeholder: #a3a3a3;
  --text-placeholder-alt: #d4d4d4;
  --icon-dark: #0a0a0a;
  --icon-white: #ffffff;
  --bg-primary_press: #f0f0f0;
  --text-success-secondary: #34d399;
  --border-white: #ffffff;
  --bg-dark: #171717;
  --bg-white: #ffffff;
  --text-white: #ffffff;
  --text-dark: #000000;
  --icon-alt: #ffffff;
  --bg-info: #eff6ff;
  --bg-info-secondary: #dbeafe;
  --bg-info-solid: #1d4ed8;
  --text-info: #1d4ed8;
  --text-info-secondary: #60a5fa;
  --border-info: #2563eb;
  --border-info-secondary: #bfdbfe;
  --icon-info: #2563eb;
  --icon-info-secondary: #60a5fa;
  --border-alt: #ffffff;
  --alpha-brand-accent-85: #0a0a0ad9;
  --border-alt-2: #000000;
  --alpha-brand-accent-10: #0a0a0a1a;
  --alpha-brand-accent-40: #0a0a0a66;
  --alpha-brand-accent-60: #0a0a0a99;
  --alpha-brand-accent-20: #0a0a0a33;
  --alpha-neutral-accent-10: #0a0a0a1a;
  --alpha-neutral-accent-20: #0a0a0a33;
  --alpha-neutral-accent-40: #0a0a0a66;
  --alpha-neutral-accent-60: #0a0a0a99;
  --alpha-neutral-accent-85: #0a0a0ad9;
  --alpha-success-accent-10: #0596691a;
  --alpha-success-accent-20: #05966933;
  --alpha-success-accent-40: #05966966;
  --alpha-success-accent-60: #05966999;
  --alpha-success-accent-85: #059669d9;
  --alpha-warning-accent-10: #f59e0b1a;
  --alpha-warning-accent-20: #f59e0b33;
  --alpha-warning-accent-40: #f59e0b66;
  --alpha-warning-accent-60: #f59e0b99;
  --alpha-warning-accent-85: #f59e0bd9;
  --alpha-blue-accent-10: #2563eb1a;
  --alpha-blue-accent-20: #2563eb33;
  --alpha-blue-accent-40: #2563eb66;
  --alpha-blue-accent-60: #2563eb99;
  --alpha-blue-accent-85: #2563ebd9;
  --alpha-error-accent-10: #dc26261a;
  --alpha-error-accent-20: #dc262633;
  --alpha-error-accent-40: #dc262666;
  --alpha-error-accent-60: #dc262699;
  --alpha-error-accent-85: #dc2626d9;
  --chart-blue: #3b82f6;
  --chart-orange: #fb923c;
  --chart-green: #16a34a;
  --chart-red: #dc2626;
  --chart-purple: #a855f7;
  --chart-yellow: #facc15;
  --chart-pink: #ec4899;
  --chart-dark: #525252;
  --chart-lime: #65a30d;
  --chart-cyan: #06b6d4;
  --chart-success: #10b981;
  --chart-success-light: #6ee7b7;
  --icon-quarternary: #a3a3a3;
  --bg-secondary_hover: #f0f0f0;
  --bg-secondary_press: #e5e5e5;
  --bg-brand-hover: #262626;
  --bg-brand-press: #404040;
  --black: #000000;
  --white: #ffffff;
  --bg-brand-primary_press: #e5e5e5;
  --icon-quinary: #d4d4d4;

  /* --- 2. Spacing & Size — 50 tokens ------------------------------- */
  --spacing-0: 0px;
  --spacing-2: 2px;
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-96: 96px;
  --spacing-128: 128px;
  --spacing-160: 160px;
  --spacing-192: 192px;
  --spacing-224: 224px;
  --spacing-256: 256px;
  --spacing-320: 320px;
  --spacing-384: 384px;
  --spacing-480: 480px;
  --spacing-560: 560px;
  --spacing-640: 640px;
  --spacing-720: 720px;
  --spacing-768: 768px;
  --spacing-960: 960px;
  --spacing-1280: 1280px;
  --spacing-1440: 1440px;
  --spacing-1920: 1920px;
  --screen-size: 1440px;
  --padding-padding: 24px;
  --spacing-1024: 1024px;
  --spacing-80: 80px;
  --spacing-1080: 1080px;
  --gap-gap: 24px;
  --spacing-72: 72px;
  --font-size-display: 72px;
  --font-size-header-h1: 60px;
  --font-size-header-h2: 48px;
  --font-size-header-h3: 36px;
  --font-size-header-h4: 30px;
  --font-size-header-h5: 24px;
  --font-size-header-h6: 20px;
  --font-size-paragraph-lg: 18px;
  --font-size-paragraph-md: 16px;
  --font-size-paragraph-sm: 14px;
  --font-size-caption-md: 12px;
  --font-size-caption-sm: 10px;

  /* --- 3. Radius — 11 tokens ------------------------------- */
  --radius-none: 0px;
  --radius-xxs: 2px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-4xl: 32px;
  --radius-full: 100000px;

  /* --- 4. Widths — 12 tokens ------------------------------- */
  --width-xxs: 320px;
  --width-xs: 384px;
  --width-sm: 480px;
  --width-md: 560px;
  --width-lg: 640px;
  --width-xl: 768px;
  --width-2xl: 1024px;
  --width-3xl: 1080px;
  --width-4xl: 1280px;
  --width-5xl: 1440px;
  --width-6xl: 1920px;
  --width-xxxs: 256px;

  /* --- 5. Typography — 8 tokens ------------------------------- */
  --family-display: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --weight-regular: 400;  /* export stores the weight as the word "regular" */
  --family-heading: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --family-text: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --family-caption: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --weight-bold: 700;  /* export stores the weight as the word "bold" */
  --weight-medium: 500;  /* export stores the weight as the word "medium" */
  --weight-semibold: 600;  /* export stores the weight as the word "semibold" */

  /* --- Added semantic roles (foundations §5.10) ---------------------------- */
  --text-on-error-solid: #ffffff;  /* added — on-solid content; text-alt flips per mode, bg-error-solid does not */
  --text-on-warning-solid: #0a0a0a;  /* added — white on bg-warning-solid measures 2.15:1 */
  --text-on-success-solid: #0a0a0a;  /* added — on-solid content for bg-success-solid */
  --text-on-info-solid: #ffffff;  /* added — on-solid content for bg-info-solid */
  --bg-error-solid_hover: #b91c1c;  /* added — error/700 — the export defines no error hover; the solid fill deepens on hover */
  --bg-error-solid_press: #991b1b;  /* added — error/800 — deepens again on press, two steps below the resting error/600 */
  --bg-error_press: #fecaca;  /* added — error/200 — press step for the soft error surface, above bg-error-secondary */
  --focus-ring-width: 3px;  /* added — shadcn-style ring: one soft band hugging the border, no offset gap */
  --focus-ring: var(--alpha-neutral-accent-20);  /* added — focus band — the export's own neutral accent at 20% */
  --focus-ring-error: var(--alpha-error-accent-20);  /* added — focus band for an invalid control */
  --border-control: #8d8d8d;  /* added — interactive control boundary; WCAG 1.4.11 needs 3:1 */
  --border-focus-ring: #171717;  /* added — focus treatment named in components §10.3 but untokenised */
  --shadow-xs: 0 4px 6px -3px rgba(10,10,10,.06);  /* added — the Light alert card's own elevation, named so it stops being a literal */
  --shadow-sm: 0 1px 2px -1px rgba(10,10,10,.1);  /* added — the single-line alert row and the snackbar */
  --shadow-md: 0 4px 12px -2px rgba(10,10,10,.08);  /* added — the Default and Solid alert cards */
  --shadow-lg: 0 12px 16px -4px rgba(10,10,10,.08), 0 4px 6px -2px rgba(10,10,10,.03);  /* added — the Calendar surface */
  --shadow-card: 0 4px 24px rgba(10,10,10,.05);  /* added — elevation must arrive through a named token */
  --shadow-evidence: 0 24px 60px rgba(10,10,10,.14);  /* added — elevation must arrive through a named token */
  --ring-offset: var(--bg-primary);  /* added — inner 2px of Ring/*; must match the canvas, not literal white */
  --ring-brand: rgba(10,10,10,0.12);  /* added — outer 4px of the exported Ring/brand effect */
  --ring-error: rgba(255,0,0,0.12);  /* added — outer 4px of the exported Ring/error effect */
  --motion-state: 160ms;  /* added — no motion tokens in the export; §12 baseline */
  --motion-ease: cubic-bezier(.2,0,0,1);  /* added — no motion tokens in the export; §12 baseline */
  --line-height-paragraph-md: 1.5;  /* added — line heights live in the text styles, not the variables */
  --line-height-paragraph-sm: 1.4286;  /* added — line heights live in the text styles, not the variables */
  --line-height-caption-md: 1.5;  /* added — line heights live in the text styles, not the variables */

  /* --- 6. Themes — component radius, mode "Full" ------------------ */
  --button: 100000px;
  --modal: 32px;
  --modal-inner-container: 20px;
  --input: 8px;
  --calendar-header: 100000px;
  --pagination: 100000px;
  --card: 12px;
  --nav-item: 12px;
}

/* Every radius mode the export defines. Switching data-radius swaps the whole
   set at once; components bind to the theme token, never to a raw radius. */
:root[data-radius="full"] { --button: 100000px; --modal: 32px; --modal-inner-container: 20px; --input: 8px; --calendar-header: 100000px; --pagination: 100000px; --card: 12px; --nav-item: 12px; }
:root[data-radius="normal"] { --button: 8px; --modal: 16px; --modal-inner-container: 12px; --input: 8px; --calendar-header: 12px; --pagination: 10px; --card: 8px; --nav-item: 8px; }
:root[data-radius="sharp"] { --button: 0px; --modal: 0px; --modal-inner-container: 0px; --input: 0px; --calendar-header: 0px; --pagination: 0px; --card: 0px; --nav-item: 0px; }
:root[data-radius="slightly-rounded"] { --button: 12px; --modal: 20px; --modal-inner-container: 16px; --input: 12px; --calendar-header: 16px; --pagination: 14px; --card: 12px; --nav-item: 8px; }

/* Shared keyframes. Declared here because every component stylesheet requires
   tokens.css, so neither has to carry its own copy. */
@keyframes dos-spin { to { transform: rotate(360deg); } }

/* ===========================================================================
   Dark Mode — straight from the export, 125 tokens that differ
   from Light. Nothing here is corrected or invented; see docs/dark-mode.md for
   the roles that are known to read poorly.
   =========================================================================== */
:root[data-color-mode="dark"] {
  --text-primary: #ffffff;
  --text-secondary: #d4d4d4;
  --text-tertiary: #a3a3a3;
  --text-quarternary: #a3a3a3;
  --text-disabled: #737373;
  --text-error: #fee2e2;
  --text-warning: #fef3c7;
  --text-warning-secondary: #f59e0b;
  --text-success: #d1fae5;
  --text-brand: #fcfcfc;
  --text-brand-secondary: #f7f7f7;
  --border-primary: #262626;
  --border-secondary: #262626;
  --border-tertiary: #404040;
  --border-disabled: #404040;
  --border-error: #dc262666;
  --border-error-secondary: #7f1d1d;
  --border-warning: #f59e0b66;
  --border-warning-secondary: #78350f;
  --border-success: #05966966;
  --border-brand: #e5e5e5;
  --border-brand-secondary: #525252;
  --icon-primary: #ffffff;
  --icon-secondary: #d4d4d4;
  --icon-disabled: #737373;
  --icon-error: #fee2e2;
  --icon-warning: #fef3c7;
  --icon-success: #d1fae5;
  --icon-brand: #f7f7f7;
  --bg-primary: #0a0a0a;
  --bg-primary_hover: #262626;
  --bg-secondary: #171717;
  --bg-tertiary: #262626;
  --bg-quarternary: #404040;
  --bg-disabled: #262626;
  --bg-error: #dc262666;
  --bg-error-secondary: #dc262633;
  --bg-warning: #f59e0b66;
  --bg-warning-secondary: #f59e0b33;
  --bg-success: #05966966;
  --bg-brand-primary: #171717;
  --bg-brand-secondary: #525252;
  --bg-alt: #ffffff;
  --opacity-light-10: #0e0f111a;
  --opacity-light-20: #0e0f1133;
  --opacity-light-30: #0e0f114d;
  --opacity-light-40: #0e0f1166;
  --opacity-light-50: #0e0f1180;
  --opacity-light-60: #0e0f1199;
  --opacity-light-70: #0e0f11b2;
  --opacity-light-80: #0e0f11cc;
  --opacity-light-90: #0e0f11e5;
  --opacity-dark-10: #ffffff1a;
  --opacity-dark-20: #ffffff33;
  --opacity-dark-30: #ffffff4d;
  --opacity-dark-40: #ffffff66;
  --opacity-dark-50: #ffffff80;
  --opacity-dark-60: #ffffff99;
  --opacity-dark-70: #ffffffb2;
  --opacity-dark-80: #ffffffcc;
  --opacity-dark-90: #ffffffe5;
  --bg-error-solid: #dc2626;
  --bg-success-secondary: #05966933;
  --bg-warning-solid: #d97706;
  --bg-brand-primary_hover: #262626;
  --bg-brand-solid: #ffffff;
  --border-success-secondary: #064e3b;
  --text-alt: #000000;
  --text-placeholder: #737373;
  --text-placeholder-alt: #404040;
  --bg-primary_press: #404040;
  --text-success-secondary: #10b981;
  --icon-alt: #000000;
  --bg-info: #2563eb1a;
  --bg-info-secondary: #2563eb;
  --bg-info-solid: #2563eb;
  --text-info: #dbeafe;
  --border-info: #3b82f6;
  --border-info-secondary: #1e3a8a;
  --icon-info: #dbeafe;
  --border-alt: #000000;
  --alpha-brand-accent-85: #ffffffd9;
  --border-alt-2: #ffffff;
  --alpha-brand-accent-10: #0000001a;
  --alpha-brand-accent-40: #00000066;
  --alpha-brand-accent-60: #00000099;
  --alpha-brand-accent-20: #00000033;
  --alpha-neutral-accent-10: #ffffff;
  --alpha-neutral-accent-20: #ffffff;
  --alpha-neutral-accent-40: #ffffff;
  --alpha-neutral-accent-60: #ffffff;
  --alpha-neutral-accent-85: #ffffff;
  --alpha-success-accent-10: #ffffff;
  --alpha-success-accent-20: #ffffff;
  --alpha-success-accent-40: #ffffff;
  --alpha-success-accent-60: #ffffff;
  --alpha-success-accent-85: #ffffff;
  --alpha-warning-accent-10: #ffffff;
  --alpha-warning-accent-20: #ffffff;
  --alpha-warning-accent-40: #ffffff;
  --alpha-warning-accent-60: #ffffff;
  --alpha-warning-accent-85: #ffffff;
  --alpha-error-accent-10: #ffffff;
  --alpha-error-accent-20: #ffffff;
  --alpha-error-accent-40: #ffffff;
  --alpha-error-accent-60: #ffffff;
  --alpha-error-accent-85: #ffffff;
  --chart-blue: #60a5fa;
  --chart-orange: #fdba74;
  --chart-green: #22c55e;
  --chart-red: #ef4444;
  --chart-purple: #d8b4fe;
  --chart-yellow: #fde047;
  --chart-pink: #f472b6;
  --chart-dark: #a3a3a3;
  --chart-lime: #a3e635;
  --chart-cyan: #22d3ee;
  --chart-success: #34d399;
  --icon-quarternary: #737373;
  --bg-secondary_hover: #262626;
  --bg-secondary_press: #404040;
  --bg-brand-hover: #f7f7f7;
  --bg-brand-press: #f0f0f0;
  --bg-brand-primary_press: #262626;
  --icon-quinary: #737373;
}

/* The added focus roles carry Light values and read wrong in Dark: the export's
   Alpha ramp resolves to opaque #ffffff there, so the band becomes a solid
   white ring. These override only the added roles — no export token changes. */
:root[data-color-mode="dark"] {
  --focus-ring: rgba(229, 229, 229, 0.24);
  --focus-ring-error: rgba(239, 68, 68, 0.32);
  --ring-brand: rgba(229, 229, 229, 0.16);
  --ring-error: rgba(239, 68, 68, 0.24);
  /* A control edge and a focus edge must both clear 3:1 against the dark
     canvas; the Light values (#8d8d8d, #171717) do not. */
  --border-control: #646464;
  --border-focus-ring: #e5e5e5;
}

/* Product surface contracts — canvas, page padding and default gap as one set. */
:root[data-surface="dashboard"] { --surface-canvas: 1440px; --surface-padding: 24px;  --surface-gap: 24px; }
:root[data-surface="website"]   { --surface-canvas: 1440px; --surface-padding: 128px; --surface-gap: 24px; }
:root[data-surface="tablet"]    { --surface-canvas: 768px;  --surface-padding: 24px;  --surface-gap: 16px; }
:root[data-surface="mobile"]    { --surface-canvas: 375px;  --surface-padding: 16px;  --surface-gap: 16px; }