/* glen-design: v1 */
/* ============================================================================
   Command Centre tokens. Two first-class appearances, Day and Night.
   The client file sets --brand (and optionally --brand-2); js/data/brand.js
   derives an AA-safe accent for each appearance and writes --accent-day and
   --accent-night on the root. Nothing outside :root carries a literal colour.
   ========================================================================== */

/* --- DAY (default) ------------------------------------------------------- */
:root{
  color-scheme: light;

  --brand:        #2548bd;
  --brand-2:      #0c1b60;
  --accent-day:   #2548bd;
  --accent-night: #7b98ff;

  --bg:        #eef1f6;
  --bg-deep:   #e2e7f0;
  --surface-1: #ffffff;
  --surface-2: #f5f7fb;
  --surface-3: #ebeff6;
  --line:      rgba(14,28,72,.08);
  --line-2:    rgba(14,28,72,.15);

  --ink:       #0b1733;
  --ink-dim:   #4d5974;
  --ink-faint: #7a849b;

  --accent:    var(--accent-day);
  --accent-2:  var(--brand-2);
  --on-accent: #ffffff;
  --hot:       #ffffff;
  --tint:      color-mix(in oklab, var(--accent) 10%, transparent);
  --tint-2:    color-mix(in oklab, var(--accent) 18%, transparent);
  --glow:      color-mix(in oklab, var(--accent) 30%, transparent);
  --aurora-1:  color-mix(in oklab, var(--accent) 16%, transparent);
  --aurora-2:  color-mix(in oklab, var(--accent-2) 10%, transparent);
  --mask:      #000000;

  /* materials: only chrome and floating panels are translucent */
  --mat-chrome:   rgba(255,255,255,.72);
  --mat-float:    rgba(255,255,255,.70);
  --mat-blur:     blur(24px) saturate(180%);
  --scrim:        rgba(11,23,51,.28);

  /* elevation. In Day a soft blue-tinted shadow is correct; in Night
     elevation comes from lightness plus a hairline ring instead */
  --shadow-1: 0 1px 2px rgba(18,36,90,.06), 0 6px 18px rgba(18,36,90,.07);
  --shadow-2: 0 2px 6px rgba(18,36,90,.07), 0 18px 48px rgba(18,36,90,.12);
  --shadow-3: 0 4px 12px rgba(18,36,90,.10), 0 32px 80px rgba(18,36,90,.18);
  --ring:     0 0 0 1px var(--line);

  /* semantic, meaning only */
  --ok:   #147a52;
  --warn: #a8620a;
  --bad:  #c3283f;
  --ok-tint:   color-mix(in oklab, var(--ok) 13%, transparent);
  --warn-tint: color-mix(in oklab, var(--warn) 14%, transparent);
  --bad-tint:  color-mix(in oklab, var(--bad) 12%, transparent);

  /* 3D world, read by js/core/spatial.js through getComputedStyle */
  --w-floor:   #eef1f6;
  --w-clay:    #fbfcfe;
  --w-clay-2:  #dfe5ef;
  --w-mark:    rgba(14,28,72,.22);
  --w-shadow:  .16;
  --w-emissive: 0;

  /* section visuals (css/modules/section-visuals.css). Blueprint: deep ink on
     faint blue paper by day, lit lines on navy at night */
  --bp-paper:  color-mix(in oklab, var(--accent-2) 4%, #fbfdff);
  --bp-grid:   color-mix(in oklab, var(--accent-2) 7%, transparent);
  --bp-grid-2: color-mix(in oklab, var(--accent-2) 14%, transparent);
  --bp-ink:    color-mix(in oklab, var(--accent-2) 82%, var(--accent));
  --bp-fill:   color-mix(in oklab, var(--accent-2) 5%, #ffffff);
  --bp-hot:    color-mix(in oklab, var(--bad) 9%, #ffffff);
  --sky-front: var(--accent);
  --sky-side:  color-mix(in oklab, var(--accent) 70%, #031029);
  --sky-top:   color-mix(in oklab, var(--accent) 52%, #ffffff);
  --sky-win:   rgba(255,255,255,.30);
  --sky-plane: color-mix(in oklab, var(--accent-2) 6%, transparent);
  --heat-1: color-mix(in oklab, var(--accent) 12%, var(--surface-2));
  --heat-2: color-mix(in oklab, var(--accent) 28%, var(--surface-2));
  --heat-3: color-mix(in oklab, var(--accent) 46%, var(--surface-2));
  --heat-4: color-mix(in oklab, var(--accent) 68%, var(--surface-2));
  --heat-5: color-mix(in oklab, var(--accent) 92%, var(--ink));
  --die-bg:    #111d38;
  --die-block: #182a4f;
  --die-edge:  #2a3f6c;
  --die-ink:   #eaf1ff;
  --die-dim:   #a8b8d8;
  --die-trace: color-mix(in oklab, var(--accent) 55%, #7fb6ff);
  --die-pin:   #c9d3e6;

  --r-sm: 10px; --r: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  --font-display: 'Geist', 'Inter Tight', system-ui, sans-serif;
  --font-body:    'Inter Tight', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
}

/* --- NIGHT --------------------------------------------------------------- */
:root[data-theme="night"]{
  color-scheme: dark;

  --bg:        #05070d;
  --bg-deep:   #020308;
  --surface-1: #0c111d;
  --surface-2: #111827;
  --surface-3: #182134;
  --line:      rgba(255,255,255,.075);
  --line-2:    rgba(255,255,255,.14);

  --ink:       #e9eefb;
  --ink-dim:   #9aa6c1;
  --ink-faint: #66728c;

  --accent:    var(--accent-night);
  --on-accent: #050914;
  --glow:      color-mix(in oklab, var(--accent) 38%, transparent);
  --aurora-1:  color-mix(in oklab, var(--accent) 15%, transparent);
  --aurora-2:  color-mix(in oklab, var(--accent-2) 22%, transparent);

  --mat-chrome:   rgba(10,14,24,.72);
  --mat-float:    rgba(12,17,29,.62);
  --mat-blur:     blur(20px) saturate(140%);
  --scrim:        rgba(0,0,0,.52);

  --shadow-1: 0 0 0 1px rgba(255,255,255,.06);
  --shadow-2: 0 0 0 1px rgba(255,255,255,.08), 0 24px 64px rgba(0,0,0,.45);
  --shadow-3: 0 0 0 1px rgba(255,255,255,.10), 0 32px 96px rgba(0,0,0,.6);

  --ok:   #3ddc97;
  --warn: #ffc857;
  --bad:  #ff5c74;

  --w-floor:   #05070d;
  --w-clay:    #151d2e;
  --w-clay-2:  #0e1422;
  --w-mark:    rgba(160,185,255,.20);
  --w-shadow:  .5;
  --w-emissive: 1;

  --bp-paper:  color-mix(in oklab, var(--accent-2) 24%, #030816);
  --bp-grid:   color-mix(in oklab, var(--accent) 8%, transparent);
  --bp-grid-2: color-mix(in oklab, var(--accent) 16%, transparent);
  --bp-ink:    var(--accent);
  --bp-fill:   color-mix(in oklab, var(--accent-2) 30%, #040a1a);
  --bp-hot:    color-mix(in oklab, var(--bad) 14%, #040a1a);
  --sky-side:  color-mix(in oklab, var(--accent) 52%, #000000);
  --sky-top:   color-mix(in oklab, var(--accent) 68%, #ffffff);
  --sky-win:   rgba(3,8,22,.30);
  --sky-plane: color-mix(in oklab, var(--accent) 7%, transparent);
  --die-bg:    #09112a;
  --die-block: #10204a;
  --die-edge:  #26407a;
  --die-trace: var(--accent);
  --die-pin:   #5d6f96;
}

/* --- SCALES: never edited per client ------------------------------------ */
:root{
  --fs-micro: 12px;
  --fs-sm:    13px;
  --fs-base:  15px;
  --fs-lg:    18px;
  --fs-xl:    24px;
  --fs-2xl:   34px;
  --fs-hero:  clamp(44px, 5.2vw, 76px);

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  --h-control: 36px;
  --h-touch:   44px;

  --dur-instant: 100ms;
  --dur-fast:    160ms;
  --dur-base:    220ms;
  --dur-slow:    320ms;
  --dur-drawer:  500ms;
  --dur-reveal:  700ms;
  --dur-theme:   900ms;
  --dur-build:   1100ms;  /* a chart building itself once, on view */
  --dur-build-l: 1300ms;
  --dur-sweep:   1600ms;
  --delay-mid:   1000ms;
  --delay-late:  1500ms;  /* the last beat of a build (revision cloud, notes) */

  --ease-out:    cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --spring:      cubic-bezier(.38, 1.21, .22, 1);

  --stagger: 60ms;
  --ambient-a: 26s;
  --ambient-b: 34s;
  --ambient-c: 19s;

  --loop-breathe: 6s;
  --loop-beam:    5s;
  --loop-sheen:   6s;
  --loop-load:    1.4s;
  --loop-flow:    2.6s;

  --rail-w: 232px;
  --rail-w-collapsed: 72px;
  --topbar-h: 64px;
}

/* --- BIG SCREENS: boardroom TVs and 27-inch displays read from further away */
@media (min-width: 2200px){
  :root{
    --fs-micro: 14px; --fs-sm: 16px; --fs-base: 18px; --fs-lg: 22px; --fs-xl: 30px; --fs-2xl: 42px;
    --s1: 5px; --s2: 10px; --s3: 15px; --s4: 20px; --s5: 30px; --s6: 40px; --s7: 60px; --s8: 80px;
    --h-control: 44px; --rail-w: 280px; --topbar-h: 76px;
  }
}