/* ══════════════════════════════════════════════════════════════ BPC Beat — Theme Variables Dark is the default. Light is activated via [data-theme="light"] on . ══════════════════════════════════════════════════════════════ */ :root { /* ── Core surfaces ── */ --bg-html: #0a0e17; --bg-body: #0f1520; --bg-surface: #111827; --bg-surface-alt: #1a2332; --bg-surface-hover: #162a46; --bg-sidebar: #0a0e17; --bg-topbar: #0a0e17; --bg-card-shadow: rgba(0, 0, 0, 0.25); --bg-modal-shadow: rgba(0, 0, 0, 0.4); /* ── Borders ── */ --border-default: #1e293b; --border-input: #334155; /* ── Text ── */ --text-primary: #c8d0dc; --text-heading: #f0f2f5; --text-muted: #64748b; --text-label: #94a3b8; --text-input: #e2e8f0; /* ── Accent ── */ --accent-primary: #2563eb; --accent-primary-hover: #1d4ed8; --accent-link: #60a5fa; --accent-primary-light: rgba(96, 165, 250, 0.15); /* ── Form inputs ── */ --input-bg: #1a2332; --input-border: #334155; --input-disabled-bg: #0f1520; --input-disabled-text: #64748b; --input-autofill-bg: #1a2332; --input-autofill-text: #e2e8f0; /* ── Focus ring ── */ --focus-ring-outer: #0a0e17; /* ── Cards & containers ── */ --card-bg: #111827; --card-border: #1e293b; /* ── Tables ── */ --table-stripe-odd: #111827; --table-stripe-even: #0a0e17; --table-hover: #1a2332; --table-th-text: #94a3b8; --table-th-border: #1e293b; /* ── Alerts ── */ --alert-info-bg: #1a2332; --alert-info-border: #1e293b; --alert-info-text: #60a5fa; --alert-warning-bg: rgba(245, 158, 11, 0.1); --alert-warning-border: #92400e; --alert-warning-text: #fbbf24; --alert-danger-bg: rgba(239, 68, 68, 0.1); --alert-danger-border: #991b1b; --alert-danger-text: #f87171; --alert-success-bg: rgba(16, 185, 129, 0.1); --alert-success-border: #065f46; --alert-success-text: #34d399; /* ── Badges ── */ --badge-light-bg: #1e293b; --badge-light-text: #c8d0dc; --badge-secondary-bg: #334155; --badge-secondary-text: #94a3b8; /* ── Login page ── */ --login-bg: #0a0e17; --login-card-bg: #111827; --login-card-border: #1e293b; --login-card-shadow: rgba(0, 0, 0, 0.3); --login-error-bg: rgba(239, 68, 68, 0.1); --login-error-border: rgba(239, 68, 68, 0.3); --login-error-text: #f87171; /* ── Btn-close filter (dark bg needs inverted close icon) ── */ --btn-close-filter: invert(1) grayscale(100%) brightness(200%); /* ── Nav sidebar ── */ --nav-text: #d7d7d7; --nav-active-bg: rgba(59, 130, 246, 0.25); --nav-hover-bg: rgba(255, 255, 255, 0.1); --nav-section-text: rgba(255, 255, 255, 0.6); /* ── File input ── */ --file-btn-bg: #2563eb; --file-btn-hover: #1d4ed8; /* ── Dashboard (dark-dash) ── */ --dash-bg: #0a0e17; --dash-title-text: #f0f2f5; --dash-subtitle-text: #64748b; --dash-card-bg: #111827; --dash-card-border: #1e293b; --dash-stat-bg: #111827; --dash-stat-border: #1e293b; --dash-board-bg: #0c1322; --dash-board-th: #475569; --dash-board-border: #0f1d32; --dash-board-hover: #162a46; --dash-board-text: #e2e8f0; --dash-board-empty: #475569; --dash-btn-bg: rgba(255, 255, 255, 0.08); --dash-btn-text: #94a3b8; --dash-btn-hover-bg: rgba(255, 255, 255, 0.15); --dash-feed-empty: #475569; --dash-picker-bg: rgba(255, 255, 255, 0.18); --dash-picker-border: rgba(255, 255, 255, 0.45); --dash-picker-text: #ffffff; --dash-picker-label: #ffffff; --dash-picker-option-bg: #1a1f2e; --dash-picker-option-text: #e0e4ea; /* ── Page-specific ── */ --btn-outline-primary-text: #60a5fa; --btn-outline-primary-border: #334155; --pagination-bg: var(--bg-surface); --pagination-border: var(--border-default); --pagination-text: #60a5fa; --pagination-hover-bg: #1e293b; --pagination-hover-text: #93c5fd; /* ── List group ── */ --list-group-bg: var(--bg-surface); --list-group-border: var(--border-default); --list-group-hover: rgba(255, 255, 255, 0.03); /* ── NOC Dashboard ── */ --noc-bg: #0a0e17; --noc-text: #c8d0dc; --noc-heading: #f0f2f5; --noc-muted: #64748b; --noc-cell-text: #e2e8f0; --noc-border: #1e293b; --noc-card-bg: #111827; --noc-control-bg: #111827; --noc-hover: #1a2332; --noc-notify-bg: #1e293b; --noc-board-bg: #0a1628; --noc-th-bg: #0f1d32; --noc-th-text: #6b8ab8; --noc-th-border: #1a3050; --noc-row-border: #0f1d32; --noc-initials-bg: #1a3050; /* NOC status text */ --noc-status-green: #4ade80; --noc-status-amber: #fbbf24; --noc-status-red: #f87171; --noc-status-grey: #94a3b8; --noc-status-done: #64748b; /* NOC health dots */ --noc-dot-green: #16a34a; --noc-dot-green-glow: 0 0 6px rgba(22, 163, 74, 0.6); --noc-dot-amber: #f59e0b; --noc-dot-amber-glow: 0 0 6px rgba(245, 158, 11, 0.6); --noc-dot-red: #dc2626; --noc-dot-red-glow: 0 0 8px rgba(220, 38, 38, 0.7); --noc-dot-grey: #475569; /* NOC row backgrounds */ --noc-row-green-bg: rgba(22, 163, 74, 0.18); --noc-row-amber-bg: rgba(245, 158, 11, 0.14); --noc-row-red-bg: rgba(220, 38, 38, 0.16); --noc-row-done-bg: rgba(100, 116, 139, 0.06); --noc-row-live-bg: rgba(6, 182, 212, 0.14); --noc-row-live-amber-bg: rgba(6, 182, 212, 0.12); /* NOC stars + action btn */ --noc-star-filled: #fbbf24; --noc-star-filled-glow: 0 0 4px rgba(251, 191, 36, 0.4); --noc-star-empty: #334155; } /* ══════════════════════════════════════════════════════════════ LIGHT THEME ══════════════════════════════════════════════════════════════ */ [data-theme="light"] { /* ── Core surfaces ── */ --bg-html: #f0f2f5; --bg-body: #f8f9fb; --bg-surface: #ffffff; --bg-surface-alt: #f3f4f6; --bg-surface-hover: #e8eaef; --bg-sidebar: #1e293b; --bg-topbar: #1e293b; --bg-card-shadow: rgba(0, 0, 0, 0.08); --bg-modal-shadow: rgba(0, 0, 0, 0.15); /* ── Borders ── */ --border-default: #e2e8f0; --border-input: #cbd5e1; /* ── Text ── */ --text-primary: #111827; --text-heading: #0f172a; --text-muted: #4b5563; --text-label: #374151; --text-input: #111827; /* ── Accent ── */ --accent-primary: #2563eb; --accent-primary-hover: #1d4ed8; --accent-link: #2563eb; --accent-primary-light: rgba(37, 99, 235, 0.12); /* ── Form inputs ── */ --input-bg: #ffffff; --input-border: #cbd5e1; --input-disabled-bg: #f1f5f9; --input-disabled-text: #94a3b8; --input-autofill-bg: #ffffff; --input-autofill-text: #1e293b; /* ── Focus ring ── */ --focus-ring-outer: #ffffff; /* ── Cards & containers ── */ --card-bg: #ffffff; --card-border: #e2e8f0; /* ── Tables ── */ --table-stripe-odd: #f8fafc; --table-stripe-even: #ffffff; --table-hover: #f1f5f9; --table-th-text: #475569; --table-th-border: #e2e8f0; /* ── Alerts ── */ --alert-info-bg: #eff6ff; --alert-info-border: #bfdbfe; --alert-info-text: #1e40af; --alert-warning-bg: #fffbeb; --alert-warning-border: #fde68a; --alert-warning-text: #92400e; --alert-danger-bg: #fef2f2; --alert-danger-border: #fecaca; --alert-danger-text: #991b1b; --alert-success-bg: #ecfdf5; --alert-success-border: #a7f3d0; --alert-success-text: #065f46; /* ── Badges ── */ --badge-light-bg: #f1f5f9; --badge-light-text: #334155; --badge-secondary-bg: #e2e8f0; --badge-secondary-text: #475569; /* ── Login page ── */ --login-bg: #f0f2f5; --login-card-bg: #ffffff; --login-card-border: #e2e8f0; --login-card-shadow: rgba(0, 0, 0, 0.08); --login-error-bg: #fef2f2; --login-error-border: #fecaca; --login-error-text: #991b1b; /* ── Btn-close filter ── */ --btn-close-filter: none; /* ── Nav sidebar (stays dark in light mode for contrast) ── */ --nav-text: #d7d7d7; --nav-active-bg: rgba(59, 130, 246, 0.25); --nav-hover-bg: rgba(255, 255, 255, 0.1); --nav-section-text: rgba(255, 255, 255, 0.6); /* ── File input ── */ --file-btn-bg: #2563eb; --file-btn-hover: #1d4ed8; /* ── Dashboard ── */ --dash-bg: #f0f2f5; --dash-title-text: #0f172a; --dash-subtitle-text: #64748b; --dash-card-bg: #ffffff; --dash-card-border: #e2e8f0; --dash-stat-bg: #ffffff; --dash-stat-border: #e2e8f0; --dash-board-bg: #f8fafc; --dash-board-th: #475569; --dash-board-border: #e2e8f0; --dash-board-hover: #f1f5f9; --dash-board-text: #111827; --dash-board-empty: #6b7280; --dash-btn-bg: #f1f5f9; --dash-btn-text: #334155; --dash-btn-hover-bg: #e2e8f0; --dash-feed-empty: #94a3b8; --dash-picker-bg: #ffffff; --dash-picker-border: #cbd5e1; --dash-picker-text: #1e293b; --dash-picker-label: #475569; --dash-picker-option-bg: #ffffff; --dash-picker-option-text: #1e293b; /* ── Page-specific ── */ --btn-outline-primary-text: #2563eb; --btn-outline-primary-border: #cbd5e1; --pagination-bg: #ffffff; --pagination-border: #e2e8f0; --pagination-text: #2563eb; --pagination-hover-bg: #f1f5f9; --pagination-hover-text: #1d4ed8; /* ── List group ── */ --list-group-bg: #ffffff; --list-group-border: #e2e8f0; --list-group-hover: #f8fafc; /* ── NOC Dashboard ── */ --noc-bg: #f0f2f5; --noc-text: #111827; --noc-heading: #0f172a; --noc-muted: #4b5563; --noc-cell-text: #111827; --noc-border: #e2e8f0; --noc-card-bg: #ffffff; --noc-control-bg: #ffffff; --noc-hover: #f1f5f9; --noc-notify-bg: #1e293b; --noc-board-bg: #ffffff; --noc-th-bg: #f8fafc; --noc-th-text: #374151; --noc-th-border: #e2e8f0; --noc-row-border: #f1f5f9; --noc-initials-bg: #e2e8f0; /* NOC status text — strong readable colours on white */ --noc-status-green: #15803d; --noc-status-amber: #b45309; --noc-status-red: #dc2626; --noc-status-grey: #374151; --noc-status-done: #374151; /* NOC health dots — solid, no glow */ --noc-dot-green: #16a34a; --noc-dot-green-glow: none; --noc-dot-amber: #d97706; --noc-dot-amber-glow: none; --noc-dot-red: #dc2626; --noc-dot-red-glow: none; --noc-dot-grey: #9ca3af; /* NOC row backgrounds — very subtle, let font colours do the work */ --noc-row-green-bg: rgba(22, 163, 74, 0.04); --noc-row-amber-bg: rgba(217, 119, 6, 0.04); --noc-row-red-bg: rgba(220, 38, 38, 0.05); --noc-row-done-bg: transparent; --noc-row-live-bg: rgba(6, 182, 212, 0.06); --noc-row-live-amber-bg: rgba(6, 182, 212, 0.05); /* NOC stars + action btn */ --noc-star-filled: #d97706; --noc-star-filled-glow: none; --noc-star-empty: #e2e8f0; }