/* ============================================================
   MyFlowChamp — Design Tokens
   Single source of truth for all CSS custom properties.
   Import this file FIRST on every page, before all other CSS.
   ============================================================ */

:root {

  color-scheme: dark;

  /* ── Colours (Celestial/Orbital) ─────────────────────────── */
  --mfc-bg:          #0B0F1E;
  --mfc-surface:     #141B2E;
  --mfc-surface2:    #1C2540;
  --mfc-indigo:      #6C5CE7;
  --mfc-indigo-dim:  #4C3FB8;
  --mfc-purple:      #6D28D9;
  --mfc-gold:        #F5C264;
  --mfc-mint:        #34D399;
  --mfc-red:         #F0654A;
  --mfc-text:        #F4F1FF;
  --mfc-text-mid:    #9CA3C4;
  --mfc-text-dim:    #6B7290;
  --mfc-border:      rgba(108, 92, 231, 0.20);

  /* ── Typography ──────────────────────────────────────────── */
  --font-display:        'Inter', sans-serif;
  --font-display-serif:  'Fraunces', serif;
  --font-body:           'Inter', sans-serif;
  --font-mono:           'JetBrains Mono', monospace;

  /* ── Spacing (8pt grid) ──────────────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;

  /* ── Radius ──────────────────────────────────────────────── */
  --r-sm:  6px;
  --r-md:  16px;
  --r-lg:  24px;

  /* ── Elevation ───────────────────────────────────────────── */
  --shadow-card: 0 18px 48px rgba(2, 6, 23, 0.36);
  --shadow-glow: 0 0 32px rgba(108, 92, 231, 0.22);

  /* ── Z-index scale ───────────────────────────────────────── */
  --z-sidebar:  45;
  --z-topbar:   40;
  --z-modal:    70;
  --z-toast:   140;

  /* ================================================================
     BACKWARD-COMPATIBILITY ALIASES
     Old variable names mapped to new values so existing
     CSS and JS that reference them continue to work.
     ================================================================ */
  --bg:        var(--mfc-bg);
  --bg-deep:   #020617;
  --surface:   var(--mfc-surface);
  --surface-2: var(--mfc-surface2);
  --line:      var(--mfc-border);
  --text:      var(--mfc-text);
  --muted:     var(--mfc-text-mid);
  --primary:   var(--mfc-indigo);
  --secondary: var(--mfc-indigo-dim);
  --success:   var(--mfc-mint);
  --warning:   var(--mfc-gold);
  --error:     var(--mfc-red);
  --radius:    var(--r-md);
  --shadow:    var(--shadow-card);
}