/* =========================================================
   TOKENS — the only place raw values live.
   Components read these. Never hardcode a colour, size,
   space, radius or timing anywhere else.
   Light is the default. Dark only when the visitor asks.

   Palette, checked 2 Oct 2026 (WCAG contrast, worst case
   against bg or surface):
     text 16.6 · text-2 8.2 · text-3 5.1 · accent-text 5.8   (light)
     text 15.2 · text-2 8.7 · text-3 5.7 · accent-text 15.5  (dark)
   All pass AA (4.5) for small text.
   Lime is a FILL: a highlighter behind ink, a dot, a node.
   Lime on white is 1.3:1, so it never carries text or a thin line
   on its own. Use --c-accent-text for that.
   ========================================================= */

:root{
  /* ---- colour: light (default) ---- */
  --c-bg:#FFFFFF;
  --c-surface:#F5F4F0;          /* warm paper: media frames, diagram boards */
  --c-surface-2:#ECEBE6;        /* hover on surface                         */
  --c-text:#151513;             /* ink                                      */
  --c-text-2:#4A4944;           /* body copy                                */
  --c-text-3:#696862;           /* labels, captions (5.1:1, passes AA)      */
  --c-line:rgba(21,21,19,.12);
  --c-line-strong:rgba(21,21,19,.24);
  --c-accent:#C8EE28;           /* FILL only: highlighter, dots, nodes      */
  --c-accent-ink:#151513;       /* text sitting on the accent               */
  --c-accent-text:#4C6800;      /* accent used AS text or a 1px line        */
  --c-overlay:rgba(255,255,255,.86);
  --c-shadow:0 1px 2px rgba(0,0,0,.05),0 6px 18px rgba(0,0,0,.06);

  /* ---- type ---- */
  --f-display:"Newsreader",Georgia,"Times New Roman",serif;  /* headings  */
  --f-sans:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:var(--f-sans);       /* no mono on this site: labels stay in the text face */

  --t-xs:.8125rem;                            /* 13  small labels */
  --t-sm:.9375rem;                            /* 15  captions     */
  --t-md:1.0625rem;                           /* 17  body         */
  --t-lg:clamp(1.1875rem,1.05rem + .5vw,1.4375rem);/* 19–23 lead  */
  --t-xl:clamp(1.5rem,1.2rem + 1.2vw,2.25rem);/* 24–36 h3         */
  --t-2xl:clamp(2.125rem,1.4rem + 2.8vw,3.75rem);/* 34–60 h2      */
  --t-3xl:clamp(3rem,1.6rem + 5.4vw,6.5rem);  /* 48–104 h1        */

  --lh-tight:1.02;
  --lh-snug:1.25;
  --lh-body:1.6;
  --tr-tight:-.02em;
  --tr-label:0;

  /* ---- space: 4px base ---- */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:144px;
  --section:clamp(96px,12vw,176px);

  /* ---- layout ---- */
  --max:1240px;
  --max-text:640px;
  --gutter:clamp(16px,4vw,40px);
  --nav-h:64px;

  /* ---- shape: small radii, more like paper than app cards ---- */
  --r-sm:3px; --r-md:6px; --r-lg:10px; --r-pill:999px;

  /* ---- motion ---- */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --d-fast:160ms;
  --d-base:320ms;
  --d-slow:700ms;
  --d-xslow:1100ms;
  --stagger:70ms;
}

/* ---- colour: dark (only when chosen) ---- */
html[data-theme="dark"]{
  --c-bg:#0D0D0C;
  --c-surface:#181816;
  --c-surface-2:#21211E;
  --c-text:#EEEDE8;
  --c-text-2:#B7B5AD;
  --c-text-3:#94928A;
  --c-line:rgba(238,237,232,.12);
  --c-line-strong:rgba(238,237,232,.24);
  --c-accent:#D8FF4A;
  --c-accent-ink:#151513;
  --c-accent-text:#D8FF4A;
  --c-overlay:rgba(13,13,12,.86);
  --c-shadow:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.35);
}

@media (prefers-reduced-motion:reduce){
  :root{ --d-fast:0ms; --d-base:0ms; --d-slow:0ms; --d-xslow:0ms; --stagger:0ms; }
}