/* === TOKENS === */
:root {
  --color-bg: #060610;
  --color-bg-alt: #0D0D1F;
  --color-surface: #12122A;
  --color-surface-2: #1A1A35;
  --color-border: rgba(255,255,255,0.07);
  --color-border-glow: rgba(99,102,241,0.35);

  --color-accent-primary: #6366F1;
  --color-accent-secondary: #06B6D4;
  --color-accent-tertiary: #10B981;
  --color-highlight: #F59E0B;
  --color-danger: #EF4444;

  --gradient-primary: linear-gradient(135deg, #6366F1 0%, #06B6D4 100%);
  --gradient-web3: linear-gradient(135deg, #06B6D4 0%, #0EA5E9 100%);
  --gradient-ai: linear-gradient(135deg, #8B5CF6 0%, #6366F1 100%);
  --gradient-web: linear-gradient(135deg, #10B981 0%, #06B6D4 100%);
  --gradient-mesh: radial-gradient(circle at 20% 30%, rgba(99,102,241,0.15) 0%, transparent 50%),
                   radial-gradient(circle at 80% 70%, rgba(6,182,212,0.15) 0%, transparent 50%),
                   radial-gradient(circle at 50% 50%, rgba(139,92,246,0.1) 0%, transparent 50%);

  --color-text: #F8FAFC;
  --color-text-muted: rgba(248,250,252,0.55);
  --color-text-subtle: rgba(248,250,252,0.25);

  --font-display: 'Syne', sans-serif;
  --font-body: 'Inter', sans-serif;

  --text-hero: clamp(52px, 8vw, 96px);
  --text-h1: clamp(40px, 5vw, 64px);
  --text-h2: clamp(28px, 3.5vw, 44px);
  --text-h3: 22px;
  --text-lg: 18px;
  --text-base: 16px;
  --text-sm: 14px;
  --text-xs: 11px;

  --pad-section-desktop: 128px;
  --pad-section-mobile: 72px;

  --radius-card: 20px;
  --radius-btn: 50px;
  --radius-input: 14px;
  --radius-img: 16px;
  --radius-badge: 6px;

  --shadow-card: 0 24px 80px rgba(99,102,241,0.10);
  --shadow-glow: 0 0 48px rgba(99,102,241,0.40);
  --shadow-cyan: 0 0 48px rgba(6,182,212,0.30);
  --shadow-green: 0 0 48px rgba(16,185,129,0.25);
  --shadow-hover: 0 32px 96px rgba(99,102,241,0.20);
}