:root {
  --yellow: #edff50;
  --black: #10110f;
  --cream: #f5f4ee;
  --white: #fff;
  --surface: var(--cream);
  --text: var(--black);
  --text-secondary: #595b53;
  --line: #d3d4c9;
  --accent: var(--yellow);
  --focus: #6051de;
  --font-display: Anton, Impact, sans-serif;
  --font-reading: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-detail: 'IBM Plex Mono', monospace;
  --text-xs: .6875rem;
  --text-sm: .8125rem;
  --text-base: 1.125rem;
  --text-lead: clamp(1.4rem, 2.4vw, 2rem);
  --display-xl: clamp(4.8rem, 12.9vw, 11.8rem);
  --display-lg: clamp(3.6rem, 8.6vw, 8rem);
  --display-md: clamp(2.7rem, 5.5vw, 5rem);
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --gutter: clamp(1.25rem, 4.5vw, 5rem);
  --width: 1320px;
  --reading: 65ch;
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-pill: 100px;
  --duration-fast: 160ms;
  --duration-ui: 240ms;
  --duration-reveal: 700ms;
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
}
[data-theme="dark"] {
  --surface: var(--black);
  --text: var(--cream);
  --text-secondary: #b6b8ae;
  --line: #36382f;
  --focus: var(--yellow);
}