:root {
  /* Surfaces — warm brown (was cool charcoal) */
  --ink-deep:      oklch(17% 0.022 42);
  --ink-espresso:  oklch(25% 0.028 44);
  --ink-oxblood:   oklch(17% 0.022 42);
  --cream-warm:    oklch(91% 0.024 80);
  --cream-deep:    oklch(85% 0.030 75);

  /* Accents — terracotta primary, olive detail (var name --brass kept for CSS compat) */
  --terracotta:      oklch(62% 0.158 35);
  --terracotta-soft: oklch(68% 0.135 38);
  --brass:           oklch(52% 0.088 128);

  /* Ink */
  --ink-on-dark:        oklch(94% 0.010 72);
  --ink-on-dark-muted:  oklch(76% 0.012 70 / 0.78);
  --ink-on-cream:       oklch(20% 0.018 40);
  --ink-on-cream-muted: oklch(36% 0.018 40 / 0.72);

  /* Hairlines — olive-derived */
  --rule-warm:        oklch(52% 0.088 128 / 0.30);
  --rule-warm-strong: oklch(52% 0.088 128 / 0.50);
  --rule-cream:       oklch(20% 0.018 40 / 0.18);

  /* Type */
  --display: "Gambetta", ui-serif, Georgia, "Times New Roman", serif;
  --body:    "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Spacing scale */
  --gutter:        clamp(20px, 4vw, 80px);
  --section-tight: clamp(64px, 9vw, 128px);
  --section:       clamp(96px, 12vw, 192px);
  --section-wide:  clamp(128px, 16vw, 240px);

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:      180ms;
  --t-base:      280ms;
  --t-slow:      700ms;
  --t-image:     900ms;

  /* Layout */
  --max-line: 64ch;
  --content-max: 1440px;
  --grid-gap: clamp(16px, 2vw, 32px);
}

@media (max-width: 720px) {
  :root {
    --gutter: clamp(18px, 5.4vw, 28px);
    --section-tight: clamp(52px, 14vw, 76px);
    --section: clamp(68px, 18vw, 104px);
    --section-wide: clamp(84px, 22vw, 124px);
    --grid-gap: clamp(18px, 5vw, 28px);
    --max-line: 58ch;
  }
}

@media (max-width: 420px) {
  :root {
    --gutter: 18px;
    --section-tight: 50px;
    --section: 64px;
    --section-wide: 76px;
    --grid-gap: 18px;
  }
}

::selection {
  background: var(--terracotta);
  color: var(--cream-warm);
}

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}