/* ERIX design system v8 tokens, generated from the Design System's tokens.json by
   scripts/erix-ds-sync.mjs. Don't edit by hand; regenerate. */
@font-face { font-family: "Manrope"; src: url("/erix/fonts/manrope.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("/erix/fonts/bricolage-grotesque.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/erix/fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }

:root {
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 6px;
  --space-md: 8px;
  --space-lg: 12px;
  --space-xl: 16px;
  --space-2xl: 24px;
  --space-3xl: 32px;
  --space-4xl: 48px;
  --space-5xl: 64px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  --control-sm: 28px;
  --control-md: 32px;
  --control-lg: 40px;
  --sidebar-width: 248px;
  --topbar-height: 52px;
  --content-max: 1240px;
  --card-pad: 20px;
  --row-h: 44px;
  --row-h-dense: 36px;
  --avatar-sm: 24px;
  --avatar-md: 32px;
  --sheet-width: 560px;
  --palette-width: 640px;
  --z-sticky: 100;
  --z-dropdown: 1000;
  --z-modal: 1300;
  --z-toast: 1400;
  --font-display: "Bricolage Grotesque", "Manrope", "Noto Sans Devanagari", "Noto Sans Tamil", system-ui, sans-serif;
  --font-sans: "Manrope", "Noto Sans Devanagari", "Noto Sans Tamil", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --ERIX_Blue: #2b4dcb;
  --ERIX_Purple: #8d1fae;
  --ERIX_Red: #b03a3b;
  --blue-50: #f3f7ff;
  --blue-100: #e5edfe;
  --blue-200: #cbdbff;
  --blue-300: #a6c0fd;
  --blue-400: #789dfc;
  --blue-500: #4f79f3;
  --blue-600: var(--ERIX_Blue);
  --blue-700: #2441b0;
  --blue-800: #162c8b;
  --blue-900: #0b1b64;
  --blue-950: #040d42;
  --purple-50: #fcf3ff;
  --purple-100: #f7e5ff;
  --purple-200: #f0ccfe;
  --purple-300: #e2a6f8;
  --purple-400: #ce78ec;
  --purple-500: #b251d3;
  --purple-600: var(--ERIX_Purple);
  --purple-700: #771594;
  --purple-800: #5a0871;
  --purple-900: #3d034e;
  --purple-950: #260032;
  --red-50: #fff4f3;
  --red-100: #fee7e4;
  --red-200: #fecdc9;
  --red-300: #f7aaa4;
  --red-400: #e87e79;
  --red-500: #cc5a57;
  --red-600: var(--ERIX_Red);
  --red-700: #8c2528;
  --red-800: #6d1318;
  --red-900: #4c060c;
  --red-950: #310204;
}
:root, :root[data-theme="light"] {
  color-scheme: light;
  --surface: #ffffff;
  --surface-subtle: #f2f4fb;
  --surface-sunken: #eaeef7;
  --surface-raised: #ffffff;
  --surface-inverse: #12151d;
  --ink-inverse: #eef0f5;
  --overlay: rgba(18, 21, 29, 0.48);
  --logo-plate: #ffffff;
  --nav: var(--blue-900);
  --nav-2: var(--blue-800);
  --nav-ink: #ffffff;
  --nav-ink-muted: #c3cdf5;
  --nav-hover: rgba(255, 255, 255, 0.07);
  --nav-active: rgba(255, 255, 255, 0.12);
  --nav-ai: #e7b6f7;
  --hero: var(--blue-700);
  --hero-2: var(--ERIX_Blue);
  --hero-swoosh: var(--purple-500);
  --hero-dot: var(--red-500);
  --on-hero: #ffffff;
  --on-hero-muted: #dbe3ff;
  --solid-blue: var(--ERIX_Blue);
  --solid-purple: var(--ERIX_Purple);
  --solid-red: var(--ERIX_Red);
  --on-solid: #ffffff;
  --on-solid-muted: #e8ecff;
  --table-head: var(--blue-50);
  --table-head-ink: var(--blue-800);
  --indigo: var(--blue-800);
  --indigo-subtle: var(--blue-200);
  --magenta: var(--purple-700);
  --magenta-subtle: var(--purple-200);
  --border: #dde2f0;
  --border-soft: #eef0f6;
  --border-strong: #878e9d;
  --ink: #12151d;
  --ink-muted: #555c6d;
  --ink-subtle: #656c7d;
  --primary: var(--ERIX_Blue);
  --on-primary: #ffffff;
  --primary-hover: #2440ad;
  --primary-subtle: #eaeefb;
  --accent: var(--ERIX_Purple);
  --on-accent: #ffffff;
  --accent-subtle: #f6e9fa;
  --orange: #b04f00;
  --orange-subtle: #fdecdc;
  --teal: #0b6e6d;
  --teal-subtle: #dff3f2;
  --danger: var(--ERIX_Red);
  --on-danger: #ffffff;
  --danger-hover: #962f30;
  --danger-subtle: #fbecec;
  --success: #1c7445;
  --success-subtle: #e8f5ee;
  --warning: #8f5100;
  --warning-subtle: #fdf1df;
  --focus: var(--ERIX_Blue);
  --chart-1: var(--ERIX_Blue);
  --chart-2: #c45a00;
  --chart-3: #00897a;
  --chart-4: var(--ERIX_Purple);
  --chart-5: #9a7b00;
  --chart-6: #5a6172;
  --seq-1: #789dfc;
  --seq-2: #4f79f3;
  --seq-3: var(--ERIX_Blue);
  --seq-4: #162c8b;
  --seq-5: #0b1b64;
  --shadow-xs: 0 1px 2px rgba(11, 27, 100, 0.05);
  --shadow-card: 0 0 0 1px rgba(11, 27, 100, 0.07), 0 1px 2px rgba(11, 27, 100, 0.05), 0 2px 6px -2px rgba(11, 27, 100, 0.06);
  --shadow-sm: 0 0 0 1px rgba(11, 27, 100, 0.07), 0 2px 4px -1px rgba(11, 27, 100, 0.08);
  --shadow-md: 0 0 0 1px rgba(11, 27, 100, 0.06), 0 4px 8px -2px rgba(11, 27, 100, 0.08), 0 12px 24px -8px rgba(11, 27, 100, 0.14);
  --shadow-lg: 0 0 0 1px rgba(11, 27, 100, 0.06), 0 8px 16px -6px rgba(11, 27, 100, 0.12), 0 32px 64px -16px rgba(11, 27, 100, 0.28);
  --shadow-btn: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(11, 27, 100, 0.24);
  --shadow-focus: 0 0 0 3px rgba(43, 77, 203, 0.22);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface: #0f1117;
  --surface-subtle: #171c2b;
  --surface-sunken: #141a28;
  --surface-raised: #1c2233;
  --surface-inverse: #eef0f5;
  --ink-inverse: #12151d;
  --overlay: rgba(0, 0, 0, 0.64);
  --logo-plate: #eef0f5;
  --nav: #0a1240;
  --nav-2: #111c5c;
  --nav-ink: #e8ecff;
  --nav-ink-muted: #9fabd9;
  --nav-hover: rgba(255, 255, 255, 0.06);
  --nav-active: rgba(255, 255, 255, 0.10);
  --nav-ai: #d58bef;
  --hero: #1a2a7a;
  --hero-2: #22359a;
  --hero-swoosh: var(--purple-500);
  --hero-dot: var(--red-500);
  --on-hero: #eef0f5;
  --on-hero-muted: #c3cdf5;
  --solid-blue: var(--blue-700);
  --solid-purple: var(--purple-700);
  --solid-red: var(--red-700);
  --on-solid: #ffffff;
  --on-solid-muted: #e8ecff;
  --table-head: #1a2140;
  --table-head-ink: #b9c6f7;
  --indigo: var(--blue-300);
  --indigo-subtle: #1d2547;
  --magenta: var(--purple-300);
  --magenta-subtle: #2f1838;
  --border: #283049;
  --border-soft: #222940;
  --border-strong: #646c80;
  --ink: #eef0f5;
  --ink-muted: #a3a9b8;
  --ink-subtle: #8a91a3;
  --primary: #8aa0f5;
  --on-primary: #0f1117;
  --primary-hover: #a3b5f8;
  --primary-subtle: #1d2547;
  --accent: #d58bef;
  --on-accent: #0f1117;
  --accent-subtle: #2f1838;
  --orange: #f59a4a;
  --orange-subtle: #3a2410;
  --teal: #4cc9c4;
  --teal-subtle: #0f2e2e;
  --danger: #f39393;
  --on-danger: #0f1117;
  --danger-hover: #f6abab;
  --danger-subtle: #3a1a1b;
  --success: #62d39b;
  --success-subtle: #12301f;
  --warning: #f2b552;
  --warning-subtle: #33260f;
  --focus: #8aa0f5;
  --chart-1: #6a84e6;
  --chart-2: #d47629;
  --chart-3: #0fa89b;
  --chart-4: #b768d4;
  --chart-5: #a98c1c;
  --chart-6: #a3a9b8;
  --seq-1: #34479c;
  --seq-2: #4a66d6;
  --seq-3: #6a84e6;
  --seq-4: #98aff2;
  --seq-5: #cbdbff;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 0 0 1px rgba(255, 255, 255, 0.07), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 12px 24px -8px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 32px 64px -16px rgba(0, 0, 0, 0.7);
  --shadow-btn: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-focus: 0 0 0 3px rgba(138, 160, 245, 0.30);
}
/* No stored choice and no JS: follow the system. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface: #0f1117;
    --surface-subtle: #171c2b;
    --surface-sunken: #141a28;
    --surface-raised: #1c2233;
    --surface-inverse: #eef0f5;
    --ink-inverse: #12151d;
    --overlay: rgba(0, 0, 0, 0.64);
    --logo-plate: #eef0f5;
    --nav: #0a1240;
    --nav-2: #111c5c;
    --nav-ink: #e8ecff;
    --nav-ink-muted: #9fabd9;
    --nav-hover: rgba(255, 255, 255, 0.06);
    --nav-active: rgba(255, 255, 255, 0.10);
    --nav-ai: #d58bef;
    --hero: #1a2a7a;
    --hero-2: #22359a;
    --hero-swoosh: var(--purple-500);
    --hero-dot: var(--red-500);
    --on-hero: #eef0f5;
    --on-hero-muted: #c3cdf5;
    --solid-blue: var(--blue-700);
    --solid-purple: var(--purple-700);
    --solid-red: var(--red-700);
    --on-solid: #ffffff;
    --on-solid-muted: #e8ecff;
    --table-head: #1a2140;
    --table-head-ink: #b9c6f7;
    --indigo: var(--blue-300);
    --indigo-subtle: #1d2547;
    --magenta: var(--purple-300);
    --magenta-subtle: #2f1838;
    --border: #283049;
    --border-soft: #222940;
    --border-strong: #646c80;
    --ink: #eef0f5;
    --ink-muted: #a3a9b8;
    --ink-subtle: #8a91a3;
    --primary: #8aa0f5;
    --on-primary: #0f1117;
    --primary-hover: #a3b5f8;
    --primary-subtle: #1d2547;
    --accent: #d58bef;
    --on-accent: #0f1117;
    --accent-subtle: #2f1838;
    --orange: #f59a4a;
    --orange-subtle: #3a2410;
    --teal: #4cc9c4;
    --teal-subtle: #0f2e2e;
    --danger: #f39393;
    --on-danger: #0f1117;
    --danger-hover: #f6abab;
    --danger-subtle: #3a1a1b;
    --success: #62d39b;
    --success-subtle: #12301f;
    --warning: #f2b552;
    --warning-subtle: #33260f;
    --focus: #8aa0f5;
    --chart-1: #6a84e6;
    --chart-2: #d47629;
    --chart-3: #0fa89b;
    --chart-4: #b768d4;
    --chart-5: #a98c1c;
    --chart-6: #a3a9b8;
    --seq-1: #34479c;
    --seq-2: #4a66d6;
    --seq-3: #6a84e6;
    --seq-4: #98aff2;
    --seq-5: #cbdbff;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 0 0 1px rgba(255, 255, 255, 0.07), 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 12px 24px -8px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 32px 64px -16px rgba(0, 0, 0, 0.7);
    --shadow-btn: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-focus: 0 0 0 3px rgba(138, 160, 245, 0.30);
  }
}

/* Type scale (tokens.json → type.groups) */
.t-display-xl { font: 700 48px/52px var(--font-display); letter-spacing: -0.02em; }
.t-display { font: 700 36px/40px var(--font-display); letter-spacing: -0.015em; }
.t-h1 { font: 600 24px/30px var(--font-display); letter-spacing: -0.01em; }
.t-h2 { font: 600 22px/28px var(--font-display); }
.t-h3 { font: 600 18px/24px var(--font-display); }
.t-title-sm { font: 600 15px/22px var(--font-sans); letter-spacing: -0.005em; }
.t-body-lg { font: 400 16px/24px var(--font-sans); }
.t-body { font: 400 14px/20px var(--font-sans); }
.t-body-strong { font: 600 14px/20px var(--font-sans); }
.t-body-sm { font: 400 13px/18px var(--font-sans); }
.t-label { font: 600 13px/16px var(--font-sans); }
.t-caption { font: 500 12px/16px var(--font-sans); }
.t-eyebrow { font: 600 12px/16px var(--font-sans); }
.t-num-hero { font: 700 36px/40px var(--font-sans); letter-spacing: -0.025em; }
.t-num-lg { font: 700 26px/32px var(--font-sans); letter-spacing: -0.02em; }
.t-num { font: 600 13px/18px var(--font-sans); }
.t-code { font: 400 13px/20px var(--font-mono); }