/* Night mode (dark theme). Activated by data-theme="dark" on — set by js/theme.js from the user's saved choice, falling back to the device's own dark-mode setting. Strategy: remap the shared tokens (everything built on var(--…) follows automatically), then patch the small set of places that hardcode light surfaces. Brand hues stay recognisable — navy shifts lighter so text/ headings that use var(--navy) stay readable on dark surfaces, while filled controls get an explicit dark-safe fill below. */ [data-theme="dark"] { --navy: #9dc0e8; /* headings/text accents — readable on dark */ --navy-light: #b6cfef; --cyan: #4ad0e8; --ink: #eef2f9; /* Not pure black: a slightly lifted, slightly blue base is easier on the eye for long reading and lets cards sit above it without hard borders. */ --paper: #0e1522; /* page background */ --light-bg: #182133; /* subtle panels */ --border: #2c3a52; /* Muted text was too dim against the panels to pass comfortably; this is the level where secondary text stays genuinely readable. */ --text-muted: #a9b6cb; --text-dark: #eef2f9; --shadow: 0 8px 24px rgba(0,0,0,0.45); --shadow-hover: 0 18px 36px rgba(0,0,0,0.6); --ds-success: #3ecf9f; --ds-success-bg: #0e2b22; --ds-warning: #e0b25c; --ds-warning-bg: #2d2210; --ds-error: #f27d97; --ds-error-bg: #331520; --ds-info: #35c3de; --ds-info-bg: #0e2830; color-scheme: dark; } [data-theme="dark"] body { background: var(--paper); color: var(--text-dark); } /* Surfaces that hardcode white. Page-level styles set background:#fff on card classes; these attribute+class selectors out-rank them. */ /* Cards sit one step above the page so they read as surfaces, not flat patches — the main reason the first dark pass looked muddy. */ [data-theme="dark"] .req-card, [data-theme="dark"] .co-card, [data-theme="dark"] .sp-card, [data-theme="dark"] .sm-card, [data-theme="dark"] .dz-card, [data-theme="dark"] .sa-card, [data-theme="dark"] .quote-card, [data-theme="dark"] .ds-card, [data-theme="dark"] .product-card, [data-theme="dark"] .testimonial-card, [data-theme="dark"] .step-card, [data-theme="dark"] .modal, [data-theme="dark"] .dl-card { background: #1b2436; border-color: var(--border); } [data-theme="dark"] .modal-overlay { background: rgba(4,8,16,0.78); } /* Filled controls keep white text, so they need a dark-safe fill — the remapped light navy would fail contrast under white text. */ [data-theme="dark"] .ds-btn-primary, [data-theme="dark"] .shop-tab.active, [data-theme="dark"] .btn-primary, [data-theme="dark"] .category-pill.active { background: #2a4a73 !important; border-color: #2a4a73 !important; color: #fff !important; } [data-theme="dark"] .ds-btn-primary:hover:not(:disabled) { background: #35598a !important; } [data-theme="dark"] .ds-btn-secondary, [data-theme="dark"] .eng-tab, [data-theme="dark"] .dz-tab, [data-theme="dark"] .sp-tab, [data-theme="dark"] .sm-pill, [data-theme="dark"] .shop-tab, [data-theme="dark"] .quote-form input, [data-theme="dark"] .quote-form textarea, [data-theme="dark"] .cap-select { background: #1b2436; color: var(--text-dark); border-color: var(--border); } [data-theme="dark"] .eng-tab.active, [data-theme="dark"] .dz-tab.active, [data-theme="dark"] .sp-tab.active, [data-theme="dark"] .sm-pill.active { border-color: var(--navy); color: var(--navy); } [data-theme="dark"] .ds-input, [data-theme="dark"] .ds-textarea, [data-theme="dark"] input.ds-input, [data-theme="dark"] select.ds-input { background: #10192a; color: var(--text-dark); border-color: var(--border); } [data-theme="dark"] .ds-input::placeholder, [data-theme="dark"] .ds-textarea::placeholder { color: #6b7891; } [data-theme="dark"] header, [data-theme="dark"] .header-nav { background: #131c2c; border-color: var(--border); } [data-theme="dark"] .header-search input { background: #0f1626; color: var(--text-dark); } [data-theme="dark"] .mobile-nav { background: #0e1626; } [data-theme="dark"] .logo-text { color: var(--navy); } [data-theme="dark"] .ds-skeleton { background: #212c42; } [data-theme="dark"] .ds-state { color: var(--text-muted); } /* Chat + tables + misc panels that assume light surfaces */ [data-theme="dark"] .chat-list, [data-theme="dark"] .chat-thread, [data-theme="dark"] .chat-bubble-them { background: #1b2436; color: var(--text-dark); } [data-theme="dark"] .chat-bubble-me { background: #2a4a73; color: #fff; } [data-theme="dark"] table th { background: #0f1626; } [data-theme="dark"] table td { border-color: var(--border); } /* The night-mode toggle. Lives in the header next to the other controls. It used to float over the page, which covered content at the bottom of long pages. */ .theme-toggle-inline { width: 40px; height: 40px; min-width: 40px; border-radius: 50%; border: 1.5px solid var(--border); background: transparent; font-size: 17px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; } .theme-toggle-inline:hover { border-color: var(--cyan); } /* Fallback for pages with no header to host it. */ .theme-toggle:not(.theme-toggle-inline) { position: fixed; bottom: 84px; right: 14px; z-index: 1200; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--border); background: var(--light-bg); font-size: 20px; cursor: pointer; box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; } @media (min-width: 768px) { .theme-toggle:not(.theme-toggle-inline) { bottom: 18px; } }