/* ============================================================
   tokens.css — full midfi-styles.css token set + z-index scale
   Light + Dark palettes; sport-mode (tri default, run = neon green)
   Activated via classList: html.palette-light / html.palette-dark
   AND attribute: html[data-sport="tri"|"run"]
   Phase 0 of clean-room SPA rebuild.
   ============================================================ */

@layer tokens {

  :root {
    --sys: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    /* Z-INDEX TOKEN SCALE (§4-J) */
    --z-base:      1;
    --z-sticky:   50;
    --z-tabs:    100;
    --z-panel:   300;
    --z-drawer:  400;
    --z-modal:   500;
    --z-toast:   600;
    --z-tooltip: 700;
  }

  /* ============================================================
     LIGHT — Graphite + Signal (cool grayscale + muted teal)
     Source: _design-import/source/Triathlon Coach Web App.html — graphite scheme
     ============================================================ */
  html.palette-light {
    --bg:         #F2F3F4;
    --surface:    #E8EAEC;
    --surface-2:  #DCDFE2;
    --surface-3:  #CFD3D7;
    --border:     #D0D4D8;
    --border-2:   #B8BDC2;
    --ink:        #16191C;
    --ink-2:      #4A5159;
    --ink-3:      #7A8089;
    --hero-bg:    #E8EAEC;
    --hero-fg:    #16191C;
    --accent:     #0E5E5F;
    --accent-2:   #0A4445;
    --accent-tint:#D5E2E2;
    /* Flattened sport/structure colors — collapse to neutral for graphite */
    --good:       #3F6E55;
    --good-tint:  var(--surface-2);
    --warn:       #8C5A42;
    --warn-tint:  var(--surface-2);
    --info-tint:  var(--surface-2);
    --swim:       #1A72A8;
    --swim-tint:  color-mix(in srgb, #1A72A8 14%, transparent);
    --bike:       #C96B1F;
    --bike-tint:  color-mix(in srgb, #C96B1F 14%, transparent);
    --run:        #2E7D5B;
    --run-tint:   color-mix(in srgb, #2E7D5B 14%, transparent);
    --rr-green:      #3F6E55;
    --rr-green-tint: var(--surface-2);
    --rr-yellow:     #8A7430;
    --rr-yellow-tint:var(--surface-2);
    --rr-red:        #8C5A42;
    --rr-red-tint:   var(--surface-2);
    /* Phase palette — graphite-tuned muted hues */
    --phase-base:  #7C9BB5;
    --phase-build: #3E7A7C;
    --phase-peak:  #A66544;
    --phase-taper: #B89545;
    --phase-dload: #9CA3AB;
    /* TSB zone palette (light) */
    --zone-transition: #E8C56B;  /* light yellow — over-rested */
    --zone-fresh:      #3DD66B;  /* neon green — race-ready */
    --zone-grey:       #8A9099;  /* grey — neutral */
    --zone-optimal:    #2BAEC4;  /* cyan — productive */
    --zone-risk:       #B83A3A;  /* dark red — overreaching */
    /* CTL/ATL chart lines = Fitness / Fatigue swatch colors */
    --chart-ctl: #316C6F;
    --chart-atl: #8298AC;
    /* Claude attribution — orange = AI signal. Used ONLY on UI driven by
       the AI coach (header stamps, coach chat footer, hero "Tuned by Claude",
       Memory bullets). Never used on sport icons, readiness/form, or
       primary CTAs. */
    --claude:        #D97757;
    --claude-2:      #B85838;
    --claude-tint:   rgba(217, 119, 87, 0.10);
    --claude-border: rgba(217, 119, 87, 0.22);
  }

  /* ============================================================
     DARK — Graphite + Signal
     ============================================================ */
  html.palette-dark {
    --bg:         #0F1113;
    --surface:    #16191C;
    --surface-2:  #1E2225;
    --surface-3:  #272B30;
    --border:     #2A2F35;
    --border-2:   #3D434A;
    --ink:        #E8EAEC;
    --ink-2:      #9CA3AB;
    --ink-3:      #6B7178;
    --hero-bg:    #16191C;
    --hero-fg:    #E8EAEC;
    --accent:     #3FA0A2;
    --accent-2:   #5BB8BA;
    --accent-tint:#163133;
    /* Flattened sport/structure colors */
    --good:       #7AB89A;
    --good-tint:  var(--surface-2);
    --warn:       #D49A78;
    --warn-tint:  var(--surface-2);
    --info-tint:  var(--surface-2);
    --swim:       #56A8E0;
    --swim-tint:  color-mix(in srgb, #56A8E0 14%, transparent);
    --bike:       #F09050;
    --bike-tint:  color-mix(in srgb, #F09050 14%, transparent);
    --run:        #6FCFA3;
    --run-tint:   color-mix(in srgb, #6FCFA3 14%, transparent);
    --rr-green:      #7AB89A;
    --rr-green-tint: var(--surface-2);
    --rr-yellow:     #D4B870;
    --rr-yellow-tint:var(--surface-2);
    --rr-red:        #D49A78;
    --rr-red-tint:   var(--surface-2);
    /* Phase palette */
    --phase-base:  #6F8AAE;
    --phase-build: #5BA8AB;
    --phase-peak:  #C77F5C;
    --phase-taper: #D4B36B;
    --phase-dload: #6B7178;
    /* TSB zone palette (dark) */
    --zone-transition: #F4D77A;  /* light yellow */
    --zone-fresh:      #4FE07F;  /* neon green */
    --zone-grey:       #9099A1;  /* grey */
    --zone-optimal:    #4ECDDB;  /* cyan */
    --zone-risk:       #D04848;  /* dark red */
    /* CTL/ATL chart lines = Fitness / Fatigue swatch colors */
    --chart-ctl: #5BB5AD;
    --chart-atl: #A8C2DC;
    /* Claude attribution — same hex as light; orange clears contrast on
       both #F2F3F4 and #0F1113 surfaces. */
    --claude:        #D97757;
    --claude-2:      #E0936F;
    --claude-tint:   rgba(217, 119, 87, 0.12);
    --claude-border: rgba(217, 119, 87, 0.28);
  }

  /* SPORT MODE — RUN (overrides accent only) */
  html.palette-light[data-sport="run"] {
    --accent:     #1FD45E;
    --accent-2:   #15A347;
    --accent-tint:#D6F5DF;
  }
  html.palette-dark[data-sport="run"] {
    --accent:     #5BFF8A;
    --accent-2:   #3FE070;
    --accent-tint:#1B3520;
  }

  /* Default to dark if no palette class set (FOUC safety) — Graphite + Signal */
  html:not(.palette-light):not(.palette-dark) {
    --bg:        #0F1113;
    --surface:   #16191C;
    --surface-2: #1E2225;
    --border:    #2A2F35;
    --ink:       #E8EAEC;
    --ink-2:     #9CA3AB;
    --ink-3:     #6B7178;
    --accent:    #3FA0A2;
    --accent-2:  #5BB8BA;
  }

  body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sys);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    margin: 0;
    /* Ambient lighting — same accent-tint radials as the auth pages.
       background-attachment: fixed keeps the gradient anchored to the
       viewport so scrolling long content doesn't tear the effect. */
    background-image:
      radial-gradient(ellipse at 15% 90%, var(--accent-tint) 0%, transparent 55%),
      radial-gradient(ellipse at 88% 12%, var(--accent-tint) 0%, transparent 50%);
    background-attachment: fixed;
  }

  /* Numbers — always tabular per design spec.
     Pace, watts, durations, dates, counters all use .num. */
  .num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
  }

  * { box-sizing: border-box; }

} /* end @layer tokens */