/* Section surface themes & Light/Dark Accessibility Mode (:root.a11y-light)
   Each section picks a theme class that remaps the semantic surface tokens,
   keeping every colour driven by CSS variables for easy theme switching.
   ========================================================================== */

.theme-night {
  --surface: var(--color-night);
  --surface-elevated: var(--color-crust);
  --on-surface: var(--color-ivory);
  --on-surface-soft: var(--color-cream-a90);
  --accent-ink: var(--color-gold);
  --rule: var(--color-gold-a20);
  --hairline: var(--color-cream-a12);
  --field-line: var(--color-cream-a45);
  --btn-bg: var(--color-gold);
  --btn-fg: var(--color-crust);
  --focus-ring: var(--color-gold);
  --error-ink: var(--color-error);
}

.theme-crust {
  --surface: var(--color-crust);
  --surface-elevated: var(--color-night-a25);
  --on-surface: var(--color-ivory);
  --on-surface-soft: var(--color-cream-a90);
  --accent-ink: var(--color-gold);
  --rule: var(--color-gold-a20);
  --hairline: var(--color-cream-a12);
  --field-line: var(--color-cream-a45);
  --btn-bg: var(--color-gold);
  --btn-fg: var(--color-crust);
  --focus-ring: var(--color-gold);
  --error-ink: var(--color-error);
}

.theme-cream {
  --surface: var(--color-cream);
  --surface-elevated: var(--color-ivory-a90);
  --on-surface: var(--color-crust);
  --on-surface-soft: var(--color-crust-soft);
  --accent-ink: var(--color-bronze);
  --rule: var(--color-crust-a12);
  --hairline: var(--color-crust-a12);
  --field-line: var(--color-crust-a45);
  --btn-bg: var(--color-crust);
  --btn-fg: var(--color-ivory);
  --focus-ring: var(--color-crust);
  --error-ink: var(--color-error-strong);
}

.theme-cream :is(h1, h2, h3, h4, h5, h6, .section-title) {
  color: var(--color-crust);
}

.theme-night,
.theme-crust,
.theme-cream {
  background-color: var(--surface);
  color: var(--on-surface);
}

/* ==========================================================================
   Light Theme ("Tema claro" in the Accessibility Panel)
   Every section except the 3D hero film switches cleanly to warm ivory/cream
   surfaces with high-contrast deep crust typography.
   ========================================================================== */
:root.a11y-light {
  color-scheme: light;
}

:root.a11y-light body {
  background-color: var(--color-cream) !important;
  color: var(--color-crust) !important;
}

:root.a11y-light :is(.theme-night, .theme-crust):not(.film) {
  --surface: var(--color-ivory);
  --surface-elevated: var(--color-cream);
  --on-surface: var(--color-crust);
  --on-surface-soft: var(--color-crust-soft);
  --accent-ink: var(--color-bronze);
  --focus-ring: var(--color-bronze);
  --rule: var(--color-crust-a20);
  --hairline: var(--color-crust-a12);
  --field-line: var(--color-crust-a45);
  --btn-bg: var(--color-crust);
  --btn-fg: var(--color-ivory);
  --error-ink: var(--color-error-strong);
  background-color: var(--surface) !important;
  color: var(--on-surface) !important;
}

:root.a11y-light :is(.theme-night, .theme-crust):not(.film) :is(h1, h2, h3, h4, h5, h6, .section-title, .cast-card__name) {
  color: var(--color-crust) !important;
}

:root.a11y-light :is(.theme-night, .theme-crust):not(.film) :is(.eyebrow, .cast-card__role, .cast-card__price) {
  color: var(--color-bronze) !important;
  border-color: var(--color-bronze) !important;
}

:root.a11y-light :is(.theme-night, .theme-crust):not(.film) :is(.cast-card__note, .section-desc) {
  color: var(--color-crust-soft) !important;
  border-color: var(--color-bronze) !important;
}

/* Tribunal de los 4 Críticos in Light Mode */
:root.a11y-light .critics-tribunal {
  background-color: var(--color-ivory) !important;
  color: var(--color-crust) !important;
}

:root.a11y-light .tribunal-tab {
  background: var(--color-cream) !important;
  border-color: var(--color-crust-a20) !important;
  color: var(--color-crust) !important;
}

:root.a11y-light .tribunal-tab--active {
  background: #EFE6D5 !important;
  border-color: var(--color-bronze) !important;
  box-shadow: 0 6px 20px rgba(44, 24, 16, 0.12) !important;
}

:root.a11y-light .tribunal-tab__name {
  color: var(--color-crust) !important;
}

:root.a11y-light .tribunal-tab__sub {
  color: var(--color-crust-soft) !important;
}

:root.a11y-light .tribunal-panel {
  background: var(--color-cream) !important;
  border-color: var(--color-crust-a20) !important;
  color: var(--color-crust) !important;
  box-shadow: 0 12px 32px rgba(44, 24, 16, 0.1) !important;
}

:root.a11y-light .tribunal-panel__quote {
  color: var(--color-crust) !important;
  border-left-color: var(--color-bronze) !important;
}

:root.a11y-light .tribunal-card {
  background: var(--color-ivory) !important;
  border-color: var(--color-crust-a12) !important;
}

:root.a11y-light .tribunal-card__title {
  color: var(--color-bronze) !important;
}

:root.a11y-light .tribunal-card p,
:root.a11y-light .tribunal-panel__footer p {
  color: var(--color-crust-soft) !important;
}

/* Prefooter (#club / .cta) in Light Mode */
:root.a11y-light .cta.theme-night {
  --surface: var(--color-cream);
  background-color: var(--color-cream) !important;
  color: var(--color-crust) !important;
  border-top-color: var(--color-crust-a20) !important;
}

:root.a11y-light .cta__badge {
  background: var(--color-ivory) !important;
  border-color: var(--color-crust-a20) !important;
  color: var(--color-crust) !important;
}

:root.a11y-light .cta__row {
  background: var(--color-ivory) !important;
  border-color: var(--color-crust-a45) !important;
}

:root.a11y-light .cta__input {
  color: var(--color-crust) !important;
}

:root.a11y-light .cta__input::placeholder {
  color: var(--color-crust-soft) !important;
}

:root.a11y-light .cta__quick-pill {
  background: var(--color-ivory) !important;
  border-color: var(--color-crust-a20) !important;
  color: var(--color-crust) !important;
}

:root.a11y-light .cta__quick-pill strong,
:root.a11y-light .cta__quick-pill svg {
  color: var(--color-bronze) !important;
}

/* Footer (.site-footer) in Light Mode */
:root.a11y-light .site-footer {
  background-color: #EBE3D5 !important;
  color: var(--color-crust) !important;
  border-top: 1px solid var(--color-crust-a20);
}

:root.a11y-light .site-footer .brand-thin,
:root.a11y-light .site-footer .footer-collapse__summary,
:root.a11y-light .site-footer .site-footer__links a,
:root.a11y-light .site-footer .site-footer__nap-text,
:root.a11y-light .site-footer .site-footer__copy,
:root.a11y-light .site-footer .gbp-inline-link {
  color: var(--color-crust) !important;
}

:root.a11y-light .site-footer .brand-bold,
:root.a11y-light .site-footer .footer-collapse__title,
:root.a11y-light .site-footer .gbp-inline-link__short {
  color: var(--color-bronze) !important;
}

/* Inner Pages (/blog/, /contact/) in Light Mode */
:root.a11y-light .kebab-blog-archive-container,
:root.a11y-light .kebab-contact-hub {
  background-color: var(--color-cream) !important;
  color: var(--color-crust) !important;
}

:root.a11y-light .kebab-post-card,
:root.a11y-light .kebab-bento-card {
  background: var(--color-ivory) !important;
  border-color: var(--color-crust-a20) !important;
  color: var(--color-crust) !important;
}

:root.a11y-light .kebab-post-card__title,
:root.a11y-light .kebab-post-card p,
:root.a11y-light .kebab-bento-card h2,
:root.a11y-light .kebab-bento-card h3,
:root.a11y-light .kebab-bento-card p {
  color: var(--color-crust) !important;
}