/* GENERATED by resources/brand/build_tokens.py from tokens/jenni-tokens.json.
   Do not hand-edit. Change the JSON and re-run. */

:root {
  /* §1.1 brand (locked) · §1.2 extended · §1.3 semantic */
  --brand-blue: #1DA4FF;
  --brand-dark-blue: #001635;
  --brand-red: #F04B07;
  --brand-light-blue: #DCF1FF;
  --brand-white: #FFFFFF;
  --brand-black: #000000;
  --ink: #0E1A2F;
  --ink-2: #2A3654;
  --ink-3: #5B6786;
  --ink-4: #8B95B0;
  --ink-5: #B8C1D4;
  --paper: #FAFCFF;
  --paper-2: #F3F7FD;
  --line: #D8E3F2;
  --line-2: #E8EFF8;
  --success: #2DBE89;
  --warning: #F5A623;
  --danger: #E54B4B;
  --info: #1DA4FF;

  /* §1.4 alpha recipes */
  --alpha-blue-08: rgba(29,164,255,0.08);
  --alpha-blue-15: rgba(29,164,255,0.15);
  --alpha-blue-20: rgba(29,164,255,0.20);
  --alpha-blue-30: rgba(29,164,255,0.30);
  --alpha-red-10: rgba(240,75,7,0.10);
  --alpha-red-30: rgba(240,75,7,0.30);
  --alpha-navy-04: rgba(0,22,53,0.04);
  --alpha-navy-08: rgba(0,22,53,0.08);
  --alpha-navy-55: rgba(0,22,53,0.55);
  --alpha-light-04: rgba(220,241,255,0.04);
  --alpha-light-08: rgba(220,241,255,0.08);
  --alpha-light-65: rgba(220,241,255,0.65);

  /* §2 typography */
  --font: 'Figtree', system-ui, sans-serif;
  --mono: 'JetBrains Mono', Consolas, monospace;
  --scale-display: 88px;
  --scale-h1: 64px;
  --scale-h2: 40px;
  --scale-h3: 28px;
  --scale-h4: 20px;
  --scale-body: 16px;
  --scale-sm: 14px;
  --scale-xs: 12px;
  --tracking-tight: -0.022em;
  --tracking: -0.012em;
  --tracking-mono: 0.16em;

  /* §3 spacing (8px grid) */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;

  /* §4 radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --radius-button: 10px;
  --radius-modal: 14px;
  --radius-popover: 10px;
  --radius-tooltip: 6px;
  --radius-drawer-top: 16px;

  /* §5 elevation (navy-derived) */
  --e0: none;
  --e1: 0 1px 3px rgba(0,22,53,0.08);
  --e2: 0 4px 10px rgba(0,22,53,0.10);
  --e3: 0 8px 18px rgba(0,22,53,0.14);
  --e4: 0 16px 32px rgba(0,22,53,0.18);

  /* §6 motion */
  --motion-instant: 80ms;
  --motion-quick: 160ms;
  --motion-default: 240ms;
  --motion-deliberate: 400ms;
  --ease-jenni: cubic-bezier(0.16, 1, 0.3, 1);

  --container-width: 1280px;

  /* shadcn/Radix HSL bridge — LIGHT surface (§7.1) */
  --background: 216 100% 99%;
  --foreground: 215 100% 10%;
  --card: 0 0% 100%;
  --card-foreground: 215 100% 10%;
  --popover: 0 0% 100%;
  --popover-foreground: 215 100% 10%;
  --primary: 215 100% 10%;
  --primary-foreground: 204 100% 93%;
  --secondary: 216 71% 97%;
  --secondary-foreground: 215 100% 10%;
  --muted: 216 71% 97%;
  --muted-foreground: 223 19% 44%;
  --accent: 204 100% 56%;
  --accent-foreground: 215 100% 10%;
  --destructive: 18 94% 48%;
  --destructive-foreground: 0 0% 100%;
  --border: 215 50% 90%;
  --input: 215 50% 90%;
  --ring: 204 100% 56%;
  --radius: 14px;
}

/* DARK surface (§7.1). Media query = OS preference; class/attribute = explicit toggle. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']):not(.light) {
    --background: 215 100% 10%;
    --foreground: 204 100% 93%;
    --card: 215 74% 17%;
    --card-foreground: 204 100% 93%;
    --popover: 215 74% 17%;
    --popover-foreground: 204 100% 93%;
    --primary: 204 100% 56%;
    --primary-foreground: 215 100% 10%;
    --secondary: 215 68% 27%;
    --secondary-foreground: 204 100% 93%;
    --muted: 215 68% 27%;
    --muted-foreground: 214 31% 66%;
    --accent: 204 100% 56%;
    --accent-foreground: 215 100% 10%;
    --destructive: 18 94% 48%;
    --destructive-foreground: 0 0% 100%;
    --border: 215 65% 24%;
    --input: 215 65% 24%;
    --ring: 204 100% 56%;
    --e1: 0 1px 3px rgba(0,0,0,0.40);
    --e2: 0 4px 10px rgba(0,0,0,0.45);
    --e3: 0 8px 18px rgba(0,0,0,0.50);
    --e4: 0 16px 32px rgba(0,0,0,0.55);
  }
}
:root[data-theme='dark'], :root.dark {
  --background: 215 100% 10%;
  --foreground: 204 100% 93%;
  --card: 215 74% 17%;
  --card-foreground: 204 100% 93%;
  --popover: 215 74% 17%;
  --popover-foreground: 204 100% 93%;
  --primary: 204 100% 56%;
  --primary-foreground: 215 100% 10%;
  --secondary: 215 68% 27%;
  --secondary-foreground: 204 100% 93%;
  --muted: 215 68% 27%;
  --muted-foreground: 214 31% 66%;
  --accent: 204 100% 56%;
  --accent-foreground: 215 100% 10%;
  --destructive: 18 94% 48%;
  --destructive-foreground: 0 0% 100%;
  --border: 215 65% 24%;
  --input: 215 65% 24%;
  --ring: 204 100% 56%;
  --e1: 0 1px 3px rgba(0,0,0,0.40);
  --e2: 0 4px 10px rgba(0,0,0,0.45);
  --e3: 0 8px 18px rgba(0,0,0,0.50);
  --e4: 0 16px 32px rgba(0,0,0,0.55);
}