/**
 * Dark mode.
 *
 * The palette in theme.json is role-ambiguous — `primary` is both body text and
 * the header background, `base` is both card surfaces and the text on that
 * header — so flipping the presets wholesale would invert the header too.
 * Instead a semantic layer sits on top of the presets, and only that flips.
 *
 * Why the presets are re-declared rather than the elements repainted:
 * WordPress prints every preset class with !important —
 *   .has-base-background-color { background-color: var(--wp--preset--color--base) !important }
 * — so a rule of ours can never win by specificity, and answering with
 * !important is banned here (it would only move the fight one round on).
 * Redefining the custom property that declaration reads is the lever the
 * cascade does offer, and it reaches every block that uses the preset instead
 * of a list of selectors somebody has to keep current. That is what the
 * `main { --wp--preset--color--*: … }` block below does.
 *
 * The flip is scoped to `main`, because the header and footer invert the roles:
 * they paint `primary` and write on it with `base`.
 *
 * Every rule here is unconditional and reads a token, and in light mode each
 * token resolves back to the preset it replaces — so the light page renders
 * byte-identically and only the token values switch. That is also why the
 * three states below need no duplicated rule bodies:
 *   :root                       -> light (the default, always defined)
 *   prefers-color-scheme: dark  -> dark, unless the visitor chose light
 *   [data-theme="dark"|"light"] -> the visitor's explicit choice wins
 */

:root {
	--auron-page-bg: var(--wp--preset--color--surface, #E6E2DC);
	--auron-page-fg: var(--wp--preset--color--primary, #0C0C0C);
	--auron-band-bg: var(--wp--preset--color--surface, #E6E2DC);
	--auron-card-bg: var(--wp--preset--color--base, #FFFFFF);
	--auron-card-fg: var(--wp--preset--color--primary, #0C0C0C);
	--auron-muted-bg: var(--wp--preset--color--base-2, #F8F9FA);
	--auron-muted-fg: var(--wp--preset--color--neutral, #64748B);
	--auron-subtle-fg: var(--wp--preset--color--graphite, #4A4A4A);
	--auron-link: var(--wp--preset--color--secondary, #2C2C2C);
	--auron-link-hover: var(--wp--preset--color--accent, #BEA98E);
	--auron-rule: var(--wp--preset--color--border, #D6D3D1);

	/* Cut-out product photography is shot on white — on a dark plate the
	   silhouettes read as holes, so the plate stays light in both schemes. */
	--auron-plate: var(--wp--preset--color--base, #FFFFFF);

	/*
	 * Fixed in both schemes. Text on a dark fill (buttons, badges) and text over
	 * photography used to borrow `base` and `surface`; those two flip inside the
	 * content now, so the "always light" role gets tokens of its own.
	 */
	--auron-on-dark: #FFFFFF;
	--auron-on-dark-dim: #E6E2DC;
	--auron-on-accent: #0C0C0C;
	--auron-accent-text: #75603F; /* gold that reads as text on light surfaces (6:1 on white) */
	--auron-price-gold: #9C7A2B; /* headline price: 4:1 on white, enough for large bold text */

	/* Add-to-cart buttons: the black fill of the light scheme. */
	--auron-cta-bg: var(--wp--preset--color--primary, #0C0C0C);
	--auron-cta-fg: var(--auron-on-dark);
	--auron-cta-hover-bg: var(--wp--preset--color--secondary, #2C2C2C);
	--auron-cta-hover-fg: var(--wp--preset--color--accent, #BEA98E);

	/* The cookie consent plugin (BeArt Cookie Consent) styles itself from these
	   names. Pointing them at this theme's tokens gives the banner the shop's
	   colours in both schemes — the dark-mode overrides below flow through. */
	--beart-accent: var(--wp--preset--color--accent, #BEA98E);
	--beart-accent-ink: var(--auron-on-accent);
	--beart-accent-text: var(--auron-accent-text);
	--beart-on-surface: var(--auron-card-fg);
	--beart-on-surface-soft: var(--auron-subtle-fg);
	--beart-on-surface-strong: var(--auron-page-fg);
	--beart-panel-bg: var(--auron-card-bg);
	--beart-surface-raised: var(--auron-card-bg);
	--beart-line: var(--auron-rule);
	--beart-line-strong: var(--auron-subtle-fg);
	--beart-mark-soft: var(--auron-muted-bg);
	--beart-shadow-panel: 0 18px 48px rgb(0 0 0 / 0.18);

	/* Gain/loss hues. BullionCore's chart and ticker read these; the light
	   green and red are too dark to carry on a near-black plot. */
	--auron-up: #1B8A4B;
	--auron-down: #C0392B;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--auron-accent-text: var(--wp--preset--color--accent, #BEA98E);
		--auron-price-gold: var(--wp--preset--color--accent, #BEA98E);
		--auron-cta-bg: var(--wp--preset--color--accent, #BEA98E);
		--auron-cta-fg: #0C0C0C;
		--auron-cta-hover-bg: #D4C2A8;
		--auron-cta-hover-fg: #0C0C0C;
		--auron-page-bg: #121212;
		--auron-page-fg: #EDEAE5;
		--auron-band-bg: #191919;
		--auron-card-bg: #1C1C1C;
		--auron-card-fg: #EDEAE5;
		--auron-muted-bg: #232323;
		--auron-muted-fg: #A8B0BE;
		--auron-subtle-fg: #B9B3AA;
		--auron-link: #E3DED6;
		--auron-rule: #3A3A3A;
		--auron-plate: #F4F2EF;
		--auron-up: #3FBF6F;
		--auron-down: #E5645A;
	}
}

:root[data-theme="dark"] {
	--auron-accent-text: var(--wp--preset--color--accent, #BEA98E);
	--auron-price-gold: var(--wp--preset--color--accent, #BEA98E);
	--auron-cta-bg: var(--wp--preset--color--accent, #BEA98E);
	--auron-cta-fg: #0C0C0C;
	--auron-cta-hover-bg: #D4C2A8;
	--auron-cta-hover-fg: #0C0C0C;
	--auron-page-bg: #121212;
	--auron-page-fg: #EDEAE5;
	--auron-band-bg: #191919;
	--auron-card-bg: #1C1C1C;
	--auron-card-fg: #EDEAE5;
	--auron-muted-bg: #232323;
	--auron-muted-fg: #A8B0BE;
	--auron-subtle-fg: #B9B3AA;
	--auron-link: #E3DED6;
	--auron-rule: #3A3A3A;
	--auron-plate: #F4F2EF;
	--auron-up: #3FBF6F;
	--auron-down: #E5645A;
}

body {
	background-color: var(--auron-page-bg);
	color: var(--auron-page-fg);
}

/*
 * The content zone runs on flipped presets: section bands, cards, rules and
 * muted text all follow the scheme without a single element being named.
 *
 * `primary` is deliberately absent. Inside the content it is a *fill* — the
 * dark add-to-cart button, the category CTA — and the button label on top of
 * it is `--auron-on-dark`, so flipping `primary` would bleach both.
 */
main {
	--wp--preset--color--base: var(--auron-card-bg);
	--wp--preset--color--base-2: var(--auron-muted-bg);
	--wp--preset--color--surface: var(--auron-band-bg);
	--wp--preset--color--border: var(--auron-rule);
	--wp--preset--color--neutral: var(--auron-muted-fg);
	--wp--preset--color--graphite: var(--auron-subtle-fg);
}

/*
 * The navigation strip is the one part of the header that reads as a surface
 * rather than as branding: it paints `base` and writes on it with `primary`.
 * Both are re-declared on the strip itself, so the black masthead above and the
 * gold badge inside it keep their own colours.
 */
.auron-navbar {
	--wp--preset--color--base: var(--auron-card-bg);
	--wp--preset--color--primary: var(--auron-card-fg);
	--wp--preset--color--border: var(--auron-rule);
}

/* Headings and titles are written in `primary`, which stays put so the buttons
   keep their fill — so they are the one text role that needs naming. */
/* theme.json writes every heading in `primary` from `:root :where(h1…h6)`, so
   the override needs one class in the selector to outrank it — `.wp-site-blocks`
   is the block-theme wrapper and is always there, JavaScript or not. */
.wp-site-blocks main :is( h1, h2, h3, h4, h5, h6 ),
main .wp-block-post-title,
main .wp-block-query-title,
main .woocommerce-loop-product__title {
	color: var(--auron-page-fg);
}

/* Content links are `secondary` — near-black, unreadable on a dark page. The
   preset itself is left alone: it is a button fill on hover elsewhere, and
   links drawn as buttons keep their own label colour (see slider.css, which
   outranks this rule for the copy sitting on the hero photograph). */
main a:not( .wp-element-button ):not( .wp-block-button__link ) {
	color: var(--auron-link);
}

main a:not( .wp-element-button ):not( .wp-block-button__link ):hover,
main a:not( .wp-element-button ):not( .wp-block-button__link ):focus-visible {
	color: var(--auron-link-hover);
}

/* BullionCore's price chart draws the curve and the delta from its own
   up/down tokens; hand it the pair that suits the current scheme. */
.bc-chart {
	--bc-up: var(--auron-up);
	--bc-down: var(--auron-down);
}

/* WooCommerce paints the quantity stepper white and lets the +/- glyphs
   inherit, which leaves a light glyph on a light box once the page turns dark.
   The white comes from a selector of theirs six classes deep
   (div.wc-block-add-to-cart-form--stepper form.cart div.…quantity), so the
   override matches that weight instead of reaching for !important. */
main .wc-block-components-quantity-selector,
main .wc-block-components-quantity-selector__input,
main .wc-block-components-quantity-selector__button,
.wp-site-blocks div.wc-block-add-to-cart-form.wc-block-add-to-cart-form--stepper form.cart div.wc-block-components-quantity-selector.quantity {
	background-color: var(--auron-card-bg);
	color: var(--auron-card-fg);
	border-color: var(--auron-rule);
}

/*
 * `base` used as a *text* colour means "white on a dark fill": a gradient hero
 * band, a dark section. Inside the content `base` is now a surface and flips
 * dark, which would leave that text unreadable — so on those elements the
 * preset is pointed back at the fixed light ink. Same lever as above: the
 * element's own !important declaration reads the variable we redefine here.
 */
main .has-base-color {
	--wp--preset--color--base: var(--auron-on-dark);
}

main hr,
main .wp-block-separator,
main table th,
main table td {
	border-color: var(--auron-rule);
}

.wc-block-components-product-image,
.woocommerce-product-gallery__image,
.wc-block-product-gallery-large-image__container,
.wc-block-product-gallery-large-image__wrapper,
.auron-category-card .wp-block-image {
	background-color: var(--auron-plate);
}

@media (prefers-reduced-motion: no-preference) {
	body {
		transition: background-color 0.2s ease, color 0.2s ease;
	}
}