:root {
  color-scheme: dark;
  --lma-void: #02040d;
  --lma-panel: rgba(8, 13, 28, 0.84);
  --lma-line: rgba(145, 224, 255, 0.22);
  --lma-cyan: #56d8ff;
  --lma-gold: #ffc86b;
  --lma-magenta: #ff7aa8;
  --lma-green: #7cf2b0;
  --lma-text: #f5f7ff;
  --lma-muted: #aeb9dc;
}

html {
  scrollbar-width: thin;
  scrollbar-color: rgba(86, 216, 255, 0.48) rgba(2, 4, 13, 0.9);
  -webkit-tap-highlight-color: transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(2, 4, 13, 0.9);
}

::-webkit-scrollbar-thumb {
  background:
    linear-gradient(180deg, rgba(86, 216, 255, 0.76), rgba(255, 122, 168, 0.58));
  border: 2px solid rgba(2, 4, 13, 0.9);
  border-radius: 8px;
}

::selection {
  background: rgba(86, 216, 255, 0.32);
  color: #ffffff;
}

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--lma-cyan);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(86, 216, 255, 0.13);
}