/*
 * Toiro background glow: shared by the public About page and KumiGlow.
 * The About page's current gold is the default. KumiGlow ships an identical
 * copy because it is packaged as a separate Cloudflare Pages project.
 * Keep both copies byte-identical (test:about-kumiglow-glow).
 *
 * Softness is the radial gradient's transparent stop, not filter: blur().
 * The background gradient is the lower layer; fine Asanoha line art sits above.
 */
:root {
  --toiro-glow-position: 76% 18%;
  --toiro-glow-fade-at: 34%;
  --toiro-glow-color-day: rgba(158, 128, 80, 0.16);
  --toiro-glow-color-night: rgba(201, 169, 110, 0.14);
  --toiro-glow-color: var(--toiro-glow-color-day);
}

/* Resolve the gradient in each consuming element's scope, including pseudos. */
*,
*::before,
*::after {
  --toiro-glow-layer: radial-gradient(
    circle at var(--toiro-glow-position),
    var(--toiro-glow-color) 0%,
    transparent var(--toiro-glow-fade-at)
  );
}

:root[data-mode="yoru"] {
  --toiro-glow-color: var(--toiro-glow-color-night);
}

/* Development-only alternatives. Production pages do not expose a picker. */
[data-glow-preset="about-gold"] {
  --toiro-glow-color-day: rgba(158, 128, 80, 0.16);
  --toiro-glow-color-night: rgba(201, 169, 110, 0.14);
  --toiro-glow-color: var(--toiro-glow-color-day);
}

[data-glow-preset="amber"] {
  --toiro-glow-color-day: rgba(212, 175, 55, 0.08);
  --toiro-glow-color-night: rgba(212, 175, 55, 0.08);
  --toiro-glow-color: var(--toiro-glow-color-day);
}

[data-glow-preset="jade"] {
  --toiro-glow-color-day: rgba(52, 211, 153, 0.08);
  --toiro-glow-color-night: rgba(52, 211, 153, 0.08);
  --toiro-glow-color: var(--toiro-glow-color-day);
}

[data-glow-preset="sky"] {
  --toiro-glow-color-day: rgba(96, 165, 250, 0.08);
  --toiro-glow-color-night: rgba(96, 165, 250, 0.08);
  --toiro-glow-color: var(--toiro-glow-color-day);
}

[data-glow-preset="coral"] {
  --toiro-glow-color-day: rgba(251, 113, 133, 0.08);
  --toiro-glow-color-night: rgba(251, 113, 133, 0.08);
  --toiro-glow-color: var(--toiro-glow-color-day);
}

[data-mode="yoru"][data-glow-preset] {
  --toiro-glow-color: var(--toiro-glow-color-night);
}
