/* Saddle on the Sand — design tokens (brief §2.2, §2.4) */

:root{
  /* Colour */
  --paper:#F7F1E7;
  --sand:#EBDDC6;
  --dune:#C9A57A;
  --clay:#8E4E32;
  --jordan-red:#B01F2E;
  --jordan-red-dark:#8F1824;
  --desert-green:#3E5A3A;
  --sage:#B7C0A6;
  --ink:#1A1512;
  --ink-muted:#5E5248;
  --on-accent:#FFFFFF;
  --on-dark-muted:#CBBFAE;
  --line:#1A1512;
  --line-soft:#8A7556;

  /* Type */
  --font-display:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --font-sans:"Jost","Futura","Century Gothic",system-ui,sans-serif;

  --masthead-size:clamp(56px,11vw,132px);
  --display-size:clamp(44px,7vw,80px);
  --headline-size:clamp(32px,5vw,48px);
  --title-size:clamp(24px,3vw,28px);
  --pull-quote-size:clamp(26px,4vw,36px);

  /* Spacing */
  --space-1:4px;
  --space-2:8px;
  --space-4:16px;
  --space-6:24px;
  --space-8:32px;
  --space-12:48px;
  --space-16:64px;
  --space-32:128px;

  /* Radius */
  --radius-none:0px;
  --radius-sm:2px;
  --radius-pill:999px;

  /* Page gutter — 16–20px on mobile, --space-16 on desktop */
  --gutter:20px;
}

@media (min-width:960px){
  :root{--gutter:var(--space-16);}
}