/* ╔══════════════════════════════════════════════════════════════════════╗ ║ LIQUID GLASS — CONTROL PANEL ║ ║ Edit these to tune the glass EVERYWHERE (buttons, pills, navs). ║ ║ One source of truth — change a value here and every glass surface ║ ║ updates together. ║ ║ ║ ║ v2 · 2026-07-28 — the fill now SURVIVES A LIGHT GROUND. ║ ║ See "What changed in v2" at the bottom of this file. ║ ╚══════════════════════════════════════════════════════════════════════╝ */ :root { /* ── TINT — the colour wash ───────────────────────────────────────── A MID-TONE, not white. This is the single most important value in the kit and the one most likely to be "corrected" back by mistake. v1 was rgba(255,255,255,0.05) — a dark-ground recipe. It reads as a pane only because it is lighter than what is behind it. Measured on a light canvas (#F4F2EE) it composited to rgb(244.5,242.6,238.8) against a ground of rgb(244,242,238): LIGHTER than the surface it sits on. The pane was not faint there, it was INVERTED — glass is meant to sit ON a surface, and that one receded behind it. Raising the alpha only deepens the failure. A mid-tone lightens a dark ground and darkens a light one, so ONE value behaves correctly on both: on #0a0a0a → rgb(27,27,26) +17 lighter on #F4F2EE → rgb(233,231,226) −11 darker on #FFFFFF → rgb(243,243,241) −12 darker Correct direction on every ground. The hue is a warm neutral rather than pure grey, which gives the material a faint warmth instead of reading as generic frosted plastic. Re-tint it to your own brand's neutral — keep the LIGHTNESS mid-range. */ --lg-fill: rgba(154, 151, 138, 0.12); /* Brand-tinted variant. 0.28 rather than v1's 0.22 for the same reason: at 22% over a light canvas it composited to a pale peach that read as a tinted rectangle rather than coloured glass. */ --lg-fill-orange: rgba(255, 163, 63, 0.28); --lg-fill-orange-hover: rgba(255, 163, 63, 0.38); /* WIDE bars (full-width navs) keep their own DARK tint and are deliberately not mid-toned: a dark pane already survives a light ground, and a wide bar sits over arbitrary content where a warm cast would soften legibility. */ --lg-fill-nav: rgba(20, 22, 30, 0.52); /* ── FROST — the blur (atoms, so each is tunable; --lg-frost composes them) */ --lg-blur: 8px; /* frost blur radius */ --lg-sat: 1.5; /* frost saturation */ --lg-frost: blur(var(--lg-blur)) saturate(var(--lg-sat)); /* ── EDGE — hairline rim */ --lg-rim: 0.51px solid rgba(255, 255, 255, 0.14); /* ── INK — the label colour ON the glass ──────────────────────────── v2 addition. The class used to set a material but never a text colour, so a bare `