:root {
  /* Colors */
  --red: #D01E1E;
  --red-hover: #e52222;
  --red-glow: rgba(208, 30, 30, 0.15);
  --red-glow-strong: rgba(208, 30, 30, 0.4);
  --black: #0a0a0a;
  --charcoal: #2D2D2D;
  --white: #f5f5f5;
  --grey: #6B6B6B;
  --border: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(208, 30, 30, 0.4);
  --surface: #1a1a1a;
  --surface-hover: rgba(255, 255, 255, 0.03);

  /* Typography */
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* Font sizes — responsive with clamp */
  --text-display: clamp(60px, 12vw, 140px);
  --text-h1: clamp(36px, 6vw, 72px);
  --text-h2: clamp(28px, 4vw, 48px);
  --text-h3: clamp(20px, 3vw, 32px);
  --text-body: clamp(16px, 1.5vw, 18px);
  --text-small: 14px;
  --text-xs: 12px;
  --text-label: 11px;

  /* Spacing */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 60px;
  --space-2xl: 80px;
  --space-3xl: 120px;

  /* Layout */
  --max-width: 1200px;
  --max-width-narrow: 720px;
  --nav-height: 72px;
  --border-radius: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;

  /* Transitions — Dennis Snellenberg inspired */
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-smooth: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-reveal: cubic-bezier(0.77, 0, 0.175, 1);
  --duration-fast: 0.3s;
  --duration-normal: 0.5s;
  --duration-slow: 1s;
}

/* Breakpoints as media queries — used throughout CSS files */
/* Mobile: < 640px (default) */
/* Tablet: >= 640px */
/* Desktop: >= 1024px */
/* Wide: >= 1280px */