/* ============================================================
   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 ─────────────────────────────────────────────── */
  --mfc-bg:          #0B1220;
  --mfc-surface:     #111827;
  --mfc-surface2:    #182235;
  --mfc-indigo:      #4F46E5;
  --mfc-indigo-dim:  #3730A3;
  --mfc-purple:      #6D28D9;
  --mfc-gold:        #F59E0B;
  --mfc-mint:        #22C55E;
  --mfc-red:         #EF4444;
  --mfc-text:        #F8FAFC;
  --mfc-text-mid:    #94A3B8;
  --mfc-text-dim:    #64748B;
  --mfc-border:      rgba(99, 102, 241, 0.18);

  /* ── Typography ──────────────────────────────────────────── */
  --font-display:    'Inter', sans-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(79, 70, 229, 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);
}