/* Advanced Theme System — 8 palettes, all overriding the SAME variable names style.css already defines in :root (--bg-0/1/2/3, --text-0/1/2, --accent, --accent-2, --accent-warn, --accent-danger, --success, --border, --border-hi, --on-accent). Every existing component in every CSS file already renders from these tokens, so switching [data-theme] on re-colors the entire site without touching a single component file. JO DARK is the current site look — it matches :root exactly, so it's the default and nothing changes for anyone who never opens the theme selector. Semantic states (warning/danger/success) stay visually recognizable across themes on purpose — success is always green-ish, danger always red-ish. */ [data-theme="jo-dark"]{ --bg-0:#0a0b0f; --bg-1:#111319; --bg-2:#181b23; --bg-3:#20242e; --border:#2a2e3a; --border-hi:#3a4152; --text-0:#eef0f5; --text-1:#a8adba; --text-2:#6b7182; --accent:#d4af37; --accent-rgb:212,175,55; --accent-2:#f2ce6f; --accent-2-rgb:242,206,111; --accent-warn:#ffb545; --accent-danger:#ff5c7a; --success:#3dffa0; --on-accent:#04070a; --theme-glow:212,175,55; } [data-theme="midnight-blue"]{ --bg-0:#060a14; --bg-1:#0b1220; --bg-2:#101a2e; --bg-3:#16233c; --border:#1f2d47; --border-hi:#2c3f61; --text-0:#eaf1fb; --text-1:#9fb0c9; --text-2:#63728c; --accent:#3d8bff; --accent-rgb:61,139,255; --accent-2:#5ad1ff; --accent-2-rgb:90,209,255; --accent-warn:#ffb545; --accent-danger:#ff5c7a; --success:#3dffa0; --on-accent:#ffffff; --theme-glow:61,139,255; } [data-theme="purple-nebula"]{ --bg-0:#0d0817; --bg-1:#140f22; --bg-2:#1c1530; --bg-3:#261c40; --border:#332750; --border-hi:#453868; --text-0:#f1eaff; --text-1:#b3a3d9; --text-2:#7267a0; --accent:#a855f7; --accent-rgb:168,85,247; --accent-2:#e879f9; --accent-2-rgb:232,121,249; --accent-warn:#ffb545; --accent-danger:#ff5c7a; --success:#3dffa0; --on-accent:#ffffff; --theme-glow:168,85,247; } [data-theme="emerald"]{ --bg-0:#071410; --bg-1:#0c1d17; --bg-2:#122a20; --bg-3:#18392b; --border:#1f4534; --border-hi:#2c5c46; --text-0:#e9fbf3; --text-1:#9fc9b3; --text-2:#628c76; --accent:#2dd4a7; --accent-rgb:45,212,167; --accent-2:#7ff5d0; --accent-2-rgb:127,245,208; --accent-warn:#ffb545; --accent-danger:#ff5c7a; --success:#3dffa0; --on-accent:#04120d; --theme-glow:45,212,167; } [data-theme="crimson"]{ --bg-0:#0d0a0a; --bg-1:#151010; --bg-2:#1e1616; --bg-3:#2a1e1e; --border:#3a2626; --border-hi:#4d3232; --text-0:#f5eaea; --text-1:#b89898; --text-2:#7a5f5f; --accent:#e0304f; --accent-rgb:224,48,79; --accent-2:#ff6b81; --accent-2-rgb:255,107,129; --accent-warn:#ffb545; --accent-danger:#ff8095; --success:#3dffa0; --on-accent:#ffffff; --theme-glow:224,48,79; } [data-theme="arctic"]{ --bg-0:#eef1f6; --bg-1:#ffffff; --bg-2:#f4f6fa; --bg-3:#e7ebf2; --border:#dbe1ea; --border-hi:#c5cddb; --text-0:#141821; --text-1:#4b5568; --text-2:#8792a3; --accent:#2f8fe0; --accent-rgb:47,143,224; --accent-2:#5aa8ea; --accent-2-rgb:90,168,234; --accent-warn:#c97a12; --accent-danger:#d23a54; --success:#1f9d6f; --on-accent:#ffffff; --theme-glow:47,143,224; } [data-theme="graphite"]{ --bg-0:#0e0e10; --bg-1:#151517; --bg-2:#1c1c1f; --bg-3:#242428; --border:#2e2e33; --border-hi:#3d3d44; --text-0:#f0f0f2; --text-1:#a8a8b0; --text-2:#6e6e78; --accent:#c7c9d1; --accent-rgb:199,201,209; --accent-2:#e8e9ee; --accent-2-rgb:232,233,238; --accent-warn:#ffb545; --accent-danger:#ff5c7a; --success:#3dffa0; --on-accent:#101014; --theme-glow:199,201,209; } [data-theme="cyber"]{ --bg-0:#050b0d; --bg-1:#0a1417; --bg-2:#0f1e22; --bg-3:#15282e; --border:#1c3a42; --border-hi:#285058; --text-0:#e6fbff; --text-1:#8fc9d4; --text-2:#5a828c; --accent:#22d3ee; --accent-rgb:34,211,238; --accent-2:#38bdf8; --accent-2-rgb:56,189,248; --accent-warn:#ffb545; --accent-danger:#ff5c7a; --success:#3dffa0; --on-accent:#04120d; --theme-glow:34,211,238; } /* Smooth theme switch — scoped to the surfaces that actually carry theme colors (not a blanket `*` selector, to keep this cheap), per spec: no sudden color jumps, but no lag either. */ body, #app, .topbar, .admin-nav, .site-nav a, .map-card, .service-card, .form-panel, .admin-table, .admin-table td, .admin-table th, input, textarea, select, button, .ghost-btn, .generate-btn, .jo-pricing-card, .jo-site-footer, .acct-side, .acct-main, .val-sidebar, .val-main, .tl-panel{ transition: background-color .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease; } @media (prefers-reduced-motion: reduce){ body, #app, .topbar, .admin-nav, .site-nav a, .map-card, .service-card, .form-panel, .admin-table, .admin-table td, .admin-table th, input, textarea, select, button, .ghost-btn, .generate-btn, .jo-pricing-card, .jo-site-footer, .acct-side, .acct-main, .val-sidebar, .val-main, .tl-panel{ transition: none; } } /* ------------------------------------------------------------ selector UI */ .jo-theme-btn{ font-size:15px; line-height:1; padding:8px 11px; transition:transform .3s ease; } .jo-theme-btn.spin-once{ animation:jo-theme-icon-spin .35s ease; } @keyframes jo-theme-icon-spin{ from{ transform:rotate(0);} to{ transform:rotate(180deg);} } .jo-theme-panel{ position:fixed; z-index:9999; width:min(320px,calc(100vw - 24px)); background:var(--bg-1); border:1px solid var(--border-hi); border-radius:14px; padding:14px; box-shadow:0 20px 50px rgba(0,0,0,.5); animation:jo-theme-panel-in .18s ease; } @keyframes jo-theme-panel-in{ from{ opacity:0; transform:translateY(-6px);} to{ opacity:1; transform:translateY(0);} } .jo-theme-panel-head{ font-family:var(--font-display); font-size:13px; color:var(--text-1); margin-bottom:10px; text-transform:uppercase; letter-spacing:.4px; } .jo-theme-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; max-height:60vh; overflow-y:auto; } .jo-theme-card{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:8px; background:var(--bg-2); border:1.5px solid var(--border); border-radius:10px; padding:10px; cursor:pointer; text-align:left; width:100%; transition:transform .25s cubic-bezier(.22,1,.36,1), border-color .25s ease, box-shadow .25s ease; } .jo-theme-card:hover{ transform:translateY(-2px) scale(1.015); border-color:var(--border-hi); box-shadow:0 8px 20px rgba(0,0,0,.3); } .jo-theme-card.selected{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), 0 8px 24px rgba(var(--accent-rgb),.2); } .jo-theme-swatches{ display:flex; gap:3px; } .jo-theme-swatches span{ width:16px; height:16px; border-radius:5px; border:1px solid rgba(255,255,255,.15); display:inline-block; } .jo-theme-swatches-system span{ width:auto; height:auto; border:none; font-size:16px; background:none !important; } .jo-theme-name{ font-size:12px; color:var(--text-0); font-weight:600; } .jo-theme-check{ position:absolute; top:8px; right:8px; color:var(--accent); font-weight:800; font-size:13px; } .jo-theme-veil{ position:fixed; inset:0; z-index:99999; pointer-events:none; opacity:0; background:var(--bg-1); transition:opacity .22s ease; } @media (max-width:640px){ .jo-theme-panel{ position:fixed; left:0; right:0; bottom:0; top:auto; width:100%; max-width:none; border-radius:16px 16px 0 0; max-height:75vh; overflow-y:auto; } .jo-theme-grid{ grid-template-columns:1fr 1fr; max-height:none; } } /* Very subtle ambient background glow, unique per theme, per spec section 14 — low opacity, huge blur, static (no motion) so it never fights for attention or hurts text contrast. Sits behind everything, ignores clicks. */ .jo-theme-ambient{ position:fixed; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(ellipse 60% 40% at 15% 0%, rgba(var(--theme-glow),.07), transparent 60%), radial-gradient(ellipse 50% 40% at 100% 100%, rgba(var(--theme-glow),.05), transparent 60%); }