/* ═══════════════════════════════════════════════════════
   ENORBY Design System — Tokens
   Single source of truth for all visual properties.
   All pages must reference these canonical values.
   ═══════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;

  /* ─── Background Scale ─── */
  --bg-0: #0d0a1a;
  --bg-1: #1a1230;
  --bg-2: #120e24;
  --bg-3: #1e1435;

  /* ─── Text Scale ─── */
  --ink-0: #faf6e9;
  --ink-1: #e8dcc8;
  --ink-2: #a89f8c;
  --ink-3: #7a7060;

  /* ─── Border / Line ─── */
  --line: rgba(212,175,55,.08);
  --line-strong: rgba(212,175,55,.14);

  /* ─── Brand Accents ─── */
  --accent: #f0c950;
  --accent-2: #c084fc;
  --accent-3: #e63946;
  --cta-warm: #d4af37;

  /* ─── Semantic Colors ─── */
  --success: #22c55e;
  --green: #22c55e;
  --error: #ff6b6b;
  --red: #ff6b6b;
  --warning: #f0c950;

  /* ─── Radius ─── */
  --radius-s: 6px;
  --radius-m: 14px;
  --radius-l: 22px;
  --radius-full: 99px;

  /* ─── Spacing (8px base grid) ─── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ─── Layout ─── */
  --maxw: 1240px;
  --maxw-content: 820px;
  --pad: clamp(20px, 3vw, 40px);
  --sidebar-w: 240px;

  /* ─── Typography ─── */
  --font-heading: 'Oxanium', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-ui: 'Archivo', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: clamp(24px, 3vw, 32px);
  --text-3xl: clamp(32px, 4vw, 56px);
  --text-4xl: clamp(44px, 6.4vw, 92px);

  /* ─── Effects ─── */
  --blur: 24px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.3);
  --shadow-md: 0 8px 32px rgba(0,0,0,.4);
  --shadow-lg: 0 16px 64px rgba(0,0,0,.5);

  /* ─── Surface (inset content inside cards) ─── */
  --surface-inset: rgba(255,255,255,.03);

  /* ─── Glass ─── */
  --glass: rgba(13,10,26,.55);
  --glass-border: rgba(212,175,55,.08);
  --glass-highlight: rgba(255,255,255,.03);

  /* ─── Transitions ─── */
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-spring: cubic-bezier(.4,0,.2,1);
  --duration-fast: .2s;
  --duration-base: .3s;
  --duration-slow: .5s;

  /* ─── Brand Mark ─── */
  --brand-gradient: conic-gradient(from 200deg, #f0c950, #c084fc, #e63946, #f0c950);
  --brand-glow: 0 6px 24px rgba(212,175,55,.35);
}

/* ─── Light Mode Tokens ─── */
[data-theme="light"] {
  color-scheme: light;
  --bg-0: #f8f4eb;
  --bg-1: #fffdf7;
  --bg-2: #ede8df;
  --bg-3: #f5f0e4;

  --ink-0: #1a0a2e;
  --ink-1: #2d1b47;
  --ink-2: #5c4a6e;
  --ink-3: #7d6b8f;

  --accent: #a67c00;
  --accent-2: #6d28d9;
  --accent-3: #8b1a2b;
  --cta-warm: #b8860b;

  --success: #16a34a;
  --green: #16a34a;
  --error: #dc2626;
  --red: #dc2626;
  --warning: #b8860b;

  --line: rgba(90,60,0,.08);
  --line-strong: rgba(90,60,0,.14);

  --shadow-sm: 0 2px 8px rgba(90,60,0,.06);
  --shadow-md: 0 8px 32px rgba(90,60,0,.08);
  --shadow-lg: 0 16px 64px rgba(90,60,0,.12);

  --surface-inset: rgba(255,253,247,.85);

  --glass: rgba(255,253,247,.6);
  --glass-border: rgba(166,124,0,.22);
  --glass-highlight: rgba(255,255,255,.5);

  --brand-glow: 0 4px 16px rgba(166,124,0,.25);
}