/* Earcast — Custom styles beyond Tailwind utilities */

:root {
  /* Brand design tokens (HSL) — dark mode */
  --background: 0 0% 4%;              /* Near-black #0A0A0A */
  --foreground: 40 33% 97%;           /* Warm White #FAFAF9 */
  --surface: 20 10% 10%;              /* Charcoal #1C1917 — cards, elevated */
  --surface-light: 20 8% 14%;         /* Slightly lighter surface for hover */

  /* Primary (CTAs, buttons) */
  --primary: 263 69% 42%;             /* Deep Purple #5B21B6 */
  --primary-foreground: 40 33% 97%;   /* White text on purple */
  --primary-hover: 258 90% 66%;       /* Soft Violet #8B5CF6 */

  /* Secondary */
  --secondary: 20 8% 14%;
  --secondary-foreground: 40 33% 97%;

  /* Muted */
  --muted: 20 5% 20%;
  --muted-foreground: 20 5% 55%;

  /* Accent */
  --accent: 25 95% 53%;               /* Coral #F97316 */
  --accent-foreground: 40 33% 97%;

  /* Borders & inputs */
  --border: 0 0% 100% / 0.08;         /* Subtle white border */
  --input: 0 0% 100% / 0.08;
  --ring: 263 69% 42%;

  /* Radius */
  --radius: 0.5rem;

  /* Surface shadows — subtle glow on dark backgrounds */
  --shadow-sm: 0 0 0 0.5px rgba(255,255,255,0.04),
               0 1px 2px 0 rgba(0,0,0,0.3);
  --shadow-md: 0 0 0 0.5px rgba(255,255,255,0.04),
               0 4px 6px -4px rgba(0,0,0,0.4),
               0 10px 15px -3px rgba(0,0,0,0.3);
}

/* Button — Primary */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #FAFAF9;
  background-color: #5B21B6;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 150ms ease;
}

.btn-primary:hover {
  background-color: #8B5CF6;
}

.btn-primary:focus-visible {
  outline: 2px solid #8B5CF6;
  outline-offset: 2px;
}

/* Button — Secondary */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #FAFAF9;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 150ms ease;
}

.btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
}

.btn-secondary:focus-visible {
  outline: 2px solid #8B5CF6;
  outline-offset: 2px;
}

/* Feature card */
.feature-card {
  padding: 1.5rem;
  border-radius: var(--radius);
  background-color: hsl(var(--surface));
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: var(--shadow-sm);
  transition: all 200ms ease;
}

.feature-card:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(255, 255, 255, 0.1);
}

/* HTMX loading state — dim the submit button during requests */
.htmx-request button[type="submit"] {
  opacity: 0.6;
  pointer-events: none;
}

/* Alpine.js cloak — hide elements until Alpine initializes */
[x-cloak] {
  display: none !important;
}

/* Line clamp for episode excerpts */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}