:root[data-theme="light"] {
    --swish-bg: #fff;
    --swish-surface: #f6f7f9;
    --swish-surface-2: #eef1f5;
    --swish-panel: #fff;
    --swish-line: #dfe3e8;
    --swish-card: #fff;
    --swish-card-hover: #f3f4f6;
    --swish-text: #15181e;
    --swish-muted: #626a76;
    --swish-border: #dfe3e8;
    --swish-header-bg: rgba(255, 255, 255, .94);
    --swish-shadow: 0 12px 34px rgba(17, 24, 39, .12);
    --swish-light-heading: #121a2d;
    --swish-light-link: #121a2d;
    color-scheme: light;
}

:root[data-theme="light"] .swish-page-hero__overlay {
    background: linear-gradient(90deg, rgba(3, 6, 11, .72), rgba(3, 6, 11, .12));
}

:root[data-theme="light"] .swish-page-hero__content {
    padding-bottom: 42px;
}

/*
 * Light-mode content contrast.
 * Swish HQ's homepage wrapper defines its own dark-mode text variables, so
 * restore light-mode text values here without changing Swish HQ's other pages.
 */
:root[data-theme="light"] .swish-homepage.swish-frontend {
    --swish-text: var(--swish-light-heading);
    --swish-muted: #626a76;
    color: var(--swish-text);
}

/* Keep content headings readable against light page surfaces. */
:root[data-theme="light"] :is(.swish-home-main, .swish-site-main) :is(h1, h2, h3, h4, h5, h6) {
    color: var(--swish-light-heading);
}

/*
 * Standard content links should never inherit white/dark-mode link colors in
 * light mode. Interactive cards and buttons retain their component styling.
 */
:root[data-theme="light"] .swish-homepage :is(.swish-home-text-link, .swish-panel a, p a),
:root[data-theme="light"] .swish-site-main .wp-block-post-content a:not(.wp-element-button) {
    color: var(--swish-light-link);
}

:root[data-theme="light"] .swish-homepage :is(.swish-home-text-link, .swish-panel a, p a):hover,
:root[data-theme="light"] .swish-homepage :is(.swish-home-text-link, .swish-panel a, p a):focus-visible,
:root[data-theme="light"] .swish-site-main .wp-block-post-content a:not(.wp-element-button):hover,
:root[data-theme="light"] .swish-site-main .wp-block-post-content a:not(.wp-element-button):focus-visible {
    text-decoration: underline;
}

/*
 * Swish HQ light-mode surfaces.
 *
 * The plugin owns its component markup and dark defaults. Keep those defaults
 * intact and remap only the rendered Swish HQ frontend surfaces when the theme
 * is explicitly in light mode. This mirrors the homepage's light surface
 * hierarchy: white primary panels, soft-gray interactive/nested surfaces, and
 * neutral gray borders. Keep the hierarchy token-driven so all Swish HQ pages
 * inherit the same light-mode treatment without page-specific overrides.
 */
:root[data-theme="light"] .swish-frontend {
    --swish-bg: #fff;
    --swish-panel: #fff;
    --swish-line: #dfe3e8;
    --swish-text: #15181e;
    --swish-muted: #626a76;
    --swish-surface: #f6f7f9;
    --swish-border: #dfe3e8;
    color: var(--swish-text);
}

/* Primary Swish HQ content containers that otherwise use dark gradients. */
:root[data-theme="light"] .swish-frontend :is(
    .swish-profile-hero,
    .swish-team-hero,
    .swish-season-hero,
    .swish-page-hero,
    .swish-game-hero
) {
    background: linear-gradient(135deg, #f6f7f9, #fff);
    border-color: var(--swish-line);
    color: var(--swish-text);
}

/* Nested cards use the same white-on-soft-gray hierarchy as the homepage. */
:root[data-theme="light"] .swish-frontend :is(
    .swish-result-card,
    .swish-search-result,
    .swish-schedule-game,
    .swish-team-directory-card,
    .swish-leader-card,
    .swish-history-season,
    .swish-management-card,
    .swish-stat-leader-card,
    .swish-season-leader-card,
    .swish-playoff-hero,
    .swish-game-leader-card,
    .swish-record-card,
    .swish-team-record-card,
    .swish-conference-leader-card,
    .swish-season-champion-card,
    .swish-management-nav,
    .swish-management-block,
    .swish-bracket-series,
    .swish-series-detail-matchup,
    .swish-series-winner,
    .swish-full-bracket-series
) {
    background: #fff;
    border-color: var(--swish-line);
    color: var(--swish-text);
}

/* Slightly stronger secondary surfaces preserve hierarchy without dark blue. */
:root[data-theme="light"] .swish-frontend :is(
    .swish-champion-banner,
    .swish-season-playoff-finals,
    .swish-season-champion-card--league,
    .swish-full-bracket-finals,
    .swish-finals-series
) {
    background: #eef1f5;
    border-color: var(--swish-line);
    color: var(--swish-text);
}

/* Table/card headers and sticky table cells use a medium neutral gray. */
:root[data-theme="light"] .swish-frontend .swish-conference-table h3,
:root[data-theme="light"] .swish-frontend .swish-stat-table thead th,
:root[data-theme="light"] .swish-frontend .swish-stat-table td:first-child,
:root[data-theme="light"] .swish-frontend .swish-stat-table th:first-child {
    background: #f3f4f6;
    border-color: var(--swish-line);
    color: var(--swish-text);
}

/*
 * Interactive controls sit one level below the white panel surface. Using the
 * shared light surface token keeps selects, inputs, and textareas visually
 * distinct while preserving the same hierarchy across every Swish HQ screen.
 */
:root[data-theme="light"] .swish-frontend :is(input, select, textarea),
:root[data-theme="light"] .swish-frontend .swish-team-directory-logo {
    background: var(--swish-surface);
    border-color: var(--swish-line);
    color: var(--swish-text);
}

/* Neutral notices should not retain the dark-mode blue fill. */
:root[data-theme="light"] .swish-frontend .swish-notice {
    background: #eef1f5;
    color: var(--swish-text);
}

/* Keep hover/focus feedback within the same light neutral palette. */
:root[data-theme="light"] .swish-frontend .swish-full-bracket-series:hover,
:root[data-theme="light"] .swish-frontend .swish-full-bracket-series:focus-visible {
    background: #f3f4f6;
}

/* Homepage hero: mirror the dark-mode solid blend into the light page surface. */
:root[data-theme="light"] .swish-home-hero__overlay {
    z-index: 0;
    background: linear-gradient(90deg, rgba(4, 6, 10, .76), rgba(4, 6, 10, .2) 60%, rgba(4, 6, 10, .32));
}

:root[data-theme="light"] .swish-home-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--swish-panel) 0%, transparent) 0%,
        color-mix(in srgb, var(--swish-panel) 8%, transparent) calc(var(--swish-home-hero-solid-start, 80%) * .25),
        color-mix(in srgb, var(--swish-panel) 22%, transparent) calc(var(--swish-home-hero-solid-start, 80%) * .5),
        color-mix(in srgb, var(--swish-panel) 48%, transparent) calc(var(--swish-home-hero-solid-start, 80%) * .75),
        color-mix(in srgb, var(--swish-panel) 76%, transparent) calc(var(--swish-home-hero-solid-start, 80%) * .9),
        var(--swish-panel) var(--swish-home-hero-solid-start, 80%),
        var(--swish-panel) 100%
    );
}

:root[data-theme="light"] .swish-home-hero__content {
    z-index: 2;
}