/* ============================================================================
   Samantha Lee — DESIGN TOKENS (single source of truth)
   Linked by every page. Page-specific tokens (e.g. --col, --media-h, --col-read,
   --rec-red) stay in each page's own <style> :root.
   ============================================================================ */

/* ---- Ernest (display serif): installed → local file → live site ---- */
@font-face{
  font-family:'Ernest';
  src: local('Ernest'), local('Ernest Regular'), local('Ernest-Regular'),
       url('../fonts/Ernest-Regular.woff2') format('woff2'),
       url('../fonts/Ernest-Regular.woff') format('woff'),
       url('https://www.samantha.design/_next/static/media/Ernest_Regular-s.p.0i_u0ce4q-qrg.woff2?dpl=dpl_DE4wzntTS8m796nPkN3uJyvHUEv6') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  /* ---- colour ---- */
  --white:#ffffff; --black:#000000;
  --grey10:#f4f4f4; --grey20:#cbcbcb; --grey40:#a3a3a3; --grey50:#6b6b6b;
  --lavender:#d8d8fd;                       /* Primitive/Brand — the primary accent */
  --vanilla:#fff7cc;                        /* Primitive/Brand light tints */
  --mist:#d6f1ec;
  --still:#cadffb;

  /* ---- spacing ---- */
  --s2:2px; --s4:4px; --s8:8px; --s12:12px; --s16:16px; --s24:24px;
  --s40:40px; --s48:48px; --s56:56px;
  --section:176px;                          /* section top inset — 8 × 22 baseline */

  /* ---- type families ---- */
  --f-primary:'Basel Grotesk','Helvetica Neue',Arial,sans-serif;
  --f-secondary:'Ernest',Georgia,'Times New Roman',serif;

  /* ---- type scale ---- */
  --t-caption:12px; --lh-caption:16px;
  --t-body:15px;                            /* UI / nav-adjacent body */
  --t-read:17px;                            /* long-form reading size */
  --t-nav:14px;     --lh-nav:16px;          /* nav + stack — Ricky's shipped chip size */
  --t-h2:28px;                              /* project title */
  --t-h1:32px;      --lh-h1:36px;           /* page title (About) */

  /* ---- baseline grid: reading line-heights + vertical gaps are multiples of 22 ---- */
  --baseline:22px;
  --lh-body:22px; --lh-s:22px; --lh-m:22px; /* aliases — all the same 22 baseline */
  --read-gap:44px;                          /* 2 × baseline — block rhythm */

  /* ---- letter-spacing ---- */
  --ls-xl:0.85px; --ls-l:0.1px; --ls-s:-0.1px;

  /* ---- motion ---- */
  --nav-dur:200ms;
}