/* ============================================================ UC HEALTH TOOLS — MASTER DESIGN SYSTEM uc-theme.css | All tools link this file Variable naming convention: HCOR/Call-Schedule style (--bg-body, etc.) Drug Monitor aliases are provided at the bottom so OHH/index.html needs no find-and-replace on its CSS variable references. ============================================================ */ /* ── Google Fonts (each tool still loads this in ) ───────────────── */ /* ============================================================ CSS CUSTOM PROPERTIES ============================================================ */ :root { /* Brand */ --brand: #8B1E3A; --brand-light: #A8284A; --brand-dark: #6B1530; --brand-glow: rgba(139,30,58,0.25); /* Backgrounds */ --bg-body: #f0f2f5; --bg-surface: #ffffff; --bg-surface-2: #f7f8fa; --bg-nav: #1a1d23; --bg-nav-hover: #262a33; --bg-nav-active: var(--brand); /* Text */ --text-primary: #1a1d23; --text-secondary: #5f6577; --text-muted: #9ca3b4; --text-nav: #9ca3b4; --text-nav-active:#ffffff; /* Borders */ --border: #e2e5eb; --border-light: #eef0f4; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.06); --shadow-md: 0 4px 16px rgba(0,0,0,0.08); --shadow-lg: 0 12px 40px rgba(0,0,0,0.12); --shadow-glow: 0 0 24px var(--brand-glow); /* Semantic colours */ --success: #16a34a; --success-bg: #dcfce7; --warning: #ca8a04; --warning-bg: #fef9c3; --danger: #dc2626; --danger-bg: #fee2e2; --info: #0891b2; --info-bg: #e0f2fe; /* Radius */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; /* Transitions */ --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1); /* ── OHH / Drug Monitor aliases (backwards-compat) ── */ --bg: var(--bg-body); --surface: var(--bg-surface); --surface-2: var(--bg-surface-2); --nav: var(--bg-nav); --nav-hover: var(--bg-nav-hover); --text: var(--text-primary); --text-2: var(--text-secondary); --text-3: var(--text-muted); --warn: var(--warning); --warn-bg: var(--warning-bg); --r1: var(--radius-sm); --r2: var(--radius-md); --r3: var(--radius-lg); --shadow: var(--shadow-md); --glow: var(--shadow-glow); } [data-theme="dark"] { --bg-body: #0f1117; --bg-surface: #1a1d23; --bg-surface-2: #22262f; --bg-nav: #0a0c10; --bg-nav-hover: #1a1d23; --text-primary: #e8eaf0; --text-secondary: #9ca3b4; --text-muted: #5f6577; --border: #2d3140; --border-light: #22262f; --shadow-sm: 0 1px 3px rgba(0,0,0,0.2); --shadow-md: 0 4px 16px rgba(0,0,0,0.3); --shadow-lg: 0 12px 40px rgba(0,0,0,0.4); --success-bg: #052e16; --warning-bg: #422006; --danger-bg: #450a0a; --info-bg: #0c2a33; } /* ============================================================ RESET & BASE ============================================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg-body); color: var(--text-primary); min-height: 100vh; -webkit-font-smoothing: antialiased; transition: background var(--transition), color var(--transition); } a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; } code { font-family: 'Menlo', 'Consolas', monospace; font-size: 0.88em; background: var(--bg-surface-2); padding: 2px 6px; border-radius: var(--radius-sm); } .hidden { display: none !important; } /* ============================================================ SIDEBAR LAYOUT ============================================================ */ .sidebar { width: 260px; min-height: 100vh; background: var(--bg-nav); display: flex; flex-direction: column; position: fixed; left: 0; top: 0; bottom: 0; z-index: 100; transition: transform var(--transition); } .sidebar-brand { padding: 28px 24px 20px; border-bottom: 1px solid rgba(255,255,255,0.06); } .sidebar-brand h1 { font-family: 'Sora', sans-serif; font-size: 1.35em; font-weight: 800; color: #fff; letter-spacing: -0.02em; } .sidebar-brand h1 span { color: var(--brand-light); } .sidebar-brand p { font-size: 0.72em; color: var(--text-nav); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; } .nav-section { padding: 16px 12px 4px; font-size: 0.68em; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; } /* Works with both