:root {
  /* Color — editorial paper + crimson accent (Outfit-inspired, not brand copy) */
  --color-bg: #f2ece4;
  --color-bg-deep: #e8e0d4;
  --color-ink: #121212;
  --color-text: #121212;
  --color-muted: #6a645c;
  --color-accent: #d4141a;
  --color-accent-soft: rgba(212, 20, 26, 0.12);
  --color-line: rgba(18, 18, 18, 0.18);
  --color-void: #050505;
  --color-paper: #f2ece4;
  --color-inverse: #f2ece4;

  /* Type */
  --font-display: "Syne", "Arial Narrow", sans-serif;
  --font-body: "IBM Plex Sans", "Helvetica Neue", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Layout */
  --container: 1440px;
  --gutter: clamp(1rem, 2.5vw, 2.5rem);
  --header-h: 4.5rem;

  /* Space */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 5.5rem;
  --space-2xl: 8rem;

  /* Motion tokens (CSS; JS mirrors via GSAP) */
  --ease-primary: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-sharp: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 0.35s;
  --duration-medium: 0.7s;
  --duration-slow: 1.1s;

  --radius-none: 0;
  --focus-ring: 2px solid var(--color-accent);
}