/* =========================================================================
   tokens.css — global design tokens (loaded everywhere)
   Source of truth for colours, type and layout extracted from the wireframes.
   ========================================================================= */
:root{
  /* ---- palette: light surfaces ---- */
  --c-cream:#faf7f1;
  --c-cream-soft:#f3ede1;
  --c-cream-line:#e6dcc9;
  --c-white:#fff;
  --c-card-line:#e7dfcf;
  --c-hairline:#e8e0cf;
  --c-hairline-2:#f0e9da;

  /* ---- palette: dark surfaces ---- */
  --c-ink:#221f1b;
  --c-ink-2:#241f1a;
  --c-panel-dark:#2c2823;
  --c-line-dark:#3a332c;
  --c-line-dark-2:#4a443b;

  /* ---- palette: brand ---- */
  --c-brown:#8a5a2b;
  --c-brown-dark:#6f4621;
  --c-brown-light:#a06a35;
  --c-terra:#c08a4a;

  /* ---- palette: text ---- */
  --c-body:#4f463d;
  --c-body-2:#5f5648;
  --c-muted:#8a7f6c;
  --c-muted-2:#8a7f70;
  --c-on-dark:#e7dcc9;
  --c-on-dark-soft:#bdb09b;
  --c-on-dark-strong:#f3ecdd;
  --c-on-dark-muted:#a89c88;
  --c-star:#f3a712;

  /* ---- type ---- */
  --f-serif:'Spectral',Georgia,serif;
  --f-sans:'Libre Franklin',system-ui,-apple-system,Segoe UI,sans-serif;
  --f-script:'Pinyon Script',cursive;

  /* ---- layout ---- */
  --container:1200px;
  --gutter:32px;
  --radius:3px;
  --radius-sm:2px;
  --section-y:78px;
}