:root {
  /* Colour */
  --c-cream: #f7f3ed;
  --c-warm-white: #fbf9f6;
  --c-parchment: #f0ebe2;
  --c-sage: #8a9e89;
  --c-sage-light: #b4c4b2;
  --c-sage-pale: #d8e3d6;
  --c-sage-dark: #5c7a5b;
  --c-gold: #c8a96e;
  --c-gold-light: #e2cc9a;
  --c-gold-pale: #f0e4c8;
  --c-text-dark: #3a332a;
  --c-text-mid: #6b5e4e;
  --c-text-light: #9c8e80;
  --c-text-faint: #c4b8ac;

  /* Typography */
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Jost', system-ui, sans-serif;

  /* Perfect Fourth typescale — base 16px × 1.333 */
  --ts-xs: 0.64rem; /* ~10px  — captions, labels  */
  --ts-sm: 0.75rem; /*  12px  — small text        */
  --ts-base: 1rem; /*  16px  — body              */
  --ts-md: 1.333rem; /* ~21px  — lead text         */
  --ts-lg: 1.777rem; /* ~28px  — section headings  */
  --ts-xl: 2.369rem; /* ~38px  — page titles       */
  --ts-2xl: 3.157rem; /* ~51px  — hero mobile       */
  --ts-3xl: 4.209rem; /* ~67px  — hero desktop      */

  --fw-light: 300;
  --fw-regular: 400;

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-base: 1.6;
  --lh-loose: 1.85;

  --ls-tight: 0.02em;
  --ls-base: 0.04em;
  --ls-wide: 0.15em;
  --ls-wider: 0.25em;
  --ls-widest: 0.42em;

  /* 8-point spacing grid */
  --sp-1: 0.5rem; /*  8px */
  --sp-2: 1rem; /* 16px */
  --sp-3: 1.5rem; /* 24px */
  --sp-4: 2rem; /* 32px */
  --sp-5: 2.5rem; /* 40px */
  --sp-6: 3rem; /* 48px */
  --sp-8: 4rem; /* 64px */
  --sp-10: 5rem; /* 80px */
  --sp-12: 6rem; /* 96px */
  --sp-16: 8rem; /* 128px */

  /* Layout */
  --container: 640px;
  --container-md: 768px;
  --container-lg: 960px;
  --nav-h: 64px; /* 8 × 8px */

  /* Motion */
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur-fast: 200ms;
  --dur-base: 400ms;
  --dur-slow: 800ms;
  --dur-crawl: 1100ms;
}