:root {
  /* Colors */
  --color-bg: #ffffff;
  --color-text: #111111;
  --color-text-muted: #5c5c5c;
  --color-border: #e5e5e5;
  --color-border-strong: #cccccc;
  --color-accent: #016dec;
  --color-accent-hover: #0154b3;
  --color-accent-on: #ffffff;
  --color-surface: #fafafa;
  --color-grid-line: rgba(17, 17, 17, 0.06);

  /* Type families */
  --font-sans: "Geist", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Noto Serif Display", "Newsreader", Georgia, serif;
  --font-mono: "Geist Mono", "SF Mono", Menlo, monospace;

  /* Type scale (mobile-first, fluid) */
  --fs-meta: 0.8125rem;
  --fs-body: 1.0625rem;
  --fs-body-lg: clamp(1.125rem, 1rem + 0.4vw, 1.25rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-h2: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
  --fs-h1: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem);
  --fs-hero: clamp(2.75rem, 1.8rem + 4vw, 5.5rem);

  --lh-body: 1.6;
  --lh-heading: 1.15;
  --ls-heading: -0.01em;
  --ls-serif: -0.02em;
  --ls-meta: 0.04em;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 9rem;

  /* Layout */
  --content-max: 72rem;
  --text-max: 42rem;

  /* Shape */
  --radius-sm: 0;
  --radius-md: 0;

  /* Motion */
  --transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-base: 300ms cubic-bezier(0.16, 1, 0.3, 1);
  --reveal-distance: 12px;
  --reveal-duration: 600ms;
}