:root {
  /* Colors — strict monochrome (matches reference #f4f4f4 / #201d1d) */
  --color-bg: #f4f4f4;
  --color-ink: #201d1d;
  --color-bg-inv: #201d1d;
  --color-ink-inv: #f4f4f4;
  --color-border: #d8d6d4;
  --color-text-muted: rgba(32, 29, 29, 0.70);
  --color-text-muted-inv: rgba(244, 244, 244, 0.55);

  /* Typography — General Sans self-hosted (TYPE-01) */
  --font-display: 'General Sans', system-ui, ui-sans-serif, Arial, sans-serif;
  --font-sans:    'General Sans', system-ui, ui-sans-serif, Arial, sans-serif;
  --display-weight: 600;
  --display-leading: 0.78;
  --display-tracking: -0.02em;

  /* Display scale */
  --text-hero: clamp(3.2rem, 13vw, 12.5rem);
  --text-nav: clamp(1rem, 1.3vw, 1.3125rem);
  --text-body: 1.125rem;

  /* Spacing */
  --pad-edge: 3em;
  --space-2: 8px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* Motion */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 1.25s;
}

@media screen and (max-width: 767px) {
  :root { --pad-edge: 1.5em; }
}