/* ═══════════════════════════════════════════════════════════════════════════
   Kronn Neon — accent glow + utility classes for the dark default theme.
   Ports the visual language of the pitch site (`site/index.html`) into the
   desktop app without breaking the productivity-first layout.

   Scope rule : every selector is conditional on the dark default theme
   (`:root` with no `data-theme` attribute) via the `:where(...)` and
   `:not(...)` guards. Light + secret themes are untouched — their own
   palettes carry their own ambient.

   Load order : after `tokens.css` and `reset.css`, before `components.css`
   so component-level CSS can still win on conflict.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Helper : matches the dark default theme only. Spelled out as a chain of
   :not() because :where() doesn't support attribute-equality. */
@supports (selector(:is(*))) {
  /* Modern browsers — use :not() chain inside :is() for clarity */
}

/* ── Focus ring : add the neon halo on the existing 2px outline ────────────
   reset.css already sets `outline: 2px solid var(--kr-accent); offset 2px`.
   We layer the double-stack lime glow on top. Light & secret themes get
   `--kr-glow-lime-md: none`, so this rule is naturally inert there.    */
:root:not([data-theme="light"]):not([data-theme="matrix"]):not([data-theme="gotham"]):not([data-theme="sakura"]) *:focus-visible {
  box-shadow: var(--kr-glow-lime-md);
}

/* ── Text selection : already lime-tinted via reset.css. Bump the alpha
   and add a faint text glow. Useful when copying QPs / prompts /code.  */
:root:not([data-theme="light"]):not([data-theme="matrix"]):not([data-theme="gotham"]):not([data-theme="sakura"]) ::selection {
  background: rgba(200, 255, 0, 0.30);
  text-shadow: var(--kr-text-glow-lime);
}

/* ── Scrollbar thumb : faint lime halo so the scrolling lane feels active */
:root:not([data-theme="light"]):not([data-theme="matrix"]):not([data-theme="gotham"]):not([data-theme="sakura"]) ::-webkit-scrollbar-thumb {
  box-shadow: var(--kr-glow-lime-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Utility classes & data-state attributes
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── State-driven neon borders : generalises the .wf-card[data-running]
   pattern. Any element with `data-state="running" | "active" | "error" |
   "info"` picks up the matching neon ring. Existing components can opt
   in by setting that attribute (no class change needed).               */

:root:not([data-theme="light"]):not([data-theme="matrix"]):not([data-theme="gotham"]):not([data-theme="sakura"]) {
  [data-state="running"],
  [data-state="active"],
  .kr-neon-lime {
    border-color: rgba(200, 255, 0, 0.45);
    box-shadow: var(--kr-glow-lime-sm), var(--kr-bevel-top);
  }

  [data-state="error"],
  .kr-neon-magenta {
    border-color: rgba(255, 27, 168, 0.45);
    box-shadow: var(--kr-glow-magenta-sm), var(--kr-bevel-top);
  }

  [data-state="info"],
  .kr-neon-electric {
    border-color: rgba(139, 92, 246, 0.40);
    box-shadow: var(--kr-glow-electric-sm), var(--kr-bevel-top);
  }
}

/* ── Hover lift : opt-in via `.kr-hover-lift` on card-like surfaces.
   Subtle 1px translate + lime halo on hover — site pattern for "this
   element responds to me". Transitions ≤ 200ms to stay snappy.        */
:root:not([data-theme="light"]):not([data-theme="matrix"]):not([data-theme="gotham"]):not([data-theme="sakura"]) .kr-hover-lift {
  transition: transform 180ms ease, box-shadow 180ms ease;
}
:root:not([data-theme="light"]):not([data-theme="matrix"]):not([data-theme="gotham"]):not([data-theme="sakura"]) .kr-hover-lift:hover {
  transform: translateY(-1px);
  box-shadow: var(--kr-glow-lime-sm);
}

/* ── Accent-glow utility classes : drop a lime / magenta / electric
   glow on any text via class. Use sparingly — only on display moments
   (page titles, prominent values, ✨ markers).                        */
:root:not([data-theme="light"]):not([data-theme="matrix"]):not([data-theme="gotham"]):not([data-theme="sakura"]) {
  .kr-text-glow-lime { color: var(--kr-accent); text-shadow: var(--kr-text-glow-lime); }
  .kr-text-glow-magenta { color: var(--kr-error); text-shadow: var(--kr-text-glow-magenta); }
}

/* ── Reduced motion : the transitions above are sub-200ms so they don't
   bother the vestibular system. Keep them ON even under reduced-motion
   (they are state-driven, not ambient). The 4s+ animations live in
   `atmosphere.css` and respect the media query there.                 */
