/* ========================================================================== KAMSIS MEDRECORD — SHARED THEME (Slate Glassmorphism) Include this file AFTER the page's own stylesheet on every page. It provides the canonical light variables (kept in sync with the values already used in index.css / ma_dashboard.css) plus the dark-mode override block that actually makes the toggle do something. ========================================================================== */ :root { /* Brand & Slate Accents */ --primary: #222222; --primary-dark: #111111; --primary-soft: #e8e8ec; /* Health / semantic */ --success: #159a62; --success-soft: #eaf8f1; --danger: #d94b5c; --danger-soft: #fff0f2; --warning: #d97706; --warning-soft: #fef3c7; --info: #2563eb; --info-soft: rgba(37, 99, 235, 0.12); /* Neutral tones */ --ink: #111111; --ink-soft: #333333; --muted: #666666; --line: #dcdcdc; --background: #e8e8ec; --surface: rgba(255, 255, 255, 0.85); --surface-soft: rgba(255, 255, 255, 0.60); --surface-solid: #ffffff; --border: rgba(255, 255, 255, 0.80); /* Effects & depth */ --shadow-sm: 0 6px 20px rgba(0, 0, 0, .04); --shadow-md: 0 18px 45px rgba(0, 0, 0, .07); --shadow-lg: 0 25px 70px rgba(0, 0, 0, .10); --radius-sm: 10px; --radius-md: 16px; --radius-lg: 22px; --radius-xl: 28px; } /* ========================================================================== DARK MODE — activated by ========================================================================== */ [data-theme="dark"] { --primary: #e5e5e5; --primary-dark: #ffffff; --primary-soft: #2a2a2a; --success: #34d399; --success-soft: rgba(52, 211, 153, 0.12); --danger: #f87171; --danger-soft: rgba(248, 113, 113, 0.14); --warning: #fbbf24; --warning-soft: rgba(251, 191, 36, 0.14); --info: #60a5fa; --info-soft: rgba(96, 165, 250, 0.14); --ink: #f1f1f1; --ink-soft: #d8d8d8; --muted: #9a9a9a; --line: #3a3a3a; --background: #121212; --surface: rgba(30, 30, 30, 0.85); --surface-soft: rgba(255, 255, 255, 0.06); --surface-solid: #1e1e1e; --border: rgba(255, 255, 255, 0.08); --shadow-sm: 0 6px 20px rgba(0, 0, 0, .25); --shadow-md: 0 18px 45px rgba(0, 0, 0, .35); --shadow-lg: 0 25px 70px rgba(0, 0, 0, .45); } [data-theme="dark"] body { background: var(--background); color: var(--ink); } /* Generic fallbacks: any page still using literal white cards/inputs benefits from this even before per-page overrides are added. */ [data-theme="dark"] table, [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { color-scheme: dark; } /* ========================================================================== THEME TOGGLE BUTTON — shared across every page ========================================================================== */ .theme-toggle { position: fixed; top: 18px; right: 18px; z-index: 2000; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: var(--surface-solid); border: 1px solid var(--line); color: var(--ink); border-radius: 12px; cursor: pointer; font-size: 16px; box-shadow: var(--shadow-sm); transition: transform 0.25s ease, background 0.25s ease; } .theme-toggle:hover { transform: scale(1.08) translateY(-2px); background: var(--surface-soft); } .theme-toggle:active { transform: scale(0.96); } @media (max-width: 600px) { .theme-toggle { top: 12px; right: 12px; width: 38px; height: 38px; font-size: 14px; } }