/* Theme vars + light/dark overrides for Fone Shop marketing site. Scoped overrides are used to recolor components that still use hardcoded colors, keeping the component code unchanged. */ :root, [data-theme="dark"] { --bg: #000; --bg-2: #0a0a0a; --surface: #0a0a0a; --surface-2: rgba(255,255,255,0.05); --surface-3: rgba(255,255,255,0.08); --border: #2c2c2e; --border-soft: #1a1a1a; --fg: #fff; --fg-2: rgba(255,255,255,0.75); --fg-3: rgba(255,255,255,0.6); --muted: #86868b; --accent: #FF6B1A; --accent-text: #000; --accent-soft: rgba(255,107,26,0.15); --review-paper: #f5f2ea; --review-ink: #111; --header-blur-bg: rgba(10,10,12,0.55); --crack-fg: #ffffff; --crack-blend: screen; --crack-opacity: 0.55; } [data-theme="light"] { --bg: #FAF7F2; --bg-2: #F2EEE6; --surface: #FFFFFF; --surface-2: rgba(0,0,0,0.04); --surface-3: rgba(0,0,0,0.06); --border: #E5DED2; --border-soft: #EEE8DC; --fg: #1a1917; --fg-2: rgba(26,25,23,0.78); --fg-3: rgba(26,25,23,0.55); --muted: #716a60; --accent: #E8570E; /* Deeper orange on white for contrast */ --accent-text: #ffffff; --accent-soft: rgba(232,87,14,0.12); --review-paper: #FFFDF7; --review-ink: #111; --header-blur-bg: rgba(250,247,242,0.55); --crack-fg: #2a231d; --crack-blend: multiply; --crack-opacity: 0.7; } html, body { background: var(--bg) !important; color: var(--fg) !important; transition: background 300ms ease, color 300ms ease; } /* ───── Section-level surfaces ───── All marketing sections were refactored to `background: transparent` so the crack layer shows through — meaning the var drives the section color. Nothing needed here. */ /* ───── Hardcoded overrides (light-mode only, scoped) ───── */ [data-theme="light"] { color-scheme: light; } /* text */ [data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3, [data-theme="light"] h4, [data-theme="light"] p, [data-theme="light"] span, [data-theme="light"] a, [data-theme="light"] button, [data-theme="light"] div, [data-theme="light"] section, [data-theme="light"] article, [data-theme="light"] header, [data-theme="light"] footer, [data-theme="light"] nav { /* inherit → var(--fg). Let components override when needed. */ } /* Elements that hard-code white text → repaint to --fg, but ONLY when not inside review notepaper (which has its own dark ink). */ [data-theme="light"] body > * :not(.review-paper):not(.review-paper *) { /* placeholder — real overrides use attribute selectors below */ } /* Review card paper — force cream paper + dark ink regardless of theme */ .review-paper { background: var(--review-paper) !important; color: var(--review-ink) !important; } /* Header surface override (both themes use var already via CSS fallback) */ [data-theme="light"] header[data-theme-bg] { background: var(--header-blur-bg) !important; border-bottom-color: rgba(0,0,0,0.06) !important; } /* Borders on dark cards → soft border on light */ [data-theme="light"] [style*="#2c2c2e"] { border-color: var(--border) !important; } [data-theme="light"] [style*="#1a1a1a"] { border-color: var(--border-soft) !important; } /* Flip opacity-white colors (rgba(255,255,255,*)) is handled via data-recolor attr in components that need to swap. */ /* White muted text */ [data-theme="light"] [data-recolor="fg"] { color: var(--fg) !important; } [data-theme="light"] [data-recolor="fg-2"] { color: var(--fg-2) !important; } [data-theme="light"] [data-recolor="muted"] { color: var(--muted) !important; } /* Surfaces */ [data-theme="light"] [data-recolor="surface"] { background: var(--surface) !important; border-color: var(--border) !important; box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 20px rgba(0,0,0,0.04) !important; } [data-theme="light"] [data-recolor="surface-2"] { background: var(--surface-2) !important; } /* Buttons on light: primary orange with white text */ [data-theme="light"] [data-recolor="btn-primary"] { color: var(--accent-text) !important; } /* Mono text color on light */ [data-theme="light"] [data-recolor="mono"] { color: var(--muted) !important; } /* Dark-only drop shadows → soften for light */ [data-theme="light"] [style*="rgba(0,0,0,0.5)"] { box-shadow: 0 20px 40px rgba(0,0,0,0.08) !important; } /* Scrollbar — hide across themes (already hidden in index