/* Theme: the dark look is style.css and reader.css, unchanged. This sheet adds
   the theme toggle and, when <html data-theme="light"> (set before paint by the
   inline script in index.html), the light look.

   The stylesheets name their colors by role, not by hue: --ink is the page
   background, --navy the raised surface (the reader), --cloud the main text,
   --mist the secondary text, --white the strongest text. Light mode keeps those
   role names and gives them the light-mode values, so every rule that reads a
   role follows without being rewritten. The two palette tokens that are
   hue-specific (--blue, --slate) are untouched. scripts/check-brand.mjs checks
   these values for contrast. */
.theme-toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--control-line);
  border-radius: 50%;
  color: var(--muted);
  transition:
    background var(--micro),
    color var(--micro);
}
.theme-toggle:hover {
  color: var(--white);
  background: color-mix(in srgb, var(--mist) 14%, transparent);
}

:root[data-theme="light"] {
  color-scheme: light;
  --ink: #f8fafc;
  --navy: #ffffff;
  --cloud: #0f172a;
  --mist: #3d4a5f;
  --white: #0f172a;
  --on-accent: #ffffff;
  --hero-glow: #e2e8f0;
  --overlay: #f8fafc99;
  --shadow: #0f172a1f;
}
:root[data-theme="light"] .hero {
  background:
    radial-gradient(ellipse at 76% 43%, var(--hero-glow), transparent 55%),
    var(--ink);
}
:root[data-theme="light"] .action-icon {
  color: var(--on-accent);
}
:root[data-theme="light"] dialog {
  box-shadow: -2rem 0 5rem var(--shadow);
}
:root[data-theme="light"] dialog::backdrop {
  background: var(--overlay);
}
/* The wordmark in the header and footer is white artwork; light mode swaps in the
   Renkara Navy artwork. The specimen in the logo guideline keeps its dark panel. */
:root[data-theme="light"] .site-header .wordmark,
:root[data-theme="light"] .site-footer .wordmark {
  content: url("assets/renkara-wordmark-navy.svg");
}
:root[data-theme="light"] .wordmark-specimen {
  background: #0f172a;
}
/* The particle cloud drifts behind the hero copy in both themes: dark specks under
   dark text in light mode, and pale specks under pale text in dark mode (measured as
   low as 1.79:1 on a phone and crossing the headline at 1,440 px). So each block of
   hero copy gets a soft panel in the page color (--ink is the page background in
   either theme): a blurred rectangle, so the field thins out under the words and
   fades back in around them instead of ending at an edge. */
.hero {
  overflow-x: clip;
}
.hero-copy > :is(.intro-label, h1, .hero-description, .primary-action) {
  position: relative;
  width: fit-content;
}
.hero-copy > :is(.intro-label, h1, .hero-description, .primary-action)::before {
  content: "";
  position: absolute;
  inset: -1.5rem -2rem;
  z-index: -1;
  visibility: visible;
  border-radius: 2rem;
  background: var(--ink);
  opacity: 0.94;
  filter: blur(10px);
}