/* ========================================================================== Theme Engine — CSS custom-property layer (ARCHITECTURE.md §19) ========================================================================== Every color-bearing token below reuses the exact variable names already consumed across static/css/*.css (--color-gold, --glass-bg, --shadow-gold, ...) so swapping `data-theme` on re-skins the whole site with zero changes anywhere else. No selector outside this file needs to know a theme exists. Usage: Server-side, ThemeService.resolve(clinic) decides which value to render into that attribute (§19/§20) — this file only supplies the presets. Non-color tokens (typography, spacing, radius, motion, --glass-blur) are NOT theme-scoped and stay in variables.css untouched; this file only ever assigns colors, glass/gradient/shadow values built from them. ========================================================================== */ /* ---- Luxury Gold (default) ------------------------------------------- */ :root, [data-theme="luxury-gold"] { --color-bg: #0D0D0D; --color-bg-elevated: #141414; --color-bg-elevated-2: #1A1A1A; /* Text/icon color for anything painted on --gradient-gold/--color-gold. Always the theme's DARK ink, independent of --color-bg — in a dark-surface theme that's --color-bg itself, but in a light-surface theme (light, medical-blue) --color-bg is light, so using it here made gold buttons/badges/checkmarks render near-invisible (light text on a light-ish gold). See each theme block below. */ --color-on-gold: var(--color-bg); /* Frosted overlay behind the dashboard/patient-portal topbar (.dashboard-topbar) — was hardcoded to rgba(13,13,13,0.65) regardless of theme, so a light theme's topbar icon buttons (which assume they sit on a light surface — dark ink, near-transparent light glass) ended up on an always-dark bar: dark-on-dark, nearly invisible. Dark themes keep this exact value (zero visual change); light themes get a light-toned overlay instead, see below. */ --topbar-bg: rgba(13, 13, 13, 0.65); --color-gold: #C6A46C; --color-gold-light: #E7CE9F; --color-gold-dark: #8F7141; --color-white: #F7F7F7; --color-gray: #BDBDBD; --color-gray-dim: #8A8A8A; --color-success: #7FB88A; --color-error: #D98080; --glass-bg: rgba(247, 247, 247, 0.04); --glass-bg-strong: rgba(247, 247, 247, 0.06); --glass-border: rgba(198, 164, 108, 0.22); --gradient-gold: linear-gradient(135deg, var(--color-gold-light) 0%, var(--color-gold) 50%, var(--color-gold-dark) 100%); --gradient-fade-bottom: linear-gradient(180deg, transparent 0%, var(--color-bg) 100%); --gradient-radial-glow: radial-gradient(circle, rgba(198, 164, 108, 0.35) 0%, rgba(198, 164, 108, 0) 70%); --shadow-soft: 0 20px 60px -20px rgba(0, 0, 0, 0.6); --shadow-gold: 0 10px 40px -12px rgba(198, 164, 108, 0.45); --shadow-inset-hairline: inset 0 1px 0 rgba(247, 247, 247, 0.06); } /* ---- Dark (neutral graphite/silver) ----------------------------------- */ [data-theme="dark"] { --color-bg: #111214; --color-bg-elevated: #18191C; --color-bg-elevated-2: #202226; --color-on-gold: var(--color-bg); --topbar-bg: rgba(17, 18, 20, 0.65); --color-gold: #C9CDD3; --color-gold-light: #E7E9EC; --color-gold-dark: #8B9096; --color-white: #F5F6F7; --color-gray: #B7BBC1; --color-gray-dim: #82868C; --color-success: #6FCF97; --color-error: #EB5757; --glass-bg: rgba(245, 246, 247, 0.04); --glass-bg-strong: rgba(245, 246, 247, 0.06); --glass-border: rgba(201, 205, 211, 0.18); --gradient-gold: linear-gradient(135deg, var(--color-gold-light) 0%, var(--color-gold) 50%, var(--color-gold-dark) 100%); --gradient-fade-bottom: linear-gradient(180deg, transparent 0%, var(--color-bg) 100%); --gradient-radial-glow: radial-gradient(circle, rgba(201, 205, 211, 0.30) 0%, rgba(201, 205, 211, 0) 70%); --shadow-soft: 0 20px 60px -20px rgba(0, 0, 0, 0.65); --shadow-gold: 0 10px 40px -12px rgba(201, 205, 211, 0.35); --shadow-inset-hairline: inset 0 1px 0 rgba(245, 246, 247, 0.06); } /* ---- Light -------------------------------------------------------------- NOTE: `--color-white` is reused across every theme as the primary foreground/text token (legacy name from the original dark-first build). In light themes its *value* is a dark ink, not literally white — the name stays for drop-in compatibility with existing component CSS. */ [data-theme="light"] { --color-bg: #FAF8F5; --color-bg-elevated: #FFFFFF; --color-bg-elevated-2: #F2EEE7; /* --color-bg is light here, so gold-background text needs the theme's dark ink (--color-white below) instead — see the base comment on --color-on-gold in the luxury-gold block above. */ --color-on-gold: var(--color-white); /* Light-surface theme — topbar overlay must be light too, or the icon buttons' light-glass styling sits on a dark bar and vanishes (see the base comment on --topbar-bg in the luxury-gold block). */ --topbar-bg: rgba(250, 248, 245, 0.75); --color-gold: #B8935A; --color-gold-light: #D8B685; --color-gold-dark: #8A6A3E; --color-white: #1A1A1A; --color-gray: #5B5754; --color-gray-dim: #8C877F; --color-success: #3F9962; --color-error: #C24444; --glass-bg: rgba(20, 16, 10, 0.03); --glass-bg-strong: rgba(20, 16, 10, 0.05); --glass-border: rgba(184, 147, 90, 0.25); --gradient-gold: linear-gradient(135deg, var(--color-gold-light) 0%, var(--color-gold) 50%, var(--color-gold-dark) 100%); --gradient-fade-bottom: linear-gradient(180deg, transparent 0%, var(--color-bg) 100%); --gradient-radial-glow: radial-gradient(circle, rgba(184, 147, 90, 0.25) 0%, rgba(184, 147, 90, 0) 70%); --shadow-soft: 0 20px 60px -20px rgba(20, 16, 10, 0.18); --shadow-gold: 0 10px 40px -12px rgba(184, 147, 90, 0.30); --shadow-inset-hairline: inset 0 1px 0 rgba(20, 16, 10, 0.05); } /* ---- Medical Blue (clinical, light) ------------------------------------ */ [data-theme="medical-blue"] { --color-bg: #F4F8FB; --color-bg-elevated: #FFFFFF; --color-bg-elevated-2: #EAF2F8; /* light --color-bg — see the light theme's matching comment above */ --color-on-gold: var(--color-white); --topbar-bg: rgba(244, 248, 251, 0.75); --color-gold: #2E6DA4; --color-gold-light: #5B93C7; --color-gold-dark: #1E4A73; --color-white: #16232E; --color-gray: #51616D; --color-gray-dim: #8B98A2; --color-success: #2F9E63; --color-error: #D65656; --glass-bg: rgba(22, 35, 46, 0.03); --glass-bg-strong: rgba(22, 35, 46, 0.05); --glass-border: rgba(46, 109, 164, 0.22); --gradient-gold: linear-gradient(135deg, var(--color-gold-light) 0%, var(--color-gold) 50%, var(--color-gold-dark) 100%); --gradient-fade-bottom: linear-gradient(180deg, transparent 0%, var(--color-bg) 100%); --gradient-radial-glow: radial-gradient(circle, rgba(46, 109, 164, 0.25) 0%, rgba(46, 109, 164, 0) 70%); --shadow-soft: 0 20px 60px -20px rgba(22, 35, 46, 0.15); --shadow-gold: 0 10px 40px -12px rgba(46, 109, 164, 0.35); --shadow-inset-hairline: inset 0 1px 0 rgba(22, 35, 46, 0.05); } /* ---- Rose Gold (warm, dark surface) ------------------------------------ */ [data-theme="rose-gold"] { --color-bg: #170F11; --color-bg-elevated: #1E1417; --color-bg-elevated-2: #26181C; --color-on-gold: var(--color-bg); --topbar-bg: rgba(23, 15, 17, 0.65); --color-gold: #C98A93; --color-gold-light: #E3B4BA; --color-gold-dark: #95606A; --color-white: #F8F1F2; --color-gray: #C7ADB1; --color-gray-dim: #8F7A7D; --color-success: #7FB88A; --color-error: #D97C7C; --glass-bg: rgba(248, 241, 242, 0.04); --glass-bg-strong: rgba(248, 241, 242, 0.06); --glass-border: rgba(201, 138, 147, 0.22); --gradient-gold: linear-gradient(135deg, var(--color-gold-light) 0%, var(--color-gold) 50%, var(--color-gold-dark) 100%); --gradient-fade-bottom: linear-gradient(180deg, transparent 0%, var(--color-bg) 100%); --gradient-radial-glow: radial-gradient(circle, rgba(201, 138, 147, 0.32) 0%, rgba(201, 138, 147, 0) 70%); --shadow-soft: 0 20px 60px -20px rgba(0, 0, 0, 0.6); --shadow-gold: 0 10px 40px -12px rgba(201, 138, 147, 0.4); --shadow-inset-hairline: inset 0 1px 0 rgba(248, 241, 242, 0.06); } /* ---- Emerald (rich green, dark surface) -------------------------------- */ [data-theme="emerald"] { --color-bg: #0A1410; --color-bg-elevated: #0F1D17; --color-bg-elevated-2: #15271F; --color-on-gold: var(--color-bg); --topbar-bg: rgba(10, 20, 16, 0.65); --color-gold: #4E9E77; --color-gold-light: #7FC7A0; --color-gold-dark: #2E6B4C; --color-white: #F2F7F4; --color-gray: #B7CBC0; --color-gray-dim: #82988C; --color-success: #4E9E77; --color-error: #D97676; --glass-bg: rgba(242, 247, 244, 0.04); --glass-bg-strong: rgba(242, 247, 244, 0.06); --glass-border: rgba(78, 158, 119, 0.22); --gradient-gold: linear-gradient(135deg, var(--color-gold-light) 0%, var(--color-gold) 50%, var(--color-gold-dark) 100%); --gradient-fade-bottom: linear-gradient(180deg, transparent 0%, var(--color-bg) 100%); --gradient-radial-glow: radial-gradient(circle, rgba(78, 158, 119, 0.32) 0%, rgba(78, 158, 119, 0) 70%); --shadow-soft: 0 20px 60px -20px rgba(0, 0, 0, 0.6); --shadow-gold: 0 10px 40px -12px rgba(78, 158, 119, 0.4); --shadow-inset-hairline: inset 0 1px 0 rgba(242, 247, 244, 0.06); } /* ---- White Label --------------------------------------------------------- Not a fixed palette — a Clinic overrides individual tokens on top of the Luxury Gold defaults (ARCHITECTURE.md §19: "nullable columns; null = inherit from theme"). ClinicResolverService/ThemeService injects only the `--wl-*` variables a clinic actually customized (e.g. inline `style="--wl-primary:#123456"` on ); every other `--wl-*` falls back to its Luxury Gold default automatically. */ [data-theme="white-label"] { --color-bg: var(--wl-bg, #0D0D0D); --color-bg-elevated: var(--wl-bg-elevated, #141414); --color-bg-elevated-2: var(--wl-bg-elevated-2, #1A1A1A); /* A clinic that overrides --wl-bg to a light color should also set --wl-on-gold (dark ink) to keep gold-background text readable — defaults to the Luxury Gold dark default otherwise. */ --color-on-gold: var(--wl-on-gold, #0D0D0D); --topbar-bg: var(--wl-topbar-bg, rgba(13, 13, 13, 0.65)); --color-gold: var(--wl-primary, #C6A46C); --color-gold-light: var(--wl-primary-light, #E7CE9F); --color-gold-dark: var(--wl-primary-dark, #8F7141); --color-white: var(--wl-text, #F7F7F7); --color-gray: var(--wl-text-muted, #BDBDBD); --color-gray-dim: var(--wl-text-dim, #8A8A8A); --color-success: var(--wl-success, #7FB88A); --color-error: var(--wl-error, #D98080); --glass-bg: var(--wl-glass-bg, rgba(247, 247, 247, 0.04)); --glass-bg-strong: var(--wl-glass-bg-strong, rgba(247, 247, 247, 0.06)); --glass-border: var(--wl-glass-border, rgba(198, 164, 108, 0.22)); --gradient-gold: linear-gradient(135deg, var(--color-gold-light) 0%, var(--color-gold) 50%, var(--color-gold-dark) 100%); --gradient-fade-bottom: linear-gradient(180deg, transparent 0%, var(--color-bg) 100%); --gradient-radial-glow: radial-gradient(circle, var(--wl-glow, rgba(198, 164, 108, 0.35)) 0%, rgba(198, 164, 108, 0) 70%); --shadow-soft: var(--wl-shadow-soft, 0 20px 60px -20px rgba(0, 0, 0, 0.6)); --shadow-gold: var(--wl-shadow-accent, 0 10px 40px -12px rgba(198, 164, 108, 0.45)); --shadow-inset-hairline: inset 0 1px 0 var(--wl-hairline, rgba(247, 247, 247, 0.06)); }