:root {
  /* Palette — street/graffiti: black field, neon green + magenta accents */
  --color-bg: #0a0a0a;
  --color-bg-raised: #141414;
  --color-surface: #111111;
  --color-text: #f5f5f0;
  --color-text-muted: #a8a8a0;
  --color-accent-green: #7ed321;
  --color-accent-green-bright: #a6ff2f;
  --color-accent-green-dim: #5a9c17;
  --color-accent-pink: #ff2fa6;
  --color-accent-pink-dim: #cc2385;
  --color-accent-blue: #3aa8ff;
  --color-accent-yellow: #ffcc1f;
  --color-border: #2a2a2a;
  --color-border-strong: #3d3d3d;

  /* Type */
  --font-display: "Anton", "Archivo Black", "Arial Narrow Bold", sans-serif;
  --font-body: "Work Sans", "Helvetica Neue", Arial, sans-serif;

  --text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.85rem);
  --text-sm: clamp(0.9rem, 0.85rem + 0.2vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --text-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-display-sm: clamp(2.5rem, 1.8rem + 3vw, 4rem);
  --text-display: clamp(3.5rem, 2rem + 7vw, 8rem);

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  --space-section: clamp(4rem, 3rem + 5vw, 9rem);

  /* Motion */
  --duration-fast: 150ms;
  --duration-normal: 350ms;
  --duration-slow: 650ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Misc */
  --radius-sm: 4px;
  --radius-md: 10px;
  --rotate-sticker: -3deg;
  --shadow-hard: 6px 6px 0 var(--color-bg);
}