/* Host-site overrides for cast-bootstrap5 tokens. */
:root {
  --cast-bg: #f9f9fb;
  --cast-bg-alt: #eeeef4;
  --cast-surface: #ffffff;

  --cast-text: #1a1a2e;
  --cast-text-muted: #5a5a72;
  --cast-text-light: #9a9aad;

  --cast-accent: #7c3aed;
  --cast-accent-hover: #6d28d9;
  --cast-accent-light: #ede9fe;
  --cast-accent-contrast-text: #ffffff;
  --cast-link-on-white: #6d28d9;

  --cast-border: #e2e2ea;
  --cast-border-strong: #d0d0dc;

  --cast-code-bg: #eeeef4;
  --cast-code-text: #1a1a2e;

  --cast-modal-backdrop: rgba(0, 0, 0, 0.85);
  --cast-gallery-body-bg: rgba(255, 255, 255, 0.8);
  --cast-gallery-header-bg: rgba(255, 255, 255, 1);
  --cast-gallery-footer-bg: rgba(255, 255, 255, 1);

  /* Custom audio player (django-cast) — purple palette. */
  --cast-player-bg: var(--cast-surface);
  --cast-player-fg: var(--cast-text);
  --cast-player-muted: var(--cast-text-muted);
  --cast-player-accent: #7c3aed;
  --cast-player-on-accent: #ffffff;
  --cast-player-progress-track: var(--cast-border-strong);
  --cast-player-focus: #7c3aed;
}

[data-bs-theme="dark"] {
  --cast-bg: #0f0f1a;
  --cast-bg-alt: #1a1a2e;
  --cast-surface: #1a1a2e;

  --cast-text: #f1f1f9;
  --cast-text-muted: #9a9ab8;
  --cast-text-light: #6a6a88;

  --cast-accent: #a78bfa;
  --cast-accent-hover: #c4b5fd;
  --cast-accent-light: #1e1640;
  --cast-accent-contrast-text: #1a1a2e;
  --cast-link-on-white: #a78bfa;

  --cast-border: #2d2d44;
  --cast-border-strong: #3d3d5c;

  --cast-code-bg: #1a1a2e;
  --cast-code-text: #f1f1f9;

  --cast-modal-backdrop: rgba(0, 0, 0, 0.85);
  --cast-gallery-body-bg: rgba(15, 15, 26, 0.9);
  --cast-gallery-header-bg: rgba(26, 26, 46, 1);
  --cast-gallery-footer-bg: rgba(26, 26, 46, 1);

  /* Custom audio player (django-cast) — lighter purple for dark mode. The
     accent is light, so accent fills use dark text for contrast. */
  --cast-player-bg: var(--cast-surface);
  --cast-player-fg: var(--cast-text);
  --cast-player-muted: var(--cast-text-muted);
  --cast-player-accent: #a78bfa;
  --cast-player-on-accent: #1a1a2e;
  --cast-player-progress-track: var(--cast-border-strong);
  --cast-player-focus: #a78bfa;
}

/* Search modal contrast and token alignment */
.cast-search-overlay {
  background: var(--cast-modal-backdrop);
}

.cast-search-modal {
  background-color: var(--cast-surface);
  color: var(--cast-text);
}

.cast-search-modal .cast-btn-clear {
  color: var(--cast-text);
  background-color: var(--cast-bg-alt);
  border-color: var(--cast-border-strong);
}

.cast-search-modal .cast-btn-clear:hover {
  color: var(--cast-text);
  background-color: var(--cast-surface);
  border-color: var(--cast-border-strong);
}

.cast-search-modal .cast-btn-search,
.cast-search-modal .tag-pill.active {
  color: var(--cast-accent-contrast-text);
}

/* Keep accent-filled player CTA contrast-compliant across themes */
.podlove-facade-play {
  color: var(--cast-accent-contrast-text);
}

/* Accessibility (WCAG AA, 4.5:1): Bootstrap's auto color-contrast picks dark text
   on our purple primary (only 3.07:1). Force white text on a slightly deeper
   purple so .btn-primary clears AA, and darken the muted outline-secondary text
   (was #6c757d on paper = 4.46:1, just under). */
.btn-primary {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: #6d28d9;
  --bs-btn-border-color: #6d28d9;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #5b21b6;
  --bs-btn-hover-border-color: #5b21b6;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #5b21b6;
  --bs-btn-active-border-color: #5b21b6;
}

.btn-outline-secondary {
  --bs-btn-color: #565c63; /* 6.4:1 on the light paper background */
  --bs-btn-border-color: #565c63;
}

[data-bs-theme="dark"] .btn-outline-secondary {
  --bs-btn-color: #adb5bd; /* ~7.9:1 on the dark surface (the light grey fails there) */
  --bs-btn-border-color: #6c757d;
}

/* Prototype-faithful hero hierarchy for the list page */
.cast-hero {
  min-height: 300px;
}

.cast-hero .cast-hero-content {
  max-width: 80ch;
}

.cast-hero .blog-title {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 0.45rem;
}

.cast-hero .blog-title .python-accent {
  color: var(--cast-accent);
}

.cast-hero .intro.lead,
.cast-hero .intro.lead p {
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
  color: var(--cast-text-muted);
}

.cast-hero .intro.lead {
  margin-top: 0.6667rem;
}

.cast-hero .intro.lead p {
  margin: 0;
}

.cast-hero .intro.lead strong,
.cast-hero .intro.lead b {
  font-style: normal;
  font-weight: 600;
  color: var(--cast-text);
}

[data-bs-theme="dark"] .cast-hero .intro.lead,
[data-bs-theme="dark"] .cast-hero .intro.lead p {
  color: var(--cast-text-muted);
}

@media (max-width: 640px) {
  .cast-hero {
    min-height: 220px;
  }

  .cast-hero .blog-title {
    font-size: clamp(2rem, 8vw, 2.75rem);
  }
}