/** * DenyZero — Corporate Healthcare Theme * Meditech/Epic-inspired light design system * All pages link to this file for shared variables and base styles. */ /* ── Google Fonts (loaded in HTML for each page as well) ── */ /* ── Design Tokens ── */ :root { /* Backgrounds */ --bg-deep: #f8fafc; --bg-card: #ffffff; --bg-card2: #f8fafc; --bg-elevated: #f1f5f9; /* Brand — Corporate Blue */ --accent: #1a56db; --accent-soft: #1e40af; --accent-glow: rgba(26, 86, 219, 0.12); --accent-dim: rgba(26, 86, 219, 0.10); /* Status colors */ --red: #dc2626; --red-glow: rgba(220, 38, 38, 0.10); --red-light: #ef4444; --yellow: #d97706; --yellow-glow: rgba(217, 119, 6, 0.10); --green: #059669; --green-glow: rgba(5, 150, 105, 0.10); --blue: #2563eb; --blue-glow: rgba(37, 99, 235, 0.10); --warn: #d97706; --error: #dc2626; --info: #2563eb; /* Typography */ --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #94a3b8; --text: #0f172a; /* Borders & Dividers */ --border: rgba(0, 0, 0, 0.08); --border-strong: rgba(0, 0, 0, 0.14); /* Elevation */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.04); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04); /* Layout */ --radius: 12px; --radius-sm: 8px; --radius-lg: 16px; --max-width: 1200px; } /* ── Base Reset ── */ *, *::before, *::after { box-sizing: border-box; } /* ── Shared Nav (fixed, white glass) ── */ nav.site-nav, nav.dz-nav { box-shadow: var(--shadow-sm); } /* ── Shared Card ── */ .dz-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs); } /* ── Badge Utilities ── */ .badge-green { background: rgba(5, 150, 105, 0.12); color: #059669; } .badge-blue { background: rgba(26, 86, 219, 0.12); color: #1a56db; } .badge-red { background: rgba(220, 38, 38, 0.12); color: #dc2626; } .badge-orange{ background: rgba(217, 119, 6, 0.12); color: #d97706; } .badge-grey { background: rgba(100, 116, 139, 0.10); color: #64748b; } /* ── PHI Banner (light) ── */ .phi-banner { background: rgba(217, 119, 6, 0.07); border: 1px solid rgba(217, 119, 6, 0.25); border-radius: var(--radius); padding: 0.875rem 1.25rem; display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1.5rem; } .phi-banner-text { font-size: 0.85rem; color: #92400e; line-height: 1.5; font-weight: 500; } .phi-banner-text a { color: var(--accent); text-decoration: underline; } /* ── Shared Footer ── */ .dz-footer { padding: 2.5rem 2rem; text-align: center; border-top: 1px solid var(--border); background: var(--bg-elevated); } .dz-footer-links { display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 0.75rem; flex-wrap: wrap; } .dz-footer-links a { font-size: 0.82rem; color: var(--text-secondary); text-decoration: none; transition: color 0.2s; } .dz-footer-links a:hover { color: var(--accent); } .dz-footer-copy { font-size: 0.8rem; color: var(--text-muted); } /* ── Auth Overlay (light) ── */ .auth-overlay-light { background: rgba(248, 250, 252, 0.98); backdrop-filter: blur(12px); } /* ── Spinner ── */ .spinner { border-top-color: var(--accent) !important; } /* ── Accessibility ── */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* ── Utility ── */ .text-accent { color: var(--accent); } .text-muted { color: var(--text-muted); } .text-error { color: var(--error); } .text-warn { color: var(--warn); } .text-success { color: var(--green); }