html[data-vb-theme] {
    --vb-bg: #101113;
    --vb-card: #1d1e21;
    --vb-game: #252629;
    --vb-input: #232428;
    --vb-button: #202124;
    --vb-border: #555;
    --vb-accent: #d4af37;
    --vb-accent-text: #111;
    --vb-text: #f1f1f1;
    --vb-muted: #c6c6c6;
    --vb-focus: #ffe082;
    --vb-link: #e8c867;
    color-scheme: dark;
}

html[data-vb-theme="midnight"] {
    --vb-bg: #101827;
    --vb-card: #192a40;
    --vb-game: #20344c;
    --vb-input: #172338;
    --vb-button: #233850;
    --vb-border: #6684a5;
    --vb-accent: #80c7ff;
    --vb-accent-text: #101827;
    --vb-text: #f5f8ff;
    --vb-muted: #cedbec;
    --vb-focus: #a7dbff;
    --vb-link: #a9d9ff;
}

html[data-vb-theme="classic"] {
    --vb-bg: #ffffff;
    --vb-card: #f0f3f7;
    --vb-game: #ffffff;
    --vb-input: #ffffff;
    --vb-button: #e8edf4;
    --vb-border: #879bb3;
    --vb-accent: #205d9e;
    --vb-accent-text: #ffffff;
    --vb-text: #172536;
    --vb-muted: #43546a;
    --vb-focus: #1356a0;
    --vb-link: #174f8c;
    color-scheme: light;
}

html[data-vb-theme="arena"] {
    --vb-bg: #181619;
    --vb-card: #282126;
    --vb-game: #32262c;
    --vb-input: #272126;
    --vb-button: #35282e;
    --vb-border: #a47784;
    --vb-accent: #ff7983;
    --vb-accent-text: #231318;
    --vb-text: #fff5f6;
    --vb-muted: #e0cdd1;
    --vb-focus: #ffabb1;
    --vb-link: #ffa7ae;
}

html[data-vb-theme="forest"] {
    --vb-bg: #0e1b19;
    --vb-card: #19302b;
    --vb-game: #244039;
    --vb-input: #182e29;
    --vb-button: #244039;
    --vb-border: #70958a;
    --vb-accent: #80e0b5;
    --vb-accent-text: #0e1b19;
    --vb-text: #f0fff7;
    --vb-muted: #c8e4d6;
    --vb-focus: #a7f5cf;
    --vb-link: #a5eec9;
}

html[data-vb-theme="monochrome"] {
    --vb-bg: #0b0b0d;
    --vb-card: #232326;
    --vb-game: #303034;
    --vb-input: #242428;
    --vb-button: #29292d;
    --vb-border: #85858b;
    --vb-accent: #f1f1f1;
    --vb-accent-text: #111111;
    --vb-text: #ffffff;
    --vb-muted: #d2d2d5;
    --vb-focus: #ffffff;
    --vb-link: #ffffff;
}

html[data-vb-theme],
html[data-vb-theme] body,
html[data-vb-theme] .ticker-widget {
    background: var(--vb-bg);
    color: var(--vb-text);
}

html[data-vb-theme] .ticker-widget {
    border-color: var(--vb-border);
}

html[data-vb-theme] .ticker-widget-heading strong,
html[data-vb-theme] .ticker-symbol,
html[data-vb-theme] .ticker-game-top strong,
html[data-vb-theme] .ticker-state-icon,
html[data-vb-theme] .embed-brand-wordmark {
    color: var(--vb-accent);
}

html[data-vb-theme] .ticker-widget-heading span:not(.ticker-symbol),
html[data-vb-theme] .embed-description,
html[data-vb-theme] .ticker-leagues legend,
html[data-vb-theme] .ticker-label,
html[data-vb-theme] .ticker-search-status,
html[data-vb-theme] .ticker-live-message,
html[data-vb-theme] .ticker-live-updated,
html[data-vb-theme] .ticker-game-detail,
html[data-vb-theme] .ticker-game-top,
html[data-vb-theme] .ticker-state p,
html[data-vb-theme] #ticker-message,
html[data-vb-theme] .ticker-combobox-empty {
    color: var(--vb-muted);
}

html[data-vb-theme] .ticker-content,
html[data-vb-theme] .ticker-favorites {
    background: var(--vb-card);
    border-color: var(--vb-border);
    color: var(--vb-text);
}

html[data-vb-theme] .ticker-content h3,
html[data-vb-theme] .ticker-game-score,
html[data-vb-theme] .ticker-game-team-name {
    color: var(--vb-text);
}

html[data-vb-theme] .ticker-game {
    background: var(--vb-game);
    border-color: var(--vb-border);
    color: var(--vb-text);
}

html[data-vb-theme] .ticker-team-search,
html[data-vb-theme] .ticker-team-select,
html[data-vb-theme] .ticker-combobox-results {
    background: var(--vb-input);
    border-color: var(--vb-border);
    color: var(--vb-text);
}

html[data-vb-theme] .ticker-team-search::placeholder {
    color: var(--vb-muted);
    opacity: 1;
}

html[data-vb-theme] .ticker-combobox-option {
    color: var(--vb-text);
    border-color: var(--vb-border);
}

html[data-vb-theme] .ticker-league-options span,
html[data-vb-theme] .ticker-tabs button,
html[data-vb-theme] .ticker-more-button {
    background: var(--vb-button);
    border-color: var(--vb-border);
    color: var(--vb-text);
}

html[data-vb-theme] .ticker-league-options input:checked + span,
html[data-vb-theme] .ticker-tabs button[aria-pressed="true"],
html[data-vb-theme] .ticker-combobox-option:hover,
html[data-vb-theme] .ticker-combobox-option[aria-selected="true"] {
    background: var(--vb-accent);
    color: var(--vb-accent-text);
    border-color: var(--vb-accent);
}

html[data-vb-theme] .ticker-more-button {
    border-color: var(--vb-accent);
    color: var(--vb-link);
}

html[data-vb-theme] .ticker-more-button:hover {
    background: var(--vb-game);
}

html[data-vb-theme] .embed-credit {
    border-color: var(--vb-border);
}

html[data-vb-theme] .embed-credit a,
html[data-vb-theme] .ticker-state a,
html[data-vb-theme] .embed-brand-wordmark:hover {
    color: var(--vb-link);
}

html[data-vb-theme] .ticker-team-search:focus,
html[data-vb-theme] .ticker-team-search:focus-visible,
html[data-vb-theme] .ticker-league-options input:focus-visible + span,
html[data-vb-theme] .ticker-more-button:focus-visible,
html[data-vb-theme] .embed-credit a:focus-visible {
    outline: 3px solid var(--vb-focus);
    outline-offset: 3px;
}

html[data-vb-theme] .ticker-team-search:focus {
    border-color: var(--vb-accent);
}