:root {
  /* Typography */
  --font-display: 'Bebas Neue', Impact, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  /* Colors */
  --bg-base: #0A0D14;
  --bg-surface: #131722;
  --bg-surface-elevated: rgba(25, 30, 43, 0.6);
  --bg-glass: rgba(19, 23, 34, 0.4);

  --text-primary: #FFFFFF;
  --text-secondary: #8B949E;
  --text-muted: #57606A;

  /* Accent (Iridescent / Gold / Elixir) */
  --accent-gold: #FFB921;
  --accent-elixir: #E035E6;
  --accent-blue: #00A5F9;
  
  --grad-fuse: linear-gradient(135deg, var(--accent-gold) 0%, var(--accent-blue) 100%);
  --grad-elixir: linear-gradient(135deg, var(--accent-elixir) 0%, #8A2BE2 100%);

  /* Animation Easings (Emil Design Constraints) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  
  /* Radii & Borders */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --border-glass: 1px solid rgba(255, 255, 255, 0.08);

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;

  /* Tier colors (S/A/B/C/D/F) */
  --tier-s: #FF4D6D;
  --tier-a: #FF9F1C;
  --tier-b: #FFD60A;
  --tier-c: #06D6A0;
  --tier-d: #4895EF;
  --tier-f: #6C757D;

  /* Status / semantic */
  --success: #06D6A0;
  --warning: #FFB921;
  --danger: #FF4D6D;
  --info: #00A5F9;

  /* Elevation shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.5);

  /* Layout */
  --nav-height: 72px;
  --container-max: 1200px;
}