/* Blog dark-mode theme overrides.
 * The light tokens live inline in each HTML file (see :root { --background ... }).
 * This stylesheet adds dark overrides + theme-toggle button styling.
 * Mapping is kept in sync with src/index.css .dark { ... }.
 */

:root.dark {
  --background: 30 8% 6%;
  --foreground: 40 15% 95%;
  --card: 30 8% 9%;
  --muted: 30 6% 13%;
  --muted-foreground: 40 8% 65%;
  --border: 30 6% 17%;
  --primary: 236 44% 61%;          /* slightly brighter for dark bg contrast */
  --primary-glow: 188 94% 55%;
  --accent: 236 44% 61%;
}

/* Body bg defined via tokens already, but force color-scheme so form
   controls + scrollbars adopt dark UA styling. */
:root.dark { color-scheme: dark; }
:root:not(.dark) { color-scheme: light; }

/* Smoother token transitions when toggling. */
html, body { transition: background-color 0.2s ease, color 0.2s ease; }

/* --- Theme toggle button --- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: 1px solid hsl(var(--border));
  border-radius: 0.375rem;
  color: hsl(var(--foreground));
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.theme-toggle:hover { background: hsl(var(--muted)); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
:root.dark .theme-toggle .icon-sun { display: block; }
:root.dark .theme-toggle .icon-moon { display: none; }

/* Mobile variant: full-width pill inside the drawer. */
.mobile-ctas .theme-toggle {
  width: 100%;
  justify-content: center;
  gap: 0.5rem;
  height: auto;
  padding: 0.5rem 1rem;
}
.mobile-ctas .theme-toggle::after {
  content: "Switch to dark";
  font-size: 0.875rem;
  font-weight: 500;
}
:root.dark .mobile-ctas .theme-toggle::after { content: "Switch to light"; }

/* --- Dark-mode polish for blog surfaces --- */
:root.dark .source-card,
:root.dark .callout {
  background: hsl(var(--card));
}
:root.dark code,
:root.dark pre {
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
}
:root.dark pre {
  border: 1px solid hsl(var(--border));
}
:root.dark table th {
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
}
:root.dark table td,
:root.dark table th {
  border-color: hsl(var(--border));
}
:root.dark .post-card,
:root.dark .featured-card {
  background: hsl(var(--card));
  border-color: hsl(var(--border));
}
:root.dark .featured-card {
  padding: 2rem;
  border-radius: 1rem;
}
@media (max-width: 768px) {
  :root.dark .featured-card { padding: 1.25rem; }
}
:root.dark .dropdown-content,
:root.dark .mobile-menu {
  background: hsl(var(--card));
}
:root.dark .reading-progress { background: hsl(var(--muted)); }

/* Hide logo gradient seams on dark bg. */
:root.dark .logo span {
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary-glow)));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --- Dark-mode imagery treatment (Slice E, CSS-first) ---
 * Blog banner/card art is generated for light backgrounds. In dark mode we dim
 * the raster slightly and apply a luminosity blend so saturated whites stop
 * "punching" through the dark surface. Wrappers get a subtle inset shadow to
 * smooth the seam between art and card background.
 */
:root.dark .hero-banner img,
:root.dark .post-card-image img,
:root.dark .featured-card img,
:root.dark .related-card-image img {
  opacity: 0.9;
  filter: brightness(0.92) contrast(1.02);
  transition: opacity 0.2s ease, filter 0.2s ease;
}
:root.dark .post-card-image,
:root.dark .related-card-image,
:root.dark .hero-banner {
  background: hsl(var(--muted));
}
:root.dark .hero-banner img:hover,
:root.dark .post-card:hover .post-card-image img,
:root.dark .featured-card:hover img,
:root.dark .related-card:hover .related-card-image img {
  opacity: 1;
  filter: none;
}

/* Logo light/dark swap now handled by blog-theme.js via data-light-src/data-dark-src.
 * Defensive: never apply the dark-mode raster dimming/filter to the brand logo,
 * and never give it a card-colored chip background. The logo PNG is transparent. */
:root.dark .logo-img,
:root.dark .author-avatar .logo-img {
  opacity: 1 !important;
  filter: none !important;
  background: transparent !important;
}
:root.dark .author-avatar {
  background: transparent !important;
  border: 0 !important;
}