/* Bromont 2026 design tokens — generated from brand-pack.json.
   If you find yourself hand-editing this file, edit brand-pack.json + DESIGN.md instead. */

:root {
  /* Color */
  --bromont-indigo:        #2B328D;
  --bromont-teal:          #59C6A8;
  --bromont-ink:           #231F20;
  --bromont-paper:         #FAFAF7;
  --bromont-night:         #0B0E1C;
  --bromont-ink-text:      #1A1C2E;
  --bromont-paper-text:    #F4F4EF;
  --bromont-flag:          #C8323A;
  --bromont-leaf:          #3E8F66;

  /* Surfaces (alpha applied at runtime) */
  --bromont-surface-dark:  color-mix(in srgb, var(--bromont-night) 92%, transparent);
  --bromont-surface-light: color-mix(in srgb, var(--bromont-paper) 96%, transparent);

  /* Type families */
  --font-display:  "Söhne", "Inter Tight", system-ui, sans-serif;
  --font-headline: "Söhne Breit", "Inter Tight", system-ui, sans-serif;
  --font-body:     "Inter", -apple-system, system-ui, sans-serif;
  --font-mono:     "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* Scale (1080p reference) */
  --size-display-xl: 72px;  --lh-display-xl: 1.00;  --track-display-xl: -1.5%;
  --size-display-l:  48px;  --lh-display-l:  1.05;  --track-display-l:  -1.0%;
  --size-display-m:  36px;  --lh-display-m:  1.10;  --track-display-m:  -0.5%;
  --size-body-l:     28px;  --lh-body-l:     1.20;
  --size-body-m:     22px;  --lh-body-m:     1.30;
  --size-body-s:     18px;  --lh-body-s:     1.40;
  --size-mono-score: 34px;  --lh-mono-score: 1.00;
  --size-mono-time:  44px;  --lh-mono-time:  1.00;

  /* Space (8-pt grid) */
  --space-1:   4px;   --space-2:   8px;   --space-3:  12px;   --space-4:  16px;
  --space-5:  24px;   --space-6:  32px;   --space-7:  40px;   --space-8:  48px;
  --space-9:  64px;   --space-10: 96px;   --space-11:128px;   --space-12:192px;

  /* Motion */
  --motion-in:     320ms cubic-bezier(0.16, 1, 0.3, 1);
  --motion-out:    200ms cubic-bezier(0.7, 0, 0.84, 0);
  --motion-tick:    80ms linear;
  --motion-swap:   400ms ease-in-out;
  --motion-bumper: 800ms ease-in-out;

  /* Safe area */
  --safe-x: 96px;
  --safe-y: 60px;
}

/* Type-scale utility classes — keep the chassis terse */
.t-display-xl { font: 800 var(--size-display-xl)/var(--lh-display-xl) var(--font-display); letter-spacing: var(--track-display-xl); }
.t-display-l  { font: 700 var(--size-display-l)/var(--lh-display-l)   var(--font-display); letter-spacing: var(--track-display-l); }
.t-display-m  { font: 700 var(--size-display-m)/var(--lh-display-m)   var(--font-display); letter-spacing: var(--track-display-m); }
.t-headline   { font: 600 var(--size-display-l)/var(--lh-display-l)   var(--font-headline); }
.t-body-l     { font: 500 var(--size-body-l)/var(--lh-body-l)         var(--font-body); }
.t-body-m     { font: 500 var(--size-body-m)/var(--lh-body-m)         var(--font-body); }
.t-body-s     { font: 400 var(--size-body-s)/var(--lh-body-s)         var(--font-body); }
.t-mono-score { font: 500 var(--size-mono-score)/var(--lh-mono-score) var(--font-mono); font-variant-numeric: tabular-nums; }
.t-mono-time  { font: 500 var(--size-mono-time)/var(--lh-mono-time)   var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.5%; }