:root {
  --ivory: #f4efe6;
  --magnolia: #faf6ee;
  --river-stone: #d9d2c5;
  --cypress: #2f3a33;
  --bourbon: #8b5a2b;
  --bourbon-soft: #a87242;
  --ink: #1a1816;
  --ink-soft: #34302b;
  --line: rgba(26, 24, 22, 0.12);
  --line-strong: rgba(26, 24, 22, 0.24);

  --bg: var(--ivory);
  --bg-raised: var(--magnolia);
  --bg-inverse: var(--ink);
  --fg: var(--ink);
  --fg-muted: rgba(26, 24, 22, 0.62);
  --fg-subtle: rgba(26, 24, 22, 0.46);
  --fg-on-inverse: var(--magnolia);
  --accent: var(--cypress);
  --accent-warm: var(--bourbon);

  --serif: "Fraunces", "Times New Roman", serif;
  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  --mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;

  --fs-1: clamp(0.78rem, 0.76rem + 0.1vw, 0.82rem);
  --fs-2: clamp(0.92rem, 0.88rem + 0.18vw, 1rem);
  --fs-3: clamp(1.05rem, 1rem + 0.25vw, 1.18rem);
  --fs-4: clamp(1.32rem, 1.18rem + 0.7vw, 1.7rem);
  --fs-5: clamp(1.7rem, 1.4rem + 1.2vw, 2.4rem);
  --fs-6: clamp(2.4rem, 1.9rem + 2vw, 3.6rem);
  --fs-7: clamp(3.6rem, 2.4rem + 4vw, 5.6rem);
  --fs-display: clamp(4.6rem, 3rem + 6.4vw, 9.2rem);

  --lh-tight: 1.04;
  --lh-snug: 1.16;
  --lh-normal: 1.32;
  --lh-relaxed: 1.55;
  --lh-loose: 1.78;

  --tr-tight: -0.02em;
  --tr-snug: -0.012em;
  --tr-normal: 0;
  --tr-wide: 0.02em;
  --tr-wider: 0.16em;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 36px;
  --sp-7: 56px;
  --sp-8: 88px;
  --sp-9: 132px;
  --sp-10: 200px;

  --container-xs: 100%;
  --container-sm: 92vw;
  --container-md: 88vw;
  --container-lg: 1040px;
  --container-xl: 1240px;
  --container-xxl: 1480px;

  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1100px;
  --bp-xl: 1440px;
  --bp-xxl: 1760px;

  --radius-1: 2px;
  --radius-2: 6px;
  --radius-3: 14px;
  --radius-pill: 999px;

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-1: 180ms;
  --dur-2: 320ms;
  --dur-3: 520ms;
  --dur-4: 820ms;
  --dur-5: 1200ms;

  --shadow-1: 0 1px 0 var(--line);
  --shadow-2: 0 12px 36px -18px rgba(26, 24, 22, 0.18);

  --rail-width: 84px;
  --header-height: 76px;
}

@media (max-width: 768px) {
  :root {
    --header-height: 64px;
    --rail-width: 0px;
  }
}