/* ============================================================================ Light mode polish layer. Light is the implicit theme: there is no `data-theme="light"`, so everything here is scoped to `html:not([data-theme="dark"])`. The six Tiktokshop*.php pages opt into a Tailwind class-based dark theme via `` without touching `data-theme`, so visual rules also exclude `body.dark`. This file only covers what the per-page tokens cannot reach: colors baked into markup (SVG `stroke=` attributes, Tailwind arbitrary values), and the cross-cutting states — placeholders, focus, selection, scrollbars, disabled. Anything that already reads a CSS variable is fixed at the token instead. Theme scoping is wrapped in `:where()` so it adds no specificity and component-level styles keep winning. ========================================================================== */ html:not([data-theme="dark"]) { color-scheme: light; /* Text ramp. Every step clears WCAG AA on both #ffffff cards and the #f1f5f9 page canvas, while staying visibly distinct from the step above. */ --wh-ink: #0f172a; /* headings, primary values 17.9:1 */ --wh-ink-2: #334155; /* body copy 10.4:1 */ --wh-ink-3: #5b6b82; /* labels, captions, meta 5.4:1 */ --wh-ink-4: #717c92; /* placeholders, hints 4.4:1 */ --wh-ink-disabled: #9aa3b2; /* disabled — intentionally low */ /* Lines and surfaces */ --wh-line: #e2e8f0; --wh-line-strong: #cbd5e1; --wh-surface: #ffffff; --wh-surface-2: #f8fafc; /* Elevation. Two stacked shadows read as a crisper edge than one blur. */ --wh-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06); --wh-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08); --wh-shadow-md: 0 2px 4px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.08); --wh-focus: #225aea; --wh-focus-soft: rgba(34, 90, 234, 0.18); } /* ── Text baked into markup ──────────────────────────────────────────────── */ /* Tailwind arbitrary values that render as light gray on white. */ html:not([data-theme="dark"]) body:not(.dark) .text-\[\#9ca3af\], html:not([data-theme="dark"]) body:not(.dark) .text-\[\#9f9fa9\], html:not([data-theme="dark"]) body:not(.dark) .text-\[\#a1a1aa\] { color: var(--wh-ink-3); } /* Muted icon strokes. These sit inline on the so any rule wins, but the values are spread across hundreds of templates. Both letter cases are listed because attribute values match case-sensitively in HTML documents. */ html:not([data-theme="dark"]) body:not(.dark) [stroke="#99A0AE"], html:not([data-theme="dark"]) body:not(.dark) [stroke="#99a0ae"], html:not([data-theme="dark"]) body:not(.dark) [stroke="#94A3B8"], html:not([data-theme="dark"]) body:not(.dark) [stroke="#94a3b8"], html:not([data-theme="dark"]) body:not(.dark) [stroke="#9CA3AF"], html:not([data-theme="dark"]) body:not(.dark) [stroke="#9ca3af"], html:not([data-theme="dark"]) body:not(.dark) [stroke="#B0B0B0"], html:not([data-theme="dark"]) body:not(.dark) [stroke="#b0b0b0"] { stroke: var(--wh-ink-3); } /* ── Form fields ─────────────────────────────────────────────────────────── */ :where(html:not([data-theme="dark"]) body:not(.dark)) ::placeholder { color: var(--wh-ink-4); opacity: 1; /* Firefox dims placeholders by default */ } :where(html:not([data-theme="dark"]) body:not(.dark)) :disabled, :where(html:not([data-theme="dark"]) body:not(.dark)) [aria-disabled="true"] { color: var(--wh-ink-disabled); cursor: not-allowed; } /* ── Focus ───────────────────────────────────────────────────────────────── */ /* Keyboard-only ring, so pointer users see no change. Kept at low specificity so components with their own focus treatment override it rather than stack. */ :where(html:not([data-theme="dark"]) body:not(.dark)) :is(a, button, input, select, textarea, summary, [tabindex], [role="button"], [role="tab"], [role="option"]):focus-visible { outline: 2px solid var(--wh-focus); outline-offset: 2px; } /* ── Selection ───────────────────────────────────────────────────────────── */ :where(html:not([data-theme="dark"]) body:not(.dark)) ::selection { background: var(--wh-focus-soft); color: var(--wh-ink); } /* ── Scrollbars ──────────────────────────────────────────────────────────── */ :where(html:not([data-theme="dark"]) body:not(.dark)) ::-webkit-scrollbar { width: 10px; height: 10px; } :where(html:not([data-theme="dark"]) body:not(.dark)) ::-webkit-scrollbar-track { background: transparent; } :where(html:not([data-theme="dark"]) body:not(.dark)) ::-webkit-scrollbar-thumb { background: #cdd5e0; border: 2px solid transparent; background-clip: content-box; border-radius: 999px; } :where(html:not([data-theme="dark"]) body:not(.dark)) ::-webkit-scrollbar-thumb:hover { background: #aeb9c9; background-clip: content-box; } /* ── Page shell ──────────────────────────────────────────────────────────── */ /* Dark mode already separates the navbar from the canvas with a bottom border. A shadow does the same in light mode without adding a pixel of height to a fixed bar that pages offset their content against. */ html:not([data-theme="dark"]) body:not(.dark) #main-navbar.navbar_component { box-shadow: 0 1px 0 var(--wh-line); } :where(html:not([data-theme="dark"]) body:not(.dark)) hr { border: 0; border-top: 1px solid var(--wh-line); }