/* Vietnam Retirement Guide: design tokens (Oct 29, 2026; approved by Tam 3:41 PM PT).
   Loaded before style.css on every page; style.css reads these variables. Colors are the live site's colors, unchanged.
   Breakpoint: ONE layout breakpoint, 880px (the header search switch). CSS variables cannot be used inside @media,
   so --bp-wide is documentation only; every @media in style.css that changes layout uses (min-width:880px). */
:root{
  /* colors (same as the live site) */
  --ink:#14232a; --muted:#5b6b70; --teal:#0f4c4a; --teal2:#16706b; --sand:#f5f1e8; --card:#fff; --line:#e4ddcf;
  --cream:#f5e9c8; --mint:#e7f1ef; --paper:#fbf8f1;
  --fit:#1d7a4f; --tight:#8a5a12; --short:#b23a2b;
  /* type */
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-head:Georgia,"Times New Roman",serif;
  --fs-body:17px;        /* 18px at 880px and up (style.css) */
  --fs-small:16px;       /* smallest size for body text (paragraphs, lists, table cells) */
  --fs-caption:14px;     /* smallest size for captions, labels, badges, citations, nav */
  --fs-h1:clamp(32px,5vw,52px);
  --fs-h2:clamp(24px,3vw,30px);
  --fs-h3:20px;
  --lh-body:1.6; --lh-head:1.2;
  --measure:68ch;        /* line length for running text */
  /* spacing (4px base) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  /* radius */
  --r-sm:8px; --r:14px; --r-pill:999px;
  /* breakpoint (documentation only, see above) */
  --bp-wide:880px;
}