/* ═══════════════════════════════════════════════════════════════════════
   Tokens

   Every colour, measure and timing on the site is named here and nowhere
   else. A rule in another file that invents its own hex value is a bug.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  color-scheme:dark;

  /* ── the ground ────────────────────────────────────────────────────
     One black, the one the card gallery used to fade into, now carried
     the whole way down the page. Surfaces above it are that same black
     lifted, never a different hue. A dark page reads either as one
     material or as a pile of unrelated greys; there is nothing between. */
  --ink:#0c0f11;
  --ink-deep:#07090a;
  --ink-lift:#16191c;        /* the top of the page, lit from above */
  --surface-1:#14181b;       /* a panel on the page */
  --surface-2:#1b2023;       /* a panel on a panel */
  --surface-3:#242b2f;       /* pressed, hovered, selected */

  /* ── rules ─────────────────────────────────────────────────────────
     White at low alpha rather than a fixed grey, so one rule works on
     the page and on a lifted panel without being redrawn for each. */
  --line:rgba(255,255,255,.075);
  --line-2:rgba(255,255,255,.14);
  --line-3:rgba(255,255,255,.26);

  /* ── type ──────────────────────────────────────────────────────────  */
  --text:#f1f3f2;
  --text-2:rgba(241,243,242,.70);
  --text-3:rgba(241,243,242,.48);
  --text-4:rgba(241,243,242,.32);

  /* ── brand ─────────────────────────────────────────────────────────
     --signal is the app blue, unchanged, and it is used where white type
     sits on top of it. Blue *on* black at that value is unreadable, so
     type, rules and icons take --signal-lit: the same hue raised until it
     clears contrast on this ground. Two tokens, one blue. */
  --signal:#0b57d0;
  --signal-up:#1565e0;
  --signal-deep:#0842a0;
  --signal-lit:#8ab4f8;
  --signal-dim:rgba(138,180,248,.14);
  --signal-glow:rgba(21,98,221,.40);


  /* Reserved for things that actually come out of a printer. */
  --paper:#fbfaf6;

  /* ── fonts ─────────────────────────────────────────────────────────  */
  --sans:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --mono:'DM Mono',ui-monospace,SFMono-Regular,'Liberation Mono',monospace;

  /* ── measure ───────────────────────────────────────────────────────
     Wider than it was, and set larger. The page used to hold 1160px of
     content inside 64px gutters on a 1440px screen, which left a quarter
     of the display doing nothing while the type sat at a size chosen for
     a column. A product page is read across the screen, not down a
     column, so the measure grew and the type grew with it. */
  --wrap:1360px;
  --gut:clamp(20px,3.4vw,52px);
  --measure:62ch;
  --head-h:72px;

  /* ── type scale ────────────────────────────────────────────────────
     One ramp, used everywhere. Each step is a clamp so it is fluid
     between a phone and a wide display rather than stepping at a
     breakpoint, and the floors are what a 390px screen can actually
     hold without the words breaking mid-syllable. */
  --display:clamp(52px,9.4vw,132px);   /* the one headline */
  --title:clamp(34px,5.4vw,74px);      /* an act's heading */
  --sub:clamp(21px,2.3vw,30px);        /* a step, a column, a question */
  --lede:clamp(19px,1.55vw,25px);      /* the paragraph under a heading */
  --body:clamp(16px,1.1vw,18.5px);     /* everything else */

  /* ── motion ────────────────────────────────────────────────────────  */
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.22,.68,.16,1);
  --t-fast:.15s;
  --t:.3s;
  --t-slow:.6s;

  /* ── elevation ─────────────────────────────────────────────────────
     A shadow alone does nothing on black. Lift is a hairline of light
     along the top edge, and the shadow is there for the ground below. */
  --lift:inset 0 1px 0 rgba(255,255,255,.07);
  --shadow-1:0 1px 2px rgba(0,0,0,.5),0 10px 26px -14px rgba(0,0,0,.9);
  --shadow-2:0 2px 5px rgba(0,0,0,.5),0 28px 56px -26px rgba(0,0,0,1);
}