:root {
  /* Colors - Black & White Monochrome */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-gray-100: rgba(255, 255, 255, 0.95);
  --color-gray-200: rgba(255, 255, 255, 0.8);
  --color-gray-300: rgba(255, 255, 255, 0.6);
  --color-gray-400: rgba(255, 255, 255, 0.4);
  --color-gray-500: rgba(255, 255, 255, 0.2);
  --color-gray-600: rgba(255, 255, 255, 0.1);
  --color-gray-700: rgba(255, 255, 255, 0.05);
  --color-gray-800: rgba(255, 255, 255, 0.03);

  /* Backgrounds */
  --bg-transparent: transparent;
  --bg-overlay-light: rgba(0, 0, 0, 0.85);
  --bg-overlay-heavy: rgba(0, 0, 0, 0.9);
  --bg-overlay-solid: rgba(0, 0, 0, 0.95);
  --bg-card: rgba(255, 255, 255, 0.03);
  --bg-card-hover: rgba(255, 255, 255, 0.08);

  /* Typography */
  --font-primary: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --font-size-hero: clamp(2.5rem, 6vw, 5rem);
  --font-size-h1: clamp(2rem, 4vw, 3.5rem);
  --font-size-h2: clamp(1.5rem, 3vw, 2.5rem);
  --font-size-h3: clamp(1.2rem, 2vw, 1.75rem);
  --font-size-body: clamp(1rem, 1.2vw, 1.125rem);
  --font-size-small: clamp(0.8rem, 1vw, 0.875rem);
  --font-size-label: 0.75rem;

  /* Spacing */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 32px;
  --space-lg: 64px;
  --space-xl: 96px;
  --space-2xl: 128px;
  --gap: 16px;

  /* Layout */
  --max-width: 1440px;
  --container-padding: 52px;
  --nav-height: 80px;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-medium: 0.4s ease;
  --transition-slow: 0.8s cubic-bezier(0.16, 1, 0.3, 1);

  /* Border */
  --border-subtle: 1px solid rgba(255, 255, 255, 0.1);
  --border-card: 1px solid rgba(255, 255, 255, 0.15);
  --border-hover: 1px solid rgba(255, 255, 255, 0.3);

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;
}