/* ========================================================================= AI Jewelry Retoucher — Dark Theme Overrides v3 / 2026-04-29 Activates only when is set. Pairs with ai-jewelry-retoucher.css (base + light defaults). All theme-aware tokens listed in :root of the base file are overridden here. Brand orange and blue stay constant — they are the brand signal across themes. ========================================================================= */ [data-theme="dark"] { --page-bg: #0D1B2A; --page-bg-soft: #162638; --surface-bg: #16263A; --surface-border: #243950; --text-primary: #E2E8F0; --text-headline: #FFFFFF; --text-section-heading: #FFFFFF; /* dark-mode H1/H2 — pure white, brand-blue reads weak on dark */ --text-secondary: #94A3B8; --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.40); --card-shadow-hover: 0 12px 48px rgba(0, 0, 0, 0.55); --header-bg: rgba(13, 27, 42, 0.85); --header-border: rgba(148, 163, 184, 0.10); /* Inverted contrast: dark page → LIGHT page-nav so it pops. */ --pagenav-bg: rgba(255, 255, 255, 0.96); --pagenav-border: rgba(0, 0, 0, 0.08); --pagenav-link: rgba(26, 43, 60, 0.78); --pagenav-link-hover: #1A2B3C; --pagenav-link-hover-bg: rgba(26, 43, 60, 0.06); --pagenav-link-active-bg: rgba(255, 102, 0, 0.10); --pagenav-toggle-bg: rgba(26, 43, 60, 0.06); --pagenav-toggle-border: rgba(26, 43, 60, 0.18); --pagenav-toggle-color: #1A2B3C; --tag-bg: #1F3148; --inline-divider: #243950; } /* Section utility classes — keep .bg-dark always dark navy, but rebalance .bg-soft so it reads as a slightly lighter band against pure --page-bg */ [data-theme="dark"] .bg-soft { background: #122131; } /* Section tag — keep brand blue text but use a more readable bg in dark */ [data-theme="dark"] .section-tag { background: rgba(49, 88, 124, 0.18); color: #5BAACA; } /* Step "How It Works" cards — slightly lift the surface so they pop */ [data-theme="dark"] .step-card { background: #1A2B3C; } [data-theme="dark"] .step-card:hover { border-color: rgba(28, 166, 175, 0.45); } /* Product cards — same lift */ [data-theme="dark"] .product-card { background: #16263A; } [data-theme="dark"] .product-card:hover { border-color: rgba(28, 166, 175, 0.45); } [data-theme="dark"] .product-image { background: #0D1B2A; } [data-theme="dark"] .product-tagline { color: #5BAACA; } [data-theme="dark"] .product-pro-tip { background: rgba(255, 102, 0, 0.10); color: #E2E8F0; } /* Pro tip "PRO TIP —" inline label color stays orange (works on both) */ /* Gallery card body */ [data-theme="dark"] .gallery-card { background: #16263A; } /* Pricing card */ [data-theme="dark"] .price-card { background: #16263A; } /* Cross-link card */ [data-theme="dark"] .cross-card { background: #16263A; } [data-theme="dark"] .cross-card:hover { border-color: rgba(28, 166, 175, 0.45); } /* FAQ — already uses theme tokens; only need divider color (handled by token) */ /* Theme toggle on dark — keep glassy feel */ [data-theme="dark"] .theme-toggle { background: rgba(255, 255, 255, 0.06); color: #FFFFFF; } /* Page-nav active link — slightly more opaque on dark for contrast */ [data-theme="dark"] .page-nav-links a.active { background: rgba(255, 102, 0, 0.18); } /* Outline button — adjust border so it's visible on dark surfaces */ [data-theme="dark"] .btn-outline { color: #E2E8F0; border-color: rgba(226, 232, 240, 0.30); } [data-theme="dark"] .btn-outline:hover { border-color: var(--orange); background: rgba(255, 102, 0, 0.08); color: #FFFFFF; } /* The site-header/footer/final-cta/bg-dark sections are already dark navy in light theme — they remain unchanged on dark theme. */