/* Pinarello Q36.5 Performance OS - shared design tokens (source of truth: theme/tokens.css).
   Unified UI Theme Brief, 2026-10-08, with: Podium Gold kept (Alex), contrast fixes
   (Coach Portal), AI accent (Landing), rider-insights chart names (Coach Portal). Documented in docs/design-system.md.

   Each app folder holds a COPY of this file (Static Web Apps deploy one folder), linked
   right AFTER base.css:  <link rel="stylesheet" href="tokens.css">
   Edit theme/tokens.css, then copy it into every app that has one (keep the copies identical).

   Section 3 maps the older base.css variable names onto these tokens, so pages written
   against base.css pick up the theme without edits. New CSS should use the new names. */

/* ---- 1. Light (default) */
:root {
  color-scheme: light;
  /* brand */
  --navy:          #272A49;   /* navigation, active states, primary actions */
  --navy-hover:    #1d2038;
  --navy-tint:     rgba(39, 42, 73, .08);   /* selected rows, active nav background */
  --navy-text:     #272A49;   /* navy as TEXT (links, active nav, info badges); lightens in dark */
  --gold:          #D7A738;   /* Podium Gold (brand guidelines; Alex 2026-10-08 chose it over the brief's #E8AD32).
                                Brand mark, focus ring, accents ON NAVY. Never text or thin lines on light
                                surfaces (2:1 on white). */
  --on-navy:       #FFFFFF;
  --on-navy-muted: rgba(255, 255, 255, .72);

  /* surfaces + text */
  --bg:            #FAFAF8;   /* page */
  --surface:       #FFFFFF;   /* cards, tables, panels */
  --surface-2:     #F2F2F0;   /* secondary surface: table headers, hover, wells */
  --text:          #171717;
  --text-2:        #858580;   /* captions, labels, axis ticks, meta ONLY (3.6:1 - not body text) */
  --text-body-2:   #5C5C58;   /* secondary text at body size (6.6:1) */
  --border:        #E2E2DF;
  --border-strong: #CFCFCB;   /* input borders, hovered controls */

  /* semantic: direction of change (positive / negative) */
  --positive:      #168557;
  --negative:      #C84535;
  --warning:       #B57800;
  --positive-bg:   rgba(22, 133, 87, .10);
  --negative-bg:   rgba(200, 69, 53, .10);
  --warning-bg:    rgba(181, 120, 0, .12);
  --warning-text:  #8A5A00;   /* warning as TEXT (#B57800 is 3.7:1; keep it for fills, icons, bars) */
  /* "needs review" = warning (no separate state) */
  /* AI-written content (e.g. "why this is flagged"): accent + tint, always with an "AI" label */
  --ai:            #6B5BD2;
  --ai-bg:         rgba(107, 91, 210, .09);
  --info-bg:       var(--navy-tint);
  /* alerts (clinically / operationally important) use the same hues but are always a
     filled banner with an icon + words - see docs/design-system.md "Alerts vs change" */

  /* charts */
  --chart-1:       #272A49;   /* primary series */
  --chart-2:       #8A8FB8;
  --chart-3:       #D7A738;   /* highlight one series only */
  --chart-4:       #5E9C8A;
  --chart-5:       #B9B9B4;   /* comparison / context */
  --chart-grid:    #ECECE9;
  --chart-axis:    var(--text-2);
  --chart-missing: #D9D9D5;
  /* Coaches Portal (rider-insights) series names - kept so that page drops its inline :root */
  --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100;
  --series-5: #e87ba4; --series-6: #008300; --series-7: #4a3aa7;
  --axis: #c3c2b7; --band: rgba(42, 120, 214, .10);
  --f0: #104281; --f1: #1c5cab; --f2: #2a78d6; --f3: #5598e7; --f4: #86b6ef;   /* sequential ramp */
  --heat-lo: #f0efec; --heat-hi: #2a78d6;

  /* type: Inter, one scale */
  --font:          "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:     ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-xs:   11px;   /* table headers, section labels (uppercase), axis ticks */
  --fs-sm:   12px;   /* secondary / helper text, badges */
  --fs-base: 14px;   /* body, table cells, controls */
  --fs-md:   16px;   /* card titles */
  --fs-lg:   20px;   /* page titles */
  --fs-xl:   28px;   /* headline data values */
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --lh-tight: 1.25;  --lh-base: 1.5;
  --tracking-label: .06em;

  /* space: 4 / 8 px grid */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;

  /* shape + sizes */
  --radius-sm: 4px;  /* badges inside tables, inputs on dense rows */
  --radius:    6px;  /* buttons, inputs */
  --radius-lg: 8px;  /* cards, tables, panels, dialogs */
  --radius-pill: 999px;
  --control-h:    32px;   /* buttons, inputs, selects */
  --control-h-sm: 26px;
  --row-h:        40px;   /* table rows (comfortable) */
  --row-h-dense:  32px;
  --card-pad:     var(--space-4) var(--space-5);
  --header-h:     56px;
  --shadow-overlay: 0 8px 28px rgba(23, 23, 23, .16);   /* only for things floating ABOVE the page */
  --focus-ring:   0 0 0 2px var(--bg), 0 0 0 4px var(--gold);
}

/* ---- 2. Dark (follows the OS unless data-theme="light"; data-theme="dark" forces it) */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --navy: #5B63A6; --navy-hover: #6c74b8; --navy-tint: rgba(129, 138, 214, .16); --navy-text: #AEB4EC;
    --gold: #E6BB52; --on-navy: #FFFFFF; --on-navy-muted: rgba(255, 255, 255, .72);
    --bg: #111112; --surface: #1A1A1B; --surface-2: #232324;
    --text: #F2F2F0; --text-2: #9C9C96; --text-body-2: #BDBDB7; --border: #2E2E2F; --border-strong: #444446;
    --positive: #4CC38A; --negative: #F0846E; --warning: #E3AD3E; --warning-text: #E3AD3E;
    --positive-bg: rgba(76, 195, 138, .14); --negative-bg: rgba(240, 132, 110, .14); --warning-bg: rgba(227, 173, 62, .16);
    --ai: #A99CF0; --ai-bg: rgba(169, 156, 240, .12);
    --chart-1: #8F97D6; --chart-2: #5B63A6; --chart-3: #E6BB52; --chart-4: #6FB8A2; --chart-5: #5A5A57;
    --chart-grid: #29292A; --chart-missing: #3A3A3B;
    --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500;
    --series-5: #d55181; --series-6: #008300; --series-7: #9085e9;
    --axis: #45453f; --band: rgba(57, 135, 229, .16);
    --f0: #cde2fb; --f1: #9ec5f4; --f2: #6da7ec; --f3: #3987e5; --f4: #256abf;
    --heat-lo: #262624; --heat-hi: #3987e5;
    --shadow-overlay: 0 8px 28px rgba(0, 0, 0, .5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --navy: #5B63A6; --navy-hover: #6c74b8; --navy-tint: rgba(129, 138, 214, .16); --navy-text: #AEB4EC;
  --gold: #E6BB52; --on-navy: #FFFFFF; --on-navy-muted: rgba(255, 255, 255, .72);
  --bg: #111112; --surface: #1A1A1B; --surface-2: #232324;
  --text: #F2F2F0; --text-2: #9C9C96; --text-body-2: #BDBDB7; --border: #2E2E2F; --border-strong: #444446;
  --positive: #4CC38A; --negative: #F0846E; --warning: #E3AD3E; --warning-text: #E3AD3E;
  --positive-bg: rgba(76, 195, 138, .14); --negative-bg: rgba(240, 132, 110, .14); --warning-bg: rgba(227, 173, 62, .16);
  --ai: #A99CF0; --ai-bg: rgba(169, 156, 240, .12);
  --chart-1: #8F97D6; --chart-2: #5B63A6; --chart-3: #E6BB52; --chart-4: #6FB8A2; --chart-5: #5A5A57;
  --chart-grid: #29292A; --chart-missing: #3A3A3B;
  --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500;
  --series-5: #d55181; --series-6: #008300; --series-7: #9085e9;
  --axis: #45453f; --band: rgba(57, 135, 229, .16);
  --f0: #cde2fb; --f1: #9ec5f4; --f2: #6da7ec; --f3: #3987e5; --f4: #256abf;
  --heat-lo: #262624; --heat-hi: #3987e5;
  --shadow-overlay: 0 8px 28px rgba(0, 0, 0, .5);
}

/* ---- 3. Older base.css names -> tokens (so existing pages adopt the theme unchanged) */
:root, :root[data-theme] {
  --surface-page:   var(--bg);
  --surface-card:   var(--surface);
  --surface-sunken: var(--surface-2);
  --ink-primary:    var(--text);
  --ink-secondary:  var(--text-body-2);
  --ink-muted:      var(--text-2);
  --gridline:       var(--border);
  --brand-blue:     var(--navy);
  --brand-header:   #272A49;            /* the header stays brand navy in both modes */
  --brand-gold:     var(--gold);
  --pts-4:          var(--navy);
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    --surface-page: var(--bg); --surface-card: var(--surface); --surface-sunken: var(--surface-2);
    --ink-primary: var(--text); --ink-secondary: var(--text-body-2); --ink-muted: var(--text-2);
    --gridline: var(--border); --brand-blue: var(--navy); --brand-header: #1E2038; --brand-gold: var(--gold);
  }
}
:root[data-theme="dark"] {
  --surface-page: var(--bg); --surface-card: var(--surface); --surface-sunken: var(--surface-2);
  --ink-primary: var(--text); --ink-secondary: var(--text-body-2); --ink-muted: var(--text-2);
  --gridline: var(--border); --brand-blue: var(--navy); --brand-header: #1E2038; --brand-gold: var(--gold);
}

/* ---- 4. Base element defaults every app shares */
body { font-family: var(--font); font-size: var(--fs-base); line-height: var(--lh-base); background: var(--bg); color: var(--text);
  font-feature-settings: "cv11", "ss01"; }   /* Inter: single-storey a off, open digits */
.num, td.num, .tabular { font-variant-numeric: tabular-nums; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }