/* Light mode for the newsletter pages (they ship their own compiled stylesheet). */
html[data-theme="light"] {
  color-scheme: light;
  --background: 0 0% 99%;
  --foreground: 0 0% 10%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 10%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 10%;
  --primary: 176 100% 23%;
  --primary-foreground: 0 0% 100%;
  --secondary: 150 14% 95%;
  --secondary-foreground: 0 0% 10%;
  --muted: 150 14% 95%;
  --muted-foreground: 0 0% 35%;
  --accent: 176 100% 23%;
  --accent-foreground: 0 0% 100%;
  --border: 0 0% 87%;
  --input: 0 0% 87%;
  --ring: 176 100% 23%;
  --sidebar-background: 0 0% 99%;
  --sidebar-foreground: 0 0% 10%;
  --sidebar-primary: 176 100% 23%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 176 100% 23%;
  --sidebar-accent-foreground: 0 0% 100%;
  --sidebar-border: 0 0% 87%;
  --sidebar-ring: 176 100% 23%;
}

/* The chrome bar and footer are authored inline in each page */
html[data-theme="light"] .mrmc,
html[data-theme="light"] .mrmc-bar,
html[data-theme="light"] .mrmc-foot {
  background: #FCFCFC;
  color: #1A1A1A;
  border-color: rgba(26, 26, 26, 0.14);
}
html[data-theme="light"] .mrmc a { color: inherit; }
html[data-theme="light"] .mrmc-brand img { filter: invert(1) brightness(0.25); }

/* Theme toggle button (mirrors the main site styling) */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 999px;
  cursor: pointer;
  background: transparent;
  color: inherit;
  border: 1px solid currentColor;
  opacity: 0.85;
}
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle:hover { opacity: 1; }