/* ==========================================================================
   tokens.css - the ONE home for every value on this site.

   Every page loads this file first and nothing else defines a token. Before
   2026-09-02 the homepage carried its own copy inline, so a token change had
   to be made twice and the two copies had already drifted to 50 distinct
   colours where this file names 17.

   If a value is not here, it does not go on a page. A new value gets added
   here first, with a reason, and then used.
   ========================================================================== */

:root{
  /* ---- colour. monochrome by design: cream ink on warm near-black, one
     quiet grey. no accent colour anywhere. ---- */

  /* grounds, darkest to lightest */
  --bg-b:#0C0B0A;                        /* recessed panels, footer */
  --bg-a:#121110;                        /* page ground */
  --bg-c:#151413;                        /* raised card face */
  --bg-d:#1C1916;                        /* lifted or hovered card face */
  --bg-a-0:rgba(18,17,16,0);             /* transparent bg-a, for the nav fade */

  /* edges: rims, strokes and dividers that sit on a ground */
  --edge-1:#221F1C;
  --edge-2:#2A2723;
  --edge-3:#3A352E;
  --edge-4:#4A443D;

  /* text */
  --ink:#EDE9E1;                         /* primary text, buttons */
  --ink-hi:#FFFFFF;                      /* hover lift only */
  --ink-2:#CFC9BD;                       /* text one step under --ink */
  --quiet:#8C8579;                       /* secondary text, labels */
  --quiet-2:#6E685D;                     /* label under --quiet */
  --quiet-3:#514B44;                     /* the quietest readable step */

  /* three values that do a job no step above can do, so each keeps its own
     name rather than being folded into a near neighbour and shifting */
  --ink-lift:#F4F1EB;                    /* top stop of the display-numeral gradient */
  --quiet-deep:#5E594F;                  /* bottom stop of that same gradient */
  --ui-micro:#B4ADA1;                    /* 7px label text inside the product mockups */

  --device-black:#000;                   /* a phone notch and speaker cutout in
                                            the product mockups. real black,
                                            not a brand ground. */

  /* the one deliberate exception to monochrome: the video player's sound
     indicator, which has to read as off or on at a glance */
  --status-off:#C0553B;
  --status-on:#7FA05C;

  /* washes */
  --line:rgba(237,233,225,0.13);         /* hairline divider */
  --wash-nav:rgba(237,233,225,0.07);     /* nav link hover */
  --wash-field:rgba(237,233,225,0.05);   /* form field ground */
  --wash-row:rgba(237,233,225,0.035);    /* list row hover */

  /* ---- type ---- */
  --font:'Schibsted Grotesk',system-ui,-apple-system,sans-serif;
  --font-display:'Instrument Serif',Georgia,serif;
  --font-mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --t-display:clamp(38px,8.2vw,124px);   /* notes masthead only */
  --t-1:clamp(38px,6.1vw,100px);
  --t-2:clamp(33px,5.2vw,75px);
  --t-3:clamp(26px,3.8vw,54px);
  --t-4:clamp(21px,2.5vw,38px);
  --t-5:clamp(18px,1.8vw,26px);
  --t-6:clamp(16px,1.55vw,21px);
  --t-7:clamp(13px,1.1vw,16px);
  --t-label:11px;
  --t-micro:10px;

  /* ---- structure ---- */
  --shell:1320px;                        /* the ONE container width */
  --gutter:clamp(20px,3.4vw,44px);       /* page edge padding */
  --card:min(var(--shell),calc(100vw - 2 * var(--gutter)));
  --nav-clear:96px;                      /* nav bar plus its band, top and bottom */
  --r:2px;                               /* ONE radius. sharp. */
  --ease:cubic-bezier(.22,1,.36,1);

  /* ---- spacing ----
     Two scales, both live. Section rhythm governs the vertical beat of a
     full-width section; the seven steps govern everything inside one. They
     merge when the homepage sections are re-cut, not before: merging them
     now would move every section on a page that is working. */

  /* section rhythm */
  --bay:clamp(90px,12vh,150px);          /* section padding, top and bottom */
  --stack:clamp(38px,5.6vh,62px);        /* section header to its body */
  --head:26px;                           /* inside a section header */

  /* component steps */
  --s-1:6px;
  --s-2:10px;
  --s-3:16px;
  --s-4:26px;
  --s-5:clamp(30px,4.4vw,54px);
  --s-6:clamp(44px,6vw,78px);
  --s-7:clamp(70px,9.5vh,120px);
}