/* ═══════════════════════════════════════════════════════════════════════════
   Weektally — design tokens
   ═══════════════════════════════════════════════════════════════════════════

   Deliberately NOT the root theme.css. That file serves the legacy app and
   carries its vocabulary (--blue as the brand accent, --white as a legacy
   name with ~200 uses, --r-legacy-* holdovers). Inheriting it would import
   the old app's baggage into the rebuild and couple two things that are
   about to be separated at cutover. The legacy file stays untouched.

   Fjord is the identity (Phase A, 2026-08-03). Moss and Graphite ship
   installed as alternates — Peter's decision, so the choice stays cheap:
   revisit after living with real data. Switch with Ctrl+Alt+T, ?theme=moss,
   or the account menu.

   Contrast: every text/background pair below clears 5.5:1 (body) or 4.5:1
   (chips), computed from these exact values rather than eyeballed. Status
   never relies on hue alone — each carries a glyph.
   ═══════════════════════════════════════════════════════════════════════════ */

:root,
:root[data-theme="fjord"] {
  --theme-name: "Fjord";

  /* Surfaces — warm paper, not grey */
  --bg:            #F7F4EE;
  --surface:       #FFFFFF;
  --sunken:        #EFEAE1;
  --overlay:       rgba(28, 43, 51, .45);

  /* Ink */
  --ink:           #1C2B33;
  --ink-2:         #49575F;
  /* Darkened from #6C7A82 (2026-08-12). --dim renders .muted, which carries
     view subtitles and hints — prose people are meant to read, not
     decoration. At the old value it measured 4.03:1 against --bg, BELOW
     WCAG AA's 4.5 and well below the 5.5 body standard §1 commits to.
     Hue and saturation are unchanged; only lightness moved, so the
     colour's character is intact. Now 5.53:1 on bg, 6.07:1 on surface. */
  --dim:           #59646B;

  /* Accent — deep petrol */
  --accent:        #175A63;
  --accent-hover:  #0F4750;
  --accent-soft:   #DDEAEA;
  --on-accent:     #FFFFFF;

  /* Topbar */
  --topbar:        #12454D;
  --on-topbar:     #F2F7F6;

  /* The active facet button's fill. Same value as --on-topbar in this theme,
     and duplicated on purpose: --on-topbar is a FOREGROUND token, and using a
     foreground token as a background is how a topbar tweak silently restyles
     four dropdown buttons. */
  --accent-tint:   #F2F7F6;
  --topbar-dim:    #9FBFBC;

  /* Reward — reserved for the submitted/celebration moment */
  --reward:        #2E7D5B;
  --reward-soft:   #E1F0E8;

  /* Status. Always paired with a glyph: ✓ ok · △ warn · ✗ bad */
  --ok:            #22684C;  --ok-soft:    #E1F0E8;
  --warn:          #8F5410;  --warn-soft:  #F6EAD5;
  --bad:           #AD3A2E;  --bad-soft:   #F7E3DF;
  --gold:          #C08A1E;

  /* Lines */
  --line:          #E3DDD1;
  --line-strong:   #CFC6B4;

  /* Charts — read at runtime by theme.js chartPalette() for Phase E.
     No violet/magenta band anywhere: rejected 2026-07-31. */
  --chart-1: #175A63;  --chart-2: #C2703B;  --chart-3: #4E7A34;
  --chart-4: #2E6F8E;  --chart-5: #9A6A1E;  --chart-6: #3F7F6E;
  --chart-7: #8C4A3A;  --chart-8: #5B6E2E;  --chart-9: #2B5A7A;
  --chart-10:#123C42;
  --chart-grid: rgba(28, 43, 51, .08);
}

:root[data-theme="moss"] {
  --theme-name: "Moss";
  --bg:#FAF8F1; --surface:#FFFFFF; --sunken:#F0EDE2; --overlay:rgba(32,40,31,.45);
  --ink:#20281F; --ink-2:#4C574B; --dim:#5E675D;   /* was #6F7A6E — 4.22:1 on bg, below AA. Now 5.53:1. */
  --accent:#34604A; --accent-hover:#27503B; --accent-soft:#E0EBE2; --on-accent:#FFFFFF;
  --topbar:#243B2E; --on-topbar:#F1F6F0; --topbar-dim:#A3BCA6; --accent-tint:#EFF4F0;
  --reward:#2E7D5B; --reward-soft:#E0F0E7;
  --ok:#256A47; --ok-soft:#E0F0E7;
  --warn:#8F5B0D; --warn-soft:#F5EBD3;
  --bad:#AC3A2F; --bad-soft:#F7E3DE;
  --gold:#B07C1C;
  --line:#E6E2D4; --line-strong:#D2CBB8;
  --chart-1:#34604A; --chart-2:#B4712F; --chart-3:#4F7C3A; --chart-4:#2F6E86;
  --chart-5:#8E661D; --chart-6:#3D8071; --chart-7:#8A4C39; --chart-8:#5E7030;
  --chart-9:#2C5B76; --chart-10:#1C3B2C;
  --chart-grid: rgba(32,40,31,.08);
}

:root[data-theme="graphite"] {
  --theme-name: "Graphite";
  --bg:#F5F6FA; --surface:#FFFFFF; --sunken:#EBEDF3; --overlay:rgba(32,34,46,.45);
  --ink:#20222E; --ink-2:#4E5361; --dim:#5E6372;   /* was #707788 — 4.15:1 on bg, below AA. Now 5.55:1. */
  --accent:#4E5D78; --accent-hover:#3D4A62; --accent-soft:#E4E8F0; --on-accent:#FFFFFF;
  --topbar:#252A38; --on-topbar:#EFF1F6; --topbar-dim:#9AA2B5; --accent-tint:#EFF1F6;
  --reward:#237A54; --reward-soft:#E0F0E8;
  --ok:#1F6B4A; --ok-soft:#E0F0E8;
  --warn:#8A560F; --warn-soft:#F5EAD4;
  --bad:#B23226; --bad-soft:#F8E2DF;
  --gold:#B08718;
  --line:#E3E5EC; --line-strong:#CDD1DC;
  --chart-1:#4E5D78; --chart-2:#B4682F; --chart-3:#4B7A3C; --chart-4:#2F6B8C;
  --chart-5:#8B6420; --chart-6:#3C7C6D; --chart-7:#8A4A3B; --chart-8:#5C6E32;
  --chart-9:#2B5875; --chart-10:#2A3346;
  --chart-grid: rgba(32,34,46,.08);
}

/* ── Dark ─────────────────────────────────────────────────────────────────
   DERIVED FROM GRAPHITE'S NEUTRALS, NOT FROM FJORD'S. Fjord's surfaces are
   warm paper (#F7F4EE); inverted, warm paper reads as sepia rather than as
   dark. Graphite's are cool near-greys, which invert into the cool darks the
   eye expects. Peter's call, 2026-08-11, and correct about the canvas.

   THE ACCENT IS LIFTED, NOT INVERTED, and that is the part inverting gets
   wrong. Graphite's #4E5D78 is deliberately low-chroma: restrained on light,
   invisible on dark, where it collapses into the surrounding greys. A dark
   accent needs MORE lightness and MORE chroma than its light counterpart
   because the contrast direction has flipped. Lifting it lands near Fjord's
   family, so this still reads as Weektally rather than as a fourth brand.

   Consequences worth stating, because each is a way dark themes go wrong:
   • The *-soft tokens are BACKGROUNDS. On light they are pale tints; here
     they must be dark SHADES. A pale tint behind status text on a dark
     surface glares.
   • --on-accent flips to dark ink: the accent is now light, so white on it
     fails.
   • --sunken is DARKER than --bg while --surface is LIGHTER. On light,
     recessed means darker and raised means whiter; keeping that relationship
     is what preserves the sense of elevation after the inversion.
   • Chart hues are lightened too — the light-mode set is tuned for white and
     goes muddy on a dark ground.
   • --bg is not black. Pure black kills elevation and, on OLED, smears
     during scroll. */
:root[data-theme="dark"] {
  --theme-name: "Dark";

  /* Surfaces — cool dark greys, raised/recessed preserved */
  --bg:            #14161D;
  --surface:       #1C1F28;
  --sunken:        #101219;
  --overlay:       rgba(4, 5, 8, .62);

  /* Ink — near-white, kept slightly cool to match the greys */
  --ink:           #E7E9F0;
  --ink-2:         #B2B8C6;
  /* Lightened from #8B93A3 (2026-08-12), the mirror of the light themes'
     darkening. Note the failing pair is dim/SURFACE here, not dim/bg:
     --surface is lighter than --bg in dark, so the raised card is the
     harder background, exactly inverting the light themes. It measured
     5.33:1 there — above WCAG AA but below §1's 5.5 body standard.
     Hue and saturation held; only lightness moved. Now 5.53:1 on
     surface, 6.07:1 on bg, 6.29:1 on sunken. */
  --dim:           #8E96A5;

  /* Accent — Graphite's slate, lifted in lightness and chroma */
  --accent:        #93ADD3;
  --accent-hover:  #ADC2E1;
  --accent-soft:   #232B3A;
  --on-accent:     #11141B;

  /* Topbar — darker than --surface so the chrome still separates */
  --topbar:        #0E1016;
  --on-topbar:     #E7E9F0;
  --topbar-dim:    #8B93A3;
  --accent-tint:   #232B3A;

  --reward:        #63D3A0;  --reward-soft: #12291F;
  --ok:            #63D3A0;  --ok-soft:     #12291F;
  --warn:          #E4AE55;  --warn-soft:   #2C2312;
  --bad:           #F28C80;  --bad-soft:    #331A1B;
  --gold:          #D8B23F;

  --line:          #2A2E3A;
  --line-strong:   #3B4152;

  --chart-1:#7FA5D8; --chart-2:#E29C61; --chart-3:#7AC273; --chart-4:#61C0E2;
  --chart-5:#DBB660; --chart-6:#71C9B6; --chart-7:#E28E7C; --chart-8:#ABC66C;
  --chart-9:#7098D2; --chart-10:#9CA5BA;
  --chart-grid: rgba(255,255,255,.08);
}

/* ── Scales — identical across themes ─────────────────────────────────────
   Not theme-specific: swapping identity should change colour, not rhythm. */
:root {
  --font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-xs:  11px;  --fs-sm:  12px;  --fs-md:  13px;  --fs-base: 14px;
  --fs-lg:  16px;  --fs-xl:  19px;  --fs-2xl: 24px;  --fs-3xl:  30px;

  --fw-normal: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --fw-heavy: 800;

  --lh-tight: 1.15; --lh-normal: 1.45; --lh-loose: 1.65;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 48px;

  /* --r-xs is the facet checkbox: at 15px square, --r-sm (6px) reads as a pill. */
  --r-xs: 4px;
  --r-sm: 6px; --r-md: 9px; --r-lg: 13px; --r-xl: 18px; --r-pill: 999px;

  /* Facet dropdown geometry — from the design, and shared so the panel and
     its scroll region cannot drift apart. */
  --popover-w: 236px; --popover-max-h: 208px;

  --elev-1: 0 1px 2px rgba(20,30,35,.05), 0 1px 3px rgba(20,30,35,.05);
  --elev-2: 0 2px 6px rgba(20,30,35,.06), 0 6px 16px rgba(20,30,35,.06);
  --elev-3: 0 6px 16px rgba(20,30,35,.08), 0 16px 40px rgba(20,30,35,.10);
  --elev-4: 0 12px 28px rgba(20,30,35,.14), 0 24px 64px rgba(20,30,35,.14);
  --focus:  0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);

  --rail-w: 178px;
  --topbar-h: 52px;
}

/* Respect the OS setting rather than animating regardless. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}