/* ============================================================================
theme.css — BingeChill design system (single source of truth)
Every page links this file:
and loads the toggle:
Two palettes share one set of variable names. The active palette is chosen by:
1. (manual toggle, saved to localStorage)
2. otherwise the device's prefers-color-scheme
To retune either palette, edit the tokens below — nothing else.
========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* ── LIGHT palette (default / day) ──────────────────────────── */
:root {
--bg: #fdf4ee;
--surface: #ffffff;
--surface-2: #fff1e8;
--surface-3: #ece2db; /* skeletons, subtle hovers */
--border: rgba(60, 30, 40, 0.09);
--border-lit: rgba(60, 30, 40, 0.16);
--text: #2b1f2a; /* primary */
--text-2: #5a4f56; /* body copy */
--text-dim: #8a7a82; /* secondary */
--coral: #ff5436;
--orange: #ff8a3d;
--amber: #ffb02e;
--accent: #ff6a3d;
--accent-ink:#e8453d; /* accent text/links */
--grad: linear-gradient(120deg, #ff8a3d, #ff4d4f);
--grad-warm: linear-gradient(120deg, #ffb02e, #ff7a3a 55%, #ff4d4f);
--danger: #e5484d;
--danger-bg: rgba(229, 72, 77, 0.10);
--ok: #1f9d57;
--ok-bg: rgba(31, 157, 87, 0.12);
--radius: 14px;
--radius-lg: 22px;
--shadow-sm: 0 2px 10px rgba(60,30,40,0.07);
--shadow: 0 14px 38px -14px rgba(255,92,54,0.40), 0 4px 14px rgba(60,30,40,0.06);
--shadow-lg: 0 28px 60px -18px rgba(255,92,54,0.45), 0 6px 18px rgba(60,30,40,0.08);
--orb-opacity: 0.72;
--font: 'Inter', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
/* ── DARK palette (warm espresso) ───────────────────────────── */
/* Shared token block, applied when the OS is dark (and not forced light)… */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #15100d;
--surface: #221813;
--surface-2: #2c211b;
--surface-3: #382a23;
--border: rgba(255, 236, 226, 0.10);
--border-lit: rgba(255, 236, 226, 0.20);
--text: #f4ece6;
--text-2: #d6c7bc;
--text-dim: #a89a8f;
--accent-ink:#ff9472;
--danger-bg: rgba(229, 72, 77, 0.18);
--ok-bg: rgba(31, 157, 87, 0.20);
--shadow-sm: 0 2px 10px rgba(0,0,0,0.45);
--shadow: 0 14px 38px -14px rgba(0,0,0,0.65), 0 4px 14px rgba(0,0,0,0.45);
--shadow-lg: 0 28px 60px -18px rgba(0,0,0,0.75), 0 6px 18px rgba(0,0,0,0.55);
--orb-opacity: 0.34;
}
}
/* …and the same when the user explicitly forces dark. */
:root[data-theme="dark"] {
--bg: #15100d;
--surface: #221813;
--surface-2: #2c211b;
--surface-3: #382a23;
--border: rgba(255, 236, 226, 0.10);
--border-lit: rgba(255, 236, 226, 0.20);
--text: #f4ece6;
--text-2: #d6c7bc;
--text-dim: #a89a8f;
--accent-ink:#ff9472;
--danger-bg: rgba(229, 72, 77, 0.18);
--ok-bg: rgba(31, 157, 87, 0.20);
--shadow-sm: 0 2px 10px rgba(0,0,0,0.45);
--shadow: 0 14px 38px -14px rgba(0,0,0,0.65), 0 4px 14px rgba(0,0,0,0.45);
--shadow-lg: 0 28px 60px -18px rgba(0,0,0,0.75), 0 6px 18px rgba(0,0,0,0.55);
--orb-opacity: 0.34;
}
html { color-scheme: light dark; }
body { font-family: var(--font); -webkit-font-smoothing: antialiased; }
/* ── shared pastel mesh backdrop (hero/auth pages) ──────────── */
.mesh { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: var(--orb-opacity); }
.orb-1 { width: 48vw; height: 48vw; background: radial-gradient(circle, #ffb39e, transparent 70%); top: -12vw; left: -8vw; animation: bc-float1 19s ease-in-out infinite; }
.orb-2 { width: 42vw; height: 42vw; background: radial-gradient(circle, #ffd29e, transparent 70%); top: -6vw; right: -10vw; animation: bc-float2 23s ease-in-out infinite; }
.orb-3 { width: 40vw; height: 40vw; background: radial-gradient(circle, #ffe0a3, transparent 70%); bottom: -14vw; left: 22vw; animation: bc-float3 21s ease-in-out infinite; }
@keyframes bc-float1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(6vw,4vw) scale(1.10)} }
@keyframes bc-float2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-5vw,5vw) scale(1.08)} }
@keyframes bc-float3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(4vw,-4vw) scale(1.12)} }
/* ── shared primitives ──────────────────────────────────────── */
.btn-primary {
background: var(--grad); color: #fff; border: none; border-radius: 999px;
padding: 0.85rem 2rem; font-size: 1rem; font-weight: 700; cursor: pointer;
text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
box-shadow: var(--shadow); transition: transform 0.15s, box-shadow 0.25s, opacity 0.2s;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn-primary:disabled { opacity: 0.6; cursor: default; transform: none; }
.btn-ghost {
background: var(--surface); color: var(--text); border: 1px solid var(--border);
border-radius: 999px; padding: 0.85rem 2rem; font-size: 1rem; font-weight: 600;
cursor: pointer; text-decoration: none; box-shadow: var(--shadow-sm);
transition: transform 0.15s, box-shadow 0.25s;
}
.btn-ghost:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--border-lit); }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(.2,.7,.3,1), transform 0.7s cubic-bezier(.2,.7,.3,1); }
.reveal.in { opacity: 1; transform: translateY(0); }
/* ── theme toggle button (injected by theme-toggle.js) ──────── */
.bc-theme-toggle {
position: fixed; right: 1rem; bottom: 1rem; z-index: 9998;
width: 42px; height: 42px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 1.1rem; line-height: 1; cursor: pointer;
background: var(--surface); color: var(--text);
border: 1px solid var(--border); box-shadow: var(--shadow);
transition: transform 0.15s, box-shadow 0.2s;
}
.bc-theme-toggle:hover { transform: translateY(-2px) scale(1.05); box-shadow: var(--shadow-lg); }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
.reveal { opacity: 1; transform: none; }
}