/* =========================================================================
   Health Lab — design tokens
   Source of truth: design_handoff_health_lab/design_files/proto/proto.css
   Colors are oklch. Three themes: Dusk (default), Daylight ([data-theme="light"]) and
   Sunset ([data-theme="sunset"], a warm dark). Applied to .app-root via data-theme (see app.js).
   ========================================================================= */

/* ---------- DUSK (default / dark) ----------
   .wimhof-cine is the full-screen breathing overlay; it lives OUTSIDE #root (so the
   app's render() innerHTML-rebuild never destroys its canvas/audio) and therefore
   needs its own copy of the token scope. Same values as .app-root, no layout. */
.app-root, .wimhof-cine {
  --bg:        oklch(0.178 0.022 168);
  --surf:      oklch(0.224 0.024 170);
  --surf-2:    oklch(0.278 0.026 168);
  --surf-3:    oklch(0.335 0.028 166);
  --line:      oklch(0.93 0.02 120 / 0.12);
  --line-2:    oklch(0.93 0.02 120 / 0.07);
  --text:      oklch(0.952 0.012 110);
  --dim:       oklch(0.72 0.022 130);
  --dim-2:     oklch(0.565 0.02 140);
  --action:    oklch(0.84 0.175 140);
  --action-d:  oklch(0.75 0.16 142);
  --on-action: oklch(0.20 0.04 150);
  /* User-chosen personalization accent (Settings → Accent color). Defaults to the brand
     action green; app.js sets it inline on .app-root to the profile's pick. Drives the
     identity/navigation layer (avatar + active nav) — NOT the CTA buttons, which stay green. */
  --accent:    var(--action);
  --heat:      oklch(0.68 0.17 38);
  --heat-2:    oklch(0.74 0.14 62);
  --c-strength:oklch(0.62 0.155 292);
  --c-cond:    oklch(0.70 0.12 236);
  --c-nutri:   oklch(0.77 0.13 92);
  --c-body:    oklch(0.72 0.10 192);
  --c-recover: oklch(0.69 0.075 322);
  --track:     oklch(0.30 0.02 168);
  --canvas:    radial-gradient(120% 80% at 50% -10%, oklch(0.24 0.03 160), oklch(0.13 0.018 170));
  --shadow:    0 10px 30px oklch(0.10 0.02 170 / 0.55);
  --shadow-lg: 0 26px 60px oklch(0.06 0.02 170 / 0.6);

  /* type families (fallbacks so the app survives a Google Fonts outage) */
  --disp: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
  --sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- SUNSET (warm dark / golden hour) ----------
   A distinct fixed theme (NOT a clock switch): warm amber neutrals + an amber primary
   action, so it reads unmistakably different from the cool teal Dusk. Only the neutrals,
   the action, and the ambient canvas/shadow are re-tuned warm; the pillar accents
   (--c-strength / -cond / -nutri / -body / -recover) inherit Dusk so pillars stay
   recognizable across themes. */
.app-root[data-theme="sunset"], .wimhof-cine[data-theme="sunset"] {
  --bg:        oklch(0.185 0.032 45);
  --surf:      oklch(0.238 0.036 46);
  --surf-2:    oklch(0.292 0.040 48);
  --surf-3:    oklch(0.350 0.044 50);
  --line:      oklch(0.95 0.045 70 / 0.14);
  --line-2:    oklch(0.95 0.045 70 / 0.08);
  --text:      oklch(0.955 0.020 74);
  --dim:       oklch(0.735 0.032 58);
  --dim-2:     oklch(0.580 0.030 52);
  --action:    oklch(0.80 0.160 62);
  --action-d:  oklch(0.72 0.150 58);
  --on-action: oklch(0.235 0.050 55);
  --heat:      oklch(0.68 0.175 32);
  --heat-2:    oklch(0.76 0.150 52);
  --track:     oklch(0.315 0.030 48);
  --canvas:    radial-gradient(120% 80% at 50% -10%, oklch(0.285 0.060 52), oklch(0.145 0.030 38));
  --shadow:    0 10px 30px oklch(0.10 0.03 40 / 0.55);
  --shadow-lg: 0 26px 60px oklch(0.06 0.03 40 / 0.6);
}

/* ---------- DAYLIGHT (light) ---------- */
.app-root[data-theme="light"], .wimhof-cine[data-theme="light"] {
  --bg:        oklch(0.975 0.006 150);
  --surf:      oklch(1 0 0);
  --surf-2:    oklch(0.95 0.008 150);
  --surf-3:    oklch(0.915 0.012 150);
  --line:      oklch(0.3 0.02 150 / 0.13);
  --line-2:    oklch(0.3 0.02 150 / 0.07);
  --text:      oklch(0.26 0.025 158);
  --dim:       oklch(0.46 0.022 150);
  --dim-2:     oklch(0.6 0.018 150);
  --action:    oklch(0.60 0.16 142);
  --action-d:  oklch(0.52 0.15 142);
  --on-action: oklch(0.99 0.01 150);
  --heat:      oklch(0.56 0.17 38);
  --heat-2:    oklch(0.62 0.14 62);
  --c-strength:oklch(0.52 0.15 292);
  --c-cond:    oklch(0.52 0.12 236);
  --c-nutri:   oklch(0.60 0.12 80);
  --c-body:    oklch(0.54 0.10 192);
  --c-recover: oklch(0.55 0.085 322);
  --track:     oklch(0.90 0.012 150);
  --canvas:    radial-gradient(120% 80% at 50% -10%, oklch(0.97 0.01 150), oklch(0.93 0.012 150));
  --shadow:    0 8px 22px oklch(0.4 0.03 150 / 0.12);
  --shadow-lg: 0 22px 48px oklch(0.4 0.04 150 / 0.16);
}