/* ========================================================= ElimoraHealth Base Theme Shared foundation for staff app + patient portal ========================================================= */ :root { --eh-navy-950: #07111f; --eh-navy-900: #0b1628; --eh-navy-850: #101f35; --eh-navy-800: #132942; --eh-navy-700: #17365c; --eh-bg: #f4f7fb; --eh-card: #ffffff; --eh-border: #e3edf7; --eh-text: #102033; --eh-muted: #6b7a90; --eh-soft-text: #94a3b8; --eh-blue: #0f6fff; --eh-cyan: #06b6d4; --eh-teal: #14b8a6; --eh-green: #22c55e; --eh-amber: #f59e0b; --eh-orange: #f97316; --eh-red: #ef4444; --eh-purple: #8b5cf6; --eh-pink: #ec4899; --eh-slate: #64748b; --eh-soft-blue: #eaf3ff; --eh-soft-cyan: #ecfeff; --eh-soft-teal: #e6fffb; --eh-soft-green: #ecfdf3; --eh-soft-amber: #fff7e6; --eh-soft-orange: #fff1e8; --eh-soft-red: #feecec; --eh-soft-purple: #f3e8ff; --eh-soft-pink: #fdf2f8; --eh-soft-slate: #eef2f7; --eh-radius-sm: 10px; --eh-radius-md: 14px; --eh-radius-lg: 18px; --eh-radius-xl: 24px; --eh-radius-2xl: 32px; --eh-radius-pill: 999px; --eh-shadow-soft: 0 12px 34px rgba(15, 35, 60, 0.06); --eh-shadow-card: 0 18px 50px rgba(15, 35, 60, 0.10); --eh-shadow-command: 0 24px 70px rgba(16, 31, 53, 0.22); --eh-header-height: 76px; --eh-sidebar-width: 270px; } html, body { min-height: 100%; } body { background: radial-gradient(circle at top left, rgba(20, 184, 166, 0.08), transparent 28%), linear-gradient(180deg, #f7fbff 0%, var(--eh-bg) 100%); color: var(--eh-text); font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 0.95rem; } a { text-decoration: none; } .text-eh-muted { color: var(--eh-muted) !important; } .text-eh-soft { color: var(--eh-soft-text) !important; } .bg-eh-app { background: var(--eh-bg) !important; } .fw-black { font-weight: 900 !important; } /* ========================================================= Theme switcher — responds to data-theme on ========================================================= */ :root, [data-theme="navy"] { --eh-primary: #1a237e; --eh-primary-hover: #283593; --eh-sidebar-bg: linear-gradient(180deg, #07111f 0%, #0b1628 100%); --eh-topbar-bg: rgba(255, 255, 255, 0.72); } [data-theme="forest"] { --eh-primary: #1b5e20; --eh-primary-hover: #2e7d32; --eh-sidebar-bg: linear-gradient(180deg, #0d2813 0%, #1b5e20 100%); --eh-topbar-bg: rgba(255, 255, 255, 0.72); } [data-theme="charcoal"] { --eh-primary: #3e2723; --eh-primary-hover: #4e342e; --eh-sidebar-bg: linear-gradient(180deg, #1a1311 0%, #3e2723 100%); --eh-topbar-bg: rgba(255, 255, 255, 0.72); } [data-theme="maroon"] { --eh-primary: #880e4f; --eh-primary-hover: #ad1457; --eh-sidebar-bg: linear-gradient(180deg, #1f0a14 0%, #880e4f 100%); --eh-topbar-bg: rgba(255, 255, 255, 0.72); } [data-theme="slate"] { --eh-primary: #263238; --eh-primary-hover: #37474f; --eh-sidebar-bg: linear-gradient(180deg, #0d1419 0%, #263238 100%); --eh-topbar-bg: rgba(255, 255, 255, 0.72); } /* Apply to key UI elements */ .eh-sidebar { background: var(--eh-sidebar-bg); } .eh-topbar { background: var(--eh-topbar-bg); backdrop-filter: blur(12px); } .btn-primary { background: var(--eh-primary); border-color: var(--eh-primary); } .btn-primary:hover { background: var(--eh-primary-hover); border-color: var(--eh-primary-hover); }