/* Benchra — shared design tokens (two-theme system). Single source of truth for login.html (benchra.net + pricing.benchra.net, same file/root) and pricing.benchra.net's dashboard.html/js. 2026-08-25: replaced the 2026-07-30 forced-dark-always system with a real light/dark pair, both independently verified against WCAG AA (4.5:1 normal text, 3:1 large/bold) — see the legibility audit this revision closes out. Applies via [data-theme="light"|"dark"] on , set by a blocking inline script in (see dashboard.html / login.html) before first paint. LIGHT is the default when no preference is stored yet. Structure: --text3 was retired as a text color in the prior dark palette (it couldn't clear AA against any dark surface here) and now aliases --text2 in both themes — a third, even-fainter text tier isn't achievable within either palette's contrast budget. --faint / --purple were dropped: --faint only ever fed the broken --text3, and --purple was a name for a hue that never existed (an alias for --accent) — exactly the kind of trap that caused a live invisible-text bug during the audit. Its 3 call sites in dashboard.html now reference --accent directly. */ :root { color-scheme: light; /* ── LIGHT (default) ── */ --bg: #ffffff; --fg: #16171a; --muted: #5b5e66; --hair: rgba(0,0,0,.10); --card: rgba(0,0,0,.025); --accent: #4F46E5; --accent-fg: #ffffff; --accent-hover: #4338CA; --error: #b91c1c; --ok: #0f6b32; --bg0: var(--bg); --bg1: #f7f7f8; --bg2: rgba(0,0,0,.035); --bg3: rgba(0,0,0,.06); --border: var(--hair); --border2: rgba(0,0,0,.16); --text: var(--fg); --text2: var(--muted); --text3: var(--text2); --brand: var(--accent); --brand2: var(--accent-hover); --brand3: rgba(79,70,229,.08); --green: var(--ok); --green2: rgba(15,107,50,.10); --red: var(--error); --red2: rgba(185,28,28,.10); --amber: #92400e; --amber2: rgba(146,64,14,.10); --r: 12px; --r2: 16px; } /* ── DARK ── (2026-07-30 docket palette, corrected 2026-08-25: --muted raised #8a8a8a → #9a9a9a and --text3 re-pointed at --muted instead of the too-dark --faint — both verified to clear AA against every background tier here, including the palette's own lightest card tone. ) */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0a0a0a; --fg: #f5f5f5; --muted: #9a9a9a; --hair: rgba(255,255,255,.12); --card: rgba(255,255,255,.03); --accent: #f5f5f5; --accent-fg: #0a0a0a; --accent-hover: #ffffff; --error: #f87171; --ok: #4ec77e; --bg0: var(--bg); --bg1: #141414; --bg2: rgba(255,255,255,.04); --bg3: rgba(255,255,255,.08); --border: var(--hair); --border2: rgba(255,255,255,.18); --text: var(--fg); --text2: var(--muted); --text3: var(--text2); --brand: var(--accent); --brand2: var(--accent-hover); --brand3: rgba(245,245,245,.06); --green: var(--ok); --green2: rgba(78,199,126,.10); --red: var(--error); --red2: rgba(248,113,113,.10); --amber: #d6a54a; --amber2: rgba(214,165,74,.10); } /* Explicit [data-theme="light"] block (identical to the :root default) so a JS-driven switch back to light after a session in dark mode is a plain attribute swap, not a "remove the attribute" special case. */ :root[data-theme="light"] { color-scheme: light; --bg: #ffffff; --fg: #16171a; --muted: #5b5e66; --hair: rgba(0,0,0,.10); --card: rgba(0,0,0,.025); --accent: #4F46E5; --accent-fg: #ffffff; --accent-hover: #4338CA; --error: #b91c1c; --ok: #0f6b32; --bg0: var(--bg); --bg1: #f7f7f8; --bg2: rgba(0,0,0,.035); --bg3: rgba(0,0,0,.06); --border: var(--hair); --border2: rgba(0,0,0,.16); --text: var(--fg); --text2: var(--muted); --text3: var(--text2); --brand: var(--accent); --brand2: var(--accent-hover); --brand3: rgba(79,70,229,.08); --green: var(--ok); --green2: rgba(15,107,50,.10); --red: var(--error); --red2: rgba(185,28,28,.10); --amber: #92400e; --amber2: rgba(146,64,14,.10); }