/* ===========================================================================
   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: #6f6f6f;  /* corrected — export collapses the fourth text step onto the third */
  --text-disabled: #a3a3a3;
  --text-error: #d62525;  /* corrected — export #dc2626 measures 4.41:1 on bg-error — fails AA */
  --text-error-secondary: #f87171;
  --text-warning: #a95d05;  /* corrected — export #d97706 measures 3.07:1 on bg-warning — fails AA */
  --text-warning-secondary: #fbbf24;
  --text-success: #04805a;  /* corrected — export #059669 measures 3.58:1 on bg-success — fails AA */
  --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: #d97706;
  --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: #d97706;
  --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: #dc2626;
  --bg-success-secondary: #d1fae5;
  --bg-success-solid: #10b981;
  --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: #707070;  /* corrected — export #a3a3a3 measures 2.52:1 on bg-primary — fails AA */
  --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: #2563eb;
  --text-info: #2563eb;
  --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: #ef4444;  /* added — error/500 — the export defines no error hover; brightens on hover so the fill stays unmistakably red */
  --bg-error-solid_press: #b91c1c;  /* added — error/700 — deepens on press, one step below the resting error/600 */
  --bg-error_press: #fecaca;  /* added — error/200 — press step for the soft error surface, above bg-error-secondary */
  --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-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; }

/* 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; }