/* ======================================== THEME TOKENS Paired semantic tokens for light/dark theming. Brand tokens (--brand-indigo, --brand-orange) are constant. Surface and text tokens flip with [data-theme]. Apply via [data-theme="light"] or [data-theme="dark"] on (or any descendant — tokens nest). Default is light if no attribute is set. ======================================== */ /* ---------------------------------------- BRAND CONSTANTS (theme-independent) ---------------------------------------- */ :root { --brand-indigo: #022662; --brand-orange: #f68b1f; --brand-accent-light: #e7f0fb; --brand-highlight: #fff1e6; /* Surfaces that intentionally do not flip with theme. Hero band is brand chrome (always indigo); launch-pad band is the mission-control surface (always dark). */ --bg-hero: #022662; --bg-hero-band: #0a1628; --bg-surface-dark-always: #0d1f3c; /* Text used inside dark-always surfaces */ --text-on-dark: #fff; --text-on-dark-muted: rgb(255, 255, 255, 0.65); --text-on-dark-faint: rgb(255, 255, 255, 0.5); } /* ---------------------------------------- LIGHT THEME (default) ---------------------------------------- */ :root, :root[data-theme='light'], [data-theme='light'] { --bg-page: #f5f7fa; --bg-surface: #fff; --bg-elevated: #fafafa; --bg-overlay: rgb(10, 22, 40, 0.78); --text-primary: #1a1a1a; --text-body: #363636; --text-muted: #5a5a5a; --text-faint: #9a9a9a; --rule: #e0e0e0; --rule-strong: #c8c8c8; --hover-soft: #e7f0fb; --shadow-card: 0 4px 15px rgb(2, 38, 98, 0.1); } /* ---------------------------------------- DARK THEME ---------------------------------------- */ :root[data-theme='dark'], [data-theme='dark'] { --bg-page: #0a1628; --bg-surface: #0d1f3c; --bg-elevated: #061229; --bg-overlay: rgb(10, 22, 40, 0.85); --text-primary: #fff; --text-body: rgb(255, 255, 255, 0.85); --text-muted: rgb(255, 255, 255, 0.65); --text-faint: rgb(255, 255, 255, 0.5); --rule: rgb(255, 255, 255, 0.08); --rule-strong: rgb(255, 255, 255, 0.15); --hover-soft: rgb(255, 255, 255, 0.06); --shadow-card: 0 4px 15px rgb(0, 0, 0, 0.4); } /* ---------------------------------------- GLOBAL SURFACE BIND Apply token-driven surfaces to by default so pages that opt into theming pick up the right background/text without per-template plumbing. ---------------------------------------- */ html[data-theme] body { color: var(--text-body); background-color: var(--bg-page); } /* ---------------------------------------- THEME TRANSITION 200ms cross-fade on theme change. Scoped to common surface properties; tighter than blanket `*` to avoid first-paint jank. ---------------------------------------- */ html[data-theme], html[data-theme] body, html[data-theme] .filter-sidebar, html[data-theme] .sample-card, html[data-theme] .card__layers, html[data-theme] .card__info, html[data-theme] .filter-option__box, html[data-theme] .theme-toggle { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } @media (prefers-reduced-motion: reduce) { html[data-theme], html[data-theme] *, html[data-theme] *::before, html[data-theme] *::after { transition: none !important; } }