/* ============================================================ ComplaiBoss — Central Theme File Single source of truth for all colors (and later, fonts). Changing a value here updates every page that links this file. Structure (IMPORTANT — read before editing): - :root → LIGHT theme (the default). Applies whenever no data-theme attribute is set on , i.e. on first visit for every user. Do NOT assume :root means "dark" — it deliberately does not, as of Phase 4. - html[data-theme="dark"] → DARK theme override. Only applies when JS sets data-theme="dark" on (user's saved preference). Written with the html[] prefix specifically so it always wins over :root regardless of source order — do not simplify this back to a bare [data-theme="dark"] selector, or the toggle can silently stop working if the blocks are ever reordered. ============================================================ */ html[data-theme="dark"]{ /* ---- Backgrounds ---- */ --bg-midnight:#101424; /* page body background */ --bg-midnight-rgb:16,20,36; --bg-deep:#0B0E1A; /* sidebar bg, hero bg, deep panels, footer bg */ --bg-deep-rgb:11,14,26; /* rgba base for bg-deep translucency (modal backdrops) */ --text-deep:#0B0E1A; /* dark text sitting on gold buttons/pills — same hex as bg-deep in dark mode, split so light mode can diverge */ --bg-card:#1C2237; /* modal/card background, gradient starts */ --bg-card-rgb:28,34,55; /* rgba base for bg-card translucency */ --bg-gradient-end-rgb:22,28,45; /* card gradient end stop, distinct from bg-deep */ --bg-card-alt:#141828; /* notif-modal gradient end */ --bg-card-alt2:#111827; /* goodbye-modal gradient end */ --bg-card-soft:#161c2d; /* forms_checklist card background variant */ --bg-sidebar:#0B0E1A; /* sidebar background */ --bg-toast-a:#1C2333; /* guest-toast gradient start */ --bg-toast-b:#232B3E; /* guest-toast gradient end */ --bg-input:#131827; /* form input/select background */ /* ---- Accent (gold) ---- */ --accent-gold:#C5A059; --accent-gold-rgb:197,160,89; --accent-champagne:#E2CF9F; --accent-gold-deep:#B8943F; /* notif-btn-allow gradient 2nd stop */ --accent-gold-hover:#D4B06A; /* lighter gold hover state (detail.html button) */ --accent-gold-dark:#b8860b; /* darker gold gradient stop (admin_invoice_generate.html) — distinct from gold-deep */ --accent-dim:rgba(197,160,89,0.15); --accent-dim-strong:rgba(197,160,89,0.18); /* home_new.html nav hover — distinct opacity, do not merge with accent-dim */ /* ---- Text ---- */ --text-primary:#F5F5F7; --text-secondary:#9DA3AE; --text-muted:#6B7280; --text-off-white:#D1D4D9; --text-white:#ffffff; --white-rgb:255,255,255; /* ---- Misc status / form-state colors ---- */ --status-success-bootstrap:#28a745; /* status badge green (detail.html) */ --danger-text-soft:#f2a6a6; /* soft pink-red text, distinct from other reds */ --neutral-light-gray:#eee; /* disabled/muted button background */ --neutral-gray-text:#999; /* disabled button text */ --neutral-light-border:#ddd; /* disabled button border */ --neutral-gray-light:#ccc; /* btn-add-more border */ /* ---- Dividers / borders ---- */ --divider:#2D354E; --divider-rgb:45,53,78; --divider-section:#2D354E; --divider-sidebar:#C5A059; --border-muted-blue:#4A536B; /* ---- Danger / error / destructive ---- */ --danger-red:#ff6b6b; /* error text, hover states, overdue values */ --danger-red-light:#ff8080; /* overdue pill text, remove-row icon, warn box title */ --danger-dark:#8B1A1A; /* btn-danger gradient start, acct-btn.danger bg */ --danger-mid:#C0392B; /* btn-danger gradient end / hover start */ --danger-mid-rgb:192,57,43; /* rgba base for cf-generic-err bg/border */ --danger-bright:#E74C3C; /* btn-danger hover end */ --danger-bright-rgb:231,76,60; --danger-hover-deep:#A52020; /* acct-btn.danger hover */ --danger-pale:#FFD4D4; /* acct-btn.danger text */ --danger-red-soft:#ff7675; /* cf-err text — distinct shade from danger-red/danger-red-light */ --danger-red-material:#f44336; /* btn-remove-row background, distinct Material-red shade */ --danger-coral:#f08080; /* home_new.html notice/hint text — distinct light coral */ --alert-garnet:#8B0000; /* pill-overdue background base (rgb 139,0,0) */ --alert-garnet-rgb:139,0,0; /* ---- Success ---- */ --success-mint:#55efc4; /* glance-ring-pct, pill-ok text */ --success-soft-green:#70e0a0; /* acct-msg.ok */ --success-green-rgb:39,174,96; /* pill-ok background/border base */ --success-green:#27AE60; /* flat hex form, same base as success-green-rgb */ --success-mint-soft:#84c7a5; /* distinct softer mint — NOT the same as success-mint, do not merge */ --success-mint-soft-rgb:132,199,165; --success-deep:#1f7a4d; --success-deep-rgb:31,122,77; --success-pale-bg:#dff6e7; /* pale mint background */ /* ---- Info badges ---- */ --badge-blue:#74b9ff; --badge-blue-rgb:52,152,219; --badge-purple:#a29bfe; --badge-purple-rgb:155,89,182; /* ---- Overlays ---- */ --overlay-black-rgb:0,0,0; /* modal/backdrop dark overlay base */ /* ---- Status / legend system (dashboard urgency indicators) ---- */ --status-urgent-bg-rgb:139,26,26; --status-upcoming-bg-rgb:139,80,26; --status-upcoming-border-rgb:192,100,43; --status-upcoming-text:#ffb380; --status-completed-bg-rgb:26,100,60; --status-completed-border-rgb:43,160,90; --status-other-bg-rgb:60,80,120; --status-other-border-rgb:80,110,180; --status-other-text:#90a8e0; --legend-red:#ff6060; --legend-orange:#ffaa60; --legend-green:#60e090; --legend-blue:#6090d0; --neutral-gray-rgb:80,80,80; --neutral-gray-mid-rgb:120,120,120; --text-pale-pink:#ffdcd8; --text-pale-pink-alt:#ffd7d2; /* admin_alert.html banner-preview text — distinct shade */ --neutral-blue-gray-rgb:80,80,100; /* pill.past background — distinct from neutral-gray-rgb */ } /* ============================================================ LIGHT THEME — the default (Option 2A palette). Applies via :root with no attribute needed. All 86 values filled in Step 46. ============================================================ */ :root{ /* ---- Backgrounds ---- */ --bg-midnight:#F7F8FA; --bg-midnight-rgb:247,248,250; --bg-deep:#ECEEF2; --bg-deep-rgb:236,238,242; --text-deep:#0F1E3D; --bg-card:#ECEEF2; --bg-card-rgb:236,238,242; --bg-gradient-end-rgb:223,227,235; --bg-card-alt:#E4E7EC; --bg-card-alt2:#DDE1E8; --bg-card-soft:#F1F2F5; --bg-sidebar:#ECEEF2; --bg-toast-a:#ECEEF2; --bg-toast-b:#E1E4EA; --bg-input:#FFFFFF; /* ---- Accent (gold) ---- */ --accent-gold:#A6791E; --accent-gold-rgb:166,121,30; --accent-champagne:#C9A44A; --accent-gold-deep:#8A6118; --accent-gold-hover:#BD8A2A; --accent-gold-dark:#7A5714; --accent-dim:rgba(166,121,30,0.15); --accent-dim-strong:rgba(166,121,30,0.18); /* ---- Text ---- */ --text-primary:#0F1E3D; --text-secondary:#6C7690; --text-muted:#636A7C; /* darkened from #8891A6 for WCAG AA contrast (Step 48 sweep) */ --text-off-white:#5A6478; --text-white:#FFFFFF; --white-rgb:255,255,255; /* ---- Misc status / form-state colors ---- */ --status-success-bootstrap:#1E7B34; --danger-text-soft:#C0392B; --neutral-light-gray:#E5E7EB; --neutral-gray-text:#6B7280; --neutral-light-border:#D1D5DB; --neutral-gray-light:#C9CDD3; /* ---- Dividers / borders ---- */ --divider:#D9DDE6; --divider-rgb:217,221,230; --divider-section:#D9DDE6; --divider-sidebar:#A6791E; --border-muted-blue:#C3C9D6; /* ---- Danger / error / destructive ---- */ --danger-red:#C93B3B; /* darkened from #D64545 for WCAG AA contrast (Step 48 sweep) */ --danger-red-light:#E06666; --danger-dark:#7A1414; --danger-mid:#A32E20; --danger-mid-rgb:163,46,32; --danger-bright:#C0392B; --danger-bright-rgb:192,57,43; --danger-hover-deep:#8A1A1A; --danger-pale:#F9D9D9; --danger-red-soft:#D85C5B; --danger-red-material:#D32F2F; --danger-coral:#D96A6A; --alert-garnet:#8B0000; --alert-garnet-rgb:139,0,0; /* ---- Success ---- */ --success-mint:#1E9E78; --success-soft-green:#3A9A5C; --success-green-rgb:30,140,72; --success-green:#1E8C48; --success-mint-soft:#4E9E76; --success-mint-soft-rgb:78,158,118; --success-deep:#175C3A; --success-deep-rgb:23,92,58; --success-pale-bg:#E3F5EA; /* ---- Info badges ---- */ --badge-blue:#2E6FBE; --badge-blue-rgb:46,111,190; --badge-purple:#7C5DBE; --badge-purple-rgb:124,93,190; /* ---- Overlays ---- */ --overlay-black-rgb:15,30,61; /* ---- Status / legend system (dashboard urgency indicators) ---- */ --status-urgent-bg-rgb:220,90,90; --status-upcoming-bg-rgb:224,150,60; --status-upcoming-border-rgb:196,120,40; --status-upcoming-text:#8A4E12; --status-completed-bg-rgb:70,160,100; --status-completed-border-rgb:40,130,70; --status-other-bg-rgb:130,150,190; --status-other-border-rgb:90,120,170; --status-other-text:#31517D; --legend-red:#D64545; --legend-orange:#E0964A; --legend-green:#46A064; --legend-blue:#4A78B8; --neutral-gray-rgb:140,140,140; --neutral-gray-mid-rgb:170,170,170; --text-pale-pink:#B94A4A; --text-pale-pink-alt:#C25A5A; --neutral-blue-gray-rgb:150,150,170; }