/* ============================================================================
   tokens.css · the single source of truth for the portfolio's design system.
   ----------------------------------------------------------------------------
   These are the EXACT values already used across the site, gathered in one
   place. You can optionally load this first (before site-kit.css) and then the
   other stylesheets inherit from here — change a value once, the whole site
   follows. Safe to adopt incrementally; nothing breaks if you don't.
   ========================================================================== */
:root{
  /* ---- Brand palette (light) ---- */
  --paper:#f4f1ea;        /* page background — warm bone */
  --paper-2:#ece8df;      /* raised surface / image wells */
  --ink:#1c1a16;          /* primary text — near-black espresso */
  --ink-soft:#6f685c;     /* secondary text / labels — taupe */
  --line:#d8d2c6;         /* hairlines & borders */
  --accent:#bd5a3d;       /* terracotta — the ONE accent. links, marks, active */

  /* ---- Dark theme overrides (applied on body.theme-dark) ---- */
  --paper-dark:#17140f;
  --paper-2-dark:#221d15;
  --ink-dark:#f1ede4;
  --ink-soft-dark:#a8a092;
  --line-dark:rgba(241,237,228,.15);

  /* ---- Type families ---- */
  --font-display:"Cormorant Garamond", Georgia, serif;  /* headings, titles */
  --font-body:"Spectral", Georgia, serif;               /* running text */
  --font-mono:"Spline Sans Mono", ui-monospace, monospace; /* labels, meta, UI */

  /* ---- Type scale (fluid; clamp(min, pref, max)) ---- */
  --t-display:clamp(46px,9vw,124px);  /* masthead / impact H1 */
  --t-h1:clamp(40px,7vw,96px);        /* page titles */
  --t-h2:clamp(30px,4.6vw,60px);      /* section headings */
  --t-h3:clamp(24px,3vw,40px);        /* sub-headings */
  --t-lead:clamp(19px,2.1vw,25px);    /* standfirst / intro (italic) */
  --t-body:clamp(17px,1.4vw,20px);    /* paragraphs */
  --t-meta:13px;                      /* mono meta values */
  --t-label:11px;                     /* mono uppercase labels */

  /* ---- Letter-spacing ---- */
  --ls-display:-.02em;    /* tight, optical, for big display type */
  --ls-label:.16em;       /* airy, for uppercase mono labels */
  --ls-kicker:.22em;      /* widest — kickers / eyebrows */

  /* ---- Spacing & layout ---- */
  --gutter:clamp(22px,5vw,90px);        /* page side padding */
  --measure:66ch;                       /* ideal reading width */
  --block-gap:clamp(58px,11vh,150px);   /* rhythm between content blocks */
  --maxw:1500px;                        /* content max width */

  /* ---- Radii ---- */
  --r-none:0;        /* images & cards — intentionally square */
  --r-pill:20px;     /* scrolled breadcrumb chip */
  --r-round:50%;     /* dots, circular buttons, toggle */

  /* ---- Motion ---- */
  --ease-out:cubic-bezier(.2,.7,.2,1);   /* reveals, gentle settles */
  --ease-glide:cubic-bezier(.16,.8,.2,1);/* hover zooms */
  --dur-fast:.25s;
  --dur-mid:.5s;
  --dur-slow:.9s;
  --dur-zoom:1.1s;     /* slow image hover zoom */

  /* ---- Elevation ---- */
  --shadow-float:0 8px 26px rgba(0,0,0,.16);  /* floating controls */
}

/* ---- Dark theme: the LIVE mapping (applied on body.theme-dark / Concept Art's
   legacy .stage-dark). The CMS site palette overrides these at runtime. ---- */
body.theme-dark, body.stage-dark{
  --paper:#17140f;
  --paper-2:#221d15;
  --ink:#f1ede4;
  --ink-soft:#a8a092;
  --line:rgba(241,237,228,.15);
}