:root {
  --primary: #b83a12;
  --ring: #b83a12;
  --gradient-brand: linear-gradient(100deg, #b83a12, #b11256, #6a2a9d);
}

html {
  scroll-behavior: smooth;
  scrollbar-color: var(--primary) var(--secondary);
  scrollbar-width: thin;
}

.bg-gradient-hero .text-gradient-brand {
  background: linear-gradient(100deg, #ff9a70, #ff79aa, #c9a4ff);
  background-clip: text;
  -webkit-background-clip: text;
}

body {
  min-width: 0;
  overflow-x: clip;
}

::selection {
  background: var(--primary);
  color: var(--primary-foreground);
}

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

*::-webkit-scrollbar-track {
  background: var(--secondary);
}

*::-webkit-scrollbar-thumb {
  background: var(--primary);
  border: 2px solid var(--secondary);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 3px;
}

a,
button {
  text-underline-offset: 0.18em;
}

@media (pointer: coarse) {
  button {
    min-width: 44px;
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

@media (forced-colors: active) {
  * {
    scrollbar-color: auto;
  }
}