/*
 * SaunaTracker Pro — Design Tokens
 * GDL v2.0 · Aligned with colors_and_type.css in backend/website/design-system/
 *
 * SOURCE OF TRUTH: backend/website/design-system/colors_and_type.css
 * This file is served live at /shared/design-tokens.css and is kept identical
 * to colors_and_type.css. To update tokens: edit colors_and_type.css, then
 * copy here. One maintenance point; two file paths for historical and CDN reasons.
 *
 * Backward-compat aliases at the bottom preserve tokens used in existing HTML
 * that predate this token set (--accent, --heat-red-light, --light).
 *
 * Reference: EPIC 41 Phase A3, derived from EPIC 21 (GDL v1.2) + EPIC 28 Phase 0
 */

:root {
  /* ──────────────────────────────────────────────────────────
     1. Brand color primitives
     Red + orange = heat. Blue + cyan = cold. Purple = relax.
     ────────────────────────────────────────────────────────── */

  /* Heat palette */
  --heat-red:        #FF4550;   /* primary brand — hero, sauna chip, CTAs */
  --heat-red-deep:   #F02B38;   /* pressed / active state for heat */
  --heat-orange:     #FF9500;   /* accent, HCEI gauge, warning */

  /* Cold palette */
  --cold-blue:       #007AFF;   /* cold plunge / primary cold */
  --cold-cyan:       #5AC8FA;   /* cold shower, SpO2 drop icon */
  --cold-cyan-soft:  #64D2FF;

  /* Relax + calm */
  --relax-purple:    #AF52DE;   /* relax zone chip */
  --relax-indigo:    #5856D6;   /* AI / coaching */

  /* Health metric accents (SF Symbol conventions) */
  --metric-hr:       #FF3B30;   /* heart.fill */
  --metric-spo2:     #5AC8FA;   /* drop.fill */
  --metric-energy:   #FF9500;   /* flame.fill */
  --metric-hrv:      #30D158;   /* chart.line.uptrend / green tier */

  /* ──────────────────────────────────────────────────────────
     2. Surfaces — dark mode is canonical
     ────────────────────────────────────────────────────────── */
  --dark:            #000000;           /* app / page background */
  --dark-surface:    #1C1C1E;           /* tile base (systemGray6 dark) */
  --dark-elevated:   #2C2C2E;           /* nested / raised */
  --dark-grouped:    #1C1C1E;
  --dark-grouped-2:  #2C2C2E;

  /* Light mode surfaces */
  --light-bg:        #F2F2F7;           /* secondarySystemBackground light */
  --light-surface:   #FFFFFF;           /* tile base light */
  --light-grouped-2: #F2F2F7;

  /* ──────────────────────────────────────────────────────────
     3. Text labels
     ────────────────────────────────────────────────────────── */

  /* Dark context */
  --label-primary:       #FFFFFF;
  --label-secondary:     rgba(255, 255, 255, 0.60);
  --label-tertiary:      rgba(255, 255, 255, 0.40);
  --label-quaternary:    rgba(255, 255, 255, 0.18);

  /* Light context */
  --label-primary-on-light:   #000000;
  --label-secondary-on-light: rgba(0, 0, 0, 0.60);
  --label-tertiary-on-light:  rgba(0, 0, 0, 0.30);

  /* Separators */
  --separator:        rgba(255, 255, 255, 0.15);
  --separator-light:  rgba(0, 0, 0, 0.12);

  /* ──────────────────────────────────────────────────────────
     4. Signature gradients
     ────────────────────────────────────────────────────────── */
  --gradient-heat:  linear-gradient(135deg, #FF4550 0%, #FF9500 100%);
  --gradient-cold:  linear-gradient(135deg, #007AFF 0%, #5AC8FA 100%);
  --gradient-relax: linear-gradient(135deg, #5856D6 0%, #AF52DE 100%);
  --gradient-hrv:   linear-gradient(135deg, #30D158 0%, #34C759 100%);
  --gradient-spo2:  linear-gradient(135deg, #5AC8FA 0%, #64D2FF 100%);

  /* Exposure wheel segment fills */
  --wheel-sauna:     #FF4550;
  --wheel-steam:     #F04D5C;
  --wheel-cold-bath: #2C7DFF;
  --wheel-cold-shwr: #5AC8FA;
  --wheel-relax:     #AF52DE;
  --wheel-inactive:  #3A3A3C;

  /* ──────────────────────────────────────────────────────────
     5. Spacing + radii  (TileConstants + DashboardLayout)
     ────────────────────────────────────────────────────────── */
  --tile-radius:     16px;
  --tile-radius-sm:  12px;   /* feature icon inner */
  --tile-radius-lg:  22px;   /* app-icon squircle */
  --pill-radius:     999px;

  --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;

  --hpad:          24px;   /* canonical horizontal gutter */
  --vspacing:       8px;
  --grid-spacing:  12px;

  --stroke-dark:            1px;
  --stroke-light:           0.5px;
  --stroke-opacity-dark:    0.10;
  --stroke-opacity-light:   0.12;

  /* ──────────────────────────────────────────────────────────
     6. Shadows
     ────────────────────────────────────────────────────────── */
  --tile-shadow:       0 4px 8px rgba(0, 0, 0, 0.08);
  --tile-shadow-lg:    0 12px 40px rgba(0, 0, 0, 0.50);
  --glow-heat:         0 8px 24px rgba(255, 69, 80, 0.30);
  --glow-heat-hover:   0 12px 32px rgba(255, 69, 80, 0.40);
  --glow-cold:         0 8px 24px rgba(0, 122, 255, 0.30);
  --hero-icon-shadow:  0 16px 48px rgba(255, 69, 80, 0.30);

  /* ──────────────────────────────────────────────────────────
     7. Motion
     ────────────────────────────────────────────────────────── */
  --ease-standard:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring-snap: cubic-bezier(0.2, 0.9, 0.2, 1);   /* SwiftUI spring-like */
  --dur-fast:  150ms;
  --dur-base:  250ms;
  --dur-slow:  400ms;

  /* ──────────────────────────────────────────────────────────
     8. Typography — Apple SF system stack
     ────────────────────────────────────────────────────────── */
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
               'Helvetica Neue', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --type-large-title: 700 34px/1.15 var(--font-sans);
  --type-title:       700 28px/1.2  var(--font-sans);
  --type-title2:      700 22px/1.25 var(--font-sans);
  --type-title3:      600 20px/1.3  var(--font-sans);
  --type-headline:    600 17px/1.35 var(--font-sans);
  --type-body:        400 17px/1.5  var(--font-sans);
  --type-callout:     400 16px/1.45 var(--font-sans);
  --type-subheadline: 400 15px/1.45 var(--font-sans);
  --type-footnote:    400 13px/1.4  var(--font-sans);
  --type-caption:     400 12px/1.35 var(--font-sans);
  --type-caption2:    500 11px/1.3  var(--font-sans);
  --type-mono-num:    600 17px/1    var(--font-mono);

  --tracking-eyebrow: 0.08em;
  --tracking-tight:  -0.01em;

  /* ──────────────────────────────────────────────────────────
     9. Backward-compat aliases
     Tokens used in site HTML prior to GDL v2.0.
     Do not remove — existing pages reference these names.
     ────────────────────────────────────────────────────────── */
  --accent:          var(--heat-orange);   /* was #FF9500; now aliases --heat-orange */
  --heat-red-light:  var(--heat-red-deep); /* was #F02B38; renamed for clarity */
  --light:           var(--light-bg);      /* was #F2F2F7 */
}

/* ──────────────────────────────────────────────────────────
   Semantic typography classes
   ────────────────────────────────────────────────────────── */
.t-large-title  { font: var(--type-large-title);  letter-spacing: var(--tracking-tight); }
.t-title        { font: var(--type-title);        letter-spacing: var(--tracking-tight); }
.t-title2       { font: var(--type-title2); }
.t-title3       { font: var(--type-title3); }
.t-headline     { font: var(--type-headline); }
.t-body         { font: var(--type-body); }
.t-callout      { font: var(--type-callout); }
.t-subheadline  { font: var(--type-subheadline); }
.t-footnote     { font: var(--type-footnote); }
.t-caption      { font: var(--type-caption); }
.t-caption2     { font: var(--type-caption2); }
.t-mono-num     { font: var(--type-mono-num); font-variant-numeric: tabular-nums; }

.t-eyebrow {
  font: 600 12px/1.3 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--label-tertiary);
}

.t-gradient-heat {
  background: var(--gradient-heat);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}