/* ═══════════════════════════════════════════════════════════════════
   FIRST10-UI-VISUAL-LANGUAGE-01 (#2147) — Cohesive sci-fi style for
   the first-10 onboarding HUD surfaces.

   Modules consuming these classes:
     - src/onboarding-quest-tracker.js  (#onboarding-quest-tracker)

   Color tokens (matches the broader Alaknanda sci-fi palette):
     --oui-cyan-accent:      cyan-teal accent ring (Alaknanda primary)
     --oui-cyan-glow:        cyan haze for box-shadow
     --oui-panel-bg:         translucent dark hull
     --oui-text-primary:     readable foreground
     --oui-text-muted:       faded subhead
     --oui-blocked-accent:   red hazard ring
     --oui-blocked-glow:     red hazard glow

   The classes are additive — the inline styles in the JS modules
   still set baseline geometry, this stylesheet adjusts the color
   tokens + adds a subtle pulse on the active variant. Honors
   prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --oui-cyan-accent:    rgba(110, 180, 220, 0.42);
  --oui-cyan-accent-2:  rgba(110, 180, 220, 0.36);
  --oui-cyan-glow:      rgba(6, 182, 212, 0.16);
  --oui-panel-bg:       rgba(10, 18, 28, 0.86);
  --oui-text-primary:   #cfe4f1;
  --oui-text-muted:     #7fb6d6;
  --oui-text-active:    #fde68a;
  --oui-text-completed: #94a3b8;
  --oui-blocked-accent: rgba(239, 68, 68, 0.55);
  --oui-blocked-glow:   rgba(239, 68, 68, 0.20);
  --oui-blocked-text:   #fca5a5;
}

/* ── Quest tracker (top-right) ────────────────────────────────── */
.onboarding-quest-tracker {
  border-color: var(--oui-cyan-accent-2) !important;
  background:   var(--oui-panel-bg) !important;
  color:        var(--oui-text-primary) !important;
  box-shadow:   0 2px 12px var(--oui-cyan-glow) !important;
  backdrop-filter: blur(2px);
}
.onboarding-quest-tracker .oqt-title {
  color: var(--oui-text-muted) !important;
}