:root {
  --skynav-purple-500: #250348;
  --skynav-purple-400: #340762;
  --skynav-purple-300: #431076;
  --skynav-purple-100: #683999;
  --skynav-green-300: #84a70a;
  --skynav-green-100: #b8d945;
  --skynav-gold-300: #af8a0b;
  --skynav-gold-100: #e3c048;
  --skynav-neutral-50: #f7f4fa;
  --skynav-neutral-100: #ece6f2;
  --skynav-neutral-700: #3c3447;
  accent-color: var(--skynav-green-300);
}

html::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  z-index: 2147483647;
  height: 3px;
  pointer-events: none;
  background: linear-gradient(90deg, var(--skynav-purple-500), var(--skynav-purple-300) 52%, var(--skynav-green-300) 82%, var(--skynav-gold-100));
  box-shadow: 0 1px 10px rgba(37, 3, 72, 0.28);
}

body {
  color: var(--skynav-neutral-700);
  background:
    radial-gradient(circle at top left, rgba(104, 57, 153, 0.08), transparent 34rem),
    linear-gradient(180deg, #fff, var(--skynav-neutral-50));
}

::selection {
  color: #fff;
  background: var(--skynav-purple-400);
}

a {
  color: inherit;
}

a:hover,
button:hover {
  transition: color 0.16s ease, background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--skynav-green-300);
  outline-offset: 2px;
}

[class~="text-netbird"],
[class*="text-netbird-"],
[class~="text-nb-blue"],
[class*="text-nb-blue-"],
[class~="text-cyan"],
[class*="text-cyan-"] {
  color: var(--skynav-purple-400) !important;
}

[class~="bg-netbird"],
[class*="bg-netbird-"],
[class~="bg-nb-blue"],
[class*="bg-nb-blue-"],
[class~="bg-cyan"],
[class*="bg-cyan-"] {
  color: #fff !important;
  background-color: var(--skynav-purple-500) !important;
}

[class~="border-netbird"],
[class*="border-netbird-"],
[class~="border-nb-blue"],
[class*="border-nb-blue-"],
[class~="border-cyan"],
[class*="border-cyan-"] {
  border-color: var(--skynav-purple-300) !important;
}

[class~="ring-netbird"],
[class*="ring-netbird-"],
[class~="ring-nb-blue"],
[class*="ring-nb-blue-"],
[class~="ring-cyan"],
[class*="ring-cyan-"] {
  --tw-ring-color: rgba(132, 167, 10, 0.46) !important;
}

[class~="from-netbird"],
[class*="from-netbird-"],
[class~="from-nb-blue"],
[class*="from-nb-blue-"],
[class~="from-cyan"],
[class*="from-cyan-"] {
  --tw-gradient-from: var(--skynav-purple-500) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(37, 3, 72, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

[class~="to-netbird"],
[class*="to-netbird-"],
[class~="to-nb-blue"],
[class*="to-nb-blue-"],
[class~="to-cyan"],
[class*="to-cyan-"] {
  --tw-gradient-to: var(--skynav-purple-300) var(--tw-gradient-to-position) !important;
}

[class~="text-nb-orange"],
[class*="text-nb-orange-"],
[class~="text-orange"],
[class*="text-orange-"],
[class~="text-amber"],
[class*="text-amber-"] {
  color: var(--skynav-gold-300) !important;
}

[class~="bg-nb-orange"],
[class*="bg-nb-orange-"],
[class~="bg-orange"],
[class*="bg-orange-"],
[class~="bg-amber"],
[class*="bg-amber-"] {
  color: var(--skynav-purple-500) !important;
  background-color: var(--skynav-gold-100) !important;
}

[class~="border-nb-orange"],
[class*="border-nb-orange-"],
[class~="border-orange"],
[class*="border-orange-"],
[class~="border-amber"],
[class*="border-amber-"] {
  border-color: var(--skynav-gold-300) !important;
}

[class~="text-green"],
[class*="text-green-"] {
  color: var(--skynav-green-300) !important;
}

[class~="bg-green"],
[class*="bg-green-"] {
  color: var(--skynav-purple-500) !important;
  background-color: var(--skynav-green-100) !important;
}

[class~="border-green"],
[class*="border-green-"] {
  border-color: var(--skynav-green-300) !important;
}

[class~="bg-white"],
[class~="dark:bg-nb-gray-900"],
[class~="dark:bg-gray-900"] {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

button[class*="bg-"],
a[class*="bg-"],
[role="button"][class*="bg-"] {
  border-color: transparent;
}

button[class*="bg-netbird"]:hover,
a[class*="bg-netbird"]:hover,
[role="button"][class*="bg-netbird"]:hover,
button[class*="bg-nb-blue"]:hover,
a[class*="bg-nb-blue"]:hover,
[role="button"][class*="bg-nb-blue"]:hover {
  background-color: var(--skynav-purple-300) !important;
  box-shadow: 0 10px 24px rgba(37, 3, 72, 0.18);
}

button[class*="bg-green"]:hover,
a[class*="bg-green"]:hover,
[role="button"][class*="bg-green"]:hover {
  background-color: var(--skynav-green-300) !important;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--skynav-green-300);
}

::-webkit-scrollbar-thumb {
  background: var(--skynav-purple-100);
  border: 3px solid transparent;
  border-radius: 8px;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--skynav-purple-300);
  border: 3px solid transparent;
  background-clip: padding-box;
}