:root { /* Light Theme (Default) */ --bg-body: #f4f6f8; --bg-card: #ffffff; --text-main: #2c3e50; --text-muted: #64748b; --border-color: #e2e8f0; --table-header-bg: #f8fafc; --surface-color: #ffffff; --bg-tinted: #cfcfcf; --dyn-header-bg: #d5e4f4; /* light purple (placeholder) */ --dyn-header-edge: rgb(124 152 182 / 0.54); --primary-color: #3b82f6; --primary-hover: #2563eb; --primary-row-hover: rgb(37 99 235 / 0.07); --accent-omega6: #f59e0b; --accent-danger: #ef4444; --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); --shadow-down: 0 2px 8px rgba(0, 0, 0, 0.12); /* ── Typography (overridable via JS / PHP session) ── */ --font-family: 'Inter', system-ui, -apple-system, sans-serif; --font-size-base: 16px; /* Legacy alias */ --font-sans: var(--font-family); --spacing-md: 1rem; --spacing-lg: 1.5rem; --radius-md: 0.5rem; --radius-sm: 0.25rem; /* Buttons / forms / actions */ --button_apply_bg: #3b82f6; --button_cancel_bg: #e2e8f0; --button_del_bg: #ec3c7b; --form_toggle_on: #3bf6ca; --form_toggle_hover: #3be6f6; --form_toggle_off: #e2e8f0; /* ── Secondary / legacy token names ─────────────────────────────── These names were used across pages via var(--x, #fallback) but were never actually declared, so every use silently fell back to a HARD-CODED LIGHT COLOUR — which is why those elements did not react to dark mode. Values below match the old fallbacks exactly, so light mode is unchanged; the dark-mode block now gives them real values. Prefer the primary tokens above in NEW code. */ --card-bg: var(--bg-card); /* was: #fff */ --text-color: #12303f; /* was: #12303f */ --accent-color: #2e5d78; /* was: #2e5d78 */ --accent-primary: #1d4ed8; /* was: #1d4ed8 */ --accent-secondary: var(--primary-color); --input-bg: #ffffff; /* was: #fff */ --hover-bg: rgba(0, 0, 0, 0.05); /* was: rgba(0,0,0,.05) */ --bg-surface-2: #eef2f7; /* was: #eef2f7 */ --bg-level-2: #fff8e1; /* warm highlight */ --bg-level-3: #e2e8f0; /* neutral chip bg */ } body.dark-mode { --bg-body: #0f172a; --bg-card: black; --surface-color: #1e293b; --text-main: #f1f5f9; --text-muted: #94a3b8; --border-color: #334155; --table-header-bg: #283548; --bg-tinted: #3d4455; --dyn-header-bg: #0a3155; /* light purple (placeholder) */ --dyn-header-edge: rgb(35 88 135); --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5); --primary-row-hover: rgb(1 8 14 / 0.88); /* Dark values for the secondary tokens declared in :root above. */ --card-bg: var(--bg-card); --text-color: var(--text-main); --accent-color: #5b9bbd; --accent-primary: #60a5fa; --accent-secondary: var(--primary-color); --input-bg: #172033; --hover-bg: rgba(255, 255, 255, 0.06); --bg-surface-2: var(--table-header-bg); --bg-level-2: #3a3320; --bg-level-3: #334155; } * { box-sizing: border-box; transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; } /* ═══════════════════════════════════════════════════════════════════ TYPOGRAPHY — central font control font-size/font-family live here only. Component CSS must NOT set font-size; use .smallGray or rely on inheritance. Override via JS (CSS custom properties) or PHP session (