/* Theme variants — swapped via [data-theme] on . Light is the default (no attribute needed), matching the app's default-light requirement. */ :root, :root[data-theme="light"]{ --bg:#f5f7fb; --bg-alt:#eaeef5; --surface:#ffffff; --surface-2:#f2f5f9; --border:#dde3ee; --text:#101623; --text-dim:#4c5769; --text-faint:#828da0; --accent:#0f9d70; --accent-dim:#0c7d59; --accent-2:#2f6fe0; --warn:#a5670a; --danger:#c73349; --radius:14px; --surface-blur:none; --body-gradient:none; --shadow:0 10px 30px rgba(20,30,60,.08); } :root[data-theme="dark"]{ --bg:#070b12; --bg-alt:#0c121c; --surface:#111827; --surface-2:#161f30; --border:#232d40; --text:#eef2f7; --text-dim:#9aa7bd; --text-faint:#5f6b82; --accent:#33d6a6; --accent-dim:#1f9d7a; --accent-2:#4f8cff; --warn:#f2b84b; --danger:#ef5f6b; --radius:14px; --surface-blur:none; --body-gradient:none; --shadow:0 10px 40px rgba(0,0,0,.35); } :root[data-theme="night"]{ --bg:#050a1a; --bg-alt:#080f24; --surface:#0d1730; --surface-2:#122048; --border:#1e2b52; --text:#e7ecfb; --text-dim:#93a3cf; --text-faint:#5b6a99; --accent:#5b8cff; --accent-dim:#3f6bdb; --accent-2:#33d6a6; --warn:#f2b84b; --danger:#ff6b81; --radius:14px; --surface-blur:none; --body-gradient:radial-gradient(ellipse 80% 50% at 50% -20%, rgba(91,140,255,.15), transparent); --shadow:0 10px 40px rgba(0,0,10,.5); } :root[data-theme="glass"]{ --bg:#241a3d; --bg-alt:#2a1f47; --surface:rgba(255,255,255,.14); --surface-2:rgba(255,255,255,.08); --border:rgba(255,255,255,.28); --text:#ffffff; --text-dim:rgba(255,255,255,.78); --text-faint:rgba(255,255,255,.52); --accent:#5eead4; --accent-dim:#2dd4bf; --accent-2:#93c5fd; --warn:#fcd34d; --danger:#fca5a5; --radius:18px; --surface-blur:blur(22px) saturate(160%); --body-gradient: radial-gradient(circle at 15% 15%, rgba(94,234,212,.35), transparent 45%), radial-gradient(circle at 85% 20%, rgba(147,197,253,.35), transparent 45%), radial-gradient(circle at 50% 90%, rgba(232,121,249,.3), transparent 50%), linear-gradient(160deg, #2a1f47, #1c1330); --shadow:0 10px 40px rgba(0,0,0,.35); } html, body{background:var(--bg);} body{ background-image:var(--body-gradient); background-attachment:fixed; background-size:cover; transition:background-color .25s ease, color .25s ease; } .topbar, .auth-card, .dashboard-view .monitor-card, .billing-card, .team-card, .add-monitor-card, .status-row, .client-row, .team-row, .faq-item, .price-card, .feature-card, .comparison-table-wrap, .mock-dashboard, .who-card, .status-page .status-row{ backdrop-filter:var(--surface-blur); -webkit-backdrop-filter:var(--surface-blur); }