/* =====================================================================
   TOKENS — Pinnacle Science Labs

   This is the ONLY file that defines a colour, a font or a corner radius.
   Change the values here and the whole site follows.

   These are the client's APPROVED brand kit values, taken from the Brand
   Playbook (Drive, 25 Sept 2026) — not invented here:

     Warm Ivory   #E2D7C7
     Deep Brown   #422E1C
     Soft Gold    #E0B26F
     Primary      Montserrat        (headings, titles, subtitles)
     Secondary    Open Sans Bold

   WHY THE GROUND IS BROWN AND NOT IVORY
   The playbook gives three colours but not which is the page. Measured
   both ways, only one arrangement makes all three usable:

     on Deep Brown   ivory 9.02:1   gold 6.57:1     both pass
     on Warm Ivory   brown 9.02:1   gold 1.37:1     gold unusable

   Soft Gold on ivory is 1.37:1. Darkened far enough to still read as the
   brand gold (#96631F) it still only reaches 3.60:1 — under AA for body
   text. On an ivory page the gold could never be a letter, only a fill,
   which throws away a third of the palette. On brown it is a full member.

   This is the same trap Derby City's copper fell into at 3.34:1 on paper,
   and it is why --accent-text exists over there. Here it is avoided by
   choosing the ground rather than patching the colour.
   ===================================================================== */

:root {

  /* ---- 1. BRAND — the approved three ---------------------------------- */
  --ivory:           #E2D7C7;
  --brown:           #422E1C;
  --gold:            #E0B26F;

  /* Accent roles. Gold is safe as TEXT here because the ground is brown —
     6.57:1. Do not reuse these on a light ground without re-measuring. */
  --accent:          var(--gold);
  --accent-bright:   #EFC98F;   /* hover — on dark the accent goes lighter */
  --accent-deep:     #A6702A;   /* fills and rules only, never a letter    */
  --accent-soft:     color-mix(in srgb, var(--gold) 12%, transparent);
  --accent-line:     color-mix(in srgb, var(--gold) 30%, transparent);

  /* ---- 2. SURFACES ---------------------------------------------------- */
  --bg:              #2F2013;   /* page — brown taken a step deeper so the
                                   brand brown can sit on it as a panel   */
  --bg-alt:          #422E1C;   /* the brand brown                         */
  --panel:           #4E3823;   /* input wells, raised cards               */
  --line:            rgba(226,215,199,.20);
  --line-soft:       rgba(226,215,199,.13);
  --line-faint:      rgba(226,215,199,.07);

  /* ---- 3. TEXT ---------------------------------------------------------
     One ink — the brand ivory — at three alphas, every step measured on
     --bg and cleared for body text. .62 was the first step that failed
     (4.49:1), so the scale stops at .70.                                 */
  --text:            #E2D7C7;               /* 10.3:1 on --bg */
  --text-body:       rgba(226,215,199,.86); /*  8.1:1 */
  --text-dim:        rgba(226,215,199,.78); /*  7.0:1 */
  --text-faint:      rgba(226,215,199,.70); /*  6.0:1 */
  --text-error:      #E8A08F;

  /* ---- 4. TYPE ---------------------------------------------------------
     Montserrat for display and Open Sans for prose, exactly as the
     playbook specifies. Montserrat is geometric and gets loose at small
     sizes, which is why the body face is a separate, more readable one
     rather than Montserrat all the way down.                             */
  --font-display: "Montserrat", system-ui, -apple-system, Segoe UI, sans-serif;
  --font:         "Open Sans", system-ui, -apple-system, Segoe UI, sans-serif;

  --fs-hero:    clamp(40px, 7.4vw, 108px);
  --fs-lede:    clamp(16px, 1.4vw, 20px);
  --fs-small:   15px;
  --fs-label:   11px;
  --fs-micro:   10px;

  --fw-reg:     400;
  --fw-med:     500;
  --fw-bold:    600;
  --fw-black:   800;

  --track-hero:    -.02em;   /* Montserrat is already wide; only a little */
  --track-label:    .18em;

  /* ---- 5. SHAPE + MOTION ----------------------------------------------- */
  --radius:      10px;
  --radius-lg:   18px;
  --t-fast:      .18s cubic-bezier(.2,.7,.3,1);
  --t-med:       .4s  cubic-bezier(.16,.9,.24,1);
}