/* Semantic screen colors. Brand/artwork colors are deliberately immutable.
   Dark overrides are screen-only: print, email and generated artwork stay light. */
:root {
	color-scheme: light;
	--fota-text: #042446;
	--fota-muted: #526174;
	--fota-page: #f7f8fa;
	--fota-surface: #fff;
	--fota-surface-subtle: #f2f6fa;
	--fota-border: #ccd5df;
	--fota-input-border: #7a899b;
	--fota-link: #0957bb;
	--fota-action: #0957bb;
	--fota-action-hover: #042446;
	--fota-on-accent: #fff;
	--fota-hero: #042446;
	--fota-focus: #0957bb;
	--fota-error-text: #a3212c;
	--fota-error-surface: #fff0ee;
	--fota-success-text: #17653b;
	--fota-success-surface: #e6f4eb;
	--fota-warning-text: #755000;
	--fota-warning-surface: #fff8e6;
	--fota-info-surface: #edf5fb;
	--fota-artwork-surface: #fff;
	--fota-intro-surface: #f2f6fa;
	--fota-intro-text: #042446;
	--fota-intro-overlay: linear-gradient(90deg, #f2f6fa, rgba(242, 246, 250, .98) 46%, transparent 68%);
}
@media screen {
	:root[data-fota-appearance=dark] {
		color-scheme: dark;
		--fota-text: #e1e9f2;
		--fota-muted: #aebdd0;
		--fota-page: #101923;
		--fota-surface: #182432;
		--fota-surface-subtle: #202f40;
		--fota-border: #495c71;
		--fota-input-border: #8195ac;
		--fota-link: #8abbff;
		--fota-action: #1c58a6;
		--fota-action-hover: #245fac;
		--fota-hero: #102c49;
		--fota-focus: #f2c96e;
		--fota-error-text: #ffaaaa;
		--fota-error-surface: #3a222b;
		--fota-success-text: #86d6a8;
		--fota-success-surface: #173c30;
		--fota-warning-text: #efca7a;
		--fota-warning-surface: #382f1d;
		--fota-info-surface: #1a3047;
		--fota-intro-surface: #102c49;
		--fota-intro-text: #fff;
		--fota-intro-overlay: linear-gradient(90deg, rgba(4, 36, 70, .96), rgba(4, 36, 70, .88) 38%, transparent 65%);
	}
}
.fota-appearance { display: grid; gap: .1rem; flex-shrink: 0; }
.fota-appearance[hidden] { display: none; }
.fota-appearance label { font-size: .75rem; font-weight: 600; line-height: 1.25; color: var(--fota-muted); }
.fota-appearance select { font: inherit; font-size: .875rem; min-height: 44px; width: 6.25rem; padding: .4rem; border: 1px solid var(--fota-input-border); border-radius: .35rem; background: var(--fota-surface); color: var(--fota-text); }
.fota-appearance select:focus-visible { outline: 3px solid var(--fota-focus); outline-offset: 3px; }
/* Native controls inherit the chosen palette even outside a component form. */
:where(.fota-app-shell, body.login) :where(input, select, textarea, button) { color: var(--fota-text); background-color: var(--fota-surface); accent-color: var(--fota-link); }
:where(.fota-app-shell, body.login) :where(input, select, textarea)::placeholder { color: var(--fota-muted); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* Core password recovery is deliberately themed without changing wp-admin. */
body.login { background: var(--fota-page); color: var(--fota-text); }
body.login #login form, body.login #login .message, body.login #login .notice, body.login #login #login_error { background: var(--fota-surface); color: var(--fota-text); border-color: var(--fota-input-border); }
body.login #login :is(a, .button-link, .button-secondary), body.login #backtoblog a, body.login #nav a { color: var(--fota-link); }
body.login #login .button-primary { color: var(--fota-on-accent); background: var(--fota-action); }
body.login #login .input { color: var(--fota-text); background: var(--fota-surface); border-color: var(--fota-input-border); }
body.login #login h1 a { background-color: transparent; }
body.login > .fota-appearance { width: min(400px, calc(100% - 32px)); margin: 1rem auto; }
@media print { .fota-appearance { display: none; } }

/* The glyph depicts the next action, not the active mode. */
.fota-appearance-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-width: 44px; flex: 0 0 44px; padding: 10px; border: 1px solid var(--fota-input-border); border-radius: .5rem; background: var(--fota-surface); color: var(--fota-text); cursor: pointer; }
.fota-appearance-toggle[hidden] { display: none; }
.fota-appearance-toggle:hover { background: var(--fota-surface-subtle); }
.fota-appearance-toggle svg { width: 22px; height: 22px; flex-shrink: 0; }
.fota-appearance-toggle .fota-appearance-toggle__sun { display: none; }
:root[data-fota-appearance=dark] .fota-appearance-toggle__moon { display: none; }
:root[data-fota-appearance=dark] .fota-appearance-toggle__sun { display: block; }
.fota-appearance-toggle:focus-visible { outline: 3px solid var(--fota-focus); outline-offset: 3px; }
@media print { .fota-appearance-toggle { display: none; } }