/* ═══════════════════════════════════════════════════════════════════ LUX SHARED DESIGN TOKENS — tokens.css (Phase 2 Move 1, oauth-ui #692) One dual-theme token vocabulary for EVERY *.bem.solutions surface. Canonical values lifted 1:1 from index.html :root blocks (L165–226, retheme 2026-06-21). index.html keeps its inline twin until the coordinated SPA delink move — keep the two in sync (lint gate will enforce; any drift: index.html wins). Usage (standalone pages): Variables only — zero cascade side-effects. Pages may opt into base styling by putting class="lux-base" on . ═══════════════════════════════════════════════════════════════════ */ /* Default = light (platform default when no data-theme set) */ :root, :root[data-theme="light"] { /* MODERN PREMIUM — warm-luxe */ --bg: #FAFAF8; --sidebar-bg: #F5F4F0; --card-bg: #FFFFFF; --card-hover: #FCFBF9; --accent: #0A6E50; --accent-hover: #08583F; --accent-light: rgba(10,110,80,0.08); --text: #17150F; --text-2: #6B655C; --text-3: #767069; --border: #ECEAE3; --input-bg: #FFFFFF; --input-border: #E2DFD7; --user-bubble: #0A6E50; --lux-bubble: #FFFFFF; --topbar-bg: #FAFAF8; --scrollbar: #D8D4CB; --sidebar-text: #2A2722; --sidebar-text2: #767069; --sidebar-hover: #EFEEE8; --sidebar-active:#E9F1EC; --tag-active-bg: rgba(10,110,80,0.10); --tag-active-c: #0A6E50; --tag-paused-bg: rgba(154,107,18,0.12); --tag-paused-c: #9A6B12; --tag-offline-bg:rgba(180,62,62,0.12); --tag-offline-c: #B43E3E; --tag-blue-bg: rgba(44,90,160,0.12); --tag-blue-c: #2C5AA0; --shadow: 0 1px 3px rgba(23,21,15,0.06), 0 4px 14px rgba(23,21,15,0.05); } :root[data-theme="dark"] { /* DARK LUXE — cinematic */ --bg: #0B0D0C; --sidebar-bg: #0E120F; --card-bg: #141815; --card-hover: #1A1F1B; --accent: #24BC88; --accent-hover: #1FA877; --accent-light: rgba(36,188,136,0.14); --text: #F4F5F1; --text-2: #A6A8A0; --text-3: #6E716A; --border: #242826; --input-bg: #141815; --input-border: #2C312E; --user-bubble: #24BC88; --lux-bubble: #141815; --topbar-bg: #0B0D0C; --scrollbar: #242826; --sidebar-text: #D6D3CB; --sidebar-text2: #6E716A; --sidebar-hover: #1A1F1B; --sidebar-active:#14241B; --tag-active-bg: rgba(36,188,136,0.18); --tag-active-c: #24BC88; --tag-paused-bg: rgba(212,160,40,0.16); --tag-paused-c: #D4A028; --tag-offline-bg:rgba(220,90,90,0.16); --tag-offline-c: #DC5A5A; --tag-blue-bg: rgba(90,140,210,0.16); --tag-blue-c: #5A8CD2; --shadow: 0 1px 3px rgba(0,0,0,0.4), 0 4px 14px rgba(0,0,0,0.3); } /* ── Scales (theme-independent) — new in Move 1; adopt going forward, migrate one-offs opportunistically ─────────────────────────── */ :root { /* status semantics (map to the tag palette) */ --good: var(--tag-active-c); --warn: var(--tag-paused-c); --bad: var(--tag-offline-c); /* spacing — 4px grid */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; /* type scale */ --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px; --fs-base: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-xxl: 28px; /* radius scale */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px; /* font stacks */ --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'Cascadia Code', Consolas, monospace; } /* Opt-in base (pages add class="lux-base" to ) */ body.lux-base { background: var(--bg); color: var(--text); font-family: var(--font-ui); }