:root {
  /* brand palette — display use only, see base.css contrast rules */
  --clay: #9b826f;
  --clay-strong: #8a7565; /* corrected 3.6:1 clay for use on cream */
  --cream: #f1e8e0;
  --slate: #778280;
  --sage: #bcbfad;
  --sand: #c6b397;
  --rose: #d6a194;

  /* neutrals — required additions, not in the brand palette file */
  --ink: #2b211c;
  --ink-soft: #5a4a3f;
  --ink-mute: #7a6552;
  --white: #ffffff;
  --rule: #e4dbd2;
  --overlay: #22140f;
  --band-ground: #ffffff;

  /* type */
  --font-display: "The Seasons", "Cormorant Garamond", "Didot", "Bodoni MT", Georgia, serif;
  --font-body: "Jost", "Futura", "Century Gothic", -apple-system, "Segoe UI", sans-serif;
  --font-ui: var(--font-body);

  /* spacing scale (8px base) */
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-48: 48px;
  --sp-64: 64px;
  --sp-96: 96px;
  --sp-128: 128px;

  --container-max: 1200px;
  --container-pad: 24px;

  --radius-sm: 2px;

  --header-h: 72px;
  --header-h-mobile: 60px;
}

@media (min-width: 768px) {
  :root { --container-pad: 40px; }
}

@media (min-width: 1024px) {
  :root { --container-pad: 64px; }
}