/* The light concept owns the shared layout. Themes change colors only. */
.site-theme {
  --accent-fill: #f25050;
  --accent-ink: #241416;
  --red: #c92f35;
  --muted: #626a70;
  --line: #dce1e3;
  --page: #ffffff;
  --text: #1b1d20;
  --surface: #f5f7f8;
  --hover-surface: #eaeef0;
  --dropdown-shadow: #10171918;
  background: var(--page);
  color: var(--text);
}
@media (prefers-color-scheme: dark) {
.site-theme {
  --red: #f25050;
  --muted: #a0abae;
  --line: #344044;
  --page: #101719;
  --text: #f3f6f4;
  --surface: #172123;
  --hover-surface: #222e31;
  --dropdown-shadow: #0004;
}
}
.site-theme .concept-bar { background: #202126; color: #fff; }
.site-theme .concept-bar span { color: #bdc0c6; }
.site-theme .btn.primary { background: var(--accent-fill); color: var(--accent-ink); }
.site-theme .brand img,
.site-theme .footer .brand img { filter: none; }
.site-theme .signal-art { background: var(--surface); }
.site-theme .signal-corner { color: var(--text); }
.site-theme .signal-label { color: var(--muted); }
.site-theme .hero-card { background: var(--page); color: var(--text); }
.site-theme .plans-section,
.site-theme .coverage-section { background: var(--surface); }
.site-theme .features-section { padding-top: 76px; }
.site-theme .plan { background: var(--page); color: var(--text); }
.site-theme .plan.featured { border-color: var(--red); }
.site-theme .tag { background: var(--red); color: var(--page); }
.site-theme .footer { background: var(--page); }
.site-theme .nav-dropdown-panel {
  background: var(--page);
  border-color: var(--line);
  box-shadow: 0 16px 40px var(--dropdown-shadow);
}
.site-theme .nav-dropdown-panel a:hover,
.site-theme .nav-dropdown-panel a:focus-visible { background: var(--hover-surface); }
@media (max-width: 1200px) {
  .site-theme .nav { background: var(--page); }
  .site-theme .nav-dropdown-panel { background: transparent; border-left-color: var(--red); box-shadow: none; }
}

.site-theme .header-actions .language-picker select {
  color: var(--text);
  background: var(--page);
  border-color: var(--line);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { .site-theme .header-actions .language-picker select { color-scheme: dark; } }