:root { --primary: #7c3aed; --primary-hover: #6d28d9; --primary-soft: color-mix(in srgb, #7c3aed 12%, transparent); /* Readable brand ink on a --primary-soft tint (badges, pills). */ --primary-ink: var(--primary); --secondary: #22d3ee; --accent: #22d3ee; --dark: #0f172a; --light: #f8fafc; --text: #1e293b; --heading: #0f172a; /* Derived brand helpers — follow the settings above automatically */ --dark-2: color-mix(in srgb, #0f172a 90%, #ffffff); --secondary-soft: color-mix(in srgb, #22d3ee 12%, transparent); --accent-soft: color-mix(in srgb, #22d3ee 12%, transparent); /* Surfaces & hairlines — flipped by the dark block below */ --surface: #ffffff; --surface-2: color-mix(in srgb, #0f172a 4%, #ffffff); --border: color-mix(in srgb, #C0C0C0 60%, transparent); /* Silver Gray — borders, subtle dividers */ color-scheme: light; --white: #ffffff; --gray: #94a3b8; --danger: #ef4444; --success: #10b981; --warning: #f59e0b; --info: #3b82f6; /* Semantic purple (e.g. the COLLECTED handover badge) */ --purple: #8b5cf6; --purple-ink: #6d28d9; /* ========================================================== ★ v7.103 — THE NAMES THE VIEWS HAVE BEEN USING ALL ALONG. These five were referenced all over the app but defined NOWHERE, so every `var(--muted, #64748b)` silently used its light-mode fallback for ever: invisible in light mode, and wrong in dark mode, because a fallback is a literal and a literal cannot follow the theme. Found by auditing the account page's CSS and then sweeping the whole codebase — the same gap was in customer-doc.php, admin/maintenance.php, admin/technical.php, admin/sso.php, css/ai.css and the contact / quote / unsubscribe banners. They are ALIASES, not new values: each one points at the token that already means the right thing, so they flip with the theme and the dark block above/below needs no entry for them. Any future view may use them with confidence — and a fallback next to a token that exists costs nothing, which is why the call sites were left alone. ========================================================== */ --muted: var(--gray); /* secondary text, hints, meta lines */ --bg: var(--surface-2); /* a subtle tinted panel/page background */ --text-color: var(--text); /* body text (admin.css calendar + chat) */ --success-soft: color-mix(in srgb, var(--success) 12%, transparent); --danger-soft: color-mix(in srgb, var(--danger) 12%, transparent); /* Semantic INK — foreground colour for text sitting ON the soft tinted backgrounds (badges, alerts, change-due readouts, POS pills). Light mode needs the dark shades for contrast against a pale tint; the dark block below swaps them for the bright semantic colours so ONE rule stays readable on graphite too. Usage: color:var(--danger-ink). */ --success-ink: #047857; --warning-ink: #b45309; --danger-ink: #b91c1c; --info-ink: #1d4ed8; --shadow: 0 4px 20px color-mix(in srgb, #0f172a 8%, transparent); --shadow-lg: 0 12px 40px color-mix(in srgb, #0f172a 16%, transparent); --radius: 10px; --radius-lg: 18px; --transition: all 0.25s ease; --sidebar-bg: var(--dark); --sidebar-text: #cbd5e1; } /* ============================================================ 🌙 DARK THEME — storefront night mode Values come from Admin ▸ White Label & Settings ▸ Appearance ▸ Dark Theme. Visitors flip it with the 🌞/🌙 switch; the choice is kept in localStorage and applied before first paint. ============================================================ */ html[data-theme="dark"] { color-scheme: dark; --primary: #8b5cf6; --primary-hover: #7c3aed; --primary-soft: color-mix(in srgb, #8b5cf6 22%, transparent); --primary-ink: var(--primary-hover); --secondary: #22d3ee; --accent: #22d3ee; --dark: #020617; --dark-2: color-mix(in srgb, #020617 82%, #ffffff); --light: #0f172a; --text: #e2e8f0; --heading: #FFFFFF; --secondary-soft: color-mix(in srgb, #22d3ee 22%, transparent); --accent-soft: color-mix(in srgb, #22d3ee 22%, transparent); /* Polished Silver — muted text & icons on graphite */ --gray: #B0B0B0; --border: color-mix(in srgb, #B0B0B0 32%, transparent); --surface: #1E1E1E; --surface-2: color-mix(in srgb, #FFFFFF 5%, #1E1E1E); /* Semantic ink flips to the bright accents so text on a tinted background stays readable on the dark surface. */ --success-ink: var(--success); --warning-ink: var(--warning); --danger-ink: var(--danger); --info-ink: var(--info); --purple: #a78bfa; --purple-ink: #c4b5fd; } /* ============================================================ v6.22 - SITE FAQ (public faq.php) Uses the storefront CSS variables so it re-brands with the theme and adapts to the dark theme automatically. ============================================================ */ .sf-faq-search { position:relative; max-width:640px; margin:0 auto 30px; } .sf-faq-search i { position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--gray); } .sf-faq-search input { width:100%; padding:13px 16px 13px 44px; border:1px solid var(--border); border-radius:12px; font-size:1rem; background:var(--surface); color:var(--text); } .sf-faq-cat { display:flex; align-items:center; gap:10px; font-size:1.3rem; margin:34px 0 4px; } .sf-faq-cat i { color:var(--primary); } .sf-faq-items { display:flex; flex-direction:column; gap:10px; margin-top:14px; } .sf-faq-item { border:1px solid var(--border); border-radius:12px; background:var(--surface); overflow:hidden; } .sf-faq-item summary { cursor:pointer; padding:14px 18px; font-weight:600; list-style:none; display:flex; align-items:center; gap:10px; } .sf-faq-item summary::before { content:'\f105'; font-family:'Font Awesome 6 Free'; font-weight:900; color:var(--primary); transition:transform .2s; } .sf-faq-item[open] summary::before { transform:rotate(90deg); } .sf-faq-item summary::-webkit-details-marker { display:none; } .sf-faq-body { padding:0 18px 16px; color:var(--text); } .sf-faq-body p { margin:0 0 10px; } .sf-faq-list { margin:0 0 10px; padding-left:22px; } .sf-faq-list li { margin-bottom:6px; }