:root {
  /* Brand — Sporty/instrument: cyan primary on graphite. Cool primary leaves
     warm hues (Strava orange, race-card oranges, fatigue reds) free to read
     as energy/effort signals rather than competing with the brand color. */
  --accent:#06b6d4; --accent-dim:rgba(6,182,212,.15); --accent-hi:#22d3ee;
  /* Secondary — used sparingly for hovers and interactive complements */
  --secondary:#3b82f6; --secondary-dim:rgba(59,130,246,.15);
  /* Semantic tokens — dark mode (default), graphite scale with a faint cool undertone */
  --bg:#0b0d10; --bg1:#101317; --bg2:#161a20; --bg3:#1c2128;
  --surface:#13171c; --surface2:#1a1f26;
  --border:#252b34; --border2:#3a4250;
  --text:#eef1f5; --text2:#9ba6b5; --muted:#6b7585; --muted2:#8892a3;
  --grid-line:rgba(155,166,181,.12);
  --font-ui:'Inter',system-ui,sans-serif;
  --font-data:'Geist Mono','IBM Plex Mono',monospace;
  --r:8px; --r-lg:12px;

  /* Type scale — 5-step authoritative scale referenced by components.
     Sizes do not change between light and dark mode, so no override in
     [data-theme="light"] below. Components reference the scale via these
     variables rather than declaring literal px values. */
  --fs-xs:   11px;   /* eyebrows, ticks, meta labels, deltas */
  --fs-sm:   13px;   /* body text, card sub-lines, table rows */
  --fs-base: 15px;   /* default UI text, card headlines, buttons */
  --fs-lg:   20px;   /* section titles, strip values */
  --fs-xl:   28px;   /* hero numbers */

  /* Page rhythm — used by Overview's typographic sections to keep
     spacing consistent across THIS WEEK, THIS QUARTER, the goal
     ribbon, the trajectory chart, and the dashboard heading. Tweaking
     here changes the whole-page rhythm in one place. */
  --space-section: 32px;
  --space-row: 16px;
  --space-tight: 12px;

  /* Chart body height ceilings. These cap the rendered canvas so the
     lead chart fits above the fold on a 13" MBP (~620px usable). The
     chart-body padding is 40px (20 top + 20 bottom); subtract from the
     total panel ceiling to land the canvas height. */
  --chart-h-lead:    260px;   /* lead chart on each tab */
  --chart-h-default: 240px;   /* secondary charts when expanded */
  --chart-h-compact: 180px;   /* PMC, sparkline-style strips */

  /* Chart tooltip */
  --tt-bg:#13171c; --tt-border:#252b34; --tt-text:#eef1f5; --tt-muted:#6b7585;
  /* Accent palette — data viz. NOTE: --orange is a legacy alias kept for
     compatibility with components.css (hovers, focus rings, confirm buttons,
     pagination). It now points at --accent (cyan), so the name is a misnomer
     but the visual effect is correct. Rename in a future pass if desired. */
  --orange:#06b6d4; --teal:#2dd4bf; --violet:#a78bfa;
  --gold:#f59e0b; --rose:#f43f5e; --sky:#38bdf8; --lime:#a3e635;
  /* Semantic status palette (#14): one meaning -> one color across the
     readiness band, Form (TSB), ACWR, and hero deltas. Aliases the base
     palette via var() so theme overrides of --lime/--gold/--rose flow
     through automatically. */
  --status-ready: var(--lime); --status-caution: var(--gold); --status-strain: var(--rose);

  /* Chart series colors — semantic. Each token names what it MEANS, not
     what color it is. Charts read these via getThemeColors() so the same
     metric is the same color everywhere, and so light mode can override
     without touching chart code. */
  --ctl:           #2dd4bf;            /* CTL (Fitness) — chronic training load line */
  --atl:           #f87171;            /* ATL (Fatigue) — acute training load line */
  --tsb:           #fbbf24;            /* TSB (Form) — fitness minus fatigue */
  --tsb-band:      rgba(251,191,36,.05); /* TSB target corridor fill */
  --predict:       #a3e635;            /* Future projections — plan/forecast lines */
  --effort:        #fb923c;            /* Hard-effort orange — peak race cards, threshold work */
  --scatter-muted: #475569;            /* Empty-state text + low-emphasis scatter dots */
  --completed:     #2dd4bf;            /* Run logged today — locked plan pill / "Done" badge */
  --completed-dim: rgba(45,212,191,.15);

  /* PMC TSB bands. Used by the tsb-bands-plugin to fill horizontal
     zones behind the Form line. Friel canon thresholds:
       < -30          overreached (red)
       -30 to -10     loaded      (yellow)
       -10 to +5      productive  (green)
       +5  to +25     fresh       (blue)
       > +25          tapered     (sky)
     Alphas are low (.06–.08) so the lines remain primary. */
  --pmc-band-overreach:  rgba(244,63,94,.08);
  --pmc-band-loaded:     rgba(245,158,11,.07);
  --pmc-band-productive: rgba(163,230,53,.06);
  --pmc-band-fresh:      rgba(56,189,248,.06);
  --pmc-band-tapered:    rgba(167,139,250,.07);

  /* Chart series palette — read live by PALETTE in charts/defaults.js so series
     colors swap with the theme. Order matters: the first 3 are the cleanest
     reads and are used most often (HR zones, ROC, custom charts cycle through
     in order). Tuned for saturation against the near-black --bg. */
  --series-1: #06b6d4;  /* cyan — brand-anchor */
  --series-2: #fb923c;  /* orange — warm contrast */
  --series-3: #a3e635;  /* lime */
  --series-4: #a78bfa;  /* violet */
  --series-5: #fbbf24;  /* amber */
  --series-6: #f43f5e;  /* rose */
  --series-7: #38bdf8;  /* sky */
  --series-8: #2dd4bf;  /* teal */
}
[data-theme="light"] {
  /* Light mode: clean off-white scale with cool-neutral borders */
  --bg:#fafbfc; --bg1:#f3f5f8; --bg2:#ffffff; --bg3:#eef1f5;
  --surface:#ffffff; --surface2:#f7f9fc;
  --border:#e2e6ec; --border2:#c4cbd5;
  --text:#0f1419; --text2:#3d4856; --muted:#7a8494; --muted2:#5a6573;
  --grid-line:rgba(100,116,139,.14);
  --tt-bg:#ffffff; --tt-border:#e2e6ec; --tt-text:#0f1419; --tt-muted:#7a8494;

  /* Brand accent darkens slightly for AA contrast on near-white */
  --accent:#0891b2; --accent-dim:rgba(8,145,178,.12); --accent-hi:#06b6d4;
  --secondary:#2563eb; --secondary-dim:rgba(37,99,235,.12);
  --orange:#0891b2;  /* legacy alias tracks --accent */

  /* Chart series colors — light mode darkens slightly so they read on
     near-white surfaces. The semantic meaning is the same. */
  --ctl:           #0d9488;
  --atl:           #dc2626;
  --tsb:           #ca8a04;            /* shifted from amber to gold so CTL/ATL/TSB triplet has clearer luminance separation in light mode */
  --tsb-band:      rgba(202,138,4,.06);
  --predict:       #65a30d;
  --effort:        #c2410c;
  --scatter-muted: #94a3b8;
  --completed:     #0d9488;            /* Run logged today — locked plan pill / "Done" badge */
  --completed-dim: rgba(13,148,136,.12);
  --sky:           #0284c7;  /* darker cyan-blue for light mode contrast */
  --rose:          #e11d48;
  --teal:          #0d9488;

  /* PMC TSB bands. Light-mode versions: slightly higher alpha since
     the bands sit on near-white. Semantic meaning identical to dark
     mode. */
  --pmc-band-overreach:  rgba(225,29,72,.09);
  --pmc-band-loaded:     rgba(180,83,9,.08);
  --pmc-band-productive: rgba(101,163,13,.07);
  --pmc-band-fresh:      rgba(2,132,199,.07);
  --pmc-band-tapered:    rgba(124,58,237,.08);

  /* Chart series palette — light mode versions. Each shifted darker/less
     saturated so they read on a near-white background. Same semantic order
     as dark mode so series N is "the same series" across themes. */
  --series-1: #0891b2;  /* cyan, darker */
  --series-2: #c2410c;  /* orange, darker */
  --series-3: #65a30d;  /* lime, much darker — was the worst offender */
  --series-4: #7c3aed;  /* violet, darker */
  --series-5: #b45309;  /* amber, much darker */
  --series-6: #be123c;  /* rose, darker */
  --series-7: #0284c7;  /* sky, darker */
  --series-8: #0d9488;  /* teal, darker */
}