:root {
  /* ═══════════ COLORS — CORE PALETTE ═══════════ */
  --color-white:     #ffffff;
  --color-snow:      #f8f9fc;
  --color-mist:      #f1f3f8;
  --color-silver:    #e2e6ef;
  --color-slate:     #8b92a5;
  --color-steel:     #5f6577;
  --color-graphite:  #3a3f4b;
  --color-deep-navy: #031442;
  --color-midnight:  #020e2e;

  /* ═══════════ COLORS — ACCENT ═══════════ */
  --color-indigo:       #6366f1;
  --color-indigo-light: #818cf8;
  --color-indigo-soft:  #eef2ff;
  --color-cyan:         #2be0af;
  --color-cyan-light:   #5eedc6;
  --color-cyan-soft:    #e6fcf5;

  /* ═══════════ COLORS — SEMANTIC ═══════════ */
  --color-win:  #22c55e;
  --color-draw: #eab308;
  --color-loss: #ef4444;

  /* ═══════════ COLORS — GLASS (dark sections only) ═══════════ */
  --glass-white-06: rgba(255, 255, 255, 0.06);
  --glass-white-10: rgba(255, 255, 255, 0.10);
  --glass-white-15: rgba(255, 255, 255, 0.15);
  --glass-navy-04:  rgba(3, 20, 66, 0.04);
  --glass-navy-08:  rgba(3, 20, 66, 0.08);

  /* ═══════════ GRADIENTS ═══════════ */
  --gradient-cta: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #2be0af 100%);
  --gradient-cta-hover: linear-gradient(135deg, #818cf8 0%, #a78bfa 50%, #5eedc6 100%);
  --gradient-hero-glow: radial-gradient(
    ellipse at center bottom,
    rgba(99, 102, 241, 0.15) 0%,
    rgba(43, 224, 175, 0.08) 40%,
    transparent 70%
  );
  --gradient-navy-fade: linear-gradient(180deg, #031442 0%, #020e2e 100%);

  /* ═══════════ SHADOWS (white canvas) ═══════════ */
  --shadow-sm:          0 1px 3px rgba(3, 20, 66, 0.04);
  --shadow-md:          0 4px 16px rgba(3, 20, 66, 0.06);
  --shadow-lg:          0 8px 32px rgba(3, 20, 66, 0.08);
  --shadow-card-hover:  0 12px 40px rgba(99, 102, 241, 0.10);
  --shadow-screenshot:  0 16px 64px rgba(3, 20, 66, 0.12);

  /* ═══════════ TYPOGRAPHY ═══════════ */
  --font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-caption:     13px;
  --text-body-sm:     14px;
  --text-body:        16px;
  --text-body-lg:     18px;
  --text-subheading:  20px;
  --text-heading-sm:  24px;
  --text-heading:     36px;
  --text-heading-lg:  48px;
  --text-display:     56px;

  /* ═══════════ SPACING (base 4px) ═══════════ */
  --spacing-4:   4px;
  --spacing-8:   8px;
  --spacing-12:  12px;
  --spacing-16:  16px;
  --spacing-20:  20px;
  --spacing-24:  24px;
  --spacing-32:  32px;
  --spacing-40:  40px;
  --spacing-48:  48px;
  --spacing-64:  64px;
  --spacing-80:  80px;
  --spacing-96:  96px;
  --spacing-120: 120px;

  /* ═══════════ LAYOUT ═══════════ */
  --page-max-width: 1280px;
  --header-height:  72px;
  --topbar-h:       0px;

  /* ═══════════ BORDER RADIUS ═══════════ */
  --radius-cards:       16px;
  --radius-pills:       999px;
  --radius-buttons:     999px;
  --radius-inputs:      12px;
  --radius-screenshots: 12px;
  --radius-avatar:      50%;

  /* ═══════════ TRANSITIONS ═══════════ */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 0.2s;
  --duration-base: 0.3s;
  --duration-slow: 0.6s;
}