/* aarna.pro home dark mode — hand-authored overrides for the home shell only.
   The home theme bundle ships zero .dark rules; this layer inverts the home page's light
   surfaces and dark-ink text when html.dark is set, so light/dark persists from the interior
   console onto the home page. Scoped to home's own top-level surface + text tokens. */

html.dark body {
  background-color: #0b0e14;
  color: #f1f4f6;
}

/* Light page surfaces → dark equivalents from the theme's own scale. */
html.dark .bg-background-7 {
  background-color: #0b0e14 !important;
}
html.dark .bg-background-8 {
  background-color: #11141d !important;
}
html.dark .bg-background-9 {
  background-color: #11141d !important;
}
html.dark .bg-background-10 {
  background-color: #191d2a !important;
}
html.dark .bg-background-11 {
  background-color: #191d2a !important;
}

/* White cards → dark card surface. */
html.dark .bg-white {
  background-color: #191d2a !important;
}

/* The fixed hero header pill is bg-white with a blur; make it a defined translucent dark
   pill — a step lighter than the page, with a hairline border, so the menubar reads as a
   surface instead of blending into the background. */
html.dark header .bg-white {
  background-color: rgba(25, 29, 42, 0.78) !important;
  border: 1px solid rgba(244, 244, 241, 0.1) !important;
}

/* Dark-ink text (all opacity steps) → light ink on the now-dark surfaces. The theme uses
   background-13 for page ink and background-3/4/5 for ink inside the white cards. */
html.dark [class*="text-background-13"],
html.dark [class*="text-background-3"],
html.dark [class*="text-background-4"],
html.dark [class*="text-background-5"] {
  color: #eef2f5 !important;
}

/* The theme's "secondary" ink is near-black; flip it light on the dark page. */
html.dark .text-secondary,
html.dark .text-black {
  color: #eef2f5 !important;
}

/* Check-mark glyphs inside the (now dark) white cards are drawn fill="black"; CSS fill wins
   over the presentation attribute, so they read on the dark surface. */
html.dark .bg-white svg path[fill="black"] {
  fill: #eef2f5 !important;
}

/* Brand mark swap: the header ships both the light-pill and dark-pill artwork; show only
   the one that matches the theme. (The home bundle has no dark: utilities, so this is done
   here rather than with Tailwind variants.) A filter-invert was used before, but it flattened
   the mark to a featureless white disc and bleached the purple ".pro" — the dedicated dark
   artwork keeps the dragon and the accent. */
header figure img[src*="aarna-pro-logo-dark"],
header figure img[src*="aarna-mark-dark"] {
  display: none;
}
html.dark header figure img[src*="aarna-pro-logo-light"],
html.dark header figure img[src*="aarna-mark-light"] {
  display: none;
}
html.dark header figure img[src*="aarna-pro-logo-dark"],
html.dark header figure img[src*="aarna-mark-dark"] {
  display: block;
}

/* Keep borders subtle rather than hard black lines on a dark page. */
html.dark .border-stroke-2\/60,
html.dark .border-stroke-1\/20 {
  border-color: rgba(244, 244, 241, 0.14) !important;
}

/* The floating theme toggle: a dark chip on the dark page. */
html.dark #theme-toggle {
  background-color: #f1f4f6 !important;
}
html.dark #theme-toggle svg.stroke-black {
  stroke: #0b0e14 !important;
}

/* Hero aura stays soft purple in both themes; nudge it brighter on dark. */
html.dark .home-hero-aura {
  background-image:
    radial-gradient(45% 55% at 50% 42%, rgba(134, 79, 254, 0.3), transparent 70%),
    radial-gradient(38% 42% at 70% 60%, rgba(134, 79, 254, 0.18), transparent 72%);
}

/* Footer inner panel: the outer footer band (bg-background-8) and this rounded panel
   (bg-background-5) both remap to ~#11141d in dark, so the panel lost its separation from
   the band. Step the panel up one surface so it reads as a distinct card again. */
html.dark footer .bg-background-5 {
  background-color: #191d2a !important;
}

/* Footer "See what's new" CTA: the pill carries bg-background-7! + text-background-13!.
   The escaped `!` utility dodges the `.bg-background-7` surface remap, so the pill correctly
   stays light in dark mode; but the substring text remap flips its ink light, leaving a
   light label on a light pill. Keep the pill light and pin its ink dark (the label span
   inherits this). */
html.dark .bg-background-7\!.text-background-13\! {
  color: #0d0d12 !important;
}

/* The capability-card dark surface now lives in aarna-overrides.css (loaded site-wide), so the
   same card face reaches interior pages. The cards own their background in both themes, so no
   !important is needed to beat the bg-white remap above. */