/* Theme controls. Loaded after styles.css so it can adjust the generated
   dark block without touching the hand-written layout. */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: 4px;
  background: none;
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--header-fg, var(--primary));
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

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

.nav-menu .nav-theme {
  display: flex;
  align-items: center;
  margin-left: 8px;
}

.nav-menu .nav-theme .theme-toggle {
  margin-left: 0;
}

@media (min-width: 760px) {
  .nav-menu .nav-theme {
    margin-right: 18px;
  }
}

@media (max-width: 759px) {
  .nav-menu .nav-theme {
    margin: 8px 0 0;
    padding-top: 12px;
    padding-left: 18px;
    border-top: 1px solid var(--color-border);
  }
}

.site-header[data-tone="dark"] .theme-toggle {
  color: var(--color-text-on-inverse);
  border-color: color-mix(in srgb, var(--color-text-on-inverse) 24%, transparent);
}

.site-header[data-tone="dark"] .theme-toggle:hover {
  background: color-mix(in srgb, var(--color-text-on-inverse) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-text-on-inverse) 35%, transparent);
}

.site-header[data-tone="dark"] :focus-visible {
  outline-color: var(--color-text-on-inverse);
}

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

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

.theme-toggle__sun {
  display: none;
}

[data-theme="dark"] .theme-toggle__sun {
  display: block;
}

[data-theme="dark"] .theme-toggle__moon {
  display: none;
}

/* Two marks instead of one recoloured file: the light pinwheel is a shipped
   asset, not a CSS filter. */
.brand-mark--dark {
  display: none;
}

[data-theme="dark"] .brand-mark--light {
  display: none;
}

[data-theme="dark"] .brand-mark--dark {
  display: inline-block;
}

/* The warm reading surface belongs to daylight. At night it falls back to the
   neutral canvas rather than inventing a warm dark tint. */
[data-theme="dark"] body.theme-warm {
  background: var(--color-canvas);
}

[data-theme="dark"] body.theme-warm .site-header {
  --header-bg: var(--color-canvas);
}

/* The CTA link sits on a dark band in both themes; the dark accent-tint token
   would make it near-black on dark. Keep it on the lighter accent text. */
[data-theme="dark"] .cta .link-underline {
  color: var(--color-accent-text);
}

[data-theme="dark"] .cta .link-underline:hover,
[data-theme="dark"] .cta .link-underline:focus-visible {
  color: var(--color-text-on-inverse);
}

/* The spinning footer mark is an outline mask. Accent in light, light ink in
   dark; the mask keeps the line art in both themes. */
[data-theme="dark"] .site-footer .container::after {
  background-color: var(--color-text-on-inverse);
}

/* The cursor stays the primary blue in light, including over dark bands, and
   turns light in dark. */
.cursor-ring.is-pressed .cursor-ring__dot {
  border-color: var(--color-accent);
}

.cursor-ring.is-inverted .cursor-ring__dot {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-canvas) 55%, transparent);
}

.cursor-ring.is-inverted.is-pressed .cursor-ring__dot {
  border-color: var(--color-accent);
  background-color: color-mix(in srgb, var(--color-accent) 16%, transparent);
}

[data-theme="dark"] .cursor-ring__dot,
[data-theme="dark"] .cursor-ring.is-inverted .cursor-ring__dot {
  border-color: var(--color-text);
}

[data-theme="dark"] .cursor-ring.is-pressed .cursor-ring__dot,
[data-theme="dark"] .cursor-ring.is-inverted.is-pressed .cursor-ring__dot {
  border-color: var(--color-text);
  background-color: color-mix(in srgb, var(--color-text) 16%, transparent);
}

/* The shader canvas sits on the dark canvas; keep its edge from glowing. */
[data-theme="dark"] .hero {
  background: var(--color-canvas);
}

/* The dark pointer light is additive, so it needs more alpha than the
   multiplied light-mode version. Keep the light-mode radius and soften the
   center so it stays visible without reading as a spotlight. */
[data-theme="dark"] .page-glow.is-inverted .page-glow__halo {
  background: radial-gradient(circle at center,
    color-mix(in srgb, var(--color-accent) 20%, transparent) 0%,
    color-mix(in srgb, var(--color-accent) 12%, transparent) 34%,
    color-mix(in srgb, var(--color-accent) 5%, transparent) 58%,
    transparent 74%);
}

[data-theme="dark"] .page-glow.is-inverted .page-glow__core {
  background: radial-gradient(circle at center,
    color-mix(in srgb, var(--color-accent) 15%, transparent) 0%,
    color-mix(in srgb, var(--color-accent) 8%, transparent) 46%,
    transparent 72%);
}

/* Circle reveal from the theme toggle. Only the new snapshot is clipped; the
   old page stays underneath. */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}