/* ============================================================
   Vaporwave decorative layer — framework-agnostic
   Uses design-system CSS custom properties for light/dark mode.
   Consumer apps map their framework selectors to these effects.
   ============================================================ */

/* --- Neon Active State ---
   Apply .vw-active to sidebar items, tab items, etc. */

.vw-active {
  border-left: 2px solid rgb(var(--color-aqua));
  background: rgb(var(--color-aqua) / 0.08);
  box-shadow: inset 0 0 16px rgb(var(--color-aqua) / 0.04);
}

/* --- Links --- */

a {
  color: rgb(var(--color-aqua));
  transition: color 0.2s, text-shadow 0.2s;
}

a:hover {
  text-shadow: 0 0 8px rgb(var(--color-aqua) / 0.4);
}

/* --- Headings --- */

h2 {
  color: rgb(var(--color-magenta));
}

/* --- Inline Code --- */

:not(pre) > code {
  background: rgb(var(--color-magenta) / 0.1);
  color: rgb(var(--color-magenta));
  padding: 0.15em 0.35em;
  border-radius: 0.25em;
}

/* --- Horizontal Rules --- */

hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, rgb(var(--color-aqua)), rgb(var(--color-magenta)), transparent);
}

/* --- Code Block Ambiance --- */

pre {
  box-shadow: 0 0 20px rgb(var(--color-aqua) / 0.04);
}

/* --- Gradient Logo ---
   Apply .vw-logo to text elements for aqua→magenta gradient. */

.vw-logo {
  background: linear-gradient(90deg, rgb(var(--color-aqua)), rgb(var(--color-magenta)));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 10px rgb(var(--color-aqua) / 0.3));
}

/* --- Custom Scrollbar --- */

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgb(var(--color-bg-subtle));
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgb(var(--color-aqua)), rgb(var(--color-magenta)));
  border-radius: 4px;
}

* {
  scrollbar-color: rgb(var(--color-aqua)) rgb(var(--color-bg-subtle));
  scrollbar-width: thin;
}