/* ═══════════════════════════════════════════════════════════
   Sport24 design tokens — loaded BEFORE site.css.
   Light values on :root, dark overrides on body.night (the site's
   existing toggle casing) — both casings supported during the sweep.
   ═══════════════════════════════════════════════════════════ */

:root {
    /* brand */
    --primary-color: #260051;
    --primary-hover: #3d0b7a;
    --primary-contrast: #ffffff;
    --live-end: #545454;

    /* surfaces */
    --bg-page: #f7f9f8;
    --bg-surface: #ffffff;
    --bg-surface-2: #f0f2f5;
    --bg-inset: #eceef2;

    /* text */
    --text-strong: #1a1a1a;
    --text-body: #222226;
    --text-muted: #555b66;

    /* lines */
    --border-subtle: #e1e0e7;

    /* feedback */
    --danger: #f43f5e;
    --success: #10b981;
    --warning: #fbbf24;
}

/* ─── Dark theme (the site's night toggle) ─── */
body.night,
body.Night {
    --bg-page: #0f1117;
    --bg-surface: #171a23;
    --bg-surface-2: #1e2230;
    --bg-inset: #232838;

    --text-strong: #f3f4f6;
    --text-body: #d1d5db;
    --text-muted: #9ca3af;

    --border-subtle: #2a3040;

    --primary-color: #a78bfa; /* lighter brand legible on dark */
    --primary-hover: #c4b5fd;
    --primary-contrast: #0f1117;
}

/* ─── Core surfaces consume the tokens ─── */
body {
    background-color: var(--bg-page);
    color: var(--text-body);
}

.main-container,
.blog-post,
.panel-default,
.card,
.sidebar-panel {
    background-color: var(--bg-surface);
}

.menu-section,
.headings,
#postsacs h2,
#postsacs h3 {
    background-color: var(--bg-surface-2);
    color: var(--primary-color);
}

.subTitle,
.main-post-meta,
.text-small {
    color: var(--text-muted);
}

.post-share,
.bar-title {
    border-color: var(--border-subtle);
}

/* dark surfaces that were hardcoded light */
body.night .blog-post,
body.night .main-container,
body.night .panel-default,
body.night .card,
body.night .sidebar-panel,
body.night .menu-section,
body.night .headings,
body.night footer,
body.Night .blog-post,
body.Night .main-container,
body.Night .panel-default,
body.Night .card,
body.Night .sidebar-panel,
body.Night .menu-section,
body.Night .headings,
body.Night footer {
    background-color: var(--bg-surface);
    border-color: var(--border-subtle);
}

body.night .navbar-nav .nav-item button,
body.night .navbar-nav .nav-item a,
body.Night .navbar-nav .nav-item button,
body.Night .navbar-nav .nav-item a {
    color: var(--text-body);
}

body.night a,
body.night a:active,
body.Night a,
body.Night a:active {
    color: var(--text-body);
}

body.night a:hover,
body.Night a:hover {
    color: var(--primary-color);
}

body.night ::selection,
body.Night ::selection {
    background: var(--primary-color);
    color: #fff;
}