:root {
  color-scheme: light dark;
  --color-brand: #C63C2E; /* Sprintify Red */
  --color-brand-light: #ff7262;
  --color-brand-dark: #a42f23;
}

/* === Light & Dark Modes === */
:root[data-theme=light] body {
  background: #ffffff;
  color: #0f172a;
}

:root[data-theme=dark] body {
  background: #0b0d19;
  color: #eaf0ff;
}

/* === Common UI Elements === */
.site-gradient {
  background-image: linear-gradient(90deg, #6f63ff 0%, var(--color-brand) 100%);
}

.section-dark {
  background: #0b0d19;
  color: #fff;
}

.card-dark {
  background: #15192c;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 16px;
}

.card-outline {
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
}

.pill {
  border-radius: 9999px;
}

.nav-link {
  opacity: .9;
}
.nav-link:hover {
  opacity: 1;
}
nav a.active-link {
  color: var(--color-brand) !important;
}

/* === Buttons === */
.cta {
  background: var(--color-brand);
  color: #fff;
  font-weight: 600;
  transition: all 0.2s ease;
}
.cta:hover {
  opacity: .9;
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--color-brand);
  color: #fff;
  font-weight: 600;
  border: none;
  transition: all 0.2s ease;
}
.btn-primary:hover {
  background: var(--color-brand-light);
}

/* For dark mode buttons */
:root[data-theme=dark] .btn-primary,
:root[data-theme=dark] .cta {
  background: var(--color-brand-light);
  color: #fff;
}
:root[data-theme=dark] .btn-primary:hover,
:root[data-theme=dark] .cta:hover {
  background: var(--color-brand);
}

/* === Footer / Text === */
.footer-muted {
  color: rgba(255, 255, 255, .7);
}

/* === Logos === */
.logo-dark {
  display: none;
}
:root[data-theme=dark] .logo-light {
  display: none;
}
:root[data-theme=dark] .logo-dark {
  display: inline;
}

/* === Inputs === */
:root[data-theme=light] input,
:root[data-theme=light] textarea {
  background: #fff;
  color: #0f172a;
  border: 1px solid #cbd5e1;
}

:root[data-theme=dark] input,
:root[data-theme=dark] textarea {
  background: #0f1222;
  color: #eaf0ff;
  border: 1px solid #475569;
}

/* === Misc === */
.bg-glass {
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.btn-ghost {
  border: 1px solid rgba(15, 23, 42, .2);
}

.card {
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 6rem;
  border-radius: .75rem;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .12);
  background: #fff;
  color: #0f172a;
  cursor: pointer;
  border: 2px solid transparent;
}
.card.selected {
  border-color: #635bff;
}
.card.disabled {
  opacity: .4;
  cursor: not-allowed;
}