/* ============================================================
   Stones Audio — design tokens
   Single source of truth for values repeated across 3+ surfaces.

   Extracted 2026-07-29 from the 11 production pages, then
   CONSOLIDATED 2026-07-29: 59 near-duplicate alphas collapsed to the
   steps below. The extraction was lossless; the consolidation is not.
   Every merge moved lighter-or-equal, so no contrast ratio decreased.

   Structure:
     1. Brand primitives      — the five brand values + deep variants
     2. Ink ramp              — --pearl at fixed alphas (text)
     3. Wash ramp             — white at fixed alphas (surfaces, hairlines)
     4. Hue ramps             — cyan / purple / blue at fixed alphas
     5. Elevation, radius, motion, blur, touch

   A semantic alias layer (--text-body, --surface-1, --focus-ring, …) lived
   here until 2026-08-03, when it was removed: not one of its 12 tokens was
   ever referenced by any page, so it advertised a convention the codebase
   did not follow. Reach for the numeric primitive. If an alias layer is
   reintroduced, migrate the pages onto it in the same change — an alias
   nobody uses is worse than no alias, because it misdescribes the code.

   Contrast floor: on the near-black page and footer surfaces,
   --pearl-52 is the lowest alpha that clears WCAG AA 4.5:1 for body
   text. Do not introduce a lighter-weight text value without
   measuring it.

   Adding a step back to a ramp needs a reason a reader can see at
   1x. A 1–2% alpha step is roughly 2–5/255 — invisible, and it is
   how the ramp sprawled the first time.
   ============================================================ */

:root{
  /* ---------- 1. brand primitives ---------- */
  --bg:#0b0d1a;
  --bg-deep:#070710;          /* footer / recessed panels */
  --bg-raised:#121421;        /* default card interior */
  --pearl:#f0eff2;
  --white:#fff;

  --cyan:#06b6d4;             /* also the colour of every :focus-visible outline */
  --cyan-deep:#0e7490;
  --blue:#3b82f6;
  --blue-deep:#1d4ed8;
  --purple:#8b5cf6;
  --purple-deep:#6d28d9;
  --emerald:#10d47a;

  /* ---------- 2. ink ramp — --pearl at alpha. suffix = alpha x100 ---------- */
  --pearl-100:rgba(240,239,242,1);
  --pearl-92:rgba(240,239,242,0.92);
  --pearl-86:rgba(240,239,242,0.86);
  --pearl-78:rgba(240,239,242,0.78);
  --pearl-75:rgba(240,239,242,0.75);
  --pearl-72:rgba(240,239,242,0.72);
  --pearl-64:rgba(240,239,242,0.64);
  --pearl-52:rgba(240,239,242,0.52);  /* AA floor for body text */
  --pearl-40:rgba(240,239,242,0.4);
  --pearl-30:rgba(240,239,242,0.3);   /* decorative only — fails AA as text */
  --pearl-08:rgba(240,239,242,0.08);
  --pearl-05:rgba(240,239,242,0.05);

  /* ---------- 3. wash ramp — white at alpha (surfaces, borders, hairlines) ---------- */
  --wash-02:rgba(255,255,255,0.02);
  --wash-04:rgba(255,255,255,0.04);
  --wash-06:rgba(255,255,255,0.06);
  --wash-07:rgba(255,255,255,0.07);
  --wash-08:rgba(255,255,255,0.08);
  --wash-10:rgba(255,255,255,0.1);
  --wash-12:rgba(255,255,255,0.12);
  --wash-16:rgba(255,255,255,0.16);
  --wash-30:rgba(255,255,255,0.3);

  /* ---------- 4. hue ramps ---------- */
  --cyan-08:rgba(6,182,212,0.08);
  --cyan-10:rgba(6,182,212,0.1);
  --cyan-20:rgba(6,182,212,0.2);
  --cyan-25:rgba(6,182,212,0.25);
  --cyan-30:rgba(6,182,212,0.3);
  --cyan-40:rgba(6,182,212,0.4);
  --cyan-50:rgba(6,182,212,0.5);
  --cyan-55:rgba(6,182,212,0.55);
  --cyan-70:rgba(6,182,212,0.7);
  --cyan-80:rgba(6,182,212,0.8);
  --cyan-92:rgba(6,182,212,0.92);
  --cyan-95:rgba(6,182,212,0.95);

  --purple-10:rgba(139,92,246,0.1);
  --purple-18:rgba(139,92,246,0.18);
  --purple-50:rgba(139,92,246,0.5);
  --purple-55:rgba(139,92,246,0.55);  /* twin of --cyan-55 */
  --purple-95:rgba(139,92,246,0.95);

  --blue-08:rgba(59,130,246,0.08);
  --blue-18:rgba(59,130,246,0.18);

  /* ---------- 5. elevation ---------- */
  --shadow-sm:0 4px 16px rgba(0,0,0,0.3);
  --shadow-md:0 8px 24px rgba(0,0,0,0.4);
  --shadow-lg:0 8px 40px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.05);
  --shadow-xl:0 24px 56px rgba(0,0,0,0.35),inset 0 1px 0 rgba(255,255,255,0.07);
  --shadow-drawer:-20px 0 60px rgba(0,0,0,0.55);
  --shadow-inset-top:inset 0 1px 0 rgba(255,255,255,0.12);

  /* ---------- 6. radius ---------- */
  --r-xs:3px;
  --r-sm:8px;
  --r-md:10px;
  --r-lg:16px;
  --r-xl:20px;
  --r-round:50%;

  /* ---------- 7. motion ---------- */
  --ease-out:cubic-bezier(0.22,1,0.36,1);      /* the house easing — 153 uses */
  --ease-in-out:cubic-bezier(0.65,0.05,0.36,1);
  --ease-soft:cubic-bezier(0.32,0.72,0.2,1);
  --dur-fast:0.18s;
  --dur-base:0.2s;
  --dur-slow:0.3s;

  /* ---------- 8. blur ---------- */
  --blur-sm:6px;
  --blur-md:20px;
  --blur-lg:28px;

  /* ---------- 9. touch ---------- */
  --tap-min:24px;      /* WCAG 2.5.8 AA floor */
  --tap-comfort:32px;  /* coarse-pointer target */
}