@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Sora:wght@600;700;800&display=swap");

body {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  color-scheme: dark;
  background:
    radial-gradient(1000px 450px at -10% -15%, rgba(20, 120, 255, 0.13), transparent 60%),
    radial-gradient(800px 380px at 110% -20%, rgba(14, 165, 233, 0.1), transparent 65%),
    linear-gradient(180deg, #090f1e 0%, #070d1b 45%, #060913 100%);
}

h1,
h2,
h3,
h4,
h5,
.tier-title {
  font-family: "Sora", "Plus Jakarta Sans", system-ui, sans-serif;
}

/* Custom scrollbar matching Tailwind colors roughly */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #334155; /* slate-700 */
  border-radius: 20px;
  border: 2px solid #0f172a; /* slate-900 */
}

/* Modal open animation stuff */
#class-modal:not(.hidden) {
  opacity: 1;
}

#class-modal:not(.hidden) .modal-card {
  transform: scale(1);
}

.modal-card {
  box-shadow: 0 24px 70px rgba(2, 8, 23, 0.7), inset 0 0 0 1px rgba(148, 163, 184, 0.08);
}