:root {
  color-scheme: light;

  /* Palette primitives stay here so the visual direction remains swappable. */
  --ink-950: #171816;
  --ink-700: #484b47;
  /* Darkened so the muted role clears WCAG AA on the quiet surface as well as
     the page surface. It stays well below the secondary role. */
  --ink-500: #676a65;
  --paper-100: #f7f5f0;
  --paper-200: #eceae4;
  --paper-300: #d8d5cc;
  --night-950: #0b1220;
  --night-800: #172238;
  --violet-600: #755e8d;
  --violet-400: #a58bbd;
  --white: #ffffff;

  /* Semantic color roles */
  --surface-page: var(--paper-100);
  --surface-quiet: var(--paper-200);
  --surface-emphasis: var(--night-950);
  --surface-emphasis-soft: var(--night-800);
  --text-primary: var(--ink-950);
  --text-secondary: var(--ink-700);
  --text-muted: var(--ink-500);
  --text-on-emphasis: var(--paper-100);
  --text-muted-on-emphasis: var(--paper-300);
  --border-subtle: var(--paper-300);
  --border-on-emphasis: color-mix(in srgb, var(--paper-100) 24%, transparent);
  --accent: var(--violet-600);
  --accent-on-emphasis: var(--violet-400);
  --focus-ring: var(--violet-600);

  /* Typography roles */
  --font-display: Manrope, "Century Gothic", sans-serif;
  --font-body:
    Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --type-display: clamp(3rem, 7vw, 7.5rem);
  --type-headline: clamp(2rem, 4.25vw, 4.75rem);
  --type-subhead: clamp(1.375rem, 2.25vw, 2.25rem);
  --type-body: clamp(1rem, 0.25vw + 0.94rem, 1.1875rem);
  --type-caption: 0.75rem;
  --leading-display: 0.94;
  --leading-headline: 1.02;
  --leading-body: 1.65;
  --tracking-display: -0.055em;
  --tracking-caption: 0.12em;

  /* Space and composition */
  --space-1: 0.375rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 6rem;
  --space-section: clamp(5rem, 11vw, 10rem);
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --content-reading: 44rem;
  --content-wide: 90rem;
  --rule: 1px;

  /* Motion */
  --motion-fast: 160ms;
  --motion-reveal: 520ms;
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
}