/* ================================================================
   DESIGN TOKENS — Bento Grid Premium (dark fintech)
   CryptoAcademy Landing v2 (Variant B for A/B test)
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  /* ==== COLOR ==== */
  --bg-base: #0a0a0f;
  --bg-card: #131320;
  --bg-card-elevated: #1a1a2e;
  --bg-glass: rgba(19, 19, 32, 0.65);
  --bg-overlay: rgba(10, 10, 15, 0.88);

  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-accent: rgba(0, 255, 136, 0.28);
  --border-purple: rgba(108, 92, 231, 0.28);

  --accent: #00ff88;
  --accent-strong: #00cc6a;
  --accent-dim: rgba(0, 255, 136, 0.12);
  --accent-glow: rgba(0, 255, 136, 0.35);
  --accent-purple: #6c5ce7;
  --accent-purple-dim: rgba(108, 92, 231, 0.14);
  --warn: #ffa502;
  --warn-dim: rgba(255, 165, 2, 0.14);
  --danger: #ff5252;
  --danger-dim: rgba(255, 82, 82, 0.14);

  --text-primary: #ffffff;
  --text-secondary: #c5c5d6;
  --text-muted: #8b8ba6;
  --text-faint: #5e5e76;
  --text-inverse: #0a0a0f;

  /* ==== GRADIENT ==== */
  --gradient-mesh:
    radial-gradient(at 20% 0%, rgba(108,92,231,0.18), transparent 50%),
    radial-gradient(at 80% 100%, rgba(0,255,136,0.14), transparent 55%);
  --gradient-cta: linear-gradient(135deg, #00ff88 0%, #00cc6a 100%);
  --gradient-cta-hover: linear-gradient(135deg, #14ff95 0%, #00e074 100%);
  --gradient-text-soft: linear-gradient(180deg, #ffffff 0%, #c5c5d6 100%);
  --gradient-border-glow: linear-gradient(135deg, rgba(0,255,136,0.6) 0%, rgba(108,92,231,0.6) 100%);

  /* ==== TYPOGRAPHY ==== */
  --font-display: 'Space Grotesk', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 17px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 32px;
  --fs-3xl: 44px;
  --fs-4xl: clamp(40px, 6.5vw, 72px);
  --fs-5xl: clamp(48px, 8vw, 96px);

  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-base: 1.55;
  --lh-relaxed: 1.7;

  --tracking-tight: -0.02em;
  --tracking-base: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;

  /* ==== SPACING (4-base scale) ==== */
  --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-14: 56px; --space-16: 64px; --space-20: 80px;
  --space-24: 96px; --space-28: 112px; --space-32: 128px;

  /* ==== RADIUS ==== */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-pill: 9999px;

  /* ==== SHADOW ==== */
  --shadow-glow-accent: 0 0 60px rgba(0, 255, 136, 0.18);
  --shadow-glow-purple: 0 0 60px rgba(108, 92, 231, 0.18);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.4), 0 8px 32px rgba(0,0,0,0.25);
  --shadow-card-hover: 0 1px 3px rgba(0,0,0,0.4), 0 16px 48px rgba(0,0,0,0.4);
  --shadow-float: 0 24px 60px rgba(0,0,0,0.5);
  --shadow-cta: 0 6px 28px rgba(0, 255, 136, 0.32);
  --shadow-cta-hover: 0 10px 40px rgba(0, 255, 136, 0.5);

  /* ==== TRANSITION ==== */
  --t-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-spring: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ==== Z-INDEX ==== */
  --z-base: 1;
  --z-content: 10;
  --z-sticky: 50;
  --z-nav: 100;
  --z-popup: 500;
  --z-toast: 900;

  /* ==== LAYOUT ==== */
  --container-sm: 640px;
  --container-md: 880px;
  --container-lg: 1180px;
  --container-xl: 1320px;
  --container-padding: 24px;
}

/* Reduced motion users — respect their setting */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-base: 0ms;
    --t-slow: 0ms;
    --t-spring: 0ms;
  }
}