/* public/light.css -- 2026-11-01: light theme. Loaded after site.css with
   media="(prefers-color-scheme: light)", so it only applies when the visitor's system is set to
   light. Tokens first (most components read them), then the components whose colours are
   hard-coded for the dark theme. Code windows (terminal, setup snippets, recordings) stay dark
   on purpose: they imitate a terminal. */

:root {
  color-scheme: light;
  --bg-page: #f5f7fb;
  --bg-button: #ffffff;
  --bg-surface: #ffffff;
  --glass: linear-gradient(145deg, #ffffff, #f3f6fb);
  --border-subtle: rgba(20, 40, 80, 0.08);
  --border-standard: rgba(20, 40, 80, 0.13);
  --border-prominent: rgba(20, 40, 80, 0.24);
  --border-secondary: rgba(20, 40, 80, 0.18);
  --border-charcoal: rgba(20, 40, 80, 0.30);
  --border-green: rgba(37, 99, 199, 0.40);
  --text-primary: #0d1a2d;
  --text-secondary: #3a4a60;
  --text-muted: #5d6d84;
  --brand-green: #2563c7;
  --link-green: #1f57b3;
  --accent: #2563c7;
  --ok: #138a55;
  --text-error: #c62828;
}

body::before { background: radial-gradient(ellipse 58% 45% at 50% 0, rgba(95, 145, 230, 0.16), transparent 80%); }
nav.topnav { background: rgba(255, 255, 255, 0.85); }
@media (max-width: 860px) { .navlinks { background: #ffffff; box-shadow: 0 20px 35px rgba(20, 40, 80, 0.12); } }
.nav-toggle { background: #ffffff; }
.brand .dot { background: #2563c7; box-shadow: 0 0 0 4px rgba(37, 99, 199, 0.12); }

.btn-primary { background: linear-gradient(135deg, #2f6fd6, #1f57b3); color: #ffffff; border-color: #1f57b3;
  box-shadow: 0 6px 18px rgba(37, 99, 199, 0.22); }
.btn-primary:hover { border-color: #17468f; }
.btn-secondary, .demo-controls button { background: #ffffff; }
.btn-ghost:hover, .demo-tab[aria-selected="true"] { background: rgba(37, 99, 199, 0.08); }
.btn-green { background: rgba(37, 99, 199, 0.06); color: #1f57b3; }
.btn-green:hover { color: #17468f; background: rgba(37, 99, 199, 0.12); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
summary:focus-visible, [tabindex]:focus-visible { outline-color: #1f57b3; }

.eyebrow { color: #2f62b5; }
.grad { background: linear-gradient(100deg, #0d1a2d 15%, #2563c7 75%, #3f7fe0); -webkit-background-clip: text; background-clip: text; }
code { color: #1f4f9e; }
.stats .n { color: #0d1a2d; }
.search-glass { background: #ffffff; box-shadow: 0 10px 30px rgba(20, 40, 80, 0.08); }
.search-glass input::placeholder { color: #7d8ca2; }
.category-cloud a, .tabs a, .client-chip, .filter-pill, .browse-filter { background: #ffffff; }
.category-cloud a:hover, .tabs a:hover, .filter-pill:hover { background: rgba(37, 99, 199, 0.08); border-color: #2563c7; }
.filter-pill[aria-pressed="true"], .browse-filter.is-active, .browse-filter.is-active span { color: #ffffff; }
/* 2026-11-01: the hover rule above used to repaint the pressed pill pale under the cursor (white on pale
   blue, unreadable right after a click); the pressed pill keeps its fill while hovered */
.filter-pill[aria-pressed="true"]:hover { background: var(--accent); border-color: var(--accent); }
.filter-pill[aria-pressed="true"] .pill-count { background: rgba(255, 255, 255, .22); }
.brand-icon { color: #0d1a2d; }
.component-card, .setup-card, .price-tile, .faq-list details, .card, .cta-box {
  background: #ffffff; box-shadow: 0 1px 2px rgba(20, 40, 80, 0.06); }
.score-high { background: rgba(19, 138, 85, 0.12); color: #0f6e44; }
.score-mid { background: rgba(196, 140, 0, 0.14); color: #7a5600; }
.score-low { background: rgba(198, 60, 40, 0.12); color: #a1321f; }
.score-grid div { background: #ffffff; }
.setup-status { color: #0f6e44; }
.copy-button, .copy { background: #ffffff; color: #1f57b3; }
.copy-button:hover, .copy:hover { background: rgba(37, 99, 199, 0.08); color: #17468f; }
.price-tile.featured { border-color: #2563c7; box-shadow: 0 0 0 1px #2563c7, 0 12px 30px rgba(37, 99, 199, 0.12); }
.chat-shell { background: #ffffff; }
.chat-bubble { color: #0d1a2d; }
.chat-bubble strong { color: #2f62b5; }
.chat-user .chat-bubble { background: #e6eefb; border-color: rgba(37, 99, 199, 0.18); }
.chat-option { background: #f3f6fb; color: #3a4a60; }
.chat-option-selected { background: rgba(37, 99, 199, 0.10); color: #0d1a2d; border-color: #2563c7; }
.chat-connected { color: #3a4a60; }

/* dashboards */
.tile.warn .v { color: #9a6200; }
.meter { background: rgba(20, 40, 80, 0.10); }
table.data th { background: #eef2f8; }
.clients details { background: #ffffff; }
.flash { background: #eef4ff; }
.flash.err { background: #fdeeee; }
.pill.ok { color: #0f6e44; }
.pill.warn { color: #8a5800; }
.pill.bad { color: #b42318; }
.inline-form input[type=text], .inline-form input[type=email], .inline-form select, .dash textarea { background: #ffffff; }

/* docs */
.doc .note { background: rgba(37, 99, 199, 0.06); }
.docs-actions a, .docs-actions button { background: #ffffff; }

/* Code windows keep the dark palette: re-declare the dark tokens inside them. */
.terminal-window, .setup-card .one-line, .setup-card pre, .doc pre.snippet, .clients pre, .demo, pre.snippet {
  --text-primary: #f5f8ff; --text-secondary: #bbc9dc; --text-muted: #90a4bf;
  background: #0f1a2c; color: #e2eafa; }
.terminal-window code, .setup-card pre code, .doc pre.snippet code, .clients pre code, pre.snippet code { color: #c8f0d8; }
.doc pre.snippet .copy, .clients pre .copy { background: rgba(109, 162, 243, .14); color: #c6dfff; }
.table-scroll::after { background: linear-gradient(to right, transparent, var(--bg-page)); }