/* ==========================================================================
   DARK MODE — Component overrides when data-theme="dark" is active.

   Token-level overrides are in tokens.css. This file handles component
   styles that need more specific selectors or structural changes.
   Only affects content pages — .main--dark pages are always dark.

   Where to find dark-mode rules across the codebase (Phase 4 [04 M2]):

     css/base/tokens.css         token overrides under [data-theme="dark"]
     css/theme/dark-mode.css     this file — user-toggled dark mode
                                 component overrides
     css/component/*.css         each file holds .main--dark.<component>
                                 rules (permanent-dark listing pages
                                 like /performances and /artists). Look
                                 for ".main--dark " selectors near each
                                 component's base styles. Currently in:
                                   - card.css     (film/artist cards)
                                   - section.css  (section headings)
                                   - buttons.css  (CTA contrast)
                                   - notice.css   (info banners)

   When a component lights up in both contexts (e.g., a card on a
   dark page in dark mode), prefer using token defaults rather than
   doubling rules.
   ========================================================================== */

/* ---------- MAIN PANEL ---------- */
/* In dark mode, the white content panel blends with the dark background */

[data-theme="dark"] .main:not(.main--dark) {
  background: var(--color-dark);
  box-shadow: none;
  color: var(--color-text-primary);
}

/* ---------- HEADINGS ---------- */

[data-theme="dark"] .main:not(.main--dark) h1,
[data-theme="dark"] .main:not(.main--dark) h2,
[data-theme="dark"] .main:not(.main--dark) h3 {
  color: var(--color-white);
}

[data-theme="dark"] .main:not(.main--dark) h4 {
  color: #ccc;
}

/* ---------- LINKS ---------- */

[data-theme="dark"] .main:not(.main--dark) a {
  color: var(--color-primary);
}

/* Buttons keep their own text color — don't inherit link override */
[data-theme="dark"] .main:not(.main--dark) a.btn,
[data-theme="dark"] .main:not(.main--dark) a.btn--primary,
[data-theme="dark"] .main:not(.main--dark) .btn,
[data-theme="dark"] .main:not(.main--dark) button[type="submit"],
[data-theme="dark"] .main:not(.main--dark) input[type="submit"] {
  color: var(--color-white);
}

/* ---------- PAGE HERO ---------- */
/* The dark header bar is already dark — just ensure it doesn't get a border */

[data-theme="dark"] .otb-page__hero {
  border-bottom: none;
}

/* ---------- CONTENT PAGE BODY ---------- */

[data-theme="dark"] .otb-page__body h2 {
  border-top-color: var(--color-dark-charcoal);
}

[data-theme="dark"] .otb-page__body h3 {
  color: var(--color-primary);
}

[data-theme="dark"] .otb-page__body blockquote {
  color: var(--color-primary);
}

[data-theme="dark"] .otb-page__body blockquote cite,
[data-theme="dark"] .otb-page__body blockquote footer {
  color: var(--color-gray-300);
}

/* ---------- FILM DETAIL ---------- */

[data-theme="dark"] .otb-film__subtitle {
  color: var(--color-gray-400);
}

[data-theme="dark"] .otb-film__purchase {
  background: var(--color-dark-medium);
}

[data-theme="dark"] .otb-film__purchase-option {
  background: var(--color-dark-charcoal);
  border-color: var(--color-dark-charcoal);
}

[data-theme="dark"] .otb-film__access-info {
  color: var(--color-gray-400);
}

[data-theme="dark"] .otb-film__section {
  border-top-color: var(--color-dark-charcoal);
}

/* ---------- ARTIST DETAIL ---------- */

[data-theme="dark"] .otb-artist__section {
  border-top-color: var(--color-dark-charcoal);
}

/* ---------- NEWS ARTICLE ---------- */

[data-theme="dark"] .otb-article__tags {
  border-top-color: var(--color-dark-charcoal);
}

/* ---------- USER ACCOUNT ---------- */

[data-theme="dark"] .otb-account__subtitle {
  color: var(--color-gray-400);
}

[data-theme="dark"] .otb-account__section {
  background: var(--color-dark-medium);
}

[data-theme="dark"] .otb-account__section-title {
  border-bottom-color: var(--color-dark-charcoal);
}

/* ---------- FORMS ---------- */

[data-theme="dark"] .form-item label {
  color: var(--color-text-primary);
}

[data-theme="dark"] .form-item .description {
  color: var(--color-gray-300);
}

[data-theme="dark"] select,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] textarea {
  background: var(--color-dark-medium);
  border-color: var(--color-dark-charcoal);
  color: var(--color-text-primary);
}

/* ---------- TABS ---------- */

[data-theme="dark"] .tabs a:hover,
[data-theme="dark"] .tabs__link:hover {
  color: var(--color-white);
}

[data-theme="dark"] .tabs a.is-active,
[data-theme="dark"] .tabs__link.is-active {
  color: var(--color-white);
}

/* ---------- MESSAGES ---------- */
/* Status messages keep their semantic colors in both modes */

[data-theme="dark"] .messages--status {
  background: var(--color-status-success-bg-dark);
  color: var(--color-status-success-text-dark);
}

[data-theme="dark"] .messages--warning {
  background: var(--color-status-warning-bg-dark);
  color: var(--color-status-warning-text-dark);
}

[data-theme="dark"] .messages--error {
  background: var(--color-status-error-bg-dark);
  color: var(--color-status-error-text-dark);
}

/* ---------- DISCLAIMER / SMALL TEXT ---------- */

[data-theme="dark"] .otb-page__body .otb-disclaimer {
  border-top-color: var(--color-dark-charcoal);
}

/* ---------- SUPPORTER LOGOS ---------- */

[data-theme="dark"] .otb-page__body p > img {
  filter: grayscale(30%) brightness(1.1);
}

/* ---------- DONATE BOX ---------- */

[data-theme="dark"] .otb-page__body .donate-box {
  border-top-color: var(--color-primary);
}

[data-theme="dark"] .otb-page__body .donate-box h2 {
  color: var(--color-text-primary);
}

[data-theme="dark"] .otb-page__body .donate-box a {
  color: var(--color-white);
}

/* ---------- PRICING TABLE ---------- */

[data-theme="dark"] .otb-page__body .otb-pricing-table td {
  border-bottom-color: var(--color-dark-charcoal);
}

/* ---------- COMMERCE / ACCOUNT PAGES ---------- */
/* These pages force light mode via theme-toggle.js (LIGHT_ONLY_PATHS).
   Background uses #eaeaea neutral grey. No dark mode overrides needed. */