@import "tailwindcss";

/* ── Custom Theme ── */
@theme {
  --color-hub-blue: #05B0FA;
  --color-hub-pink: #F841B5;
  --color-hub-dark: #0F172A;
  --color-hub-bg: #F8FAFC;

  --font-display: "Poppins", sans-serif;
  --font-sans: "Inter", sans-serif;

  --radius-card: 16px;

  --shadow-glow-cyan: 0 0 20px rgba(5, 176, 250, 0.3);
}

/* ── Base Styles ── */
body {
  background: var(--color-hub-bg);
  color: var(--color-hub-dark);
  font-family: var(--font-sans);
}

/* ── Utility Classes ── */
.pink-gradient {
  background: linear-gradient(90deg, #F841B5 0%, #ff69c5 100%);
}

.gradient-text {
  background: linear-gradient(90deg, #05B0FA, #F841B5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-glow {
  background:
    radial-gradient(circle at 10% 10%, rgba(5, 176, 250, 0.25), transparent 60%),
    radial-gradient(circle at 90% 90%, rgba(248, 65, 181, 0.25), transparent 60%);
}

.hero-gradient-overlay {
  background: linear-gradient(135deg, rgba(5, 176, 250, 0.6) 0%, rgba(248, 65, 181, 0.5) 100%);
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}