/* ====================================================
   DESIGN TOKENS & CSS VARIABLES
   ==================================================== */
:root {
  /* Typography */
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Dark Theme Palette (Default - High-End Athletic) */
  --bg-deep: #080b11;
  --bg-surface: #0f1520;
  --bg-card: #151d2b;
  --bg-card-hover: #1b2537;
  --bg-card-active: #202c41;
  --bg-overlay: rgba(8, 11, 17, 0.85);

  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-medium: rgba(255, 255, 255, 0.14);
  --border-active: #ff6b00;

  --text-white: #ffffff;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;

  /* Accent Colors */
  --orange-500: #ff6b00;
  --orange-400: #ff8533;
  --orange-600: #e05e00;
  --orange-glow: rgba(255, 107, 0, 0.28);
  --orange-subtle: rgba(255, 107, 0, 0.12);

  --green-500: #10b981;
  --green-400: #34d399;
  --green-glow: rgba(16, 185, 129, 0.28);
  --green-subtle: rgba(16, 185, 129, 0.12);

  --gold-500: #f59e0b;
  --gold-glow: rgba(245, 158, 11, 0.25);
  --gold-subtle: rgba(245, 158, 11, 0.12);

  --cyan-500: #06b6d4;
  --cyan-glow: rgba(6, 182, 212, 0.25);
  --cyan-subtle: rgba(6, 182, 212, 0.12);

  --red-500: #ef4444;
  --red-subtle: rgba(239, 68, 68, 0.15);

  /* Spacing Scale (Generous & Breathable) */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 20px;
  --space-xl: 26px;
  --space-2xl: 34px;

  /* Border Radius */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* Elevation & Shadows */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6);
  --shadow-orange: 0 4px 20px var(--orange-glow);
  --shadow-green: 0 4px 20px var(--green-glow);

  /* Mobile Ergonomics */
  --tap-min: 48px;
  --tap-comfortable: 52px;
  --safe-bottom: env(safe-area-inset-bottom, 16px);
  --nav-height: 68px;
}

/* Light Theme Variables */
[data-theme="light"] {
  --bg-deep: #f5f7fb;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f8fafc;
  --bg-card-active: #f1f5f9;
  --bg-overlay: rgba(15, 23, 42, 0.6);

  --border-subtle: rgba(0, 0, 0, 0.08);
  --border-medium: rgba(0, 0, 0, 0.14);
  --border-active: #ea580c;

  --text-white: #0f172a;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;

  --orange-500: #ea580c;
  --orange-400: #f97316;
  --orange-600: #c2410c;
  --orange-glow: rgba(234, 88, 12, 0.2);
  --orange-subtle: rgba(234, 88, 12, 0.08);

  --green-500: #059669;
  --green-400: #10b981;
  --green-glow: rgba(5, 150, 105, 0.2);
  --green-subtle: rgba(5, 150, 105, 0.08);

  --gold-500: #d97706;
  --gold-glow: rgba(217, 119, 6, 0.2);
  --gold-subtle: rgba(217, 119, 6, 0.08);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.12);
}