/*
 * Simple Live Auction: the design tokens (CSS custom properties), shared by the admin and the
 * front-end stylesheets. Defaults are defined once on :where(:root) (zero specificity), so a theme
 * can override any token on :root, `.slauction` or any ancestor of the plugin markup. On the
 * front-end, Settings -> Appearance and the `slauction_style_vars` filter set tokens on the
 * roots (every one has the class `.slauction-root`: the auction wrapper and the registration dialog). The README "Styling" section documents all of them.
 *
 * Tokens WITHOUT a literal default here fall back at the point of use, so changing the one they
 * derive from also changes them (set them only when you want a different value):
 *   --slauction-surface            = --slauction-bg           card/dialog background
 *   --slauction-surface-2          = --slauction-bg-muted     inputs-adjacent rows, secondary buttons, image box
 *   --slauction-success            = --slauction-ok           open/leading colour
 *   --slauction-button-bg          = --slauction-accent       primary button background and border
 *   --slauction-button-text        = --slauction-accent-text  primary button text
 *   --slauction-button-secondary-bg   = --slauction-surface-2
 *   --slauction-button-secondary-text = --slauction-text
 *   --slauction-input-bg           = --slauction-surface
 *   --slauction-input-text         = inherit (the card's text colour)
 *   --slauction-input-border       = --slauction-border
 *   --slauction-closed-bg / -closed-text = text-muted / on-status   solid "closed" card badge
 *   --slauction-font               = inherit (the theme's font)
 *   --slauction-heading-font       = inherit (the theme's font)
 * --slauction-bg, -bg-muted and -ok are the original names and keep working.
 */

:where(:root) {
	/* Colours */
	--slauction-accent: #d6336c;
	--slauction-accent-text: #fff;
	--slauction-bg: #fff;
	--slauction-bg-muted: #f4f4f5;
	--slauction-text: #1f2328;
	--slauction-text-muted: #5b6168;
	--slauction-border: #d4d7db;
	--slauction-ok: #1a7f37;
	--slauction-warn: #b35900;
	--slauction-danger: #c62828;
	--slauction-on-status: #fff; /* text on solid success/warn/danger/muted badges and notices */

	/* Shape and shadow */
	--slauction-radius: 0.75rem;
	--slauction-radius-small: 0.5rem;
	--slauction-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	--slauction-shadow-hover: 0 4px 14px rgba(0, 0, 0, 0.15);
	--slauction-shadow-dialog: 0 10px 40px rgba(0, 0, 0, 0.3);
	--slauction-overlay: rgba(0, 0, 0, 0.55); /* behind the registration dialog */

	/* Spacing and sizes */
	--slauction-gap: 1rem;
	--slauction-tap: 3rem;
	--slauction-card-min: 18rem; /* minimum card width in the lot grid */
	--slauction-compact-card-min: 12rem; /* minimum card width in the compact overview grid */
	--slauction-compact-photo-ratio: 3 / 2; /* photo box of a compact card in the grid */
	--slauction-compact-thumb: 5.5rem; /* thumbnail width of a compact card in the phone list */
	--slauction-summary-offset: 0.75rem; /* gap between the sticky "you're bidding on" line and the screen's bottom edge */
	--slauction-dialog-width: 32rem;
	--slauction-detail-max-width: 70rem;
	--slauction-title-size: 1.2em; /* lot title on a card */
	--slauction-title-size-detail: 1.5em; /* lot title on the lot page */
	--slauction-amount-size: 1.5em;

	/* Photo viewer */
	--slauction-lightbox-bg: #08080a;
	--slauction-lightbox-text: #fff;
	--slauction-lightbox-overlay: rgba(0, 0, 0, 0.9);
	--slauction-control-bg: rgba(0, 0, 0, 0.55); /* gallery arrows */
	--slauction-control-bg-subtle: rgba(255, 255, 255, 0.18); /* lightbox close button */
	--slauction-control-text: #fff;

	/* The one badge palette (badges.css): pastel pill background/text pairs. */
	--slauction-badge-padding: 3px 10px;
	--slauction-badge-radius: 999px;
	--slauction-badge-size: 12px;
	--slauction-badge-open-bg: #d1fae5;
	--slauction-badge-open-fg: #065f46;
	--slauction-badge-warn-bg: #fef3c7;
	--slauction-badge-warn-fg: #92400e;
	--slauction-badge-neutral-bg: #f0f0f1;
	--slauction-badge-neutral-fg: #50575e;
	--slauction-badge-danger-bg: #fee2e2;
	--slauction-badge-danger-fg: #991b1b;
	--slauction-badge-info-bg: #e5d9f6;
	--slauction-badge-info-fg: #4a2a85;
}

/* Front-end only: follows the page's colour scheme (the "Automatic" preset). Admin stays light. */
@media (prefers-color-scheme: dark) {
	:where(.slauction-root, .slauction, .slauction-dialog) {
		--slauction-bg: #1b1d21;
		--slauction-bg-muted: #272a30;
		--slauction-text: #eceef1;
		--slauction-text-muted: #a4aab2;
		--slauction-border: #3b4048;
		--slauction-ok: #56d364;
		--slauction-warn: #f0a24a;
		--slauction-danger: #ff7b72;
		--slauction-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);

		/* Status badges: dark tinted pills, dark text on the solid card badges (see Appearance::dark_badges). */
		--slauction-on-status: #0d0e10;
		--slauction-closed-bg: color-mix(in srgb, var(--slauction-text) 22%, var(--slauction-surface, var(--slauction-bg)));
		--slauction-closed-text: var(--slauction-text);
		--slauction-badge-open-bg: color-mix(in srgb, var(--slauction-success, var(--slauction-ok)) 22%, var(--slauction-surface, var(--slauction-bg)));
		--slauction-badge-open-fg: var(--slauction-success, var(--slauction-ok));
		--slauction-badge-warn-bg: color-mix(in srgb, var(--slauction-warn) 22%, var(--slauction-surface, var(--slauction-bg)));
		--slauction-badge-warn-fg: var(--slauction-warn);
		--slauction-badge-neutral-bg: color-mix(in srgb, var(--slauction-text) 18%, var(--slauction-surface, var(--slauction-bg)));
		--slauction-badge-neutral-fg: var(--slauction-text);
		--slauction-badge-danger-bg: color-mix(in srgb, var(--slauction-danger) 22%, var(--slauction-surface, var(--slauction-bg)));
		--slauction-badge-danger-fg: var(--slauction-danger);
		--slauction-badge-info-bg: color-mix(in srgb, #b79af0 24%, var(--slauction-surface, var(--slauction-bg)));
		--slauction-badge-info-fg: #d3c2f7;
	}
}