/* ===================================================================== theme-fixes.css — complete dark-mode palette + surfaces ===================================================================== Root causes this fixes (found in a page-by-page audit): • Several pages (account, cart, contact, order_confirm, designer, …) do NOT load variables.css, which is the only file that defines the colour palette AND paints the dark in dark mode. Without it the body stayed WHITE and many variables were undefined (making buttons/text render transparent or invisible). • The theme toggle sets a class on ; when that class was missing or half-applied, the page fell back to white. Approach: define the FULL palette here (so no page can have an undefined variable), and treat DARK as the default for anything that is not explicitly `.light-mode`. That way a missing/half-applied class can never leave a white page. Light mode is unaffected (it always carries body.light-mode). Load this file LAST on every themed page. ===================================================================== */ :root { --accent:#00A9E0; --accent-hover:#008cc0; --accent-light:#69d0ff; --warn:#F58220; --warn-hover:#cc7000; --theme-orange:#FF8C00; --success:#28a745; --success-hover:#218838; --danger:#dc3545; --danger-hover:#c82333; --info:#007bff; --info-hover:#0069d9; --bg:#0b0e12; --panel:#10151c; --muted:#9aa3b2; --hi:#f7fbff; --grid:#1f2631; --border:#2b3340; --border-hover:#3c4656; --light-bg:#e9ebf0; --light-panel:#f7f7f9; --light-muted:#5b667a; --light-hi:#10151c; --light-grid:#d8dade; --light-border:#b6bcc4; --light-border-hover:#8c93a0; --main-bg:#ffffff; --content-text:#0b0e12; --card-bg:#ffffff; --card-border:#e0e0e0; /* previously referenced-but-undefined */ --dark-bg:#0b0e12; --dark-panel:#10151c; --dark-card-bg:#131a24; --dark-card-border:#2b3340; --dark-hi:#f7fbff; --dark-muted:#9aa3b2; --dark-blue-bg:#0e2233; --dark-selected-bg:#F58220; --light-accent:#007bff; --light-selected-bg:#F58220; --light-warn:#cc7000; --muted-text:#5b667a; --page-bg:#e9ebf0; --border-radius:12px; --border-radius-sm:6px; --border-radius-lg:16px; } /* ---- DARK = default for anything not explicitly light ---- */ body:not(.light-mode) { background: var(--bg) !important; color: var(--hi); /* flip the light-valued shared variables so cards/buttons/menus follow */ --card-bg:#10151c; --card-border:#2b3340; --main-bg:#0b0e12; --content-text:#f7fbff; --muted-text:#9aa3b2; --page-bg:#0b0e12; } /* ---- LIGHT (explicit) ---- */ body.light-mode { background: var(--light-bg); color: var(--light-hi); } /* ---- Dark surfaces (only when not light) ---- */ body:not(.light-mode) header { background: linear-gradient(180deg, var(--panel), var(--bg)); } body:not(.light-mode) #accountMenu, body:not(.light-mode) .account-menu { background: var(--panel); border-color: var(--border); } body:not(.light-mode) .account-menu-item { color: var(--hi); } body:not(.light-mode) .slide-menu, body:not(.light-mode) .mobile-slide-menu { background: var(--panel); } body:not(.light-mode) #splashScreen { background: var(--bg); } /* Generic content surfaces that were white — make them dark, but leave design previews (the white "paper"), payment icons and toggle knobs alone. */ body:not(.light-mode) .container, body:not(.light-mode) .card, body:not(.light-mode) .panel, body:not(.light-mode) .content-card, body:not(.light-mode) .account-container, body:not(.light-mode) .info-card, body:not(.light-mode) .form-section { background: var(--panel); color: var(--hi); } body:not(.light-mode) input, body:not(.light-mode) select, body:not(.light-mode) textarea { background: var(--bg); color: var(--hi); border-color: var(--border); } body:not(.light-mode) input::placeholder, body:not(.light-mode) textarea::placeholder{ color: var(--muted); } /* Plain header buttons (Contact Us, Store, Designer) — visible surface + label. Coloured/brand buttons keep their own styles. */ body:not(.light-mode) header .btn { background: var(--panel); color: var(--hi); border-color: var(--border); } /* Headings and body copy that used --hi/--content-text now resolve, so they are light on the dark background instead of invisible. */ body:not(.light-mode) h1, body:not(.light-mode) h2, body:not(.light-mode) h3, body:not(.light-mode) label { color: var(--hi); }