/*
 * KISURE FE1015 ??? site-wide public dark-mode charcoal surface authority.
 *
 * Surface rule:
 *   page base          #000000
 *   primary surface    #1C1C1C
 *   secondary surface  #242424
 *   tertiary/border    #303030
 *
 * Kisure teal remains the brand accent.
 * Team/theme and semantic status colors are intentionally not globally replaced.
 */

/* Canonical tokens */
html[data-theme="dark"],
html.dark {
    --ks-charcoal-page: #000000;
    --ks-charcoal-surface: #1C1C1C;
    --ks-charcoal-surface-2: #242424;
    --ks-charcoal-surface-3: #303030;
    --ks-charcoal-border: #3A3A3A;
    --ks-charcoal-text: #F8FAFC;
    --ks-charcoal-muted: #A7A7A7;

    --surface-dark: #1C1C1C;
    --bg-contrast: #1C1C1C;

    --ks-bg: #000000;
    --ks-card: #1C1C1C;
    --ks-border: #3A3A3A;
    --ks-ink: #F8FAFC;
    --ks-muted: #A7A7A7;

    --ks865-bg: #000000;
    --ks865-bg-alt: #171717;
    --ks865-surface: #1C1C1C;
    --ks865-surface-raised: #242424;
}

/* Page/base surfaces */
html[data-theme="dark"] body,
html.dark body,
body.dark-mode {
    background-color: #000000 !important;
}

/*
 * Shared neutral panels.
 * These selectors are deliberately structural/generic. Team-colored match
 * experience selectors and semantic state selectors are not included.
 */
html[data-theme="dark"] body :where(
    .surface-card,
    .site-panel,
    .football-section,
    .football-side-panel,
    .newsletter-card,
    .ad-slot,
    .empty-state,
    .global-search-card,
    .football-data-card,
    .football-prematch-card,
    .football-league-brief,
    .football-bracket-panel,
    .football-transfer-section,
    .site-promo,
    .footer-panel,
    .football-competition-card--directory,
    .football-transfer-card,
    .search-modal__card,
    .theme-menu__dropdown
),
html.dark body :where(
    .surface-card,
    .site-panel,
    .football-section,
    .football-side-panel,
    .newsletter-card,
    .ad-slot,
    .empty-state,
    .global-search-card,
    .football-data-card,
    .football-prematch-card,
    .football-league-brief,
    .football-bracket-panel,
    .football-transfer-section,
    .site-promo,
    .footer-panel,
    .football-competition-card--directory,
    .football-transfer-card,
    .search-modal__card,
    .theme-menu__dropdown
),
body.dark-mode :where(
    .surface-card,
    .site-panel,
    .football-section,
    .football-side-panel,
    .newsletter-card,
    .ad-slot,
    .empty-state,
    .global-search-card,
    .football-data-card,
    .football-prematch-card,
    .football-league-brief,
    .football-bracket-panel,
    .football-transfer-section,
    .site-promo,
    .footer-panel,
    .football-competition-card--directory,
    .football-transfer-card,
    .search-modal__card,
    .theme-menu__dropdown
) {
    background-color: #1C1C1C !important;
    background-image: none !important;
    border-color: #3A3A3A !important;
}

/* Header/footer: charcoal surfaces, Kisure teal only as accent */
html[data-theme="dark"] body :where(.site-header, .ks-ref-header),
html.dark body :where(.site-header, .ks-ref-header),
body.dark-mode :where(.site-header, .ks-ref-header) {
    background-color: #171F21 !important;
    background-image: none !important;
    border-color: #303030 !important;
}

html[data-theme="dark"] body .footer-shell,
html.dark body .footer-shell,
body.dark-mode .footer-shell {
    background-color: #1C1C1C !important;
    background-image: none !important;
    border-top-color: #0B9CA0 !important;
}

/* Header/search/settings neutral sub-surfaces */
html[data-theme="dark"] body :where(
    .ks-ref-search-pill,
    .ks-ref-theme-buttons,
    .ks-ref-settings-panel,
    .site-header__search-trigger,
    .site-icon-button
),
html.dark body :where(
    .ks-ref-search-pill,
    .ks-ref-theme-buttons,
    .ks-ref-settings-panel,
    .site-header__search-trigger,
    .site-icon-button
),
body.dark-mode :where(
    .ks-ref-search-pill,
    .ks-ref-theme-buttons,
    .ks-ref-settings-panel,
    .site-header__search-trigger,
    .site-icon-button
) {
    background-color: #242424 !important;
    background-image: none !important;
    border-color: #3A3A3A !important;
}

/* Generic secondary rows/cards */
html[data-theme="dark"] body :where(
    .football-info-list > a,
    .football-info-list > span,
    .football-mini-list > a,
    .football-mini-list > div,
    .football-group-table-card__row--head,
    .football-prediction-calendar__month,
    .football-prediction-calendar__date,
    .football-header-more-panel__all,
    .football-header-more-panel__leagues span
),
html.dark body :where(
    .football-info-list > a,
    .football-info-list > span,
    .football-mini-list > a,
    .football-mini-list > div,
    .football-group-table-card__row--head,
    .football-prediction-calendar__month,
    .football-prediction-calendar__date,
    .football-header-more-panel__all,
    .football-header-more-panel__leagues span
),
body.dark-mode :where(
    .football-info-list > a,
    .football-info-list > span,
    .football-mini-list > a,
    .football-mini-list > div,
    .football-group-table-card__row--head,
    .football-prediction-calendar__month,
    .football-prediction-calendar__date,
    .football-header-more-panel__all,
    .football-header-more-panel__leagues span
) {
    background-color: #242424 !important;
    background-image: none !important;
    border-color: #3A3A3A !important;
}

/* Keep text neutral instead of blue-gray where these shared dark surfaces apply */
html[data-theme="dark"] body :where(
    .surface-card,
    .site-panel,
    .football-section,
    .football-side-panel,
    .football-data-card,
    .football-prematch-card,
    .football-league-brief,
    .football-bracket-panel,
    .football-transfer-section
),
html.dark body :where(
    .surface-card,
    .site-panel,
    .football-section,
    .football-side-panel,
    .football-data-card,
    .football-prematch-card,
    .football-league-brief,
    .football-bracket-panel,
    .football-transfer-section
),
body.dark-mode :where(
    .surface-card,
    .site-panel,
    .football-section,
    .football-side-panel,
    .football-data-card,
    .football-prematch-card,
    .football-league-brief,
    .football-bracket-panel,
    .football-transfer-section
) {
    color: #F8FAFC !important;
}

/*
 * System mode: apply the same charcoal authority only when the OS is dark and
 * the user has not explicitly chosen light.
 */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]):not(.light) {
        --ks-charcoal-page: #000000;
        --ks-charcoal-surface: #1C1C1C;
        --ks-charcoal-surface-2: #242424;
        --ks-charcoal-surface-3: #303030;
        --ks-charcoal-border: #3A3A3A;
        --surface-dark: #1C1C1C;
        --bg-contrast: #1C1C1C;
        --ks-bg: #000000;
        --ks-card: #1C1C1C;
        --ks-border: #3A3A3A;
    }

    html:not([data-theme="light"]):not(.light) body {
        background-color: #000000 !important;
    }

    html:not([data-theme="light"]):not(.light) body :where(
        .surface-card,
        .site-panel,
        .football-section,
        .football-side-panel,
        .newsletter-card,
        .ad-slot,
        .empty-state,
        .global-search-card,
        .football-data-card,
        .football-prematch-card,
        .football-league-brief,
        .football-bracket-panel,
        .football-transfer-section,
        .site-promo,
        .footer-panel,
        .football-competition-card--directory,
        .football-transfer-card,
        .search-modal__card,
        .theme-menu__dropdown
    ) {
        background-color: #1C1C1C !important;
        background-image: none !important;
        border-color: #3A3A3A !important;
    }

    html:not([data-theme="light"]):not(.light) body :where(.site-header, .ks-ref-header) {
        background-color: #171F21 !important;
        background-image: none !important;
        border-color: #303030 !important;
    }

    html:not([data-theme="light"]):not(.light) body .footer-shell {
        background-color: #1C1C1C !important;
        background-image: none !important;
        border-top-color: #0B9CA0 !important;
    }
}