:root {
  --mango: #fb923c;
  --hibiscus: #f472b6;
  --teal: #2dd4bf;
  --ocean-blue: #1e3a8a;
  --sand: #fff7ed;
}

body {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji",
    "Segoe UI Emoji";
  background-color: var(--sand);
  color: #1f2937;
}

h1,
h2,
h3,
.nav-font {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji",
    "Segoe UI Emoji";
}

.watercolor-bg {
  background: radial-gradient(circle at top left, #fca5a5, transparent 50%),
    radial-gradient(circle at top right, #fdba74, transparent 50%),
    radial-gradient(circle at bottom left, #86efac, transparent 50%),
    radial-gradient(circle at bottom right, #93c5fd, transparent 50%);
  opacity: 0.4;
}

.pride-gradient-text {
  background: linear-gradient(90deg, #ef4444, #f59e0b, #10b981, #3b82f6, #a855f7);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.pride-border-bottom {
  height: 6px;
  background: linear-gradient(90deg, #ef4444, #f59e0b, #10b981, #3b82f6, #a855f7);
  border-radius: 99px;
}

.float-emoji {
  animation: float 4s ease-in-out infinite;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

html {
  scroll-behavior: smooth;
}

/* Match Tailwind's sr-only helper for accessibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Tailwind-like convenience classes used in the provided markup */
.bg-sand {
  background-color: var(--sand);
}

.border-sand {
  border-color: var(--sand);
}

.bg-hibiscus {
  background-color: var(--hibiscus);
}

.text-hibiscus {
  color: var(--hibiscus);
}