/*
 * The dark design (#114, docs/dark-mode/design.md). Loaded with
 * media="(prefers-color-scheme: dark)", so it follows the system setting,
 * without JavaScript too; the header's switch overrides that by setting the
 * link's media to "all" or "not all" (inc/dark-mode.php).
 */
:root { color-scheme: only dark; }

/* The palette, remapped: the light surfaces turn dark, the dark text light.
	 At :root, where the theme also derives The Events Calendar's colours from it. */
:root, body {
	--wp--preset--color--light: #0B1220;
	--wp--preset--color--white: #1E293B;
	--wp--preset--color--dark: #F1F5F9;
	--wp--preset--color--dark-card: #CBD5E1;
	--wp--preset--color--muted: #94A3B8;
	--wp--preset--color--border: #334155;
	--wp--preset--color--primary-light: #3F1D24;
	/* Vereinsrot as text (theme.json's custom.redText): the lighter red that reads on dark; buttons keep #B91C1C. */
	--wp--custom--red-text: #F87171;
}

/* The sections that are dark already keep the light design's values (block-theme.md's dark surfaces). */
.svb-hero, .svb-footer, .is-style-section-dark, .svb-glance-card--shop, .svb-featured,
.svb-glance-card--next, .svb-games-panel, .svb-album-card, .svb-album-header {
	--wp--preset--color--white: #FFFFFF;
	--wp--preset--color--dark: #0F172A;
	--wp--preset--color--dark-card: #1E293B;
	--wp--preset--color--muted: #64748B;
	--wp--preset--color--border: #E2E8F0;
	--wp--custom--red-text: var(--wp--preset--color--primary);
}

/* The editor's red text colour (core's .has-primary-color uses the preset, not the token). */
.has-primary-color { color: var(--wp--custom--red-text) !important; }
.svb-post-tags a, .taxonomy-category a { color: #FCA5A5 !important; }
/* The red Sport-Kollektion card: its white button keeps its dark red text. */
.svb-glance-card--shop .svb-glance-card__button a { color: #881337 !important; }

/* Solid red buttons and the current page number keep white text. */
.wp-block-button:not(.is-style-outline) .wp-block-button__link, .page-numbers.current { color: #FFFFFF !important; }
.wpforms-submit { --wp--preset--color--white: #FFFFFF; }
/* On a photo or the red shop card, text stays white; sponsor names stay muted. */
.svb-featured a:not(.svb-post-tags a) { color: #FFFFFF !important; }
.svb-featured { --wp--preset--color--border: #334155; }
.svb-sponsors__list a { color: #94A3B8 !important; }
/* The Events Calendar: its derived colours, recomputed under the remap; its own red text light red. */
.tribe-common, .tribe-events {
	--tec-color-text-primary: #F1F5F9;
	--tec-color-text-secondary: #CBD5E1;
	--tec-color-background: #1E293B;
	--tec-color-border-default: #334155;
	--tec-color-border-secondary: #334155;
	--tec-color-icon-primary: #CBD5E1;
	--tec-color-icon-secondary: #94A3B8;
	--tec-color-icon-active: #F87171;
}
.tribe-events-c-nav__prev-label, .tribe-events-c-nav__next-label, .tribe-events-c-subscribe-dropdown__button-text,
.tribe-events-c-nav__prev, .tribe-events-c-nav__next { color: #F87171 !important; }
.tribe-events-calendar-list__event-description, .tribe-events-calendar-list__event-description p { color: #CBD5E1 !important; }
html .svb-events .tribe-events-c-top-bar__today-button, .tribe-events-c-top-bar__datepicker-mobile, .tribe-events-c-top-bar__datepicker-desktop { color: #F1F5F9 !important; }

/* An event's category chips: light red on the dark chip. */
html .svb-events .tribe-events-event-categories a:not(:hover, :focus-visible) { color: #FCA5A5 !important; }

/* Date badges: light red on the dark badge. */
.svb-dates__day, .svb-dates__day * { color: #FCA5A5 !important; }

/* The header's frosted bar, dark. */
.svb-header::before { background: rgba(30, 41, 59, .96) !important; }
.svb-header a:where(:not(.wp-element-button)) { color: #F1F5F9 !important; }
.wp-block-navigation__submenu-container { background: #1E293B !important; color: #F1F5F9 !important; }

/* Soft shadows show little on dark: a hairline instead. */
.svb-post-card, .wp-block-group.is-style-section-card { box-shadow: 0 0 0 1px #334155 !important; }

/* Embedded content keeps its own light design, as a light card on the dark page. */
main iframe, .ngg-galleryoverview, .foogallery {
	background: #FFFFFF; border-radius: 12px;
}

/* The switch shows a sun in the dark design: back to the light one. */
.svb-scheme-switch__moon { display: none; }
.svb-scheme-switch__sun { display: block; }