/* ============================================================
   Design tokens, light "day on the rivers" / dark "night by the bridges"
   ============================================================ */

:root {
  --font-mono:  'IBM Plex Mono', ui-monospace, monospace;
  --font-sans:  'IBM Plex Sans', system-ui, sans-serif;
  --font-serif: 'IBM Plex Serif', Georgia, serif;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  --fs-display: 56px;
  --fs-h1: 32px;
  --fs-h2: 22px;
  --fs-h3: 18px;
  --fs-body: 15px;
  --fs-serif: 16px;
  --fs-mono: 13px;
  --fs-caption: 12px;
  --fs-label: 10px;
  --fs-quote: 18px;

  --lh-tight: 1.1;
  --lh-snug:  1.35;
  --lh-base:  1.55;
  --lh-loose: 1.65;

  --tr-display: -1.5px;
  --tr-h1:       0.5px;
  --tr-h2:       1.5px;
  --tr-label:    2px;

  --motion-fast: 150ms;
  --motion-base: 250ms;
  --ease: ease;
}

/* LIGHT, day on the rivers (default) */
:root,
html[data-mode="light"] {
  --bg:            #FFFFFF;
  --bg-elevated:   #FAFAF7;
  --bg-sunk:       #F0EFEA;
  --bg-tint:       #E8EEF5;

  --ink:           #14110D;
  --ink-2:         #4A453E;
  --ink-3:         #8B8680;
  --ink-disabled:  #C4BEB3;

  --rule:          #E5E2DA;
  --rule-strong:   #C4BEB3;

  --primary:       #1E3A5F;   /* River Steel */
  --primary-bright:#6B92BD;
  --primary-deep:  #0F1F35;
  --primary-bg:    #E8EEF5;

  --series-1:      #1E3A5F;
  --series-2:      #9A3412;   /* iron rust */
  --series-3:      #6B5D52;

  --alarm:         #B91C1C;
  --warn:          #B86E00;
  --nominal:       #15803D;
}

/* DARK, night by the bridges */
html[data-mode="dark"] {
  --bg:            #0F1115;
  --bg-elevated:   #1C1F26;
  --bg-sunk:       #06060A;
  --bg-tint:       rgba(255,184,28,0.08);

  --ink:           #E8E4D8;
  --ink-2:         #A1A1AA;
  --ink-3:         #71717A;
  --ink-disabled:  #52525B;

  --rule:          #2A2D34;
  --rule-strong:   #3F4451;

  --primary:       #FFB81C;   /* Bridge Gold, Aztec Gold PMS 7406 */
  --primary-bright:#FFD166;
  --primary-deep:  #B88600;
  --primary-bg:    rgba(255,184,28,0.12);

  --series-1:      #6B92BD;
  --series-2:      #FB923C;
  --series-3:      #A1A1AA;

  --alarm:         #EF4444;
  --warn:          #FFB81C;
  --nominal:       #4ADE80;
}

@media (prefers-color-scheme: dark) {
  html:not([data-mode]) {
    --bg: #0F1115; --bg-elevated: #1C1F26; --bg-sunk: #06060A;
    --bg-tint: rgba(255,184,28,0.08);
    --ink: #E8E4D8; --ink-2: #A1A1AA; --ink-3: #71717A; --ink-disabled: #52525B;
    --rule: #2A2D34; --rule-strong: #3F4451;
    --primary: #FFB81C; --primary-bright: #FFD166; --primary-deep: #B88600;
    --primary-bg: rgba(255,184,28,0.12);
    --series-1: #6B92BD; --series-2: #FB923C; --series-3: #A1A1AA;
    --alarm: #EF4444; --warn: #FFB81C; --nominal: #4ADE80;
  }
}