/* ═══════════════════════════════════════════════════════════════════
   CricBun Dark Mode — ESPN Cricinfo Style
   Applied when [data-theme="dark"] or (prefers-color-scheme: dark)
   ═══════════════════════════════════════════════════════════════════ */

[data-theme="dark"] {
  /* ── Override token values for dark mode ── */
  --cb-primary: #1492ff;
  --cb-primary-dark: #0860c4;
  --cb-primary-light: #0d1a2e;
  --cb-primary-rgb: 20, 146, 255;

  --cb-bg: #0d0d14;
  --cb-bg-alt: #16171e;
  --cb-bg-subtle: #1d1e26;
  --cb-bg-inverse: #1d1e1f;
  --cb-bg-card: #16171e;
  --cb-bg-overlay: rgb(0, 0, 0, 0.7);
  --cb-bg-section: #0d0d14;

  --cb-text: #e0e0e0;
  --cb-text-secondary: #a5a6a7;
  --cb-text-tertiary: #6c6d6f;
  --cb-text-inverse: #fff;
  --cb-text-link: #1492ff;

  --cb-border: #2a2b30;
  --cb-border-light: #1d1e26;
  --cb-border-focus: #1492ff;

  --cb-shadow-md: 0 1px 8px rgb(0, 0, 0, 0.56);
  --cb-shadow-lg: 0 4px 12px rgb(0, 0, 0, 0.56);
  --cb-shadow-xl: 0 6px 15px rgb(0, 0, 0, 0.76);
  --cb-shadow-focus: 0 0 0 3px rgb(20, 146, 255, 0.3);

  /* ── Structural overrides ── */
  .cb-nav {
    background: var(--cb-bg-inverse);
  }

  .cb-card,
  .cb-match-card,
  .cb-article-card,
  .cb-player-card,
  .cb-team-card,
  .cb-stat-card {
    background: var(--cb-bg-card);
    border-color: var(--cb-border);
  }

  .cb-score-header {
    background: #0a0a14;
  }

  .cb-footer {
    background: #0a0a14;
  }

  .cb-ticker {
    background: #0a0a14;
  }

  .cb-skeleton {
    background: linear-gradient(90deg, #1d1e26 25%, #2a2b30 50%, #1d1e26 75%);
  }

  .cb-skeleton-card__image,
  .cb-skeleton-card__line,
  .cb-skeleton-row__cell {
    background: linear-gradient(90deg, #1d1e26 25%, #2a2b30 50%, #1d1e26 75%);
  }

  .cb-table--striped tbody tr:nth-child(even) {
    background: rgb(255, 255, 255, 0.02);
  }

  .cb-logo__text {
    color: var(--cb-text-inverse);
  }

  .cb-search-overlay__input {
    background: var(--cb-bg-alt);
    color: var(--cb-text);
  }

  .cb-modal-overlay {
    background: rgb(0, 0, 0, 0.7);
  }

  .cb-toast {
    background: var(--cb-bg-alt);
    border-color: var(--cb-border);
  }

  .cb-dropdown__menu {
    background: var(--cb-bg-alt);
    border-color: var(--cb-border);
  }

  img {
    opacity: 0.9;
    transition: opacity 0.2s ease;
  }

  img:hover {
    opacity: 1;
  }
}

/* ── System dark mode detection ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cb-primary: #1492ff;
    --cb-primary-dark: #0860c4;
    --cb-primary-light: #0d1a2e;
    --cb-primary-rgb: 20, 146, 255;

    --cb-bg: #0d0d14;
    --cb-bg-alt: #16171e;
    --cb-bg-subtle: #1d1e26;
    --cb-bg-inverse: #1d1e1f;
    --cb-bg-card: #16171e;
    --cb-bg-section: #0d0d14;

    --cb-text: #e0e0e0;
    --cb-text-secondary: #a5a6a7;
    --cb-text-tertiary: #6c6d6f;
    --cb-text-inverse: #fff;
    --cb-text-link: #1492ff;

    --cb-border: #2a2b30;
    --cb-border-light: #1d1e26;
    --cb-border-focus: #1492ff;

    --cb-shadow-md: 0 1px 8px rgb(0, 0, 0, 0.56);
    --cb-shadow-lg: 0 4px 12px rgb(0, 0, 0, 0.56);
    --cb-shadow-xl: 0 6px 15px rgb(0, 0, 0, 0.76);
    --cb-shadow-focus: 0 0 0 3px rgb(20, 146, 255, 0.3);

    .cb-nav {
      background: var(--cb-bg-inverse);
    }

    .cb-card,
    .cb-match-card,
    .cb-article-card,
    .cb-player-card,
    .cb-team-card,
    .cb-stat-card {
      background: var(--cb-bg-card);
      border-color: var(--cb-border);
    }

    .cb-footer {
      background: #0a0a14;
    }

    .cb-logo__text {
      color: var(--cb-text-inverse);
    }
  }
}