/* ═══════════════════════════════════════════════════════════════════
   FIZZEEK — Global Design Tokens
   Shared across every page EXCEPT muscle-memory.html (which has its
   own tokens via mm-variables.css / mm-all.css bundle — those values
   mirror these 1:1 so the two can coexist without conflict).
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* ── Flat minimal theme (dark = default) ── */
  --bg:             #000;
  --panel:          #111;
  --panel-border:   rgba(255,255,255,0.08);
  --elevated:       #1a1a1a;
  --elevated-border:rgba(255,255,255,0.10);
  --well:           #0a0a0a;
  --well-border:    rgba(255,255,255,0.12);
  --interactive:    #222;
  --interactive-border:rgba(255,255,255,0.12);
  --interactive-hover:#2a2a2a;

  /* Text hierarchy */
  --text:           #fff;
  --text-muted:     rgba(255,255,255,0.60);
  --text-dim:       rgba(255,255,255,0.40);
  --text-faint:     rgba(255,255,255,0.22);
  --text-inverse:   #000;

  /* ── Semantic colors — use sparingly and only as the legend dictates ── */
  --green:          #22c55e;  /* done / active / positive */
  --green-deep:     #16a34a;
  --gold:           #C9A84C;  /* PR achievements ONLY */
  --gold-light:     #E2C46E;
  --gold-deep:      #8B6A14;  /* PR in light mode */
  --purple:         #A894D2;  /* superset / special sets */
  --red:            #ef4444;  /* destructive / error */
  --yellow:         #eab308;  /* paused / warn */
  --blue:           #7EB5E2;  /* cable-week indicator ONLY */
  --orange:         #E8924A;  /* free-weights indicator ONLY */

  /* ── Spacing (4px rhythm) ── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;

  /* ── Border radius ── */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ── Type scale ── */
  --text-xs:   10px;
  --text-sm:   12px;
  --text-base: 14px;
  --text-lg:   17px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;

  /* ── Shadows — subtle, flat-friendly ── */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.20);
  --shadow-md:   0 2px 8px rgba(0,0,0,0.30);
  --shadow-lg:   0 6px 18px rgba(0,0,0,0.40);

  /* ── Depth tokens — premium-flat depth via layered shadows.
     Replaces backdrop-filter:blur for a truly flat aesthetic. ── */
  --depth-1: 0 1px 2px rgba(0,0,0,0.40);
  --depth-2: 0 4px 12px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.30);
  --depth-3: 0 12px 32px rgba(0,0,0,0.50), 0 2px 6px rgba(0,0,0,0.35);
  --depth-4: 0 24px 60px rgba(0,0,0,0.60), 0 4px 12px rgba(0,0,0,0.40);
  /* Inset highlight — adds a 0.5px hairline along the top edge so flat surfaces
     pick up "edge light" the way physical cards do. Compose with depth-N. */
  --depth-edge: inset 0 0.5px 0 rgba(255,255,255,0.06);

  /* ── Tinted accent backgrounds (for badges, glows, subtle fills) ── */
  --tint-gold-soft:   rgba(201,168,76,0.08);
  --tint-gold-strong: rgba(201,168,76,0.22);
  --tint-green-soft:  rgba(34,197,94,0.10);
  --tint-green-strong:rgba(34,197,94,0.28);
  --tint-purple-soft: rgba(168,148,210,0.10);
  --tint-red-soft:    rgba(239,68,68,0.10);
  --tint-yellow-soft: rgba(234,179,8,0.12);

  /* ── Motion ── */
  --ease-out:    cubic-bezier(0.16,1,0.3,1);
  --ease-in-out: cubic-bezier(0.4,0,0.2,1);
  --duration-fast:   0.15s;
  --duration-normal: 0.25s;
  --duration-slow:   0.4s;

  /* ── Font ── */
  --font-sans: 'Inter', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Light mode overrides — invert surfaces, keep semantic colors identical */
body.light-mode{
  --bg:             #fff;
  --panel:          #fff;
  --panel-border:   rgba(0,0,0,0.08);
  --elevated:       #f5f5f5;
  --elevated-border:rgba(0,0,0,0.08);
  --well:           #f5f5f5;
  --well-border:    rgba(0,0,0,0.12);
  --interactive:    #eee;
  --interactive-border:rgba(0,0,0,0.10);
  --interactive-hover:#e5e5e5;

  --text:        #000;
  --text-muted:  rgba(0,0,0,0.60);
  --text-dim:    rgba(0,0,0,0.40);
  --text-faint:  rgba(0,0,0,0.25);
  --text-inverse:#fff;

  /* Light-mode depth tokens — softer shadows (white surfaces don't need to
     fight as hard for separation). */
  --depth-1: 0 1px 2px rgba(0,0,0,0.06);
  --depth-2: 0 4px 12px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --depth-3: 0 12px 32px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
  --depth-4: 0 24px 60px rgba(0,0,0,0.14), 0 4px 12px rgba(0,0,0,0.08);
  --depth-edge: inset 0 0.5px 0 rgba(0,0,0,0.04);

  /* Tints on light backgrounds — anchored to the deep-gold token for PR. */
  --tint-gold-soft:   rgba(139,106,20,0.08);
  --tint-gold-strong: rgba(139,106,20,0.18);
  --tint-green-soft:  rgba(22,163,74,0.10);
  --tint-green-strong:rgba(22,163,74,0.22);
  --tint-purple-soft: rgba(124,58,237,0.10);
  --tint-red-soft:    rgba(239,68,68,0.10);
  --tint-yellow-soft: rgba(234,179,8,0.16);

  /* Semantic colors stay the same. Gold PR uses --gold-deep in light mode. */
}

/* Respect user's reduced motion preference globally */
@media (prefers-reduced-motion: reduce){
  :root{
    --duration-fast:   0s;
    --duration-normal: 0s;
    --duration-slow:   0s;
  }
}