/* ============================================================
   BenchCalc: theme toggle + light mode (prototype)
   theme.js puts .light-mode on <html> for Light, or for Auto on a light device.
   Dark stays exactly as before; everything here only applies in light mode.
   ============================================================ */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.3rem 0.55rem; margin-left: 0.25rem;
  background: none; border: 1.5px solid var(--border); border-radius: 0.5rem;
  color: var(--text-dim); font-family: inherit; line-height: 1; cursor: pointer;
  transition: all 0.2s ease;
}
body.has-mouse .theme-toggle:hover { border-color: var(--border-hover); color: var(--teal); }
.theme-label { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }

:root.light-mode {
  /* teal darkened so it reads on paper */
  --teal: #0f766e;
  --teal-dim: rgba(15, 118, 110, 0.12);
  --teal-glow: rgba(20, 184, 166, 0.3);
  --purple: #6d28d9;
  --bg-deep: #f2f5f4;
  --bg-card: #ffffff;
  --bg-panel: #ffffff;
  --bg-body-secondary: rgba(0, 0, 0, 0.03);
  --border: rgba(15, 118, 110, 0.22);
  --border-hover: rgba(15, 118, 110, 0.5);
  --border-section: rgba(15, 118, 110, 0.18);
  --border-secondary: rgba(0, 0, 0, 0.08);
  --text: #18202b;
  --text-dim: #48525f;
  --text-faint: #6b7480;
  --green-play: #12803f;
  --accent-danger: #c62828;
  --accent-warning: #b45309;
  color-scheme: light;
}

/* Bars and dropdown */
:root.light-mode .store-bar { background: rgba(242, 245, 244, 0.94); }
:root.light-mode .nav-bar { background: rgba(248, 250, 249, 0.94); }
:root.light-mode .nav-divider { background: rgba(0, 0, 0, 0.12); }
:root.light-mode .nav-more-dropdown { background: rgba(255, 255, 255, 0.98); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.25); }

/* Headings and names that were hard-coded white */
:root.light-mode .store-bar-brand,
:root.light-mode .landing-brand,
:root.light-mode h1,
:root.light-mode h2,
:root.light-mode h3,
:root.light-mode .cat-title,
:root.light-mode .fp-subheading,
:root.light-mode .wizard-item h3,
:root.light-mode .release-section h2 { color: #141a22; }
:root.light-mode [style*="color:#fff"],
:root.light-mode [style*="color: #fff"] { color: #141a22 !important; }

/* Buttons and hovers */
:root.light-mode .store-btn-ms { background: rgba(0, 120, 212, 0.08); border-color: rgba(0, 95, 184, 0.45); color: #005fb8; }
:root.light-mode .store-btn-ms:hover { border-color: #005fb8; }
:root.light-mode .store-btn-ios,
:root.light-mode .cta-btn-ios { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.2); color: #141a22; }
:root.light-mode body.has-mouse .store-btn-ios:hover,
:root.light-mode body.has-mouse .cta-btn-ios:hover { background: rgba(0, 0, 0, 0.08); border-color: rgba(0, 0, 0, 0.4); }
:root.light-mode body.has-mouse .media-toggle-btn:hover:not(.active),
:root.light-mode body.has-mouse .demo-pick:hover:not(.active) { background: rgba(0, 0, 0, 0.05); }
:root.light-mode .footer-secret { color: rgba(0, 0, 0, 0.04) !important; }

/* Cards get a soft lift instead of the dark glass */
:root.light-mode .plan-card,
:root.light-mode .mode-card,
:root.light-mode .calc-card { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 8px 24px -16px rgba(0, 0, 0, 0.25); }

/* The phone stays a dark device in both themes */
:root.light-mode .phone-frame,
:root.light-mode .bench-phone-frame { box-shadow: 0 30px 90px -12px rgba(15, 118, 110, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.08); }


/* ============================================================
   Polish (GameDings-style), both themes
   ============================================================ */

/* Page background: one subtle pattern that suits the app, behind the whole page
   (landing and main area). The glows behind the icon and phone are the page's own. */
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(45,212,191,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(45,212,191,.05) 1px, transparent 1px); background-size: 28px 28px; }
:root.light-mode body::before { background-image: linear-gradient(rgba(15,118,110,.075) 1px, transparent 1px), linear-gradient(90deg, rgba(15,118,110,.075) 1px, transparent 1px); background-size: 28px 28px; }

/* Card lift (light mode only) */
:root { --lift: 0 0 0 transparent; }
:root.light-mode { --lift: 0 1px 0 rgba(0,0,0,.04), 0 10px 24px -16px rgba(0,0,0,.28); }

/* Brand pops in once (still for reduced motion) */
.landing-brand { animation: brandPop .35s cubic-bezier(0.34,1.56,0.64,1) both; }
@keyframes brandPop { from { opacity: 0; transform: translateY(10px) scale(.92); } to { opacity: 1; transform: none; } }

/* Menu bars get a crisp edge and soft shadow */
.nav-bar { box-shadow: 0 8px 20px -16px rgba(0,0,0,.6); }
:root.light-mode .nav-bar { box-shadow: 0 8px 20px -16px rgba(0,0,0,.3); }

/* Cards and tiles lift on hover; light mode gives them edges */
.plan-card, .mode-card, .calc-card, .cat-card, .store-btn, .media-toggle { box-shadow: var(--lift); }
:root.light-mode .plan-card, :root.light-mode .mode-card, :root.light-mode .calc-card, :root.light-mode .cat-card { border-color: rgba(0,0,0,.1); }
body.has-mouse .store-btn:hover { transform: translateY(-1px); }

/* Tabs: a clearer active underline */
.features-tab.active::after { height: 3px; border-radius: 2px; }

/* Section bands (latest, multiplayer, release notes) get a faint tint */
.latest-section, .mp-section { background: linear-gradient(180deg, transparent, rgba(45,212,191,.035), transparent); }
:root.light-mode .latest-section, :root.light-mode .mp-section { background: linear-gradient(180deg, transparent, rgba(15,118,110,.05), transparent); }

@media (prefers-reduced-motion: reduce) { .landing-brand { animation: none; } body.has-mouse .store-btn:hover { transform: none; } }


/* ============================================================
   Phone splash in light mode (the HTML splash, not screenshots)
   ============================================================ */
:root.light-mode .phone-screen { background: #eef6f4; }
:root.light-mode .phone-splash { background: radial-gradient(80% 55% at 50% 45%, rgba(45,212,191,.22), rgba(45,212,191,0) 70%), linear-gradient(160deg, #ffffff 0%, #eef6f4 60%, #ffffff 100%); }
:root.light-mode .phone-splash-title { color: #141a22; text-shadow: 0 0 18px rgba(45,212,191,.35); }
:root.light-mode .phone-splash-subtitle { color: rgba(20,26,34,.55); }
:root.light-mode .phone-strip { background: rgba(255,255,255,.8); border-top-color: rgba(15,118,110,.2); }
:root.light-mode .phone-strip-label, :root.light-mode .phone-strip-btn { color: #48525f; }
:root.light-mode .phone-strip-btn.active, :root.light-mode body.has-mouse .phone-strip-btn:hover { color: rgb(15,118,110); background: rgba(15,118,110,.12); }
:root.light-mode .phone-notch { background: #0b0b0d; }