:root {
  /* ── earth tone palette (raw hues) ───────────── */
  --color-sand-50: #f7f2e9;
  --color-sand-100: #efe6d8;
  --color-sand-200: #e6dac6;
  --color-sand-300: #d8c9b1;
  --color-espresso: #352a22;
  --color-espresso-rgb: 47, 35, 26;
  --color-terracotta: #a9552f;
  --color-terracotta-rgb: 169, 85, 47;
  --color-olive: #6f7a55;
  --color-olive-rgb: 111, 122, 85;

  /* ── semantic roles ──────────────────────────── */
  --color-bg: var(--color-sand-50);
  --color-bg-subtle: var(--color-sand-100);
  --color-fill: var(--color-sand-200);
  --color-fill-strong: var(--color-sand-300);

  --color-text: var(--color-espresso);
  --color-text-muted: rgba(var(--color-espresso-rgb), .68);
  --color-text-subtle: rgba(var(--color-espresso-rgb), .46);

  --color-border: rgba(var(--color-espresso-rgb), .18);
  --color-border-subtle: rgba(var(--color-espresso-rgb), .09);

  --color-accent: var(--color-terracotta);
}
:root {
  /* serif for display/headlines, sans for UI + body */
  --font-serif: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-serif-small: 'EB Garamond', 'Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-ui: 'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-sans: 'Inter', system-ui, sans-serif;

  /* ── font size tokens ────────────────────────────── */
  --text-12px: 12px;
  --text-14px: 14px;
  --text-16px: 16px;
  --text-18px: 18px;
  --text-20px: 20px;
  --text-22px: 22px;
  --text-24px: 24px;
  --text-26px: 26px;
  --text-28px: 28px;
  --text-30px: 30px;
  --text-32px: 32px;
  --text-34px: 34px;
  --text-36px: 36px;
  --text-40px: 40px;
  --text-48px: 48px;
  --text-56px: 56px;
  --text-64px: 64px;
  --text-72px: 72px;
  --text-80px: 80px;
  --text-88px: 88px;
  --text-96px: 96px;
  --text-112px: 112px;
  --text-128px: 128px;

  /* ── font weight tokens ──────────────────────────── */
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;

  /* ── line height tokens ──────────────────────────── */
  --lh-0-92: .92;
  --lh-0-94: .94;
  --lh-1: 1;
  --lh-1-06: 1.06;
  --lh-1-1: 1.1;
  --lh-1-14: 1.14;
  --lh-1-15: 1.15;
  --lh-1-16: 1.16;
  --lh-1-2: 1.2;
  --lh-1-24: 1.24;
  --lh-1-25: 1.25;
  --lh-1-3: 1.3;
  --lh-1-35: 1.35;
  --lh-1-4: 1.4;
  --lh-1-5: 1.5;
  --lh-1-6: 1.6;
  --lh-1-7: 1.7;
  --lh-1-75: 1.75;

  /* ── letter spacing tokens ───────────────────────── */
  --ls-inherit: inherit;
  --ls-0-005em: .005em;
  --ls-neg-0-015em: -.015em;
  --ls-neg-0-01em: -.01em;
  --ls-neg-0-025em: -.025em;
  --ls-neg-0-02em: -.02em;
  --ls-neg-0-03em: -.03em;
  --ls-0-04em: .04em;
  --ls-0-06em: .06em;
  --ls-0-08em: .08em;
  --ls-0-1em: .1em;
  --ls-0-12em: .12em;
  --ls-0-14em: .14em;
  --ls-0-16em: .16em;
  --ls-0-18em: .18em;
  --ls-0-2em: .2em;
}
:root {
  /* spacing ratio scale — 1.5x steps */
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 18px;
  --space-lg: 28px;
  --space-xl: 42px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 144px;
}
:root {
  --container-max: 1440px;
  --container-padding: clamp(20px, 4.4vw, 72px);
}
:root {
  /* ── button padding scale ──────────────────── */
  /* three steps, and nothing off-scale: sm for repeated controls in a row,
     base for a normal button, lg for a page's primary call to action */
  --btn-pad-sm: 9px 18px;
  --btn-pad: 12px 22px;
  --btn-pad-lg: 16px 30px;

  /* ── border radius tokens ──────────────────── */
  --radius-xs: 8px;
  --radius-sm: 24px;
  --radius-md: 32px;
  --radius-pill: 60px;
  --radius-full: 100%;
}
:root {
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  /* for the button ink wipe. --ease-out-expo front-loads ~90% of the travel
     into the first third, which reads as a snap; ink takes evenly and then
     settles, so this stays closer to a constant pace before easing out */
  --ease-ink: cubic-bezier(.38, .06, .2, 1);
}