/*
 * CILI: the light and dark modes of the site (ADR-0045; cili/theme-mode.php, assets/js/theme-mode.js).
 *
 * The colours of the two modes are the generated tokens' (design-tokens.css, design-tokens-dark.css): the system's scheme
 * unless `data-theme` on <html> says "light" or "dark", which the member's choice prints. What this sheet adds is what a
 * colour cannot say:
 * - the modes' aliases, `--lcr-mode-*`: the value a role has in the mode in use, kept under a name that a stage scope
 *   (below) leaves alone;
 * - the stage (ADR-0045 D4, the owner's O-1): the footer's body, the artists' page and the artwork lightbox stay dark in
 *   both modes. Their rules were written with the ink roles as the ground and the on-ink roles as the text; inside a stage
 *   scope those roles are given the stage ones (`stage`, `on-stage`, `on-stage-muted`, `stage-raised`, and the focus ring
 *   `focus-on-stage`), so the same rules draw the same dark sections in both modes. The parts of such a section that show
 *   the app (the phone's screens) go back to the mode's values;
 * - the logos (D6): the site's logo in the light mode, the owner's white file in the dark mode and on the stage;
 * - the switch of the headers and the Appearance setting of the account.
 * Every colour is a token; the rules that tell the mode apart repeat the generated sheet's three selectors, in its order.
 */

/* ------------------------------------------------------------------------------------------- the modes' aliases */

html:root {
	--lcr-mode-ink: var(--lcr-color-ink);
	--lcr-mode-on-ink: var(--lcr-color-on-ink);
	--lcr-mode-on-ink-muted: var(--lcr-color-on-ink-muted);
	--lcr-mode-ink-raised: var(--lcr-color-ink-raised);
	--lcr-mode-focus: var(--lcr-color-focus);
}

/* ------------------------------------------------------------------------------------------- the stage */

html body :is(.lcr-footer-body, .lcr-stage-scope, .pswp),
html body.lcr-landing,
html body:not(.author) .ulz-author-cover .ulz--cover {
	--lcr-color-ink: var(--lcr-color-stage);
	--lcr-color-on-ink: var(--lcr-color-on-stage);
	--lcr-color-on-ink-muted: var(--lcr-color-on-stage-muted);
	--lcr-color-ink-raised: var(--lcr-color-stage-raised);
	--lcr-color-focus: var(--lcr-color-focus-on-stage);
}

/* The account dashboard's cover (Heilz's: the ink, or the member's picture under a veil, with white text; the artist's own page
   draws a light panel, layout-artist.css): dark in both modes, its avatar's disc and its button the mode's light pair. */
html body:not(.author) .ulz-author-cover .ulz--cover:not(.ulz--has-cover) {
	background-color: var(--lcr-color-ink); /* the stage's, inside the scope */
}

html body:not(.author) .ulz-author-cover .ulz--cover {
	color: var(--lcr-color-on-ink);
}

html body:not(.author) .ulz-author-cover .ulz--cover .ulz-button.ulz--white {
	background-color: var(--lcr-color-on-ink);
	color: var(--lcr-color-ink);
}

html body .ulz-author-cover .ulz--cover-avatar {
	background-color: var(--lcr-color-background);
	color: var(--lcr-color-ink);
}

/* The app drawn on the artists' page (the phone's screens, the tiles that show the app): the mode's own values again. */
html body .lcr-promote :is(.lcr-promote-phone-screen, .lcr-promote-tile--app) {
	--lcr-color-ink: var(--lcr-mode-ink);
	--lcr-color-on-ink: var(--lcr-mode-on-ink);
	--lcr-color-on-ink-muted: var(--lcr-mode-on-ink-muted);
	--lcr-color-ink-raised: var(--lcr-mode-ink-raised);
	--lcr-color-focus: var(--lcr-mode-focus);
}

/* ------------------------------------------------------------------------------------------- the logos */

/* The logo of the light mode (the site's, dark on a light ground) and the owner's white file of the dark mode: both are
   printed (cili_logo()), one is shown, so there is no flash and no filter. The stage shows the white file alone. */
html body .lcr-logo--dark {
	display: none !important; /* the headers' own rules for their logo's `img` are heavier than this */
}

@media (prefers-color-scheme: dark) {

	html:not([data-theme="light"]) body .lcr-logo--dark {
		display: block !important;
	}

	html:not([data-theme="light"]) body .lcr-logo--light {
		display: none !important;
	}
}

html[data-theme="dark"] body .lcr-logo--dark {
	display: block !important;
}

html[data-theme="dark"] body .lcr-logo--light {
	display: none !important;
}

/* ------------------------------------------------------------------------------------------- the switch */

/* A real button, the header's round icon button of the fill gray; the moon in the light mode, the sun in the dark one.
   Shown once the page is scripted (the head's script marks <html> `lcr-js`): without a script it would do nothing. */
html body .lcr-theme {
	display: none;
}

html.lcr-js body .lcr-theme {
	display: flex;
	align-items: center;
}

html body .lcr-theme-switch {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--lcr-size-control);
	height: var(--lcr-size-control);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--lcr-radius-pill);
	background-color: var(--lcr-color-fill);
	box-shadow: none;
	color: var(--lcr-color-ink);
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

html body .ulz-mobile-header .lcr-theme-switch {
	width: var(--lcr-size-icon-button);
	height: var(--lcr-size-icon-button);
}

html body .lcr-theme-switch:hover {
	background-color: var(--lcr-color-divider);
	color: var(--lcr-color-ink);
}

html body .lcr-theme-switch .lcr-icon {
	width: var(--lcr-size-icon);
	height: var(--lcr-size-icon);
}

html body .lcr-theme-icon {
	display: flex;
}

html body .lcr-theme-icon--sun {
	display: none;
}

@media (prefers-color-scheme: dark) {

	html:not([data-theme="light"]) body .lcr-theme-icon--sun {
		display: flex;
	}

	html:not([data-theme="light"]) body .lcr-theme-icon--moon {
		display: none;
	}
}

html[data-theme="dark"] body .lcr-theme-icon--sun {
	display: flex;
}

html[data-theme="dark"] body .lcr-theme-icon--moon {
	display: none;
}

/* Beside the bell on a phone: the header's round buttons are 44 wide with 4 between them. */
html body .ulz-mobile-header .lcr-theme {
	margin: 0;
}

/* ------------------------------------------------------------------------------------------- the account's Appearance */

html body .lcr-appearance {
	margin-top: var(--lcr-space-28);
	padding-top: var(--lcr-space-20);
	border-top: var(--lcr-size-hairline) solid var(--lcr-color-divider);
}

html body .lcr-appearance-note {
	margin: 0 0 var(--lcr-space-12);
	color: var(--lcr-color-muted);
}

html body .lcr-appearance-options {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lcr-space-8);
}

html body .lcr-appearance-option {
	display: inline-flex;
	align-items: center;
	gap: var(--lcr-space-8);
	min-height: var(--lcr-size-control);
	padding: 0 var(--lcr-space-16);
	border-radius: var(--lcr-radius-pill);
	box-shadow: inset 0 0 0 var(--lcr-size-hairline) var(--lcr-color-outline);
	color: var(--lcr-color-ink);
	font-weight: var(--lcr-font-weight-medium);
	cursor: pointer;
}

html body .lcr-appearance-option:has(input:checked) {
	background-color: var(--lcr-color-ink);
	box-shadow: none;
	color: var(--lcr-color-on-ink);
}

html body .lcr-appearance-option input {
	margin: 0;
	accent-color: var(--lcr-color-ink);
}

html body .lcr-appearance-option:has(input:checked) input {
	accent-color: var(--lcr-color-on-ink);
	outline-color: var(--lcr-color-on-ink) !important; /* the frame's ink ring (layout-frame.css) would vanish on the ink pill */
}