/* CoachME landing page styles. Bundled from the CoachME Design System (2026-10-25): colors_and_type.css + app_tokens.css. */
/* ============================================================================
   CoachME — Design System Foundations
   colors_and_type.css

   The single source of truth for color + type for the CoachME brand.
   The product is an adaptive AI running coach: focused, precise, athletic.
   Light app surfaces, dark "hero" moments for stats, one bold green accent.

   Fonts are loaded from Google Fonts (see @import). If you bundle the project
   offline, download the three families into /fonts and swap the @import for
   local @font-face rules. (Flagged as a caveat — no local TTFs are committed.)
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@400;500;600;700;800&family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ------------------------------------------------------------------ *
   * 1. RAW PALETTE  —  reach in here only when defining a new role.
   * ------------------------------------------------------------------ */

  /* Neutrals — warm "stone" ramp (a hair of warmth so it pairs with green
     and reads less corporate than the scaffold's blue-slate). */
  --n-0:   #FFFFFF;
  --n-50:  #FAF9F7;
  --n-100: #F3F1ED;
  --n-150: #ECE9E3;
  --n-200: #E2DFD8;
  --n-300: #CFCBC1;
  --n-400: #A39E92;
  --n-500: #7A746A;
  --n-600: #565049;
  --n-700: #3B3631;
  --n-800: #252220;
  --n-900: #171513;
  --n-950: #0C0B0A;

  /* Brand — the primary accent. Energetic spring green (go / grow / better the self).
     This is the SYSTEM colour: primary CTAs, nav, active states, "on track / logged". */
  --brand-50:  #E7F9EE;
  --brand-100: #C6F2D9;
  --brand-200: #8CE6B6;
  --brand-300: #4ED593;
  --brand-400: #15C46F;
  --brand-500: #07A857;   /* primary */
  --brand-600: #058A46;   /* pressed  */
  --brand-700: #036B36;

  /* Accent — ember. RESERVED for future intensity work; **no shipped feature uses it**.
     Kept in the palette only so a later effort/intensity surface has a home.
     Any older caption in this system that says "ember glow" or "ember focus ring"
     should be read as GREEN. */
  --accent-50:  #FFF2EC;
  --accent-100: #FFE1D2;
  --accent-200: #FFC2A6;
  --accent-300: #FF9B70;
  --accent-400: #FB6E37;
  --accent-500: #F4501E;   /* intensity */
  --accent-600: #D63E0E;   /* pressed    */
  --accent-700: #AE300B;

  /* Blue — alternate accent / informational. Deep, focused. */
  --blue-50:  #EEF2FF;
  --blue-100: #DBE3FF;
  --blue-300: #9DB2FF;
  --blue-500: #2E54E6;
  --blue-600: #1F3FC4;
  --blue-700: #1A33A0;

  /* Green — positive: good check-in, prosperity / upward adjustment, "go". */
  --green-50:  #E9F8F0;
  --green-300: #6FD3A2;
  --green-500: #13A463;
  --green-600: #0C8350;

  /* Amber — caution / attention (fatigue rising, load held). */
  --amber-50:  #FEF4E2;
  --amber-400: #F6B23C;
  --amber-500: #E9971A;
  --amber-600: #C67C0C;

  /* Red — danger / pain / injury. Distinct from green (red, not orange). */
  --red-50:  #FDECEC;
  --red-400: #F0686D;
  --red-500: #E03F45;
  --red-600: #BE2A30;

  /* Teal — recovery / reduced-load state (calm, cool). */
  --teal-50:  #E6F6F7;
  --teal-500: #0FA0AE;
  --teal-600: #0A7E8A;

  /* ------------------------------------------------------------------ *
   * 2. SEMANTIC ROLES  —  what components reference. (Light theme.)
   * ------------------------------------------------------------------ */

  --bg:             var(--n-50);    /* app canvas                         */
  --surface:        var(--n-0);     /* raised cards, inputs               */
  --surface-sunken: var(--n-100);   /* wells, track backgrounds          */
  --surface-hover:  var(--n-100);

  --ink:    var(--n-900);           /* primary text / icons              */
  --ink-2:  var(--n-600);           /* secondary text                    */
  --ink-3:  var(--n-400);           /* tertiary / placeholder / disabled */
  --on-dark:    var(--n-50);        /* text on hero/ink surfaces         */
  --on-dark-2:  var(--n-300);

  --line:        var(--n-200);      /* hairline borders / separators     */
  --line-strong: var(--n-300);

  --primary:        var(--brand-500);
  --primary-press:  var(--brand-600);
  --primary-tint:   var(--brand-50);
  /* Brand green is a mid-tone: white text on it only reaches 3.1:1, so text and
     icons on a green fill are near-black (same move as the wordmark on green).
     --on-primary-2 is the secondary/sub-copy weight and still clears 4.5:1. */
  --on-primary:     var(--n-950);
  --on-primary-2:   rgba(12, 11, 10, 0.85);
  --focus:          var(--brand-500);

  /* Intensity accent (ember) semantic roles. */
  --intensity:       var(--accent-500);
  --intensity-press: var(--accent-600);
  --intensity-tint:  var(--accent-50);
  --on-intensity:    var(--n-0);

  --positive:  var(--green-500);
  --caution:   var(--amber-500);
  --danger:    var(--red-500);
  --danger-press: var(--red-600);
  --info:      var(--blue-500);
  --recovery:  var(--teal-500);

  /* ------------------------------------------------------------------ *
   * 3. DOMAIN TOKENS  —  running-specific, the heart of the system.
   * ------------------------------------------------------------------ */

  /* Effort / RPE zones (Z1 easy → Z5 max). Used in pace tables, HR, RPE. */
  --zone-1: #6E8BB7;   /* recovery / very easy   */
  --zone-2: #13A463;   /* aerobic / easy         */
  --zone-3: #E9971A;   /* tempo / moderate       */
  --zone-4: #EF6B2A; /* threshold / hard — raw warm orange, NOT the reserved --accent ember */
  --zone-5: #E03F45;   /* VO2 / max              */

  /* Pain scale (Matt's clinical 1–5). 1–2 awareness, ≥3 routes to X-train. */
  --pain-1: #13A463;
  --pain-2: #8FB81E;
  --pain-3: #E9971A;
  --pain-4: #EF6B2A;
  --pain-5: #E03F45;

  /* Adaptive load direction — the core CoachME idea. */
  --load-down: var(--teal-500);     /* reduce  (recover, life is heavy)    */
  --load-hold: var(--n-500);        /* hold steady                          */
  --load-up:   var(--brand-500);   /* increase (thriving, push)             */

  /* Workout facets (the four-facet plan architecture). */
  --facet-base: var(--n-500);      /* base / easy run                     */
  --facet-hq:   var(--brand-500); /* high-quality (hard) — the marquee day  */
  --facet-mq:   var(--amber-500);  /* moderate-quality                    */
  --facet-lr:   var(--blue-500);   /* long run                            */

  /* ------------------------------------------------------------------ *
   * 4. TYPE  —  condensed athletic display + neutral grotesk + mono.
   * ------------------------------------------------------------------ */

  --font-display: 'Saira Condensed', 'Oswald', 'Arial Narrow', sans-serif;
  --font-sans:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* Display scale (condensed, tight leading; great for stats + headlines). */
  --display-2xl: 700 64px/0.92 var(--font-display);
  --display-xl:  700 48px/0.94 var(--font-display);
  --display-lg:  700 36px/0.96 var(--font-display);
  --display-md:  600 28px/1.0  var(--font-display);

  /* Numeric "stat" role — for pace, mileage, big metrics. */
  --stat-lg: 700 44px/1.0 var(--font-display);
  --stat-md: 700 28px/1.0 var(--font-display);

  /* Heading / body roles (grotesk). */
  --h1:        700 26px/1.15 var(--font-sans);
  --h2:        700 21px/1.2  var(--font-sans);
  --title:     600 17px/1.3  var(--font-sans);
  --body:      400 16px/1.5  var(--font-sans);
  --body-strong: 600 16px/1.5 var(--font-sans);
  --body-sm:   400 14px/1.45 var(--font-sans);
  --caption:   400 12px/1.4  var(--font-sans);

  /* Eyebrow / label — uppercase, tracked. Pairs with condensed display. */
  --label:     600 13px/1.2 var(--font-sans);
  --label-track: 0.08em;

  /* Mono — technical metadata, splits, request ids, code. */
  --mono:      500 13px/1.4 var(--font-mono);
  --mono-sm:   500 11px/1.3 var(--font-mono);

  /* ------------------------------------------------------------------ *
   * 5. SPACING · RADII · BORDERS · SHADOWS · MOTION
   * ------------------------------------------------------------------ */

  /* 4-pt base scale (extends the codebase scale). */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  80px;

  /* Radii — precise corners with selective pills. */
  --radius-none: 0;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --border-hairline: 0.5px;
  --border-thin: 1px;
  --border-thick: 2px;

  /* Elevation — soft, warm-tinted shadows for the light app. */
  --shadow-1: 0 1px 2px rgba(23, 21, 19, 0.06);
  --shadow-2: 0 2px 8px rgba(23, 21, 19, 0.07), 0 1px 2px rgba(23, 21, 19, 0.05);
  --shadow-3: 0 8px 24px rgba(23, 21, 19, 0.10), 0 2px 6px rgba(23, 21, 19, 0.06);
  --shadow-4: 0 20px 48px rgba(23, 21, 19, 0.16), 0 4px 12px rgba(23, 21, 19, 0.08);
  --shadow-brand: 0 6px 20px rgba(21, 196, 111, 0.28);
  --shadow-accent: 0 6px 20px rgba(244, 80, 30, 0.30);

  /* Lifted surface for the dark "hero" stat tile (overridden in dark theme). */
  --hero-surface: var(--n-950);

  /* Motion — quick, confident, athletic. No bounce; crisp ease-out. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */
}

/* ====================================================================== *
 * DARK / HERO THEME  —  apply [data-theme="hero"] on a dark stat surface.
 * Light app is the default; hero moments invert for impact.
 * ====================================================================== */
[data-theme="hero"] {
  --bg:             var(--n-950);
  --surface:        #181513;
  --surface-sunken: #110F0E;
  --surface-hover:  #211D1A;

  --ink:    var(--n-50);
  --ink-2:  var(--n-300);
  --ink-3:  #9A9488;  /* tertiary text — lightened to clear 4.5:1 on dark surfaces */

  --line:        rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.18);

  --primary-tint: rgba(21, 196, 111, 0.16);

  /* Lifted near-black for the floating "hero" stat tile so it reads above
     the n-950 page background. */
  --hero-surface: #1C1815;

  /* Soft, warm-tinted shadows don't show on black — deepen + add a faint
     top highlight feel via stronger spread. */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-2: 0 2px 10px rgba(0, 0, 0, 0.50);
  --shadow-3: 0 10px 28px rgba(0, 0, 0, 0.55);
  --shadow-4: 0 24px 56px rgba(0, 0, 0, 0.65);

  /* Tinted status surfaces — the colored cards (intervention, load, pain,
     chips) need dark translucent fills instead of the light -50 tints, and
     lighter text so the hue reads on black. Every component references these
     vars, so the remap cascades automatically. */
  --brand-50:  rgba(21, 196, 111, 0.16);
  --brand-100: rgba(21, 196, 111, 0.24);
  --brand-200: rgba(52, 210, 126, 0.45);
  --brand-600: #34D27E;
  --brand-700: #5BD894;

  --accent-50:  rgba(244, 80, 30, 0.16);
  --accent-100: rgba(244, 80, 30, 0.24);
  --accent-200: rgba(251, 110, 55, 0.45);
  --accent-600: #FF7E4A;
  --accent-700: #FF9B70;

  --intensity-tint: rgba(244, 80, 30, 0.16);

  --green-50:  rgba(19, 164, 99, 0.16);
  --green-600: #5FCB97;

  --teal-50:   rgba(15, 160, 174, 0.16);
  --teal-600:  #45C4D0;

  --red-50:    rgba(224, 63, 69, 0.18);
  --red-600:   #FF7A7E;

  --amber-50:  rgba(233, 151, 26, 0.16);
  --amber-600: #F6B23C;

  --blue-50:   rgba(46, 84, 230, 0.22);
}

/* ====================================================================== *
 * SEMANTIC TYPE CLASSES  —  optional helpers mapping roles to elements.
 * ====================================================================== */
.t-display-2xl { font: var(--display-2xl); letter-spacing: -0.01em; }
.t-display-xl  { font: var(--display-xl);  letter-spacing: -0.01em; }
.t-display-lg  { font: var(--display-lg);  letter-spacing: -0.005em; }
.t-display-md  { font: var(--display-md); }
.t-stat-lg     { font: var(--stat-lg); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.t-stat-md     { font: var(--stat-md); font-variant-numeric: tabular-nums; }
.t-h1     { font: var(--h1); letter-spacing: -0.01em; }
.t-h2     { font: var(--h2); letter-spacing: -0.005em; }
.t-title  { font: var(--title); }
.t-body   { font: var(--body); }
.t-body-strong { font: var(--body-strong); }
.t-body-sm { font: var(--body-sm); }
.t-caption { font: var(--caption); color: var(--ink-2); }
.t-label  { font: var(--label); letter-spacing: var(--label-track); text-transform: uppercase; }
.t-mono   { font: var(--mono); }
.t-mono-sm { font: var(--mono-sm); }

/* ============================================================================
   CoachME — APP TOKENS (as shipped)
   Mirrors apps/mobile theme/tokens.ts exactly (staging 1f1a2e6, 2026-10-13).
   This file is the source for every "Shipped" and "Next phase" page. Where it
   disagrees with colors_and_type.css, this file wins (see Changelog).
   Dark only. Ember ramp is defined in tokens.ts but reserved: do not use.
   ============================================================================ */
:root{
  --app-bg:#0C0B0A;
  --app-surface:#181513;
  --app-surface-sunken:#110F0E;
  --app-surface-hover:#211D1A;
  --app-ink:#FAF9F7;
  --app-ink-muted:#E2DFD8;
  --app-ink-subtle:#A39E92;
  --app-line:rgba(255,255,255,0.10);
  --app-line-strong:rgba(255,255,255,0.18);
  --app-border-strong:#7A746A;
  --app-primary:#07A857;
  --app-primary-fill:#07A857;
  --app-primary-pressed:#34D27E;
  --app-primary-tint:rgba(21,196,111,0.16);
  --app-on-primary:#0C0B0A;
  --app-focus:#07A857;
  --app-success:#13A463;
  --app-warning:#E9971A;
  --app-danger:#E03F45;
  --app-danger-pressed:#BE2A30;
  --app-info:#9DB2FF;

  --app-font-display:'Saira Condensed','Arial Narrow',sans-serif;
  --app-font-sans:'Hanken Grotesk',system-ui,sans-serif;
  --app-font-mono:'JetBrains Mono',ui-monospace,monospace;
  --app-display-lg:700 36px/40px var(--app-font-display);
  --app-display-md:600 28px/31px var(--app-font-display);
  --app-stat-sm:700 19px/21px var(--app-font-display);
  --app-stat-sm-light:600 17px/19px var(--app-font-display);
  --app-stat-sm-heavy:700 22px/24px var(--app-font-display);
  --app-h1:700 26px/30px var(--app-font-sans);
  --app-h2:700 21px/25px var(--app-font-sans);
  --app-title:600 17px/22px var(--app-font-sans);
  --app-body:400 16px/24px var(--app-font-sans);
  --app-body-strong:600 16px/24px var(--app-font-sans);
  --app-body-sm:400 14px/20px var(--app-font-sans);
  --app-caption:400 12px/17px var(--app-font-sans);
  --app-label:600 13px/16px var(--app-font-sans);
  --app-label-track:1.04px;

  --app-space-xs:4px;--app-space-sm:8px;--app-space-md:12px;--app-space-lg:16px;--app-space-xl:24px;--app-space-xxl:32px;--app-space-xxxl:48px;
  --app-radius-sm:6px;--app-radius-md:10px;--app-radius-lg:16px;--app-radius-xl:24px;--app-radius-pill:999px;
  --app-border-hairline:0.5px;--app-border-thin:1px;--app-border-thick:2px;
  --app-min-target:44px;
  --app-screen-pad:16px;
}