:root {
	--f4-bg-main: #1e1e1e;
	--f4-bg-panel: #2d2d2d;
	--f4-bg-surface: #2a2a2a;
	--f4-text: #ffffff;
	--f4-text-muted: #888888;
	--f4-accent: #F2CF2F;
	--f4-fcf: #5dddbeff;
	--f4-datum: #ee6ed2ff;
	--f4-dimension: #649ee9ff;
	--f4-basic-dimension: #b77befff;
	--f4-thread: #e89547ff;
	--f4-state-ok: #22c55e;
	--f4-state-warn: #f59e0b;
	--f4-state-error: #ef4444;
	--f4-border: #3a3a3a;
	--f4-warn-bg: #3a2b00;
	--f4-error-bg: #3a0f0f;
}

body,
.mw-body,
.mw-body-content,
.mw-content-container,
.citizen-header,
.citizen-body,
.citizen-site-header,
.citizen-sidebar,
.citizen-page-container,
.citizen-page-header,
.citizen-page-footer,
.citizen-sticky-header,
.citizen-sticky-header-background,
.citizen-body-container {
	background: var(--f4-bg-main);
	color: var(--f4-text);
}

/* Codex + Citizen token overrides (forces dark UI + gold accent) */
.skin-citizen {
	--color-base: var(--f4-text);
	--color-emphasized: var(--f4-text);
	--color-subtle: var(--f4-text-muted);
	--color-progressive: var(--f4-accent);
	--color-progressive--hover: #ffe680;
	--color-progressive--active: #c8ad25;
	--color-accent: var(--f4-accent);
	--color-accent--hover: #ffe680;
	--color-accent--active: #c8ad25;
	--color-inverted-fixed: #1b1b1b;
	--color-surface-1: var(--f4-bg-main);
	--color-surface-2: var(--f4-bg-panel);
	--color-surface-3: var(--f4-bg-surface);
	--background-color-base: var(--f4-bg-main);
	--background-color-interactive-subtle: var(--f4-bg-panel);
	--background-color-interactive: #333333;
	--background-color-progressive: var(--f4-accent);
	--background-color-progressive--hover: #ffe680;
	--background-color-progressive--active: #c8ad25;
	--border-color-base: var(--f4-border);
	--border-color-interactive: #4a4a4a;
	--border-color-progressive: #c8ad25;
	--box-shadow-color-progressive--focus: #c8ad25;
}

.citizen-sidebar,
.citizen-header,
.mw-page-container,
.mw-parser-output table,
.toc,
.infobox,
.citizen-drawer__card,
.citizen-menu__card {
	background: var(--f4-bg-panel);
}

.mw-parser-output,
.mw-parser-output p,
.mw-parser-output li,
.mw-parser-output td,
.mw-parser-output th {
	color: var(--f4-text);
}

a,
.mw-parser-output a {
	color: var(--f4-accent);
}

a:hover,
.mw-parser-output a:hover {
	color: #ffe680;
}

/* MediaWiki button classes */
.mw-ui-button,
.mw-ui-button.mw-ui-progressive {
	background: var(--f4-accent);
	color: #1b1b1b;
	border: 1px solid #c8ad25;
	border-radius: 6px;
}

.mw-ui-button.mw-ui-quiet {
	background: transparent;
	color: var(--f4-text);
}

/* Codex buttons */
.cdx-button {
	background: var(--f4-bg-surface);
	color: var(--f4-text);
	border: 1px solid var(--f4-border);
	border-radius: 6px;
}

.cdx-button:hover {
	background: #333333;
}

.cdx-button--action-progressive {
	background: var(--f4-accent);
	color: #1b1b1b;
	border-color: #c8ad25;
}

.cdx-button--action-progressive:hover {
	background: #ffe680;
	border-color: #ffe680;
}

/* Override Codex state selectors (more specific than base styles) */
.cdx-button:enabled,
.cdx-button.cdx-button--fake-button--enabled {
	background-color: var(--f4-bg-surface);
	color: var(--f4-text);
	border-color: var(--f4-border);
}
.cdx-button:enabled:hover,
.cdx-button.cdx-button--fake-button--enabled:hover {
	background-color: #333333;
}
.cdx-button:enabled:active,
.cdx-button.cdx-button--fake-button--enabled:active {
	background-color: #2a2a2a;
	color: var(--f4-text);
	border-color: #4a4a4a;
}
.cdx-button:enabled.cdx-button--action-progressive,
.cdx-button.cdx-button--fake-button--enabled.cdx-button--action-progressive,
.cdx-button:enabled.cdx-button--weight-primary.cdx-button--action-progressive {
	background-color: var(--f4-accent);
	color: #1b1b1b;
	border-color: #c8ad25;
}
.cdx-button:enabled.cdx-button--action-progressive:hover,
.cdx-button.cdx-button--fake-button--enabled.cdx-button--action-progressive:hover,
.cdx-button:enabled.cdx-button--weight-primary.cdx-button--action-progressive:hover {
	background-color: #ffe680;
	border-color: #ffe680;
}

/* Template helpers */
.gdt-infobox {
	background: var(--f4-bg-panel);
	border: 1px solid var(--f4-border);
}

.gdt-example {
	background: var(--f4-bg-surface);
	border: 1px solid var(--f4-border);
}

.f4-behavior {
	background: var(--f4-bg-surface);
	border-left: 4px solid var(--f4-accent);
}

.f4-state-ok { border-left-color: var(--f4-state-ok); }
.f4-state-warn { border-left-color: var(--f4-state-warn); }
.f4-state-error { border-left-color: var(--f4-state-error); }

.f4-behavior-note {
	border-left-color: var(--f4-accent, #0f766e);
	background: var(--f4-bg-surface, #f0fdfa);
}

.f4-behavior-warning {
	border-left-color: var(--f4-state-warn, #d97706);
	background: var(--f4-warn-bg, #fff7ed);
}

.f4-behavior-error {
	border-left-color: var(--f4-state-error, #dc2626);
	background: var(--f4-error-bg, #fef2f2);
}

/* Entity color helpers */
.f4-entity-fcf { color: var(--f4-fcf); }
.f4-entity-datum { color: var(--f4-datum); }
.f4-entity-dimension { color: var(--f4-dimension); }
.f4-entity-basic { color: var(--f4-basic-dimension); }
.f4-entity-thread { color: var(--f4-thread); }

/* Main page card layout */
.f4-card-grid {
	width: 100%;
	border-collapse: separate;
	border-spacing: 12px;
}

.f4-card {
	background: var(--f4-bg-panel);
	border: 1px solid var(--f4-border);
	border-radius: 10px;
	padding: 0.9em;
}

.f4-card a {
	display: block;
	color: var(--f4-text);
	text-decoration: none;
}

.f4-card a::first-line {
	font-weight: 600;
}

.f4-card a:hover {
	color: #ffe680;
}

.f4-card-title {
	font-weight: 600;
}

.f4-card-desc {
	margin-top: 0.4em;
	color: var(--f4-text-muted);
}

.f4-card ul {
	list-style: none;
	padding: 0;
	margin: 0.6em 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.f4-card li {
	margin: 0;
}

.f4-card ul a {
	display: inline-block;
	padding: 0.25em 0.6em;
	border-radius: 999px;
	background: var(--f4-bg-surface);
	border: 1px solid var(--f4-border);
	color: var(--f4-text);
	text-decoration: none;
}

.f4-card ul a:hover {
	border-color: #ffe680;
	color: #ffe680;
}

.f4-profile {
	width: 100%;
	border-collapse: separate;
	border-spacing: 12px;
	margin: 0 0 1em;
}

.f4-profile-card {
	background: var(--f4-bg-panel);
	border: 1px solid var(--f4-border);
	border-radius: 10px;
	padding: 0.9em;
}

.f4-profile-card ul {
	margin: 0.4em 0 0;
	padding-left: 18px;
}

.f4-profile-card li {
	margin: 0.15em 0;
}

.f4-hero {
	border-collapse: collapse;
	margin: 0 0 0.8em;
}

.f4-hero td {
	vertical-align: middle;
	padding: 0 0.75em 0 0;
}

.f4-hero td:last-child {
	padding-right: 0;
}

.f4-logo img,
.f4-logo .mw-file-element {
	width: 80px;
	height: auto;
	display: inline-block;
}

/* Dark-mode logo swap (safe even though we also set $wgLogos) */
@media (prefers-color-scheme: dark) {
	.mw-wiki-logo {
		background-image: url(/resources/assets/logo-white.svg);
	}
}

@media (prefers-color-scheme: light) {
	.mw-wiki-logo {
		background-image: url(/resources/assets/logo-black.svg);
	}
}

/* Citizen chrome */
.mw-footer,
.citizen-footer,
.mw-header,
.citizen-header {
	background: var(--f4-bg-panel);
	color: var(--f4-text);
	border-top: 1px solid var(--f4-border);
	border-bottom: 1px solid var(--f4-border);
}

.mw-header.citizen-header::before,
.mw-header.citizen-header::after {
	background: var(--f4-bg-panel);
	border-bottom: 1px solid var(--f4-border);
}

.citizen-drawer__card,
.citizen-menu__card {
	background: var(--f4-bg-panel);
	border: 1px solid var(--f4-border);
	border-radius: 10px;
	color: var(--f4-text);
}

.page-actions,
.mw-page-actions,
.citizen-page-actions {
	background: var(--f4-bg-surface);
	border: 1px solid var(--f4-border);
	border-radius: 10px;
}

/* Breadcrumbs */
.f4-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
	font-size: 0.9em;
	color: var(--f4-text-muted);
}

.f4-breadcrumbs__sep {
	color: var(--f4-text-muted);
}

.f4-breadcrumbs a {
	color: var(--f4-accent);
}

.f4-breadcrumbs a:hover {
	color: #ffe680;
}

/* Trust + approval banner */
.f4-trust-banner {
	margin: 0 0 1rem;
	padding: 0.65rem 0.85rem;
	border: 1px solid var(--f4-border);
	border-left-width: 4px;
	border-radius: 10px;
	background: var(--f4-bg-surface);
	color: var(--f4-text);
	font-size: 0.95em;
}

.f4-trust-banner a {
	color: var(--f4-accent);
	text-decoration: none;
}

.f4-trust-banner a:hover {
	color: #ffe680;
	text-decoration: underline;
}

.f4-trust-banner--approved {
	border-left-color: var(--f4-state-ok);
}

.f4-trust-banner--draft {
	border-left-color: var(--f4-state-warn);
}

.f4-trust-banner--unapproved {
	border-left-color: var(--f4-state-error);
}

.f4-trust-banner__title {
	font-weight: 600;
}

.f4-trust-banner__meta {
	margin-top: 0.25rem;
	color: var(--f4-text-muted);
}

/* Template draft variants */
.gdt-infobox {
	width: 320px;
	background: var(--f4-bg-panel, #f9fafb);
	border: 1px solid var(--f4-border, #e5e7eb);
	border-radius: 8px;
}

.gdt-infobox th {
	text-align: left;
	color: var(--f4-text, #111827);
}

.gdt-example {
	border: 1px solid var(--f4-border, #e5e7eb);
	padding: 0.6em 0.8em;
	background: var(--f4-bg-surface, #ffffff);
	border-radius: 8px;
	color: var(--f4-text, #111827);
}

.f4-behavior {
	border-left: 4px solid var(--f4-accent, #0f766e);
	padding: 0.6em 0.8em;
	background: var(--f4-bg-surface, #f0fdfa);
	border-radius: 8px;
	color: var(--f4-text, #111827);
}

.f4-author-credit {
	margin-top: 0.5em;
	font-size: 0.95em;
	color: var(--f4-text-muted, #6b7280);
}