/* Generated by scripts/build.mjs from tokens.json. Edit tokens.json, then run the build. */

:root {
  color-scheme: dark;
  --font-text: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, monospace;
  --text-14: 14px;
  --text-16: 16px;
  --text-18: 18px;
  --text-20: 20px;
  --text-28: 28px;
  --text-40: 40px;
  --text-64: 64px;
  --leading-tight: 1.05;
  --leading-snug: 1.15;
  --leading-body: 1.55;
  --leading-body-compact: 1.5;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --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-control: 10px;
  --radius-surface: 16px;
  --radius-modal: 20px;
  --radius-pill: 999px;
  --radius-circle: 50%;
  --motion-fast: 200ms;
  --motion-medium: 400ms;
  --motion-reveal: 700ms;
  --motion-count: 1400ms;
  --motion-ambient: 24s;
  --motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-draw: 600ms;
  --motion-stagger: 45ms;
  --size-page: 1200px;
  --size-measure: 68ch;
  --size-target: 44px;
  --size-hairline: 1px;
  --size-focus: 2px;
  --size-rule: 2px;
  --size-demo-side: 300px;
  --size-demo-canvas: 248px;
  --size-demo-stage: 340px;
  --size-demo-ui: 520px;
  --size-demo-modal: 340px;
  --size-demo-field: 200px;
  --size-demo-track: 8px;
  --size-demo-track-w: 88px;
  --size-demo-skel-w: 112px;
  --size-demo-skel-w-short: 72px;
  --size-demo-dot: 8px;
  --size-underline-offset: 0.18em;
  --size-tracking-tight: -0.01em;
  --navy-950: #060D19;
  --navy-900: #0B1628;
  --navy-800: #12223A;
  --navy-700: #2A3B57;
  --teal-400: #2EC4B6;
  --pink-400: #FF6FB1;
  --blue-400: #7C9BFF;
  --violet-400: #A78BFA;
  --orange-400: #FF7A45;
  --grey-100: #E8EDF4;
  --grey-300: #B9C6D8;
  --color-surface: var(--navy-900);
  --color-surface-raised: var(--navy-800);
  --color-surface-deep: var(--navy-950);
  --color-text: var(--grey-100);
  --color-text-muted: var(--grey-300);
  --color-interactive: var(--teal-400);
  --color-on-interactive: var(--navy-900);
  --color-hairline: var(--navy-700);
  --color-annotation: var(--pink-400);
  --color-annotation-component: var(--violet-400);
  --color-accent: var(--blue-400);
  --color-accent-pink: var(--pink-400);
  --color-accent-violet: var(--violet-400);
  --color-danger: var(--orange-400);
  --color-brand-start: var(--teal-400);
  --color-brand-middle: var(--blue-400);
  --color-brand-end: var(--pink-400);
  --gradient-brand: linear-gradient(90deg, var(--color-brand-start), var(--color-brand-middle) 50%, var(--color-brand-end));
  --gradient-text: linear-gradient(90deg, var(--color-brand-start), var(--color-brand-middle) 50%, var(--color-brand-end));
  --gradient-aurora: radial-gradient(40% 60% at 85% 10%, rgba(46, 196, 182, 0.32), transparent 70%), radial-gradient(35% 55% at 10% 90%, rgba(124, 155, 255, 0.26), transparent 70%), radial-gradient(30% 45% at 55% 50%, rgba(255, 111, 177, 0.16), transparent 70%);
  --gradient-surface-glow: radial-gradient(60% 80% at 100% 0%, rgba(46, 196, 182, 0.12), transparent 60%), radial-gradient(50% 70% at 0% 100%, rgba(124, 155, 255, 0.10), transparent 60%);
  --gradient-page-glow: radial-gradient(50% 18% at 0% 30%, rgba(124, 155, 255, 0.10), transparent 70%), radial-gradient(45% 16% at 100% 52%, rgba(46, 196, 182, 0.09), transparent 70%), radial-gradient(50% 18% at 5% 78%, rgba(255, 111, 177, 0.07), transparent 70%), radial-gradient(40% 14% at 95% 95%, rgba(124, 155, 255, 0.08), transparent 70%);
  --pattern-spec-grid: repeating-linear-gradient(0deg, color-mix(in srgb, var(--color-annotation) 7%, transparent) 0 1px, transparent 1px 8px), repeating-linear-gradient(90deg, color-mix(in srgb, var(--color-annotation) 5%, transparent) 0 1px, transparent 1px 48px);
  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 18px 40px rgba(0, 0, 0, 0.35);
  --shadow-glow: 0 0 0 1px rgba(46, 196, 182, 0.35), 0 12px 40px rgba(46, 196, 182, 0.25);
  --demo-navy: var(--navy-900);
  --demo-dark-surface: #1A2A45;
  --demo-dark-text: #E6EDF6;
  --demo-dark-row: #16253D;
  --demo-dark-row-text: #C9D5E6;
  --demo-dark-track: #22324D;
  --demo-dark-edge: #24405A;
  --demo-teal: var(--teal-400);
  --demo-teal-subtle: #163A47;
  --demo-light-stage: #EEF2F6;
  --demo-light-surface: #FFFFFF;
  --demo-light-text: #16202F;
  --demo-light-border: #E3E8EF;
  --demo-light-row: #F6F8FA;
  --demo-light-row-text: #3A4556;
  --demo-light-track: #E6EBF1;
  --demo-light-tag-border: #BFE6E1;
  --demo-teal-deep: #0B6B63;
  --demo-teal-deep-subtle: #E3F4F2;
  --demo-on-teal-deep: #FFFFFF;
  --demo-badge-dark-bg: #16233A;
  --demo-ai-light-a: #0B8F84;
  --demo-ai-light-b: #3B7BEA;
  --demo-ai-dark-a: #FF54A4;
  --demo-ai-dark-b: #36EEFF;
  --demo-ghost-fg: var(--teal-400);
  --demo-ghost-fail-bg: #3F5B66;
  --demo-ghost-pass-bg: #2A3E45;
  --demo-swatch-text: var(--demo-dark-text);
  --demo-swatch-label: var(--demo-dark-row-text);
  --text-body: var(--text-18);
  --leading-current: var(--leading-body);
  --space-section: var(--space-96);
  --space-part: var(--space-64);
  --space-block: var(--space-48);
  --space-gutter: var(--space-32);
}

@media (max-width: 899.98px) {
  :root {
    --text-body: var(--text-16);
    --leading-current: var(--leading-body-compact);
    --space-section: var(--space-64);
    --space-part: var(--space-48);
    --space-block: var(--space-32);
    --space-gutter: var(--space-24);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-medium: 0ms;
    --motion-reveal: 0ms;
    --motion-count: 0ms;
    --motion-ambient: 0ms;
    --motion-draw: 0ms;
    --motion-stagger: 0ms;
  }
}