/* ========================================================================= Design tokens — dark red / near-black premium theme. Single source of truth for colour, spacing, radius, shadow, typography, motion. Everything else references these custom properties so the whole surface restyles from one file. ========================================================================= */ :root { /* ---- surfaces (darkest -> lightest) */ --bg: #08090d; --bg-sidebar: #0e0d12; --bg-elevated: #131117; --bg-card: #17141b; --bg-card-2: #1c171e; --bg-input: #100e15; --bg-hover: #201a24; /* ---- brand red */ --red: #e53945; --red-bright: #ff4655; --red-hover: #6e1d26; --red-deep: #2a1015; --red-glow: rgba(229, 57, 69, 0.18); --red-glow-strong: rgba(229, 57, 69, 0.34); --red-tint: rgba(229, 57, 69, 0.10); --red-tint-2: rgba(229, 57, 69, 0.06); /* ---- text */ --text: #f5f5f7; --text-2: #a7a3ae; --text-muted: #6f6a78; --text-on-red: #fff5f5; /* ---- lines */ --border: rgba(255, 255, 255, 0.07); --border-strong: rgba(255, 255, 255, 0.12); --border-red: rgba(229, 57, 69, 0.45); /* ---- status */ --success: #32d583; --success-bg: rgba(50, 213, 131, 0.12); --warning: #f5c451; --warning-bg: rgba(245, 196, 81, 0.12); --error: #ff5d68; --error-bg: rgba(255, 93, 104, 0.12); --info: #6aa8ff; --info-bg: rgba(106, 168, 255, 0.12); /* ---- radii */ --r-xs: 6px; --r-sm: 9px; --r-md: 13px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px; /* ---- spacing scale (4px base) */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px; /* ---- shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.55); --shadow-lg: 0 20px 50px -18px rgba(0, 0, 0, 0.7); --shadow-red: 0 10px 34px -12px var(--red-glow-strong); --ring: 0 0 0 3px var(--red-glow); --ring-focus: 0 0 0 3px rgba(255, 70, 85, 0.4); /* ---- typography */ --font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", "Cascadia Code", ui-monospace, "Consolas", monospace; --fs-xs: 0.72rem; --fs-sm: 0.82rem; --fs-md: 0.9rem; --fs-base: 0.95rem; --fs-lg: 1.08rem; --fs-xl: 1.35rem; --fs-2xl: 1.8rem; --fs-3xl: 2.4rem; --lh: 1.55; /* ---- motion */ --t-fast: 130ms; --t: 190ms; --t-slow: 260ms; --ease: cubic-bezier(0.22, 0.72, 0.18, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* ---- layout metrics */ --sidebar-w: 264px; --topbar-h: 64px; --content-max: 1160px; --z-sidebar: 40; --z-topbar: 45; --z-dropdown: 60; --z-modal: 80; --z-toast: 90; color-scheme: dark; } /* -------------------------------------------------------------- light theme -- Opt-in via . Only the surfaces/text/lines change; the red brand identity, radii, spacing and motion carry over. */ :root[data-theme="light"] { --bg: #f4f2f7; --bg-sidebar: #ffffff; --bg-elevated: #ffffff; --bg-card: #ffffff; --bg-card-2: #f6f4f9; --bg-input: #ffffff; --bg-hover: #efecf3; --red: #d92d3a; --red-bright: #e53945; --red-hover: #b21f2c; --red-deep: #f7dde0; --red-glow: rgba(229, 57, 69, 0.14); --red-glow-strong: rgba(229, 57, 69, 0.22); --red-tint: rgba(229, 57, 69, 0.09); --red-tint-2: rgba(229, 57, 69, 0.05); --text: #1b1720; --text-2: #5a5563; --text-muted: #8b8693; --text-on-red: #fff5f5; --border: rgba(20, 10, 25, 0.10); --border-strong: rgba(20, 10, 25, 0.16); --border-red: rgba(229, 57, 69, 0.40); --success: #17915a; --success-bg: rgba(23, 145, 90, 0.12); --warning: #b5851f; --warning-bg: rgba(181, 133, 31, 0.14); --error: #d92d3a; --error-bg: rgba(217, 45, 58, 0.12); --info: #2f6fd6; --info-bg: rgba(47, 111, 214, 0.12); --shadow-sm: 0 1px 2px rgba(30, 15, 35, 0.08); --shadow-md: 0 8px 24px -10px rgba(30, 15, 35, 0.16); --shadow-lg: 0 20px 48px -18px rgba(30, 15, 35, 0.26); --shadow-red: 0 10px 30px -12px rgba(229, 57, 69, 0.26); --ring: 0 0 0 3px var(--red-glow); color-scheme: light; } /* NOTE: intentionally NOT zeroing transition durations under prefers-reduced-motion. Windows (Ease of Access) and RDP/performance-mode sessions frequently report reduced-motion=true by default even when nobody asked for it, which silently turned every transition instant on this deployment. Motion durations stay real; re-add reduction only behind an explicit in-app toggle if wanted, not the raw OS signal. */