/* ============================================================
   hdw site kit · TOKENS
   Every value the site uses. Seeded from Graphite (the hdw master
   kit), then made this site's own: KMR Waldenburg Medium in place
   of SF Pro, a white page in place of a grey one, and the type,
   spacing and menu numbers measured off the reference site at
   375 and 1440 wide on 4 November 2026.

   A value that is not here does not go in the CSS. Wrong
   everywhere: fix it here. Wrong in one place: that rule is not
   using its token.
   Load order: tokens → base → layout → components → responsive
   ============================================================ */

/* One face, one cut. Declared as 400 on purpose: every rule asks
   for 400, gets Medium, and nothing is ever faked bold. The file
   lives in the site's own fonts folder so there is one copy. */
@font-face{
  font-family:'Waldenburg';
  src:url('../../fonts/KMRWaldenburg-Medium.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:block; /* never a flash of another font between pages */
}

:root{
  /* ---- colour, light ---- */
  --bg:#ffffff;          /* the page */
  --ink:#000000;         /* what you read */
  --ink-2:#767676;       /* a label beside a black value. 4.5:1 */
  --ink-3:#767676;       /* supporting text, lighter than --ink. 4.5:1 */
  --card:#f2f2f2;        /* an image waiting, a soft card */
  --card-2:#e6e6e6;      /* a pill track, a card's head */
  --raise:#ffffff;       /* the chosen pill, a field */
  --line:#e6e6e6;        /* a hairline between records */
  --field:#f2f2f2;       /* a field: filled, never outlined */
  --panel:#000000;       /* the menu */
  --panel-ink:#ffffff;
  --panel-ink-2:#999999;
  --dim:rgba(0,0,0,.28); /* the page under an open menu */
  --accent:#ff2e00;      /* the hdw mark. Nowhere else */
  --yes:#1f9d55;         /* sent, done */
  --no:#d93025;          /* failed, required */
  --focus:var(--ink);
  --shadow-pill:0 1px 2px rgba(0,0,0,.10), 0 0 0 .5px rgba(0,0,0,.06);

  /* ---- type ---- */
  --font:'Waldenburg',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --fs-statement:clamp(30px, 3.6vw, 52px); /* one per page, the opening sentence */
  --fs-title:30px;       /* a case study's name, a big row title */
  --fs-menu:24px;        /* a link in the menu (20 on a phone) */
  --fs-small:15px;       /* everything else, the header included */
  --lh-tight:.9;         /* one line: header, labels, menu, statement */
  --lh-text:1.12;        /* a paragraph */
  --track:-0.05em;       /* 15px */
  --track-l:-0.07em;     /* 20px and up */
  --measure:62ch;        /* a paragraph stops here */

  /* ---- space ---- */
  --x:12px;              /* page edge and column gutter, one number */
  --edge:max(var(--x), env(safe-area-inset-left, 0px));
  --s-0:2px;
  --s-1:4px;
  --s-2:7px;
  --s-3:12px;
  --s-4:18px;
  --s-5:26px;
  --s-6:40px;
  --s-7:56px;
  --s-8:96px;
  --s-9:130px;
  --s-10:170px;
  --top-h:56px;          /* the header's height */
  --row-gap:var(--s-9);  /* between rows of a page (72 on a phone) */

  /* ---- shape ---- */
  --r-sm:6px;            /* a card's head, a small tag */
  --r:10px;              /* a card, a field */
  --r-pill:999px;        /* a pill, a button */
  /* images and video have no corners */

  /* ---- motion ---- */
  --ease:cubic-bezier(.16,1,.3,1);  /* fast out, long soft landing */
  --dur:.6s;             /* the menu */
  --dur-s:.2s;           /* a colour change */
  --press:.97;

  /* ---- layers ---- */
  --z-top:100;
  --z-menu:90;

  color-scheme:light;
}

/* ---- colour, dark: follows the phone unless the page is told ---- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#000000; --ink:#ffffff; --ink-2:#8a8a8a; --ink-3:#8a8a8a;
    --card:#141414; --card-2:#232323; --raise:#2e2e2e; --line:#222222; --field:#1c1c1c;
    --panel:#ffffff; --panel-ink:#000000; --panel-ink-2:#6b6b6b; --dim:rgba(0,0,0,.5);
    --shadow-pill:0 1px 2px rgba(0,0,0,.5), 0 0 0 .5px rgba(255,255,255,.08);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#000000; --ink:#ffffff; --ink-2:#8a8a8a; --ink-3:#8a8a8a;
  --card:#141414; --card-2:#232323; --raise:#2e2e2e; --line:#222222; --field:#1c1c1c;
  --panel:#ffffff; --panel-ink:#000000; --panel-ink-2:#6b6b6b; --dim:rgba(0,0,0,.5);
  --shadow-pill:0 1px 2px rgba(0,0,0,.5), 0 0 0 .5px rgba(255,255,255,.08);
  color-scheme:dark;
}