/* Site colors. Light is the default on :root.
   public/theme.js sets data-theme to "light" or "dark" before paint.
   A saved choice wins. Otherwise the script follows prefers-color-scheme, or light if that cannot be read. */

:root {
  color-scheme: light;
  --bg: #f5f7f7;
  --bg-top: #faf9f6;
  --bg-bottom: #eceeed;
  --surface: #ffffff;
  --text: #1a1d1c;
  --muted: #747675;
  --accent: #127968;
  --accent-2: #026151;
  --accent-3: #54ecca;
  --ring: color-mix(in oklab, var(--accent), transparent 70%);
  --line: #e5e5e5;
  --mint: #daf6f1;
  --mint-soft: #c0e8e0;
  --card-border: #e5e5e5;
  --hover: #daf6f1;
  --on-accent: #ffffff;
  --grid-dot: #1279680a;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0d10;
  --bg-top: #0b0d10;
  --bg-bottom: #0b0d10;
  --surface: #0f1216;
  --text: #e6ecf1;
  --muted: #9aa6b2;
  --accent: #6ee7ff;
  --accent-2: #a78bfa;
  --accent-3: #2dd4bf;
  --ring: color-mix(in oklab, var(--accent), transparent 60%);
  --line: #243244;
  --mint: #12312e;
  --mint-soft: #0e2422;
  --card-border: #243244;
  --hover: #0f141a;
  --on-accent: #02060a;
  --grid-dot: #ffffff10;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.theme-toggle:hover {
  color: var(--accent-2);
  background: var(--hover);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.theme-toggle .icon-sun {
  display: none;
}

html[data-theme="dark"] .theme-toggle .icon-moon {
  display: none;
}

html[data-theme="dark"] .theme-toggle .icon-sun {
  display: block;
}

/* Glow sits on a cyan fill. Dark --accent-2 is purple, which reads as purple type on cyan. */
html[data-theme="dark"] .button.glow {
  color: var(--on-accent);
}

/* In-sentence links. Dark --accent-2 is purple, so they look visited. Keep the light-mode hairline in the accent color. */
html[data-theme="dark"] .home-blog-text a,
html[data-theme="dark"] .blog-teaser-text a,
html[data-theme="dark"] .blog-index-lead a,
html[data-theme="dark"] .blog-content a,
html[data-theme="dark"] .blog-faq-answer a,
html[data-theme="dark"] .legal-content a,
html[data-theme="dark"] .home-blog-text a:hover,
html[data-theme="dark"] .blog-teaser-text a:hover,
html[data-theme="dark"] .blog-index-lead a:hover,
html[data-theme="dark"] .blog-content a:hover,
html[data-theme="dark"] .blog-faq-answer a:hover,
html[data-theme="dark"] .legal-content a:hover {
  color: var(--accent);
  text-decoration: none;
  border-bottom-color: color-mix(in oklab, var(--accent), transparent 60%);
}