/* =========================================================================
   Design tokens. Change a value here and the whole site follows.
   Nothing below this file should hardcode a colour or a font.
   ========================================================================= */
:root {
  /* Colour ------------------------------------------------------------- */
  --c-bg:        #f2f3f5;   /* page background: cool, calm, not stark white */
  --c-surface:   #ffffff;   /* cards */
  --c-ink:       #16191f;   /* body text */
  --c-muted:     #5b636f;   /* secondary text */
  --c-line:      #d8dce1;   /* hairlines and borders */
  --c-accent:    #1f5c47;   /* pine — trustworthy, not tech-startup blue */
  --c-accent-in: #ffffff;   /* text on accent */

  /* Type ---------------------------------------------------------------- */
  /* System stacks: no external font requests, so nothing third-party
     touches your visitors and the CSP can stay strict. */
  --f-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  --t-xs:   0.78rem;
  --t-sm:   0.9rem;
  --t-base: 1.05rem;
  --t-lg:   1.3rem;
  --t-xl:   clamp(1.6rem, 4vw, 2.2rem);
  --t-2xl:  clamp(2.2rem, 6.5vw, 3.6rem);

  /* Space --------------------------------------------------------------- */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2.5rem;
  --s-5: 4rem;
  --s-6: 6rem;

  /* Shape --------------------------------------------------------------- */
  --radius: 10px;
  --wrap:   62rem;   /* max content width */
}