/**
 * ============================================
 * ABUKAHEY DESIGN TOKENS V6.0
 * ============================================
 *
 * Philosophy: "Structure (Abuka) meets Play (Hey)"
 * Architecture: 3-Tier (Raw → Semantic → Usage)
 *
 * SINGLE SOURCE OF TRUTH - No Legacy!
 *
 * ============================================
 */

:root {
  /* ========================================
   * 1. RAW PALETTE - "The DNA"
   * ======================================== */

  /* ABUKA (Structure/Base) */
  --raw-earth: #272321;
  --raw-stone: #334155;
  --raw-soft: #94A3B8;

  /* HEY (Play/Accent - 6 Core Colors) */
  --raw-jungle: #14B8A6;
  --raw-jungle-text: #0F766E;
  --raw-sun: #FACC15;
  --raw-tiger: #F97316;
  --raw-tiger-text: #C2410C;
  --raw-sky: #38BDF8;
  --raw-sky-text: #0369A1;
  --raw-berry: #EC4899;
  --raw-purple: #A855F7;  /* Mystery Purple - Liga/Group */

  /* CANVAS (Backgrounds) */
  --raw-white: #FFFFFF;
  --raw-mist: #F3F4F6;
  --raw-paper: #F8FAFC;
  --raw-void: #0F172A;

  /* ========================================
   * 2. SEMANTIC TOKENS - "The Usage"
   * ======================================== */

  /* Brand */
  --color-brand-primary: var(--raw-jungle);
  --color-brand-primary-text: var(--raw-jungle-text); /* 5.5:1 on white - AA */
  --color-brand-secondary: var(--raw-earth);
  --color-brand-accent: var(--raw-sun);
  --color-brand-accent-text: #B45309;    /* 4.5:1 on white - AA compliant (amber-700) */
  --color-brand-glow: var(--raw-sun);
  --color-accent-amber: var(--raw-sun);

  /* Text - WCAG Contrast Ratios (on white background) */
  --color-text-main: var(--raw-earth);      /* 15.6:1 on white - AAA */
  --color-text-muted: var(--raw-stone);     /* 10.4:1 on white - AAA */
  --color-text-soft: var(--raw-soft);       /* 2.6:1 on white - Decorative only */
  --color-text-modal: var(--raw-earth);
  --color-text-inverted: var(--raw-white);  /* Use on dark backgrounds */

  /* Surface */
  --color-surface-base: var(--raw-white);
  --color-surface-card: var(--raw-white);
  --color-surface-modal: var(--raw-white);
  --color-surface-subtle: var(--raw-mist);
  --color-surface-paper: var(--raw-paper);
  --color-surface-tint-1: var(--raw-paper);
  --color-surface-tint-2: #F1F5F9;
  --color-surface-tint-3: #EEF3F6;
  --color-surface-inverted: var(--raw-void);

  /* Borders */
  --color-border-default: #E5E7EB;  /* Gray-200 — standard card/panel borders */

  /* Mission Builder */
  --size-mission-builder-tile: 160px;

  /* ========================================
   * 2A. ROLE TOKENS - Northstar Runtime Layer
   * ========================================
   *
   * Additive semantic layer from the reviewed Claude Design contract.
   * Product code should prefer these role tokens for new work. Existing
   * --color-* aliases stay compatibility/runtime foundations until Arc 2.
   */

  /* Control Primary: calm control, selected state, focus, confirm. */
  --control-primary: var(--raw-jungle);
  --control-primary-hover: var(--color-brand-primary-text);
  --control-primary-press: var(--control-primary-hover);
  --control-on-primary: var(--raw-white);
  --control-primary-text: var(--color-brand-primary-text);
  --control-primary-tint: color-mix(in srgb, var(--control-primary) 10%, var(--surface-canvas));
  --control-focus-ring: var(--control-primary);
  /* Calm keyboard focus: semantic surface tint plus one inner line, no outer frame. */
  --control-focus-line: var(--control-primary-text);
  --control-focus-tint: var(--control-primary-tint);
  /* Inner focus line on a filled control surface, where the fill erases the tint.
     Ink measures 6.26:1 on --control-primary and 5.56:1 on --destructive (WCAG
     1.4.11 needs 3:1); --control-on-primary would only reach 2.49:1 on the teal
     fill. The raw ink keeps that measurement true inside [data-theme="dark"]
     scopes, where --content-strong flips to white while the fills stay. */
  --control-focus-line-on-fill: var(--raw-earth);

  /* Action Energy: movement start, quest heat, urgency, streak. */
  --action-energy: var(--raw-tiger);
  --action-energy-hover: var(--action-energy);
  --action-energy-press: var(--action-energy);
  --action-on-energy: var(--raw-white);
  --action-energy-text: var(--color-brand-accent-text);
  --action-energy-tint: color-mix(in srgb, var(--action-energy) 10%, var(--surface-canvas));

  /* Content roles: ink first; colour context comes from coach/mode/reward. */
  --content-strong: var(--color-text-main);
  --content-muted: var(--color-text-muted);
  --content-soft: var(--color-text-soft);
  --content-on-dark: var(--color-text-inverted);
  --content-accent: var(--raw-stone);

  /* White-stage surface roles. */
  --surface-canvas: var(--color-surface-base);
  --surface-stage: var(--color-surface-paper);
  --surface-raised: var(--color-surface-card);
  --surface-sunken: var(--color-surface-subtle);
  --surface-inverted: var(--color-surface-inverted);

  /* Calm border roles. */
  --border-hairline: color-mix(in srgb, var(--content-soft) 16%, transparent);
  --border-soft: var(--color-border-default);
  --border-strong: color-mix(in srgb, var(--content-soft) 38%, var(--surface-canvas));

  /* Active Run Shell: one semantic chrome contract across guided and immersive runs. */
  --run-surface: var(--surface-stage);
  --run-chrome-text: var(--content-strong);
  --run-chrome-muted: var(--content-muted);
  --run-progress-track: color-mix(in srgb, var(--border-soft) 72%, transparent);
  --run-progress-fill: var(--coach-primary);
  --run-progress-glow: var(--coach-glow);
  --run-atmosphere-glow: var(--coach-glow);
  --run-control-surface: color-mix(in srgb, var(--surface-raised) 88%, transparent);
  --run-control-border: var(--border-soft);
  --run-control-text: var(--content-strong);

  /* Coach context defaults. Runtime coachThemeStyle/CampaignShell may override. */
  --coach-primary: var(--control-primary);
  --coach-secondary: var(--control-primary-text);
  --coach-accent: var(--color-brand-accent);
  --coach-glow: color-mix(in srgb, var(--coach-primary) 30%, transparent);
  --coach-tint: color-mix(in srgb, var(--coach-primary) 10%, var(--surface-canvas));
  --coach-shadow: color-mix(in srgb, var(--coach-primary) 40%, transparent);

  /* Runtime mode roles. The full stage/atmosphere system stays below. */
  --mode-prep: var(--mode-prep-arc);
  --mode-flow: var(--mode-flow-arc);
  --mode-focus: var(--mode-focus-arc);
  --mode-power: var(--mode-power-arc);
  --mode-freeze: var(--mode-freeze-arc);
  --mode-breath: var(--color-breath-accent);
  --mode-sleep: var(--mode-sleep-arc);

  /* Reward and gamification stay distinct from brand/control teal. */
  --reward-gold: var(--raw-sun);
  --reward-streak: var(--raw-tiger);
  --reward-pink: var(--raw-berry);
  --reward-on-dark: var(--color-celebration-end);

  --gami-xp: var(--raw-sun);
  --gami-streak: var(--raw-tiger);
  --gami-coins: var(--raw-sky);
  --gami-level: var(--raw-purple);

  /* Status roles are real state only, usually outline + tint. */
  --status-success: var(--control-primary-text);
  --status-success-tint: var(--control-primary-tint);
  --status-warning: var(--color-brand-accent-text);
  --status-warning-tint: color-mix(in srgb, var(--status-warning) 14%, var(--surface-canvas));
  --status-danger: var(--raw-tiger-text);
  --status-danger-tint: color-mix(in srgb, var(--status-danger) 12%, var(--surface-canvas));
  --status-info: var(--raw-sky-text);
  --status-info-tint: color-mix(in srgb, var(--status-info) 12%, var(--surface-canvas));
  --status-neutral: var(--content-soft);
  --status-neutral-tint: var(--surface-sunken);
}

[data-run-tone="dark"] {
  --run-surface: var(--surface-inverted);
  --run-chrome-text: var(--content-on-dark);
  --run-chrome-muted: color-mix(in srgb, var(--content-on-dark) 72%, transparent);
  --run-progress-track: color-mix(in srgb, var(--content-on-dark) 22%, transparent);
  --run-control-surface: color-mix(in srgb, var(--surface-inverted) 72%, transparent);
  --run-control-border: color-mix(in srgb, var(--content-on-dark) 18%, transparent);
  --run-control-text: var(--content-on-dark);
}

/* ========================================
 * 2.1 THEME OVERRIDES (Dark Mode Adaptivity)
 * ========================================
 * Used for dynamic CMS backgrounds (e.g. coach gradients) 
 * to automatically invert UI elements without code changes.
 */
[data-theme="dark"] {
  /* Text */
  --color-text-main: var(--raw-white);
  --color-text-muted: rgba(255, 255, 255, 0.7);
  --color-text-soft: rgba(255, 255, 255, 0.5);
  
  /* Surface (Glassmorphism instead of solid white) */
  --color-surface-base: rgba(255, 255, 255, 0.15);
  --color-surface-card: rgba(255, 255, 255, 0.18);
  --color-surface-subtle: rgba(255, 255, 255, 0.3); /* Stronger glass for Progress Bar Track */
  --color-surface-paper: rgba(255, 255, 255, 0.05);
  --color-surface-tint-1: rgba(255, 255, 255, 0.08);
  --color-surface-tint-2: rgba(255, 255, 255, 0.12);
  --color-surface-tint-3: rgba(255, 255, 255, 0.18);

  /* Borders */
  --color-border-default: rgba(255, 255, 255, 0.1);
  
  /* Soft borders */
  --raw-soft: rgba(255, 255, 255, 0.3);
}

:root {
  /* Gamification */
  --color-game-xp: var(--raw-sun);
  --color-game-streak: var(--raw-tiger);
  --color-game-streak-light: #FDBA74; /* Orange-300 for gradients */
  --color-game-coins: var(--raw-sky);
  --color-game-level: var(--raw-jungle);
  --color-game-vorrat: #F59E0B;        /* Amber-500 - Carryover Gold */
  --color-game-vorrat-light: #FBBF24;  /* Amber-400 - Carryover Gold Light */

  /* Context Colors (used by gradient builders in session/streak UI) */
  --color-session: var(--raw-jungle);   /* Session activity = Brand Teal */
  --color-streak: var(--raw-tiger);     /* Streak = Orange (alias for game-streak) */

  /* Analytics Zones (Bronze/Silber/Gold Performance) */
  --color-zone-bronze: #CD7F32;        /* Bronze - Needs improvement */
  --color-zone-silver: #94A3B8;        /* Silver - Okay/moderate */
  --color-zone-gold: var(--raw-sun);   /* Gold - Excellent */

  /* Features (Icon Background Colors) */
  --color-feature-quest: var(--raw-tiger);     /* Tiger Orange - Action/Energy */
  --color-feature-campaign: var(--raw-sky);    /* Sky Blue - Weltreise */
  --color-feature-studio: var(--raw-berry);    /* Berry Pink - Kreativität */
  --color-feature-profile: var(--raw-jungle);  /* Teal - Persönlich/Growth */
  --color-feature-group: var(--raw-purple);    /* Purple - Mystery/Liga */
  --color-feature-family: var(--raw-jungle);   /* Teal - Familie */

  /* Feedback */
  --color-success: var(--raw-jungle);
  --color-warning: var(--raw-sun);
  --color-error: var(--raw-tiger);
  --color-info: var(--raw-sky);

  /* ========================================
   * 3. CHARACTERS (Tiermeister System)
   * ======================================== */

  --guide-base: #7ED7CB;
  --guide-glow: #F9B233;

  /* ========================================
   * 4. RARITY SYSTEM (Pokemon-Style)
   * ======================================== */

  --color-rarity-common: #57534E;
  --color-rarity-common-border: #D6D3D1;
  --color-rarity-common-bg: #FAFAF9;

  --color-rarity-rare: #2563EB;
  --color-rarity-rare-border: #60A5FA;
  --color-rarity-rare-bg: #EFF6FF;

  --color-rarity-epic: #9333EA;
  --color-rarity-epic-border: #C084FC;
  --color-rarity-epic-bg: #FAF5FF;

  --color-rarity-legendary: #D97706;         /* Amber-600 (Golden, distinct from Tiger) */
  --color-rarity-legendary-border: #FBBF24;  /* Amber-400 */
  --color-rarity-legendary-bg: #FEF3C7;      /* Amber-100 */

  /* ========================================
   * 5. MODE SYSTEM (Session Visual Themes)
   * ========================================
   * Story: "Tageszeiten im Dschungel"
   * - PREP: Immer da (Light Mist - Vorbereitung)
   * - FLOW: Morgen (Rich Teal - Bewegung, Aufwachen)
   * - POWER: Tag (Deep Red - Vulkan-Hitze, Peak Energy)
   * - FOCUS: Nacht (Deep Indigo - Ruhe, Konzentration)
   *
   * Transition: Nur PREP → MODE (kein Wechsel während Session)
   * ======================================== */

  /* PREP MODE (Light - Immer da) */
  --mode-prep-bg: var(--raw-mist);           /* #F3F4F6 */
  --mode-prep-accent: var(--raw-jungle);     /* #14B8A6 */
  --mode-prep-text: var(--raw-earth);        /* #272321 */
  --mode-prep-text-muted: #64748B;           /* Slate 500 */

  /* FLOW MODE (Morgen - Teal) */
  --mode-flow-bg: #155E75;                   /* Cyan 800 */
  --mode-flow-accent: #5EEAD4;               /* Teal 300 */
  --mode-flow-text: #FFFFFF;
  --mode-flow-text-muted: #A5F3FC;           /* Cyan 200 */

  /* FOCUS MODE (Nacht - Indigo) */
  --mode-focus-bg: #1E1B4B;                  /* Indigo 950 */
  --mode-focus-accent: #A5B4FC;              /* Indigo 300 */
  --mode-focus-text: #FFFFFF;
  --mode-focus-text-muted: #C7D2FE;          /* Indigo 200 */

  /* POWER MODE (Tag/Vulkan - Deep Red, warm aber nicht überwältigend) */
  --mode-power-bg: #991B1B;                  /* Red 800 */
  --mode-power-accent: #FCA5A5;              /* Red 300 */
  --mode-power-text: #FFFFFF;
  --mode-power-text-muted: #FECACA;          /* Red 200 */

  /* Mode Transition (PREP → MODE) */
  --mode-transition-duration: 700ms;
  --mode-transition-timing: ease-out;

  /* FREEZE MODE (Kälte - Cyan) */
  --mode-freeze-bg: #0891B2;                  /* Cyan 600 */
  --mode-freeze-accent: #67E8F9;              /* Cyan 300 */
  --mode-freeze-text: #FFFFFF;
  --mode-freeze-text-muted: #A5F3FC;          /* Cyan 200 */

  /* SLEEP MODE (Wind-down - Amethyst, Task 969) */
  --mode-sleep-bg: #2E1065;                   /* Amethyst night (deep-signature) */
  --mode-sleep-accent: #C4B5FD;               /* Lavender 300 (Dark-Glow legibility lift) */
  --mode-sleep-text: #FFFFFF;
  --mode-sleep-text-muted: #B9B2D4;           /* muted lavender */

  /* ========================================
   * MODE RING TOKENS (Task 969 §14.2)
   * Ring = thin track + clockwise arc from top + one leading dot.
   * Light-treatment truth; Color-BG/Dark-Glow lift arc/track/dot to white/light tint.
   * ======================================== */

  /* PREP RING (slate — colour sleeps, no glow) */
  --mode-prep-arc: #7E8896;
  --mode-prep-track: #E5E7EB;
  --mode-prep-dot: #6B7280;
  --mode-prep-deep: #7E8896;                  /* prep has no deep-signature; mirrors arc */

  /* FLOW RING (teal) */
  --mode-flow-arc: #14B8A6;
  --mode-flow-track: #CDEDE7;
  --mode-flow-dot: #0D9488;
  --mode-flow-glow: rgba(20, 184, 166, 0.34);
  --mode-flow-deep: #155E75;

  /* Active Flow runtime roles. Components consume these roles instead of
   * embedding the approved Paper palette or effect recipes locally. */
  --activity-flow-contrast: #FFFFFF;
  --activity-flow-track: rgba(255, 255, 255, 0.28);
  --activity-flow-dot-glow: rgba(255, 255, 255, 0.55);
  --activity-flow-arc-shadow: drop-shadow(0 0 10px rgba(255, 255, 255, 0.45));
  --activity-flow-ring-halo: radial-gradient(circle farthest-corner at 50% 50%, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.28) 48%, rgba(255, 255, 255, 0.08) 58%, rgba(255, 255, 255, 0) 68%);
  --activity-flow-ring-label: rgba(255, 255, 255, 0.82);
  --activity-flow-ring-sublabel: rgba(255, 255, 255, 0.72);
  --activity-flow-cue: rgba(255, 255, 255, 0.88);
  --activity-flow-exhale-glow: rgba(255, 255, 255, 0.60);
  --activity-flow-stage-background: radial-gradient(ellipse 130% 110% at 20% 22%, #5AD2C1 0%, rgba(90, 210, 193, 0) 52%), radial-gradient(ellipse 120% 130% at 100% 58%, #06443F 0%, rgba(6, 68, 63, 0) 66%), radial-gradient(ellipse 90% 80% at 58% 96%, rgba(232, 189, 113, 0.12) 0%, rgba(232, 189, 113, 0) 55%), linear-gradient(155deg, #079B8E 0%, #01766F 55%, #07534E 100%);
  --activity-flow-stage-background-mobile: radial-gradient(circle 210px at 50% 47%, rgba(3, 50, 45, 0.84) 0%, rgba(3, 50, 45, 0.55) 36%, rgba(3, 50, 45, 0) 72%), radial-gradient(ellipse 90% 52% at 50% 38%, #56CEBE 0%, rgba(86, 206, 190, 0) 62%), radial-gradient(ellipse 120% 60% at 50% 102%, #06443F 0%, rgba(6, 68, 63, 0) 70%), linear-gradient(165deg, #079B8E 0%, #01766F 55%, #07534E 100%);
  --activity-flow-stage-background-desktop: radial-gradient(circle 440px at 38% 54%, rgba(3, 50, 45, 0.82) 0%, rgba(3, 50, 45, 0.55) 34%, rgba(3, 50, 45, 0) 70%), radial-gradient(ellipse 130% 110% at 20% 22%, #5AD2C1 0%, rgba(90, 210, 193, 0) 52%), radial-gradient(ellipse 120% 130% at 100% 58%, #06443F 0%, rgba(6, 68, 63, 0) 66%), radial-gradient(ellipse 90% 80% at 58% 96%, rgba(232, 189, 113, 0.12) 0%, rgba(232, 189, 113, 0) 55%), linear-gradient(155deg, #079B8E 0%, #01766F 55%, #07534E 100%);
  --activity-flow-control-label: #0E9384;
  --activity-flow-control-shadow: #083C3647 0 8px 22px;
  --activity-flow-skip-label: rgba(255, 255, 255, 0.80);

  /* FOCUS RING (indigo) */
  --mode-focus-arc: #818CF8;
  --mode-focus-track: #E0E2FB;
  --mode-focus-dot: #6366F1;
  --mode-focus-glow: rgba(129, 140, 248, 0.34);
  --mode-focus-deep: #1E1B4B;

  /* POWER RING (orange, volcano deep) */
  --mode-power-arc: #F97316;
  --mode-power-track: #FCDFCB;
  --mode-power-dot: #EA580C;
  --mode-power-glow: rgba(249, 115, 22, 0.34);
  --mode-power-deep: #991B1B;

  /* FREEZE RING (sky) */
  --mode-freeze-arc: #38BDF8;
  --mode-freeze-track: #D6EEFB;
  --mode-freeze-dot: #0EA5E9;
  --mode-freeze-glow: rgba(14, 165, 233, 0.34);
  --mode-freeze-deep: #0C4A6E;

  /* SLEEP RING (amethyst — User-locked arc #8B5CF6) */
  --mode-sleep-arc: #8B5CF6;
  --mode-sleep-track: #E4DDFB;
  --mode-sleep-dot: #7C3AED;
  --mode-sleep-glow: rgba(139, 92, 246, 0.34);
  --mode-sleep-deep: #2E1065;

  /* Breath runtime roles. Geometry remains component-owned; visual identity is
   * resolved here so the runtime never carries local palette literals. */
  --activity-breath-track: rgb(167 139 250 / 0.22);
  --activity-breath-trace: #C4B5FD;
  --activity-breath-shape-glow: rgb(139 92 246 / 0.9);
  --activity-breath-seconds: #A99FC8;
  --activity-breath-eyebrow: #C4B5FD;
  --activity-breath-cue: #E9F5F3D1;
  --activity-breath-progress-fill: linear-gradient(in oklab 90deg, oklab(81.1% 0.041 -0.093) 0%, oklab(60.6% 0.085 -0.202) 100%);
  --activity-breath-stage-base: #0C1C28;
  --activity-breath-stage-background: radial-gradient(ellipse 80% 70% at 34% 48% in oklab, oklab(35.7% 0.071 -0.12) 0%, oklab(35.7% 0.071 -0.12 / 0%) 62%), radial-gradient(ellipse 70% 60% at 30% 50% in oklab, oklab(85.5% 0.018 0.11 / 6%) 0%, oklab(85.5% 0.018 0.11 / 0%) 55%), radial-gradient(ellipse 140% 120% at 45% 32% in oklab, oklab(23.9% 0.04 -0.086) 0%, oklab(18.9% 0.03 -0.062) 55%, oklab(15.4% 0.022 -0.049) 100%);
  --activity-breath-control-shadow: #00000038 0 8px 24px;
  --activity-breath-control-label: #6E2FA4;

  /* ========================================
   * 5A. WORLD PORTAL TOKENS (Task 786 WP1)
   * ========================================
   * Prototype SSOT: project/prototypes/coach-exercise-ui/world-portal-final-v2.html
   * Components should consume the generic --atmo-* aliases. The data-atmosphere
   * cascade below maps those aliases to concrete flow/focus/power/freeze/breath
   * families without copying prototype values into component code.
   * ======================================== */

  /* Coach honey family */
  --coach-gold: #F7C948;
  --coach-honey: #F59E0B;
  --coach-honey-deep: #E58C05;
  --coach-honey-light: #FEF9C3;
  --coach-honey-cream: #FEF3C7;
  --coach-honey-highlight: #FFF3B0;
  --coach-honey-paper: #FEFBEA;
  --coach-honey-glow-soft: rgba(245, 158, 11, 0.12);
  --coach-honey-glow: rgba(245, 158, 11, 0.35);
  --coach-honey-glow-strong: rgba(245, 158, 11, 0.65);

  /* Bear/Mako identity family */
  --bear-bark: #3F2D22;
  --bear-bark-honey: #3A2410;
  --bear-bark-soft: #6D532F;
  --bear-forest: #476B3D;
  --bear-leaf: #84CC16;
  --bear-leaf-ink: #2C4A1A;

  /* Prep atmosphere - quiet neutral before the active mode world opens */
  --atmo-prep-stage-background:
    radial-gradient(circle at 50% -12%, color-mix(in srgb, var(--atmo-prep-progress-start) 46%, transparent), transparent 34rem),
    radial-gradient(circle at 45% 58%, color-mix(in srgb, var(--color-surface-subtle) 72%, transparent), transparent 22rem),
    radial-gradient(circle at 70% 42%, color-mix(in srgb, var(--color-border-default) 28%, transparent), transparent 20rem),
    linear-gradient(180deg, color-mix(in srgb, var(--atmo-prep-progress-start) 12%, var(--color-surface-base)), color-mix(in srgb, var(--color-surface-subtle) 42%, var(--color-surface-base)));
  --atmo-prep-progress-start: color-mix(in srgb, var(--color-border-default) 72%, var(--color-surface-base));
  --atmo-prep-progress-end: color-mix(in srgb, var(--color-text-muted) 28%, var(--color-border-default));
  --atmo-prep-progress-glow: color-mix(in srgb, var(--color-border-default) 34%, transparent);
  --atmo-prep-counter-background: color-mix(in srgb, var(--color-surface-card) 94%, transparent);
  --atmo-prep-counter-border: color-mix(in srgb, var(--color-border-default) 72%, transparent);
  --atmo-prep-counter-text: var(--color-text-muted);
  --atmo-prep-title-text: var(--color-text-main);
  --atmo-prep-cue-background: color-mix(in srgb, var(--color-surface-card) 96%, transparent);
  --atmo-prep-cue-border: color-mix(in srgb, var(--color-border-default) 68%, transparent);
  --atmo-prep-portal-background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--color-surface-card) 96%, transparent), transparent 42%),
    linear-gradient(160deg, var(--color-surface-base), color-mix(in srgb, var(--color-surface-subtle) 58%, var(--color-surface-base)));
  --atmo-prep-portal-glow: color-mix(in srgb, var(--color-border-default) 28%, transparent);
  --atmo-prep-compass-ring: color-mix(in srgb, var(--color-text-muted) 32%, var(--color-border-default));
  --atmo-prep-compass-ring-muted: color-mix(in srgb, var(--color-border-default) 38%, transparent);
  --atmo-prep-compass-glow: color-mix(in srgb, var(--color-border-default) 24%, transparent);
  --atmo-prep-compass-face:
    radial-gradient(circle at 38% 28%, color-mix(in srgb, var(--color-surface-card) 96%, transparent), color-mix(in srgb, var(--color-surface-subtle) 70%, transparent) 34%, transparent 58%),
    radial-gradient(circle at 50% 62%, color-mix(in srgb, var(--color-surface-base) 95%, transparent) 0%, color-mix(in srgb, var(--color-border-default) 36%, transparent) 100%);

  /* Flow atmosphere - production foundation */
  --atmo-flow-stage-background:
    radial-gradient(circle at 50% -12%, rgba(247, 201, 72, 0.24), transparent 34rem),
    radial-gradient(circle at 42% 64%, rgba(247, 201, 72, 0.16), transparent 22rem),
    radial-gradient(circle at 70% 54%, rgba(247, 201, 72, 0.18), transparent 20rem),
    radial-gradient(circle at 36% 38%, rgba(132, 204, 22, 0.08), transparent 19rem),
    linear-gradient(180deg, rgba(255, 248, 220, 0.98), rgba(255, 252, 239, 0.96));
  --atmo-flow-progress-start: var(--coach-gold);
  --atmo-flow-progress-end: var(--coach-honey);
  --atmo-flow-progress-glow: var(--coach-honey-glow);
  --atmo-flow-counter-background: rgba(241, 252, 234, 0.95);
  --atmo-flow-counter-border: rgba(132, 204, 22, 0.28);
  --atmo-flow-counter-text: var(--bear-leaf-ink);
  --atmo-flow-title-text: var(--bear-bark-honey);
  --atmo-flow-cue-background:
    radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.96), transparent 3.4rem),
    linear-gradient(135deg, rgba(255, 248, 220, 0.98), rgba(241, 252, 234, 0.94));
  --atmo-flow-cue-border: rgba(247, 201, 72, 0.32);
  --atmo-flow-portal-background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.84)),
    linear-gradient(160deg, var(--coach-honey-light), var(--coach-honey-cream));
  --atmo-flow-portal-glow: rgba(247, 201, 72, 0.18);
  --atmo-flow-compass-ring: var(--coach-honey);
  --atmo-flow-compass-ring-muted: rgba(245, 158, 11, 0.14);
  --atmo-flow-compass-glow: rgba(245, 158, 11, 0.34);
  --atmo-flow-compass-face:
    radial-gradient(circle at 38% 28%, rgba(255, 255, 255, 0.98), rgba(255, 247, 204, 0.68) 34%, transparent 58%),
    radial-gradient(circle at 50% 62%, rgba(255, 248, 220, 0.92) 0%, rgba(253, 230, 138, 0.62) 54%, rgba(243, 200, 93, 0.36) 100%);

  /* Atmosphere stubs for later task packages */
  --atmo-focus-stage-background:
    radial-gradient(circle at 50% -12%, rgba(165, 180, 252, 0.30), transparent 34rem),
    radial-gradient(circle at 36% 60%, rgba(165, 180, 252, 0.24), transparent 22rem),
    radial-gradient(circle at 72% 45%, rgba(79, 70, 229, 0.15), transparent 20rem),
    linear-gradient(180deg, rgba(224, 231, 255, 0.98), rgba(239, 242, 255, 0.94));
  --atmo-focus-progress-start: #C7D2FE;
  --atmo-focus-progress-end: #818CF8;
  --atmo-focus-progress-glow: rgba(129, 140, 248, 0.34);
  --atmo-focus-counter-background: rgba(239, 242, 255, 0.94);
  --atmo-focus-counter-border: rgba(129, 140, 248, 0.28);
  --atmo-focus-counter-text: #312E81;
  --atmo-focus-compass-ring: #818CF8;
  --atmo-focus-compass-ring-muted: rgba(129, 140, 248, 0.16);
  --atmo-focus-compass-glow: rgba(129, 140, 248, 0.32);
  --atmo-focus-compass-face:
    radial-gradient(circle at 38% 28%, rgba(255, 255, 255, 0.98), rgba(224, 231, 255, 0.72) 34%, transparent 58%),
    radial-gradient(circle at 50% 62%, rgba(238, 242, 255, 0.92) 0%, rgba(165, 180, 252, 0.42) 100%);

  --atmo-power-stage-background:
    radial-gradient(circle at 50% -12%, rgba(252, 165, 165, 0.30), transparent 34rem),
    radial-gradient(circle at 34% 62%, rgba(252, 165, 165, 0.25), transparent 22rem),
    radial-gradient(circle at 76% 54%, rgba(245, 158, 11, 0.18), transparent 21rem),
    linear-gradient(180deg, rgba(255, 237, 213, 0.98), rgba(255, 242, 238, 0.95));
  --atmo-power-progress-start: #FECACA;
  --atmo-power-progress-end: #F97316;
  --atmo-power-progress-glow: rgba(249, 115, 22, 0.34);
  --atmo-power-counter-background: rgba(255, 237, 213, 0.94);
  --atmo-power-counter-border: rgba(249, 115, 22, 0.26);
  --atmo-power-counter-text: #7C2D12;
  --atmo-power-compass-ring: #F97316;
  --atmo-power-compass-ring-muted: rgba(249, 115, 22, 0.16);
  --atmo-power-compass-glow: rgba(249, 115, 22, 0.34);
  --atmo-power-compass-face:
    radial-gradient(circle at 38% 28%, rgba(255, 255, 255, 0.98), rgba(255, 237, 213, 0.76) 34%, transparent 58%),
    radial-gradient(circle at 50% 62%, rgba(255, 247, 237, 0.94) 0%, rgba(251, 146, 60, 0.36) 100%);

  --atmo-freeze-stage-background:
    radial-gradient(circle at 50% -12%, rgba(103, 232, 249, 0.32), transparent 34rem),
    radial-gradient(circle at 36% 62%, rgba(103, 232, 249, 0.26), transparent 22rem),
    radial-gradient(circle at 76% 48%, rgba(14, 165, 233, 0.17), transparent 20rem),
    linear-gradient(180deg, rgba(207, 250, 254, 0.98), rgba(236, 254, 255, 0.95));
  --atmo-freeze-progress-start: #A5F3FC;
  --atmo-freeze-progress-end: #06B6D4;
  --atmo-freeze-progress-glow: rgba(6, 182, 212, 0.34);
  --atmo-freeze-counter-background: rgba(236, 254, 255, 0.94);
  --atmo-freeze-counter-border: rgba(6, 182, 212, 0.28);
  --atmo-freeze-counter-text: #164E63;
  --atmo-freeze-compass-ring: #06B6D4;
  --atmo-freeze-compass-ring-muted: rgba(6, 182, 212, 0.16);
  --atmo-freeze-compass-glow: rgba(6, 182, 212, 0.34);
  --atmo-freeze-compass-face:
    radial-gradient(circle at 38% 28%, rgba(255, 255, 255, 0.98), rgba(207, 250, 254, 0.76) 34%, transparent 58%),
    radial-gradient(circle at 50% 62%, rgba(236, 254, 255, 0.95) 0%, rgba(103, 232, 249, 0.40) 100%);

  --atmo-breath-stage-background:
    radial-gradient(circle at 50% -12%, rgba(165, 180, 252, 0.32), transparent 34rem),
    radial-gradient(circle at 42% 56%, rgba(94, 234, 212, 0.19), transparent 22rem),
    radial-gradient(circle at 70% 45%, rgba(165, 180, 252, 0.18), transparent 20rem),
    linear-gradient(180deg, rgba(224, 231, 255, 0.74), rgba(240, 253, 250, 0.95));
  --atmo-breath-progress-start: #99F6E4;
  --atmo-breath-progress-end: #14B8A6;
  --atmo-breath-progress-glow: rgba(20, 184, 166, 0.30);
  --atmo-breath-counter-background: rgba(240, 253, 250, 0.94);
  --atmo-breath-counter-border: rgba(20, 184, 166, 0.26);
  --atmo-breath-counter-text: #134E4A;
  --atmo-breath-compass-ring: #14B8A6;
  --atmo-breath-compass-ring-muted: rgba(20, 184, 166, 0.16);
  --atmo-breath-compass-glow: rgba(20, 184, 166, 0.30);
  --atmo-breath-compass-face:
    radial-gradient(circle at 38% 28%, rgba(255, 255, 255, 0.98), rgba(204, 251, 241, 0.74) 34%, transparent 58%),
    radial-gradient(circle at 50% 62%, rgba(240, 253, 250, 0.95) 0%, rgba(94, 234, 212, 0.34) 100%);

  /* Breath visual accent (Task 948 canon): Schlafatem lilac for the breath
   * triangle/firefly. Single alias onto the existing focus-indigo family;
   * the --atmo-breath-* progress family intentionally stays teal. */
  --color-breath-accent: var(--atmo-focus-progress-end);

  /* Generic atmosphere aliases. Components use these, not per-mode values. */
  --atmo-stage-background: var(--atmo-flow-stage-background);
  --atmo-progress-start: var(--atmo-flow-progress-start);
  --atmo-progress-end: var(--atmo-flow-progress-end);
  --atmo-progress-glow: var(--atmo-flow-progress-glow);
  --atmo-counter-background: var(--atmo-flow-counter-background);
  --atmo-counter-border: var(--atmo-flow-counter-border);
  --atmo-counter-text: var(--atmo-flow-counter-text);
  --atmo-title-text: var(--atmo-flow-title-text);
  --atmo-cue-background: var(--atmo-flow-cue-background);
  --atmo-cue-border: var(--atmo-flow-cue-border);
  --atmo-portal-background: var(--atmo-flow-portal-background);
  --atmo-portal-glow: var(--atmo-flow-portal-glow);
  --atmo-compass-ring: var(--atmo-flow-compass-ring);
  --atmo-compass-ring-muted: var(--atmo-flow-compass-ring-muted);
  --atmo-compass-glow: var(--atmo-flow-compass-glow);
  --atmo-compass-face: var(--atmo-flow-compass-face);

  /* ========================================
   * 6. MOMENT-TYPE BACKGROUNDS
   * ========================================
   * Moment-specific backgrounds for the Moment-Type System (Task 601).
   * Used by resolveMomentType() → background field.
   * ======================================== */

  /* Celebration (Post-Reveal: deep warm black, confetti/glow moment) */
  --bg-moment-celebration: radial-gradient(ellipse at center, #1a0a00 0%, #0a0a0a 100%);

  /* Reward (Pre-Reveal: cold-blue suspense, card-flip anticipation) */
  --bg-moment-reward: linear-gradient(135deg, #1a1c29 0%, #0f111a 100%);

  /* Breath (Reflection-Pause: calm teal-green) */
  --bg-moment-breath: linear-gradient(180deg, #134e4a 0%, #0f766e 50%, #115e59 100%);

  /* Story (Book layouts: warm paper cream) */
  --bg-moment-story: #FDF6E3;

  /* Dark (Suspense/Teaser: near-black) */
  --bg-moment-dark: #0a0a0f;

  /* Story Typography */
  --font-story: Georgia, 'Times New Roman', serif;

  /* ========================================
   * 5.1 EXERCISE THEME TOKENS
   * ========================================
   * Story: "Moment-Feelings" - pro Exercise Override
   * - WARM: Coral Glow (Vorbereitung, Wärme)
   * - COLD: Icy Cyan (Stärke, Frische)
   * - Future: hot, calm, energy, power
   *
   * Overrides SessionMode when Exercise has theme property
   * ======================================== */

  /* WARM THEME (Coral - Wärme/Vorbereitung) */
  --theme-warm-bg: #FF8A65;                   /* Deep Orange 300 */
  --theme-warm-bg-gradient: linear-gradient(135deg, #FF7043 0%, #FFAB91 100%);
  --theme-warm-accent: #FFCCBC;               /* Deep Orange 100 */
  --theme-warm-text: #FFFFFF;
  --theme-warm-text-muted: #FFCCBC;

  /* COLD THEME (Icy Cyan - Stärke/Frische) */
  --theme-cold-bg: #00BCD4;                   /* Cyan 500 */
  --theme-cold-bg-gradient: linear-gradient(135deg, #00ACC1 0%, #4DD0E1 100%);
  --theme-cold-accent: #80DEEA;               /* Cyan 200 */
  --theme-cold-text: #FFFFFF;
  --theme-cold-text-muted: #B2EBF2;

  /* Celebration System */
  --color-celebration-start: #FFD700;
  --color-celebration-mid: #FFA500;
  --color-celebration-end: #FFE27A;
  --color-celebration-accent: #EAB308;

  /* Celebration Background (Subtle versions for fullscreen) */
  --color-celebration-bg-start: #FFFDF5;   /* Warm cream */
  --color-celebration-bg-mid: #FFF9E6;     /* Soft gold */
  --color-celebration-bg-end: #FFF4CC;     /* Light gold */

  /* --- 6.1 REWARD CARD TOKENS --- */
  /* Jackpot-Moment: card flip, stamp, trophy-gold CTA */
  --color-reward-stamp: #5ce65c;           /* Neon-green "CHECK!" — arcade energy */
  --shadow-reward-stamp: 0 0 40px rgba(92, 230, 92, 0.4); /* Stamp glow */
  --color-reward-cta-text: #2D2A43;        /* Dark text on gold CTA button */
  --color-reward-cta-start: #FDEBAE;       /* Trophy-gold gradient start (light) */
  --color-reward-cta-end: #D4AF37;         /* Trophy-gold gradient end (metallic) */

  /* ========================================
   * 5.2 EXERCISE CATEGORY COLORS
   * ========================================
   * Data classification colors for exercise categories.
   * Used in admin overview cards and pills.
   * ======================================== */

  --color-category-mobility: #339AF0;
  --color-category-cardio: #FF922B;
  --color-category-kraft: #FF6B6B;
  --color-category-yoga: #9775FA;
  --color-category-neuro: #20C997;
  --color-category-atmung: #94D82D;
  --color-category-spezial: #845EF7;

  /* ========================================
   * 6. SHADOWS & EFFECTS
   * ======================================== */

  /* NOTE: --shadow-sm/md/lg are registered in @theme block in index.css
     to override Tailwind v4 defaults. Direct var() access uses those values. */

  --shadow-brand: 0 8px 16px -2px rgba(20, 184, 166, 0.25);
  --shadow-xp: 0 8px 16px -2px rgba(250, 204, 21, 0.35);
  --shadow-streak: 0 8px 16px -2px rgba(249, 115, 22, 0.35);
  --shadow-celebration: 0 0 30px rgba(251, 191, 36, 0.4);
  --shadow-card: 0 8px 24px -18px rgba(15, 23, 42, 0.42);
  --shadow-raised: 0 16px 40px -24px rgba(15, 23, 42, 0.48);
  --shadow-mobile-nav: 0 -10px 30px color-mix(in srgb, var(--raw-void) 8%, transparent);

  /* GLOW SYSTEM (Active Mode - "The World")
   * Intensiv, magisch, Kind-freundlich
   * Pure Glow ohne Offset (0 0) für leuchtenden Effekt
   * Verwendet in Activity-Layer (Timer, ProgressBar, etc.)
   */
  --glow-brand: 0 0 15px rgba(20, 184, 166, 0.7);
  --glow-xp: 0 0 15px rgba(250, 204, 21, 0.8);
  --glow-streak: 0 0 10px rgba(249, 115, 22, 0.8);
  --glow-celebration: 0 0 30px 10px rgba(255, 200, 0, 0.5),
                      0 0 60px 20px rgba(255, 150, 0, 0.3);
  /* SVG-compatible version (filter: drop-shadow can't use spread, so we chain two) */
  --glow-celebration-filter: drop-shadow(0 0 30px rgba(255, 200, 0, 0.6)) drop-shadow(0 0 60px rgba(255, 150, 0, 0.4));

  /* RARITY SHADOWS (Pokemon-style glow for collectibles)
   * Used in HeroCard for badge/item rarity display
   */
  --shadow-rarity-rare: 0 0 20px rgba(59, 130, 246, 0.3);      /* Blue glow */
  --shadow-rarity-epic: 0 0 20px rgba(168, 85, 247, 0.3);      /* Purple glow */
  --shadow-rarity-legendary: 0 0 24px rgba(245, 158, 11, 0.4); /* Gold glow */
  --shadow-floating: 0 16px 48px -8px rgba(39, 35, 33, 0.15), 0 8px 16px -4px rgba(39, 35, 33, 0.08);

  /* Page-Turn Shadows (MagicBook spread effect) */
  --shadow-page-turn-right: 20px 0 50px rgba(0, 0, 0, 0.5);
  --shadow-page-turn-left: -20px 0 50px rgba(0, 0, 0, 0.5);

  /* Glow Effects (Campaign cards) */
  --shadow-glow-reward: 0 0 50px rgba(255, 255, 255, 0.2);
  --shadow-dot-indicator: 0 0 15px currentColor;

  /* Text Shadow (for HUD/overlay text legibility) */
  --shadow-text-sm: 0 1px 4px rgba(0, 0, 0, 0.3);
  --shadow-text-md: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-text-lg: 0 4px 12px rgba(0, 0, 0, 0.2);
  --shadow-text-hud: 0 2px 12px rgba(0, 0, 0, 0.6);
  --shadow-text-hud-strong: 0 4px 24px rgba(0, 0, 0, 0.7);

  /* Glass */
  --glass-bg: rgba(255, 255, 255, 0.12);
  --glass-bg-dark: rgba(0, 0, 0, 0.25);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-blur: 40px;

  /* ========================================
   * 7. BORDER RADIUS
   * ======================================== */

  /* NOTE: Tailwind utilities (rounded-sm etc.) are defined via @theme inline
     in index.css using calc(var(--radius)). These are kept for direct var() access. */
  --radius-full: 9999px;
  /* Bounded section-title surfaces; independent of the global radius scale. */
  --radius-section: 0.75rem;

  /* ========================================
   * 8. MOTION SYSTEM
   * ======================================== */

  --dur-instant: 100ms;
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 350ms;
  --dur-slower: 500ms;

  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.6, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ========================================
   * 9. TYPOGRAPHY
   * ======================================== */

  --font-display: 'Baloo Bhai 2', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --text-3xs: 0.5rem;    /* 8px — Densest UI (badge counters, secondary meta) */
  --text-2xs: 0.625rem;  /* 10px — Admin-dense UI (labels, counters) */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --text-7xl: 4.5rem;

  /* Admin heading roles (g-080 §2.2, 1221 decisions D1/D3). The display face (Baloo 800) carries
     only the page title, the sheet title and the section heading; every heading below 28px is a
     subsection on the body face (Outfit 600). */
  --type-page-title: 2.375rem;       /* 38px */
  --type-sheet-title: 2rem;          /* 32px */
  --type-section-title: 1.75rem;     /* 28px */
  --type-subsection-title: 1.25rem;  /* 20px */
  --heading-tracking: -0.027em;

  /* ========================================
   * 10. SPACING
   * ======================================== */

  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  --touch-target-min: 44px;

  /* ========================================
   * 11. ACCESSIBILITY
   * ======================================== */

  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;
  --focus-ring-color: var(--raw-jungle);
  --disabled-opacity: 0.5;

  /* ========================================
   * 12. Z-INDEX SCALE
   * ======================================== */

  --z-below: -1;
  --z-base: 0;
  --z-elevated: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 300;
  --z-toast: 400;
  --z-tooltip: 500;
  --z-overlay: 600;

  /* ========================================
   * 13. NODE STATE GRADIENTS (Locked Fallback)
   * ======================================== */

  /* Locked (Gray) — only state-based gradient kept.
     Active/Completed/Unlocked colors are now derived from coaches.json
     via coachColors.ts (SSOT). */
  --node-locked-light: #E5E5E5;
  --node-locked-mid: #D0D0D0;
  --node-locked-dark: #B8B8B8;
  --node-locked-shadow: #999999;


  /* ========================================
   * 14. STATE TOKENS
   * ======================================== */

  --color-state-locked: #94A3B8;     /* Soft blue-gray - friendly for kids UI */
  --color-state-locked-light: #CBD5E1; /* Lighter variant for locked gradients */

  /* ========================================
   * 15. LANDING PAGE TOKENS
   * ======================================== */

  /* Passport (World Tour Animation) - Using existing tokens */
  --landing-passport-bg: var(--raw-earth);        /* Dark backdrop */
  --landing-passport-cover: var(--raw-void);      /* Navy blue cover */
  --landing-passport-paper: var(--raw-paper);     /* Paper background */
  
  /* World Map */
  --landing-map-bg: var(--raw-sky);               /* Sky blue map background */

  /* ========================================
   * 16. HEALTH SCALE — "Klärungsstand" (Task 1117 · Cockpit standard)
   * ========================================
   * Five-step clarity scale for the TypedTile status dot + word. Additive and
   * intentionally NOT a warning-alias (decision 4): `partial` reads calmer than
   * the loud raw-sun warning, and `toothless` is a violet kept far from
   * missing-red so the two never blur — it also carries a dashed second-coding
   * in the component. The base value is the dot + text ink (all AA on white);
   * the `-soft` value is the tinted surface wash. `neutral` is the honest
   * "—" / by-design grey, never green.
   * ======================================== */

  --health-present: #237a50;         /* steht — present and effective (green) */
  --health-present-soft: #edf9f2;
  --health-partial: #9a5c06;         /* teilweise — declared, gaps named (muted amber) */
  --health-partial-soft: #fff8e8;
  --health-toothless: #6f4d92;       /* ohne Biss — exists, enforces nothing (violet) */
  --health-toothless-soft: #f6f1fb;
  --health-missing: #9f2f37;         /* fehlt — not present (muted rose) */
  --health-missing-soft: #fff0f1;
  --health-neutral: #6f6b66;         /* — — by design / unavailable (never green) */
  --health-neutral-soft: #f4f3f1;

  /* ========================================
   * CHART SERIES (Admin analytics)
   * Two stacked series; both clear 3:1 against the canvas as graphics.
   * ======================================== */

  --chart-series-1: var(--control-primary-text);      /* Arbeitsanteil; single-series bars */
  --chart-series-2: var(--color-brand-accent-text);   /* Kontext-Miete; the brand accent, never energy orange */
}

/* World Portal atmosphere cascade.
 * ActivityStage can set `data-atmosphere` and keep all component styling on
 * generic --atmo-* aliases.
 */
[data-atmosphere="prep"] {
  --atmo-stage-background: var(--atmo-prep-stage-background);
  --atmo-progress-start: var(--atmo-prep-progress-start);
  --atmo-progress-end: var(--atmo-prep-progress-end);
  --atmo-progress-glow: var(--atmo-prep-progress-glow);
  --atmo-counter-background: var(--atmo-prep-counter-background);
  --atmo-counter-border: var(--atmo-prep-counter-border);
  --atmo-counter-text: var(--atmo-prep-counter-text);
  --atmo-title-text: var(--atmo-prep-title-text);
  --atmo-cue-background: var(--atmo-prep-cue-background);
  --atmo-cue-border: var(--atmo-prep-cue-border);
  --atmo-portal-background: var(--atmo-prep-portal-background);
  --atmo-portal-glow: var(--atmo-prep-portal-glow);
  --atmo-compass-ring: var(--atmo-prep-compass-ring);
  --atmo-compass-ring-muted: var(--atmo-prep-compass-ring-muted);
  --atmo-compass-glow: var(--atmo-prep-compass-glow);
  --atmo-compass-face: var(--atmo-prep-compass-face);
}

[data-atmosphere="flow"] {
  --atmo-stage-background: var(--atmo-flow-stage-background);
  --atmo-progress-start: var(--atmo-flow-progress-start);
  --atmo-progress-end: var(--atmo-flow-progress-end);
  --atmo-progress-glow: var(--atmo-flow-progress-glow);
  --atmo-counter-background: var(--atmo-flow-counter-background);
  --atmo-counter-border: var(--atmo-flow-counter-border);
  --atmo-counter-text: var(--atmo-flow-counter-text);
  --atmo-title-text: var(--atmo-flow-title-text);
  --atmo-cue-background: var(--atmo-flow-cue-background);
  --atmo-cue-border: var(--atmo-flow-cue-border);
  --atmo-portal-background: var(--atmo-flow-portal-background);
  --atmo-portal-glow: var(--atmo-flow-portal-glow);
  --atmo-compass-ring: var(--atmo-flow-compass-ring);
  --atmo-compass-ring-muted: var(--atmo-flow-compass-ring-muted);
  --atmo-compass-glow: var(--atmo-flow-compass-glow);
  --atmo-compass-face: var(--atmo-flow-compass-face);
}

[data-atmosphere="focus"] {
  --atmo-stage-background: var(--atmo-focus-stage-background);
  --atmo-progress-start: var(--atmo-focus-progress-start);
  --atmo-progress-end: var(--atmo-focus-progress-end);
  --atmo-progress-glow: var(--atmo-focus-progress-glow);
  --atmo-counter-background: var(--atmo-focus-counter-background);
  --atmo-counter-border: var(--atmo-focus-counter-border);
  --atmo-counter-text: var(--atmo-focus-counter-text);
  --atmo-title-text: var(--color-text-main);
  --atmo-cue-background: var(--color-surface-card);
  --atmo-cue-border: var(--atmo-focus-counter-border);
  --atmo-portal-background: var(--color-surface-card);
  --atmo-portal-glow: var(--atmo-focus-progress-glow);
  --atmo-compass-ring: var(--atmo-focus-compass-ring);
  --atmo-compass-ring-muted: var(--atmo-focus-compass-ring-muted);
  --atmo-compass-glow: var(--atmo-focus-compass-glow);
  --atmo-compass-face: var(--atmo-focus-compass-face);
}

[data-atmosphere="power"] {
  --atmo-stage-background: var(--atmo-power-stage-background);
  --atmo-progress-start: var(--atmo-power-progress-start);
  --atmo-progress-end: var(--atmo-power-progress-end);
  --atmo-progress-glow: var(--atmo-power-progress-glow);
  --atmo-counter-background: var(--atmo-power-counter-background);
  --atmo-counter-border: var(--atmo-power-counter-border);
  --atmo-counter-text: var(--atmo-power-counter-text);
  --atmo-title-text: var(--color-text-main);
  --atmo-cue-background: var(--color-surface-card);
  --atmo-cue-border: var(--atmo-power-counter-border);
  --atmo-portal-background: var(--color-surface-card);
  --atmo-portal-glow: var(--atmo-power-progress-glow);
  --atmo-compass-ring: var(--atmo-power-compass-ring);
  --atmo-compass-ring-muted: var(--atmo-power-compass-ring-muted);
  --atmo-compass-glow: var(--atmo-power-compass-glow);
  --atmo-compass-face: var(--atmo-power-compass-face);
}

[data-atmosphere="freeze"] {
  --atmo-stage-background: var(--atmo-freeze-stage-background);
  --atmo-progress-start: var(--atmo-freeze-progress-start);
  --atmo-progress-end: var(--atmo-freeze-progress-end);
  --atmo-progress-glow: var(--atmo-freeze-progress-glow);
  --atmo-counter-background: var(--atmo-freeze-counter-background);
  --atmo-counter-border: var(--atmo-freeze-counter-border);
  --atmo-counter-text: var(--atmo-freeze-counter-text);
  --atmo-title-text: var(--color-text-main);
  --atmo-cue-background: var(--color-surface-card);
  --atmo-cue-border: var(--atmo-freeze-counter-border);
  --atmo-portal-background: var(--color-surface-card);
  --atmo-portal-glow: var(--atmo-freeze-progress-glow);
  --atmo-compass-ring: var(--atmo-freeze-compass-ring);
  --atmo-compass-ring-muted: var(--atmo-freeze-compass-ring-muted);
  --atmo-compass-glow: var(--atmo-freeze-compass-glow);
  --atmo-compass-face: var(--atmo-freeze-compass-face);
}

[data-atmosphere="breath"] {
  --atmo-stage-background: var(--atmo-breath-stage-background);
  --atmo-progress-start: var(--atmo-breath-progress-start);
  --atmo-progress-end: var(--atmo-breath-progress-end);
  --atmo-progress-glow: var(--atmo-breath-progress-glow);
  --atmo-counter-background: var(--atmo-breath-counter-background);
  --atmo-counter-border: var(--atmo-breath-counter-border);
  --atmo-counter-text: var(--atmo-breath-counter-text);
  --atmo-title-text: var(--color-text-main);
  --atmo-cue-background: var(--color-surface-card);
  --atmo-cue-border: var(--atmo-breath-counter-border);
  --atmo-portal-background: var(--color-surface-card);
  --atmo-portal-glow: var(--atmo-breath-progress-glow);
  --atmo-compass-ring: var(--atmo-breath-compass-ring);
  --atmo-compass-ring-muted: var(--atmo-breath-compass-ring-muted);
  --atmo-compass-glow: var(--atmo-breath-compass-glow);
  --atmo-compass-face: var(--atmo-breath-compass-face);
}

/* ========================================
 * BASE STYLES
 * ======================================== */

body {
  font-family: var(--font-body);
  background: var(--color-surface-base);
  color: var(--color-text-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
}

/* Tabular Numbers */
.num {
  font-variant-numeric: tabular-nums;
}

/* Touch Targets */
button, .btn, .interactive {
  min-height: var(--touch-target-min);
  min-width: var(--touch-target-min);
}

/* Radix UI Primitives Override
 * These components have their own sizing - don't apply global touch targets.
 * Checkbox: 18x18px, Switch: 44x24px (defined in component styles)
 */
[data-radix-checkbox-root],
[data-radix-switch-root],
[role="checkbox"],
[role="switch"] {
  min-height: unset;
  min-width: unset;
}

/* ========================================
 * ANIMATIONS
 * ======================================== */

@keyframes breathe-subtle {
  0%, 100% { transform: scale(1.00); }
  50% { transform: scale(1.03); }
}

.animate-breathe-subtle {
  animation: breathe-subtle 4s ease-in-out infinite;
}

/* ========================================
 * REDUCED MOTION
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  *, .animate-breathe-subtle {
    animation: none !important;
    transition: none !important;
  }
}

/* ========================================
 * SCROLLBAR UTILITIES
 * ======================================== */

.scrollbar-hide {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;     /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;             /* Chrome, Safari, Opera */
}

/* ========================================
 * CELEBRATION BACKGROUNDS
 * ======================================== */

.bg-celebration-gradient {
  background: linear-gradient(
    180deg,
    var(--color-celebration-bg-start) 0%,
    var(--color-celebration-bg-mid) 50%,
    var(--color-celebration-bg-end) 100%
  );
}

/* Shimmer Sweep Animation (One-time on mount) */
@keyframes shimmer-sweep {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.shimmer-sweep {
  position: relative;
  overflow: hidden;
}

.shimmer-sweep::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%
  );
  animation: shimmer-sweep 1.2s ease-out forwards;
  pointer-events: none;
}

/* Reduced motion: no shimmer */
@media (prefers-reduced-motion: reduce) {
  .shimmer-sweep::after {
    animation: none;
    display: none;
  }
}

/* ========================================
 * CONFETTI ANIMATIONS (GPU-accelerated)
 * ======================================== */

@keyframes confetti-fall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(120vh) rotate(720deg);
    opacity: 0;
  }
}

@keyframes confetti-burst {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }
  30% {
    opacity: 1;
    transform: translate(calc(var(--dx) * 0.5), calc(var(--dy) * 0.5)) rotate(calc(var(--spin) * 0.3)) scale(1.1);
  }
  100% {
    transform: translate(var(--dx), var(--dy)) rotate(var(--spin)) scale(0.3);
    opacity: 0;
  }
}

@keyframes charge-float {
  0% {
    transform: translateY(0) scale(0);
    opacity: 0;
  }
  20% {
    opacity: 1;
    transform: translateY(-10px) scale(1);
  }
  100% {
    transform: translateY(-80px) scale(0);
    opacity: 0;
  }
}

.confetti-piece {
  will-change: transform, opacity;
}

.charge-particle {
  will-change: transform, opacity;
}