/* =============================================================
   Visit Rooibos Country — palette and type
   THE single source of truth for colour and typeface. Never
   hardcode a value that exists here as a token.

   COLOUR — "Sunset Rooibos", chosen 23 Aug 2026 from the
   experimentation playground (see experimentation/README.md).
   A playful, warm, in-your-face register inspired by BOS tea:
     --tea      brewed rooibos red — the accent, loud and warm
     --bush     the living plant, now read as a warm orange —
                the structural colour (rules, labels, furniture)
     --bloom    the yellow flowers, kept as the highlight
     --stone    Cederberg sandstone, read as a soft orange
     --paper    warm cream, the light in that valley
   The old grey-green field-guide palette is retired; the plant
   story now lives in the warm end of the spectrum.

   TYPE — EB Garamond is the whole voice of the page, chosen 23 Aug 2026
   (H1 option 5, then extended to every heading and figure at Johan's
   request). Titles, section heads, KPI figures, drop caps and pull
   quotes are all EB Garamond, mixed case: the register of the botanical
   monograph rather than the packaged-goods shelf. Fredoka now survives
   ONLY in the wordmark lockup (--font-logo), where it is the family
   mark. Archivo remains the apparatus face — labels, nav, captions —
   and never body copy.

   HISTORICAL — until 23 Aug 2026 the display face was Fredoka, heavy
   and UPPERCASE, for the BOS energy. It was retired from headings
   because it was the loudest of several elements all competing in the
   hero. The four --*-display tokens still exist and still drive every
   heading, so that direction is one edit away if it is ever wanted back.
   ============================================================= */
:root{
  /* fonts */
  --font-display:'EB Garamond','Libre Caslon Text',Georgia,serif;
  --font-body:'EB Garamond','Libre Caslon Text',Georgia,'Times New Roman',serif;
  --font-label:'Archivo',system-ui,-apple-system,sans-serif;
  --font-logo:'Fredoka',system-ui,-apple-system,sans-serif;

  /* raw palette — Sunset Rooibos */
  --paper:#FFF3E6;      /* warm cream */
  --paper-2:#FFD9B3;    /* light apricot */
  --ink:#3A1508;        /* deep warm brown-black */
  --muted:#8A4A2A;      /* warm muted brown */
  --line:#F2C9A6;       /* soft apricot line */
  --tea:#E63946;        /* brewed rooibos red — accent */
  --tea-deep:#B71C2C;   /* pressed/hover */
  --bush:#F97316;       /* orange — the structural colour */
  --bush-deep:#C2410C;
  --bloom:#FBBF24;      /* the yellow flowers — highlight */
  --stone:#FB923C;      /* Cederberg sandstone, soft orange */

  /* semantic aliases — reach for these, not the raw names */
  --ground:var(--paper);
  --ground-alt:var(--paper-2);
  --text:var(--ink);
  --text-soft:var(--muted);
  --structure:var(--bush);        /* rules, labels, section marks */
  --structure-deep:var(--bush-deep);
  --accent:var(--tea);            /* links, CTAs, drop caps, the wordmark */
  --accent-hover:var(--tea-deep);
  --on-dark:var(--paper);
  --surface:#FFFBF5;              /* card face — one step lighter than paper */
  --tint-structure:rgba(249,115,22,.10);  /* --bush at 10%: the "you are here" wash */

  /* wordmark colour */
  --wm-ink:var(--tea);
  --wm-paper:var(--paper);

  /* the H1 register — the page title only. EB Garamond, mixed case,
     medium weight. One step lighter than --weight-display because the
     H1 is set much larger, and large sizes need less weight to hold. */
  --font-title:var(--font-display);
  --weight-title:500;
  --track-title:-.01em;
  --uppercase-title:none;

  /* display type — the register for h2, h3, KPI figures, drop caps,
     pull quotes and every card heading. Mixed case, medium weight:
     presence without shouting. Every component reads these four tokens,
     so the whole site's headline voice changes here and nowhere else. */
  --weight-display:600;
  --track-display:-.01em;
  --uppercase-display:none;

  /* layout — rounded, playful corners */
  --maxw:1180px;
  --measure:66ch;       /* running text never exceeds this */
  --gutter:clamp(22px,5vw,60px);
  --radius:18px;
  --radius-lg:32px;
}