/* Site-wide theme tokens. Applied via [data-theme] on . Pages should reference these variables instead of hardcoding colors. */ :root, :root[data-theme="light"] { --bg-page: #f8f9fa; --bg-surface: #ffffff; --bg-surface-alt: #f8f9fc; --bg-elev: #ffffff; --bg-input: #ffffff; --text-primary: #1f2937; --text-secondary: #4b5563; --text-muted: #6b7280; --text-faint: #9ca3af; --border: #e5e7eb; --border-strong: #d1d5db; --accent: #2563eb; --accent-hover: #1d4ed8; --accent-soft: rgba(37, 99, 235, 0.12); --accent-text: #ffffff; --success-bg: #d4edda; --success-text: #155724; --success-border: #c3e6cb; --danger-bg: #f8d7da; --danger-text: #721c24; --danger-border: #f5c6cb; --info-bg: #d1ecf1; --info-text: #0c5460; --info-border: #17a2b8; --warning-bg: #fff3cd; --warning-text: #856404; --warning-border: #ffc107; --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.08); --shadow-lg: 0 14px 32px rgba(15, 23, 42, 0.18); --sidebar-bg: #343a40; --sidebar-text: #cfd8dc; --sidebar-text-hover: #ffffff; --sidebar-hover-bg: #495057; --sidebar-border: #495057; --table-head-bg: #007bff; --table-head-text: #ffffff; --table-row-alt-bg: #f9f9f9; --overlay-strong: rgba(15, 23, 42, 0.75); } :root[data-theme="dark"] { --bg-page: #0f172a; --bg-surface: #1e293b; --bg-surface-alt: #172033; --bg-elev: #243044; --bg-input: #0f172a; --text-primary: #f1f5f9; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --text-faint: #64748b; --border: #334155; --border-strong: #475569; --accent: #60a5fa; --accent-hover: #93c5fd; --accent-soft: rgba(96, 165, 250, 0.18); --accent-text: #0b1322; --success-bg: #14532d; --success-text: #bbf7d0; --success-border: #166534; --danger-bg: #7f1d1d; --danger-text: #fecaca; --danger-border: #991b1b; --info-bg: #0c4a5e; --info-text: #a5f3fc; --info-border: #0891b2; --warning-bg: #713f12; --warning-text: #fef08a; --warning-border: #ca8a04; --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5); --shadow-lg: 0 14px 32px rgba(0, 0, 0, 0.6); --sidebar-bg: #0b1322; --sidebar-text: #94a3b8; --sidebar-text-hover: #f1f5f9; --sidebar-hover-bg: #1e293b; --sidebar-border: #1e293b; --table-head-bg: #1e40af; --table-head-text: #f1f5f9; --table-row-alt-bg: #172033; --overlay-strong: rgba(0, 0, 0, 0.78); } /* Tells the browser which UA scrollbars / form controls to use. */ :root { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* Default body theming so every page (even un-refactored ones) gets the correct background and text color. */ body { background: var(--bg-page); color: var(--text-primary); transition: background-color 0.2s ease, color 0.2s ease; } a { color: var(--accent); } a:hover { color: var(--accent-hover); } hr { border: 0; border-top: 1px solid var(--border); } input[type="text"], input[type="password"], input[type="number"], input[type="email"], input[type="search"], input[type="url"], input[type="date"], input[type="time"], textarea, select { background: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border-strong); } input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="search"]:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } code, pre { background: var(--bg-surface-alt); color: var(--text-primary); } ::placeholder { color: var(--text-faint); opacity: 1; }