/* =====================================================================
   TOKENS: Pinnacle Science Labs store

   The ONLY file that names a colour, a font or a radius.

   The layout is the Olympex dark treatment the client asked for
   (site-template/). The palette is BLACK, SILVER AND GOLD ONLY, the
   client's instruction of 30 Sept 2026, matching their metallic logo:

     Black       #0B0B0C   the ground
     Silver      #D9DADC   text; the solid buttons are a brighter silver
     Soft Gold   #E0B26F   the one accent: prices, rules, the gold word

   The kit's Warm Ivory and Deep Brown are deliberately NOT used here.
   Brown surfaces and ivory type read warm and away from the logo's metal.

   Measured on --bg (and on --panel): silver 14.1 (13.2), gold 10.1 (9.4),
   --text-body 7.9 (7.4), --text-faint 4.9 (4.6). .46 failed at 3.65.
   ===================================================================== */

:root {
  /* ---- 1. BRAND --------------------------------------------------------- */
  --silver:          #D9DADC;
  --silver-bright:   #F1F1F2;
  --gold:            #E0B26F;

  --accent:          var(--gold);
  --accent-bright:   #EFC98F;
  --accent-deep:     #A6702A;
  --accent-soft:     color-mix(in srgb, var(--gold) 9%,  transparent);
  --accent-line:     color-mix(in srgb, var(--gold) 38%, transparent);

  /* ---- 2. SURFACES ------------------------------------------------------ */
  --bg:              #0B0B0C;
  --bg-alt:          #101011;
  --panel:           #141415;
  --surface:         rgba(217,218,220,.025);
  --surface-hover:   rgba(217,218,220,.055);
  --raised:          #1A1A1B;
  --band:            #121213;

  --line:            rgba(217,218,220,.14);
  --line-soft:       rgba(217,218,220,.09);
  --line-faint:      rgba(217,218,220,.06);

  /* ---- 3. TEXT ---------------------------------------------------------- */
  --text:            var(--silver-bright);
  --text-body:       rgba(217,218,220,.74);
  --text-dim:        rgba(217,218,220,.64);
  --text-faint:      rgba(217,218,220,.56);
  --text-error:      #E8A08F;
  --ok:              #9CC59A;

  /* ---- 4. BUTTONS ------------------------------------------------------- */
  --btn-bg:          var(--silver-bright);
  --btn-ink:         #0B0B0C;

  /* ---- 5. TYPE -----------------------------------------------------------
     Montserrat at 800 does the job Olympex's heavy grotesk does. Open Sans
     carries prose, as the playbook specifies.                             */
  --font-display: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font:         "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --fw-black: 800;
  --fw-bold:  700;
  --fw-med:   600;

  --fs-hero:    clamp(36px, 4vw, 60px);
  --fs-h2:      clamp(28px, 3.4vw, 44px);
  --fs-h3:      19px;
  --fs-body:    15px;
  --fs-small:   13px;
  --fs-label:   11px;
  --fs-micro:   10px;

  --track-eyebrow: .32em;
  --track-btn:     .14em;
  --track-nav:     .18em;

  /* ---- 6. SHAPE ----------------------------------------------------------
     Olympex is square-cornered. A 2px radius keeps that edge while taking
     the harshness off inputs and pills.                                   */
  --radius:      2px;
  --radius-sm:   2px;
  --radius-pill: 999px;
  --border:      1px solid var(--line);

  --max:         1240px;
  --gutter:      20px;
  --section-y:   88px;
  --section-y-sm:56px;

  --ease:        cubic-bezier(.16,.9,.24,1);
  --t-fast:      .2s;
  --t-med:       .35s;

  --z-marquee:   400;
  --z-sticky:    450;
  --z-drawer:    500;
  --z-overlay:   600;
  --z-gate:      900;
}