/* Minimal custom styles. Tailwind handles most layout/spacing. */
.dark {
  /* Dark theme accent overrides when using .dark class */
  --accent-1: #8e5d73; /* dark plum */
  --accent-2: #258a98; /* dark teal */
  --accent-3: #114614; /* dark green */
  --accent-4: #3e3e3e; /* dark gray */
  --student-accent: #258a98; /* dark teal */
  --faculty-accent: #114614; /* dark green */
}

:root {
  --accent-1: #d64933; /* light coral */
  --accent-2: #228c27; /* light green */
  --accent-3: #92dce5; /* light cyan */
  --accent-4: #2b303a; /* light slate */
  --student-accent: #92dce5; /* light cyan (blue) */
  --faculty-accent: #228c27; /* light green */
}
@media (prefers-color-scheme: dark) {
  :root {
    --accent-1: #8e5d73; /* dark plum */
    --accent-2: #258a98; /* dark teal */
    --accent-3: #114614; /* dark green */
    --accent-4: #3e3e3e; /* dark gray */
  }
}

/* Carousel word styles updated via JS with these variables */
#carousel-word { transition: color 300ms ease, transform 300ms ease, opacity 300ms ease; white-space: nowrap; }
#carousel-blank { transition: width 260ms ease, border-color 200ms ease; }

/* Carousel pills row */
.carousel-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.625rem;
  border-radius: 9999px;
  border: 1px solid rgba(0,0,0,0.15);
  color: inherit;
  transition: transform 200ms ease, color 200ms ease, border-color 200ms ease, background-color 200ms ease;
}
.dark .carousel-pill { border-color: rgba(255,255,255,0.15); }
.carousel-pill.is-active {
  border-color: var(--accent-1);
  color: var(--accent-1);
  transform: translateY(-2px) scale(1.02);
}

/* Conveyor track for moving words */
.carousel-track { position: relative; height: 2.5rem; overflow: hidden; }
.carousel-item {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  opacity: 0.75;
  transition: opacity 180ms ease, transform 180ms ease;
}
.carousel-item.is-next { opacity: 0.9; }
.carousel-item.is-active { opacity: 1; transform: translateY(-50%) scale(1.02); }

/* Intent chips coloring */
label.intent-chip.intent-student { border-color: var(--student-accent) !important; color: var(--student-accent) !important; }
label.intent-chip.intent-faculty { border-color: var(--faculty-accent) !important; color: var(--faculty-accent) !important; }

#intent-student:checked + label.intent-chip { background-color: var(--student-accent) !important; border-color: var(--student-accent) !important; color: #0b0b0b !important; }
#intent-faculty:checked + label.intent-chip { background-color: var(--faculty-accent) !important; border-color: var(--faculty-accent) !important; color: #ffffff !important; }

.dark #intent-student:checked + label.intent-chip { color: #ffffff !important; }
.dark #intent-faculty:checked + label.intent-chip { color: #ffffff !important; }

/* Card accents */
.card {
  border-top: 4px solid var(--card-accent, var(--accent-4));
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.08); }

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  #carousel-word { transition: none; }
}

/* Visually hidden utility (fallback if Tailwind not loaded early) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }