/* Palette shared with app/DESIGN_GUIDE.md. Geometry is theme-independent. */
html.light {
  color-scheme: light;
  --color-bg: #F7FAFE;
  --color-bg-secondary: #FFFFFF;
  --color-bg-card: #FFFFFF;
  --color-bg-elevated: #EAF1F8;
  --color-text: #0B1733;
  --color-text-secondary: #44516A;
  --color-text-muted: #6B7890;
  --color-border: #D8E2EE;
  --color-primary: #2563EB;
  --color-primary-dark: #1D4ED8;
  --color-primary-light: #2563EB;
  --color-secondary: #0284C7;
  --color-accent: #16A34A;
  --color-success: #16A34A;
  --color-warning: #D97706;
  --color-error: #DC2626;
  --color-focus: #2563EB;
  --color-focus-bg: rgba(37,99,235,.08);
  --intel-bg: #F7FAFE;
  --intel-bg-raised: #FFFFFF;
  --intel-text: #0B1733;
  --intel-text-muted: #6B7890;
  --intel-text-copy: #44516A;
  --intel-accent: #2563EB;
}
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 32px; width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--color-border); border-radius: 8px;
  background: var(--color-bg-card); color: var(--color-text);
  cursor: pointer;
}
.theme-toggle:hover { border-color: var(--color-secondary); }
.theme-toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-moon, html.light .theme-sun { display: none; }
html.light .theme-moon { display: block; }
html.light .share-btn { background: #EAF1F8; border-color: #D8E2EE; color: #44516A; }
html.light .share-btn:hover { color: white; }
html.light input, html.light select, html.light textarea { color-scheme: light; }
html.light body { background: #F7FAFE; color: #0B1733; }
html.light .intel-nav, html.light .navbar.scrolled { background: rgba(255,255,255,.97); }
html.light .nav-mobile-drawer, html.light .user-dropdown,
html.light .nav-dropdown-menu { background: #FFFFFF; color: #0B1733; border-color: #D8E2EE; }
html.light .preview-hero { background: linear-gradient(135deg,#EAF1F8,#F7FAFE); }
html.light .preview-section { background: #FFFFFF; border-color: #D8E2EE; }
@media (max-width: 768px) {
  .intel-nav .nav-auth { gap: 8px; }
  .intel-nav .theme-toggle { flex-shrink: 0; }
}