/* Light theme variable overrides */
html[data-theme="light"] {
  --navy:     #f0f4ff;
  --navy-mid: #e6ecf8;
  --navy-lit: #d9e2f4;
  --accent:   #1e3a8a;
  --muted:    #6b7fa0;
  --white:    #0d1628;
  --border:   rgba(13, 22, 40, 0.1);
}

/* Tone down the gradient overlay in light mode */
html[data-theme="light"] body::before {
  background:
    radial-gradient(ellipse 80% 60% at 70% 20%, rgba(180, 200, 240, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 80%, rgba(160, 185, 230, 0.08) 0%, transparent 55%);
}

/* Override hardcoded rgba text colours (light bg equivalents) */
html[data-theme="light"] .bio {
  color: rgba(13, 22, 40, 0.72);
}

html[data-theme="light"] .contact-intent {
  color: rgba(13, 22, 40, 0.55);
}

html[data-theme="light"] .prose p {
  color: rgba(13, 22, 40, 0.70);
}

html[data-theme="light"] .pattern-body,
html[data-theme="light"] .agent-desc {
  color: rgba(13, 22, 40, 0.55);
}

html[data-theme="light"] .now-body {
  color: rgba(13, 22, 40, 0.65);
}

html[data-theme="light"] .now-body em {
  color: rgba(13, 22, 40, 0.82);
}

html[data-theme="light"] .link-item {
  color: var(--white);
}

/* Thesis pull-quote on index uses --accent colour — already flips via variable */

/* Theme toggle button */
.theme-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--navy-mid);
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  z-index: 200;
  padding: 0;
}

.theme-toggle:hover {
  background: var(--navy-lit);
  color: var(--accent);
  border-color: rgba(200, 216, 248, 0.3);
}

html[data-theme="light"] .theme-toggle:hover {
  border-color: rgba(13, 22, 40, 0.25);
}

.theme-toggle svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Dark mode: show moon. Light mode: show sun. */
.icon-sun  { display: none; }
.icon-moon { display: block; }

html[data-theme="light"] .icon-sun  { display: block; }
html[data-theme="light"] .icon-moon { display: none; }