/**
 * Seyleniya - dark appearance.
 *
 * This file defines no colours. Every value here is a role reassignment
 * pointing at tokens already declared in tokens.css, which stays the single
 * home for what the colours actually are.
 *
 * That is only possible because the rest of the theme was converted to roles
 * first: 56 background and text declarations that named a brand colour
 * directly now name a role instead. Without that step, remapping would have
 * turned the footer and the announcement bar light, since --sy-black serves as
 * both ink and as a dark ground depending on where it is used.
 *
 * Loaded only when dark mode is enabled in Seyleniya > Appearance.
 *
 * Applies when:
 *   [data-sy-theme="dark"]                         explicit choice
 *   prefers-color-scheme: dark, unless overridden  device default
 */

/* ------------------------------------------------------------------
 * The remap
 * --------------------------------------------------------------- */

:root[data-sy-theme="dark"] {
	/* Grounds. ground-inverse deliberately does NOT become light: the footer,
	 * the announcement bar and the craft section all use it, and a light band
	 * across a dark page reads as a rendering fault rather than a design. It
	 * becomes the deepest surface instead, so the rhythm survives inverted. */
	--sy-ground-base: var(--sy-dark-base);
	--sy-ground-raised: var(--sy-dark-raised);
	--sy-ground-inverse: var(--sy-black);
	--sy-ground-inverse-text: var(--sy-cream);

	/* Ink and accent. */
	--sy-text: var(--sy-cream);
	--sy-text-inverse: var(--sy-dark-base);
	--sy-accent: var(--sy-dark-accent);

	/* In light mode the accent is darkened so white text clears AA on it. In
	 * dark mode the accent is already light, so "strong" means the light one
	 * and the text on it goes dark - which --sy-text-inverse now handles. */
	--sy-accent-strong: var(--sy-dark-accent);

	--sy-bg: var(--sy-dark-base);
	--sy-bg-contrast: var(--sy-dark-raised);

	/* Channel triplets, so every rgba() shade in tokens.css section 2 follows.
	 * Miss these and the surfaces go dark while all their tints and hairlines
	 * stay on the light values - the failure mode is subtle and everywhere. */
	--sy-taupe-rgb: var(--sy-dark-accent-rgb);
	--sy-cream-rgb: var(--sy-dark-base-rgb);
	--sy-white-rgb: var(--sy-dark-raised-rgb);
	--sy-black-rgb: 243, 230, 214;

	/* Hairlines need to be lighter than the ground, not darker. */
	--sy-rule: rgba(var(--sy-dark-accent-rgb), 0.28);
	--sy-rule-strong: rgba(var(--sy-dark-accent-rgb), 0.46);

	/* The muted-text and hairline scales are built from black at opacity,
	 * which is invisible on a dark ground. Rebuild them from cream. */
	--sy-ink-04: rgba(243, 230, 214, 0.05);
	--sy-ink-08: rgba(243, 230, 214, 0.09);
	--sy-ink-16: rgba(243, 230, 214, 0.16);
	--sy-ink-40: rgba(243, 230, 214, 0.44);
	--sy-ink-64: rgba(243, 230, 214, 0.68);
	--sy-ink-80: rgba(243, 230, 214, 0.84);

	--sy-cream-56: rgba(243, 230, 214, 0.62);
	--sy-white-64: rgba(var(--sy-dark-raised-rgb), 0.64);
	--sy-white-80: rgba(var(--sy-dark-raised-rgb), 0.82);

	--sy-focus: var(--sy-cream);

	/* Shadows do almost nothing on a dark ground; a light hairline reads
	 * better than a black blur nobody can see. */
	--sy-shadow-soft: 0 0 0 1px rgba(var(--sy-dark-accent-rgb), 0.14);
	--sy-shadow-lift: 0 0 0 1px rgba(var(--sy-dark-accent-rgb), 0.26);

	color-scheme: dark;
}

/* Same remap when the device asks for dark and nobody has chosen otherwise. */
@media (prefers-color-scheme: dark) {
	:root:not([data-sy-theme="light"]) {
		--sy-ground-base: var(--sy-dark-base);
		--sy-ground-raised: var(--sy-dark-raised);
		--sy-ground-inverse: var(--sy-black);
		--sy-ground-inverse-text: var(--sy-cream);

		--sy-text: var(--sy-cream);
		--sy-text-inverse: var(--sy-dark-base);
		--sy-accent: var(--sy-dark-accent);
		--sy-accent-strong: var(--sy-dark-accent);

		--sy-bg: var(--sy-dark-base);
		--sy-bg-contrast: var(--sy-dark-raised);

		--sy-taupe-rgb: var(--sy-dark-accent-rgb);
		--sy-cream-rgb: var(--sy-dark-base-rgb);
		--sy-white-rgb: var(--sy-dark-raised-rgb);
		--sy-black-rgb: 243, 230, 214;

		--sy-rule: rgba(var(--sy-dark-accent-rgb), 0.28);
		--sy-rule-strong: rgba(var(--sy-dark-accent-rgb), 0.46);

		--sy-ink-04: rgba(243, 230, 214, 0.05);
		--sy-ink-08: rgba(243, 230, 214, 0.09);
		--sy-ink-16: rgba(243, 230, 214, 0.16);
		--sy-ink-40: rgba(243, 230, 214, 0.44);
		--sy-ink-64: rgba(243, 230, 214, 0.68);
		--sy-ink-80: rgba(243, 230, 214, 0.84);

		--sy-cream-56: rgba(243, 230, 214, 0.62);
		--sy-white-64: rgba(var(--sy-dark-raised-rgb), 0.64);
		--sy-white-80: rgba(var(--sy-dark-raised-rgb), 0.82);

		--sy-focus: var(--sy-cream);
		--sy-shadow-soft: 0 0 0 1px rgba(var(--sy-dark-accent-rgb), 0.14);
		--sy-shadow-lift: 0 0 0 1px rgba(var(--sy-dark-accent-rgb), 0.26);

		color-scheme: dark;
	}
}

/* ------------------------------------------------------------------
 * The toggle
 * --------------------------------------------------------------- */

.sy-appearance {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background: none;
	border: 1px solid var(--sy-rule-strong);
	border-radius: var(--sy-radius-pill);
	color: var(--sy-text);
	cursor: pointer;
	transition: border-color var(--sy-duration) var(--sy-ease),
		background-color var(--sy-duration) var(--sy-ease);
}

.sy-appearance:hover {
	border-color: var(--sy-accent);
	background-color: var(--sy-ink-04);
}

.sy-appearance svg {
	width: 1.05rem;
	height: 1.05rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
}

/* One button, two icons. Which one shows is decided by the theme, so the
 * button always offers the mode you are NOT in. */
.sy-appearance__moon { display: block; }
.sy-appearance__sun { display: none; }

:root[data-sy-theme="dark"] .sy-appearance__moon { display: none; }
:root[data-sy-theme="dark"] .sy-appearance__sun { display: block; }

@media (prefers-color-scheme: dark) {
	:root:not([data-sy-theme="light"]) .sy-appearance__moon { display: none; }
	:root:not([data-sy-theme="light"]) .sy-appearance__sun { display: block; }
}

/* ------------------------------------------------------------------
 * Things that need more than a token swap
 * --------------------------------------------------------------- */

/* The hero scrim is a cream gradient over a photograph. On a dark page it has
 * to become a dark scrim, or the hero stays a bright band. */
:root[data-sy-theme="dark"] .sy-hero__media::after {
	background: linear-gradient(
		to right,
		rgba(var(--sy-dark-base-rgb), 0.94) 0%,
		rgba(var(--sy-dark-base-rgb), 0.82) 42%,
		rgba(var(--sy-dark-base-rgb), 0.34) 100%
	);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-sy-theme="light"]) .sy-hero__media::after {
		background: linear-gradient(
			to right,
			rgba(var(--sy-dark-base-rgb), 0.94) 0%,
			rgba(var(--sy-dark-base-rgb), 0.82) 42%,
			rgba(var(--sy-dark-base-rgb), 0.34) 100%
		);
	}
}

/* Photographs are lit for a light page. A slight knock-back stops them
 * glaring, without the washed-out look of a heavy filter. */
:root[data-sy-theme="dark"] .sy-image:not(.sy-image--empty) {
	filter: brightness(0.92) saturate(0.96);
}