/* ============================================================
   tokens.css — Design system: the single source of visual truth.
   Change a value here and it cascades across the whole site.
   ============================================================ */
:root{
  /* ---- Colour ---- */
  --paper:#f3efe6;        /* page background          */
  --paper-2:#ebe3d3;      /* alt section background   */
  --card:#fbf8f1;         /* raised surfaces          */
  --ink:#33302a;          /* primary text             */
  --ink-soft:#6f685c;     /* secondary text           */
  --sage:#7f8a6e;         /* accent (green)           */
  --sage-deep:#69745a;    /* accent, deeper           */
  --gold:#a98f5f;         /* hairlines / flourishes   */
  --line:#cfc1a6;         /* borders / dividers       */

  /* ---- Typography ---- */
  --display:'Cormorant Garamond', Georgia, serif;  /* headings, names  */
  --script:'Pinyon Script', cursive;               /* romantic accents */
  --ui:'Jost', system-ui, sans-serif;              /* labels, nav, UI  */

  /* ---- Spacing scale (8pt) ---- */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;

  /* ---- Radius ---- */
  --radius-sm:4px;
  --radius-pill:999px;

  /* ---- Elevation ---- */
  --shadow-card:0 16px 30px rgba(60,52,38,.16);
  --shadow-photo:0 10px 22px rgba(60,52,38,.26);
  --shadow-env:0 26px 40px rgba(60,52,38,.22);
  --shadow-circle:0 14px 30px rgba(105,116,90,.34);

  /* ---- Motion ---- */
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-inout:cubic-bezier(.4,0,.1,1);
  --dur-fast:.35s; --dur:.6s; --dur-slow:.85s;

  /* ---- Layout ---- */
  --nav:58px;             /* sticky nav height        */
  --measure:780px;        /* readable content width   */

  /* ---- Assets ---- */
  /* Note: background images are referenced directly in component CSS to avoid
     url() resolution ambiguity when custom properties are consumed cross-file. */

  /* Breakpoint reference (CSS @media can't read vars): --bp-md = 760px */
}