/*
 * Night mode = the TechSabado "Broadcast (dark)" theme: black ground,
 * white type, red and gold. Applies when the visitor picks it with the
 * rocker, or when their OS is dark and they have not picked Day.
 * Loaded on the front end only, so the editor always shows Day.
 */

:root[data-ts-mode="night"] {
	--wp--preset--color--putty: #000000;
	--wp--preset--color--surface: #121314;
	--wp--preset--color--surface-alt: #1a1b1c;
	--wp--preset--color--panel: #1c1c1b;
	--wp--preset--color--ink: #ffffff;
	--wp--preset--color--text: #dddddd;
	--wp--preset--color--text-muted: #b1b1b1;
	--wp--preset--color--line: #2a2a2a;
	--wp--preset--color--line-strong: #404040;
	--wp--preset--color--nav-bar: #212121;
	--ts-kicker: var(--wp--preset--color--gold);
	--ts-rule: #2a2a2a;
	--ts-key-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
	--ts-key-shadow-pressed: inset 0 2px 3px rgba(0, 0, 0, 0.7);
	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-ts-mode="day"]) {
		--wp--preset--color--putty: #000000;
		--wp--preset--color--surface: #121314;
		--wp--preset--color--surface-alt: #1a1b1c;
		--wp--preset--color--panel: #1c1c1b;
		--wp--preset--color--ink: #ffffff;
		--wp--preset--color--text: #dddddd;
		--wp--preset--color--text-muted: #b1b1b1;
		--wp--preset--color--line: #2a2a2a;
		--wp--preset--color--line-strong: #404040;
		--wp--preset--color--nav-bar: #212121;
		--ts-kicker: var(--wp--preset--color--gold);
		--ts-rule: #2a2a2a;
		--ts-key-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
		--ts-key-shadow-pressed: inset 0 2px 3px rgba(0, 0, 0, 0.7);
		color-scheme: dark;
	}
}

/* Rules that need more than a variable swap (JS always sets data-ts-mode). */
:root[data-ts-mode="night"] .ts-console__screen { box-shadow: inset 0 0 0 3px #1f1f1d, inset 0 10px 30px rgba(0, 0, 0, 0.7); border-color: #2a2a28; }
:root[data-ts-mode="night"] .ts-navbar { background: rgba(18, 19, 20, 0.88); }
:root[data-ts-mode="night"] .ts-utility__ch { background: var(--ts-red); color: #fff; }
:root[data-ts-mode="night"] .ts-retro::before,
:root[data-ts-mode="night"] .ts-retro::after { background: linear-gradient(135deg, #4a4a48, #1a1a19); }
:root[data-ts-mode="night"] .ts-spec > li { box-shadow: none; }
:root[data-ts-mode="night"] .ts-crt { background: #2a2926; border-color: #3a3935; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 30px 60px rgba(0, 0, 0, 0.8); }
:root[data-ts-mode="night"] .ts-crt__caption { color: #b1b1b1; background: repeating-linear-gradient(90deg, #555 0 2px, transparent 2px 6px) right 4px center / 120px 18px no-repeat; }
:root[data-ts-mode="night"] .ts-band { background: #0a0a0a; }

/* Smooth the switch; JS adds the class for 300ms. */
.ts-mode-shift, .ts-mode-shift * {
	transition: background-color 280ms ease, color 280ms ease, border-color 280ms ease !important;
}
@media (prefers-reduced-motion: reduce) {
	.ts-mode-shift, .ts-mode-shift * { transition: none !important; }
}