/* ==========================================================================
   Design tokens
   The type and space scales are fluid: values grow smoothly between a 320px
   and a 1366px viewport, so no intermediate breakpoints are needed.
   `html { font-size: 62.5% }` (base.css) means 1rem = 10px.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- typefaces ---- */
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ---- type scale ---- */
  --text-s:   clamp(1.4rem,    calc(0.1912045889vw + 1.3388145315rem), 1.6rem);
  --text-m:   clamp(1.6rem,    calc(0.1912045889vw + 1.5388145315rem), 1.8rem);
  --text-xl:  clamp(2.304rem,  calc(0.8550671128vw + 2.0303785239rem), 3.1984002rem);
  --text-xxl: clamp(2.7648rem, calc(1.4327604843vw + 2.306316645rem),  4.2634674666rem);

  /* The larger the type, the tighter the leading */
  --line-height-body:    1.6;   /* running text, 16-18px */
  --line-height-header:  1.2;   /* headings and large type */

  /* ---- space scale ---- */
  --space-xs:  1.35rem;
  --space-s:   clamp(1.8004501125rem, calc(0.190774271vw + 1.7394023458rem),  2rem);
  --space-m:   clamp(2.4rem,          calc(0.5736137667vw + 2.2164435946rem), 3rem);
  --space-l:   clamp(3.1992rem,       calc(1.2435946463vw + 2.8012497132rem), 4.5rem);
  --space-xl:  clamp(4.2645336rem,    calc(2.3761629063vw + 3.50416147rem),   6.75rem);

  /* ---- layout ---- */
  --section-space: clamp(7.2rem, calc(4.5889101338vw + 5.7315487572rem), 12rem);
  --gutter:        clamp(2.4rem, calc(0.5736137667vw + 2.2164435946rem), 3rem);
  --content-width: 136.6rem;
  --body-max-width: 256rem;
  --radius-l:      1.5rem;

  /* ---- colours ---- */
  --white: #fff;
  --black: #000;
  --base:  #f2f2f2;   /* page background */

  /* transparency variants */
  --white-trans-80: rgb(255 255 255 / 0.8);
  --black-trans-70: rgb(0 0 0 / 0.7);
}