/*
 * Themes - chosen with the 🎨 switch in the header (cookie dw_theme), set on <html> as
 * data-theme (and data-bs-theme light/dark for Bootstrap). Each theme sets colours, fonts,
 * sizes, corners and shadows through CSS variables; site.css uses the --sg-* ones.
 * System fonts only - no web fonts from third parties (privacy).
 */

/* ---------- shared defaults (dark = the original look) ---------- */
:root {
    --sg-accent: #7c5cff;
    --sg-accent-hover: #6a4af0;
    --sg-accent-active: #5b3de0;
    --sg-gold: #f5c542;
    --sg-warn-text: #ffc107;
    --sg-page-bg: radial-gradient(ellipse at top, #1e1b3a 0%, var(--bs-body-bg) 60%);
    --sg-hero-text: linear-gradient(90deg, #fff 0%, #b9a8ff 60%, var(--sg-gold) 100%);
    --sg-fullscreen-bg: #1b1930;
    --sg-card-shadow: none;
    --sg-heading-transform: none;
    --sg-heading-spacing: normal;
}

/* ---------- Hell ---------- */
:root[data-theme="light"] {
    --sg-accent: #6a4af0;
    --sg-accent-hover: #5b3de0;
    --sg-accent-active: #4c30c8;
    --sg-gold: #a8780a;
    --sg-warn-text: #8a6100;
    --sg-page-bg: radial-gradient(ellipse at top, #ece8ff 0%, #f7f7fb 55%);
    --sg-hero-text: linear-gradient(90deg, #1e1b3a 0%, #6a4af0 60%, #c08a00 100%);
    --sg-fullscreen-bg: #f7f7fb;
    --sg-card-shadow: 0 1px 3px rgba(30, 27, 58, .08);
    --bs-body-bg: #f7f7fb;
    --bs-tertiary-bg: #ffffff;
    --bs-primary: #6a4af0;
    --bs-primary-rgb: 106, 74, 240;
    --bs-link-color: #5b3de0;
    --bs-link-color-rgb: 91, 61, 224;
    --bs-link-hover-color: #4c30c8;
}

/* ---------- Social: light grey page, white cards, blue, rounded ---------- */
:root[data-theme="social"] {
    --sg-accent: #1877f2;
    --sg-accent-hover: #166fe5;
    --sg-accent-active: #1464cf;
    --sg-gold: #b07c00;
    --sg-warn-text: #8a6100;
    --sg-page-bg: #f0f2f5;
    --sg-hero-text: linear-gradient(90deg, #1c1e21 0%, #1c1e21 100%);
    --sg-fullscreen-bg: #f0f2f5;
    --sg-card-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 2px 8px rgba(0, 0, 0, .04);
    --bs-body-bg: #f0f2f5;
    --bs-body-color: #1c1e21;
    --bs-secondary-color: #65676b;
    --bs-tertiary-bg: #ffffff;
    --bs-secondary-bg: #e4e6eb;
    --bs-border-color: #dddfe2;
    --bs-primary: #1877f2;
    --bs-primary-rgb: 24, 119, 242;
    --bs-link-color: #1877f2;
    --bs-link-color-rgb: 24, 119, 242;
    --bs-link-hover-color: #166fe5;
    --bs-body-font-family: "Segoe UI Historic", "Segoe UI", Helvetica, Arial, sans-serif;
    --bs-body-font-size: .9375rem;
    --bs-border-radius: .5rem;
    --bs-border-radius-sm: .375rem;
    --bs-border-radius-lg: .75rem;
}
[data-theme="social"] .card,
[data-theme="social"] .stat-tile,
[data-theme="social"] .list-group { border: 0; }
[data-theme="social"] .navbar { background: #fff !important; box-shadow: 0 1px 2px rgba(0, 0, 0, .1); border-bottom: 0 !important; }
[data-theme="social"] .btn { font-weight: 600; }
[data-theme="social"] h1, [data-theme="social"] .h1, [data-theme="social"] .h4, [data-theme="social"] .h5 { font-weight: 700; }

/* ---------- Premium: white, black type, sharp edges, one strong blue (automotive premium style) ---------- */
:root[data-theme="premium"] {
    --sg-accent: #1c69d4;
    --sg-accent-hover: #0653b6;
    --sg-accent-active: #00479e;
    --sg-gold: #8a6100;
    --sg-warn-text: #8a6100;
    --sg-page-bg: #ffffff;
    --sg-hero-text: linear-gradient(90deg, #262626 0%, #262626 100%);
    --sg-fullscreen-bg: #ffffff;
    --sg-heading-transform: none;
    --sg-heading-spacing: -.01em;
    --bs-body-bg: #ffffff;
    --bs-body-color: #262626;
    --bs-secondary-color: #6f6f6f;
    --bs-tertiary-bg: #f6f6f6;
    --bs-secondary-bg: #ececec;
    --bs-border-color: #e6e6e6;
    --bs-primary: #1c69d4;
    --bs-primary-rgb: 28, 105, 212;
    --bs-link-color: #1c69d4;
    --bs-link-color-rgb: 28, 105, 212;
    --bs-link-hover-color: #0653b6;
    --bs-body-font-family: "Helvetica Neue", Helvetica, Arial, "Segoe UI", sans-serif;
    --bs-body-font-size: 1.0625rem;
    --bs-body-font-weight: 300;
    --bs-border-radius: 0;
    --bs-border-radius-sm: 0;
    --bs-border-radius-lg: 0;
    --bs-border-radius-xl: 0;
    --bs-border-radius-pill: 0;
}
[data-theme="premium"] .navbar { background: #fff !important; border-bottom: 1px solid #e6e6e6 !important; padding-top: .9rem; padding-bottom: .9rem; }
[data-theme="premium"] .navbar-brand { font-weight: 700; letter-spacing: .02em; }
[data-theme="premium"] h1, [data-theme="premium"] .h1, [data-theme="premium"] .h3, [data-theme="premium"] .h4 { font-weight: 700; }
[data-theme="premium"] h2, [data-theme="premium"] .h5, [data-theme="premium"] .h6 { font-weight: 700; }
[data-theme="premium"] .btn { font-weight: 400; padding-left: 1.25rem; padding-right: 1.25rem; }
[data-theme="premium"] .btn-sm { padding-left: .9rem; padding-right: .9rem; }
[data-theme="premium"] .card, [data-theme="premium"] .stat-tile { border-color: #e6e6e6; }
[data-theme="premium"] .stat-label, [data-theme="premium"] .small.text-body-secondary { letter-spacing: .02em; }
[data-theme="premium"] .game-icon { border-radius: 0; }
[data-theme="premium"] footer { background: #262626; color: #bbb !important; border-top: 0 !important; }
[data-theme="premium"] footer a { color: #ddd !important; }
[data-theme="premium"] .container { max-width: 1240px; }

/* ---------- light themes: fix things Bootstrap only makes for dark backgrounds ---------- */
[data-bs-theme="light"] .btn-outline-light {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-hover-bg: var(--bs-secondary-bg);
    --bs-btn-hover-border-color: var(--bs-border-color);
    --bs-btn-active-color: var(--bs-body-color);
    --bs-btn-active-bg: var(--bs-secondary-bg);
}
[data-bs-theme="light"] .result .btn-close-white { filter: none; }
/* Light themes: cards, lists and tables are white surfaces on the (slightly grey) page */
[data-bs-theme="light"] .card { --bs-card-bg: #fff; }
[data-bs-theme="light"] .list-group { --bs-list-group-bg: #fff; }
[data-bs-theme="light"] .table { --bs-table-bg: #fff; }
[data-bs-theme="light"] .stat-tile { background: #fff; }
[data-bs-theme="light"] .dropdown-menu { --bs-dropdown-bg: #fff; }
[data-bs-theme="light"] .card { box-shadow: var(--sg-card-shadow); }
[data-bs-theme="light"] .stat-tile { box-shadow: var(--sg-card-shadow); }

/* Theme switch in the header */
.theme-switch .dropdown-item.active { background: var(--sg-accent); color: #fff; }
.theme-swatch { display: inline-block; width: .9em; height: .9em; border-radius: 50%; vertical-align: -.1em; margin-right: .4em; border: 1px solid rgba(128, 128, 128, .4); }