:root {
  /* Colors */
  --bg-page: #000000;
  --bg-surface: #0d0d0d;
  --bg-card-dark: #1a1a1a;
  --bg-card-light: #f3f1ec;
  --text-primary: #ffffff;
  --text-secondary: #9a9a9a;
  --text-on-light: #111111;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --accent-gradient: linear-gradient(135deg, #9333ea 0%, #0891b2 50%, #ec4899 100%);

  /* Radius */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --radius-full: 999px;
  --radius-frame: 48px;

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-4xl: 120px;

  /* Typography */
  --font-display: 'Clash Display', 'General Sans', 'Cabinet Grotesk', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Space Mono', 'IBM Plex Mono', monospace;
  --font-body: 'Inter', 'Neue Montreal', system-ui, sans-serif;

  /* Transitions */
  --ease-primary: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-secondary: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-hover: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-smooth: ease-out;

  /* Duration */
  --duration-fast: 220ms;
  --duration-normal: 450ms;
  --duration-slow: 700ms;
  --duration-hero: 1400ms;
}

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