:root {
  /* Colors */
  --color-bg: #0a0a0a;
  --color-bg-elevated: #111111;
  --color-bg-card: #161616;
  --color-accent: #4ade80;
  --color-accent-dim: rgba(74, 222, 128, 0.15);
  --color-accent-glow: rgba(74, 222, 128, 0.4);
  --color-text: #f5f5f5;
  --color-text-muted: #a0a0a0;
  --color-text-dim: #666666;
  --color-border: #222222;

  /* Typography */
  --font-heading: 'Clash Display', sans-serif;
  --font-body: 'Outfit', sans-serif;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

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

  /* Easing & Duration */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 600ms;

  /* Glow Effects */
  --glow-sm: 0 0 8px var(--color-accent-glow);
  --glow-md: 0 0 16px var(--color-accent-glow);
  --glow-lg: 0 0 32px var(--color-accent-glow);
}

/* Grain texture overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}