/* ═══════════════════════════════════════════════════════════════════
   FIZZEEK — Phase color map
   The 4-phase program (Muscle Memory → Shape & Structure → Strength &
   Form → Skulpt) uses one accent color per phase. Each phase page +
   the workouts.html selector + the phase-dropdown on muscle-memory.html
   all read from this single source.
   Phase 1 special-cases to neutral text in light mode (white-on-white
   wouldn't read).
   Depends on css/fizzeek-tokens.css being loaded first.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --phase-1: #ffffff; /* Muscle Memory   — neutral / beginner */
  --phase-2: #E6D1A3; /* Shape & Structure — warm sand        */
  --phase-3: #FF8A00; /* Strength & Form — vivid orange       */
  --phase-4: #BFA34D; /* Skulpt          — deep gold          */

  /* Soft tinted backgrounds for badges / left accents in tinted state */
  --phase-1-tint: rgba(255,255,255,0.06);
  --phase-2-tint: rgba(230,209,163,0.10);
  --phase-3-tint: rgba(255,138,0,0.10);
  --phase-4-tint: rgba(191,163,77,0.10);
}

/* Light-mode counterparts — Phase 1 swaps to black (otherwise white-on-white).
   Other phases stay readable on the lighter palette without modification. */
body.light-mode{
  --phase-1: #000000;
  --phase-2: #8B6A14;
  --phase-3: #C66800;
  --phase-4: #8B6A14;

  --phase-1-tint: rgba(0,0,0,0.06);
  --phase-2-tint: rgba(139,106,20,0.10);
  --phase-3-tint: rgba(198,104,0,0.10);
  --phase-4-tint: rgba(139,106,20,0.10);
}

/* ── Helper class — apply [data-phase="N"] to inherit phase variables ──
   Any element with [data-phase="N"] gets `--phase-accent` and `--phase-tint`
   set automatically. Used by .fz-phase-card and the phase-dropdown rows. */
[data-phase="1"]{ --phase-accent: var(--phase-1); --phase-tint: var(--phase-1-tint); }
[data-phase="2"]{ --phase-accent: var(--phase-2); --phase-tint: var(--phase-2-tint); }
[data-phase="3"]{ --phase-accent: var(--phase-3); --phase-tint: var(--phase-3-tint); }
[data-phase="4"]{ --phase-accent: var(--phase-4); --phase-tint: var(--phase-4-tint); }