/* ════════════════════════════════════════════════════════════════════
   DARK THEME ("the press room at night") + THEME TOGGLE
   ════════════════════════════════════════════════════════════════════
   Loaded last on every page (inc/enqueue.php → tamrenk_style_chain();
   after woocommerce.css too, see tamrenk_dark_after_wc()). The head
   script (inc/setup.php, mirrored in every preview head) sets
   <html data-theme="light|dark"> before first paint; the toggle
   (assets/js/theme.js) switches and stores it.

   Concept: the page is the press table at night, printed in the brand's
   own ink. Paper objects stay paper: the hero proof sheet lies on the
   dark table like a proof on a light table, and the official logo sits on
   a paper chip with crop-mark ticks (there is no white logo; tokens.css).
   Overprint (--tr-overprint-blend) becomes screen on the table, so the
   plates add light instead of vanishing; on paper it stays multiply.

   How it works:
   1. Tokens: the semantic colour tokens are re-mapped under
      :root[data-theme="dark"]. --tr-color-ink is the "ink" role (text,
      lines, selected fills) and turns light; --tr-color-ink-deep and
      --tr-color-antrasit keep their "dark surface" role.
   2. Paper scope: .tr-sheet (the hero proof) restores the light values
      from the --tr-fixed-* tokens; the logo chips paint --tr-fixed-paper.
   3. Overrides: rules that pair an ink fill with hard-coded white text,
      or hard-code a light-only colour, are corrected below. Every
      override is prefixed with :where(:root[data-theme="dark"]), so it has
      the specificity of the rule it corrects and wins by load order only;
      component variants are restated after their base rule.

   Contrast (WCAG 2.2, measured on the dark tokens):
     text #ededeb: 14.5 on paper (brand ink), 15.6 on surface-soft, 12.6 on
       surface-sunken, 16.0 on ink-deep
     text-muted #a9adb4: 7.6 on paper, 8.1 soft, 6.6 sunken
     magenta-text #ff5cb5: 6.0 on paper, 6.5 soft, 5.2 sunken, 5.7 on tint
     white on magenta fill 4.54 · white on antrasit #3a3c42 11.0
     fixed ink on light fills (#ededeb) 14.5
     border-strong #80848c: 4.5 on paper, 3.9 on sunken (UI ≥ 3:1)
     focus #ff5cb5 on paper 6.0 · magenta fill vs paper 3.75
     success #5fd49a 9.2 · warning #f2b654 9.4 · danger #ff8a80 7.5 on
       paper; 8.4 / 8.6 / 7.2 on their own tints
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   THEME TOGGLE (both themes)
   Header: .tr-theme-toggle (44px icon button, tooltip = next action).
   Drawer: .tr-theme-switch (full-width row with a switch).
   Both are <button aria-pressed data-tr-theme-toggle>; name "Koyu tema".
   ════════════════════════════════════════════════════════════════════ */
.tr-theme-toggle__sun { display: none; }

[data-theme="dark"] .tr-theme-toggle__sun { display: block; }
[data-theme="dark"] .tr-theme-toggle .tr-theme-toggle__moon { display: none; }

.tr-theme-toggle.is-turning .tr-icon,
.tr-theme-switch.is-turning .tr-icon {
	animation: tr-theme-turn 360ms var(--tr-ease);
}

@keyframes tr-theme-turn {
	from { opacity: 0; rotate: -90deg; scale: 0.6; }
}

.tr-theme-toggle__tip {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 1;
	display: none; /* display, not visibility: never widens the page */
	padding: var(--tr-space-1) var(--tr-space-2);
	border-radius: var(--tr-radius-sm);
	background: var(--tr-color-ink);
	color: var(--tr-color-paper);
	font-size: var(--tr-text-caption);
	font-weight: var(--tr-weight-semibold);
	line-height: 1.3;
	white-space: nowrap;
	pointer-events: none;
}

@media (hover: hover) {
	.tr-theme-toggle:hover .tr-theme-toggle__tip { display: block; }
}

.tr-theme-toggle:focus-visible .tr-theme-toggle__tip { display: block; }

.tr-theme-switch {
	display: flex;
	align-items: center;
	gap: var(--tr-space-3);
	width: 100%;
	min-height: var(--tr-control-height);
	padding: 0 var(--tr-space-3) 0 var(--tr-space-4);
	border: 1px solid var(--tr-color-border-strong);
	border-radius: var(--tr-radius-sm);
	background: transparent;
	color: var(--tr-color-ink);
	font-size: var(--tr-text-button);
	font-weight: var(--tr-weight-semibold);
	text-align: left;
	transition: border-color var(--tr-transition-fast);
}

.tr-theme-switch:hover { border-color: var(--tr-color-ink); }

.tr-theme-switch__label { flex: 1; }

/* A square-cornered switch (controls are 4px, pills are for counters). */
.tr-theme-switch__track {
	position: relative;
	flex: none;
	width: 44px;
	height: 24px;
	border: 1.5px solid currentColor;
	border-radius: var(--tr-radius-sm);
	transition: background-color var(--tr-transition-fast), border-color var(--tr-transition-fast);
}

.tr-theme-switch__thumb {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 15px;
	height: 15px;
	border-radius: 2px;
	background: currentColor;
	transition: translate var(--tr-duration-base) var(--tr-ease);
}

.tr-theme-switch[aria-pressed="true"] .tr-theme-switch__track {
	border-color: var(--tr-color-magenta);
	background: var(--tr-color-magenta);
}

.tr-theme-switch[aria-pressed="true"] .tr-theme-switch__thumb {
	translate: 20px 0;
	background: var(--tr-fixed-paper);
}

/* Without JS the toggle cannot work: hide it. */
.no-js .tr-theme-toggle,
.no-js .tr-theme-switch { display: none; }

/* One frame without transitions while the theme swaps (theme.js). */
.tr-theme-switching,
.tr-theme-switching *,
.tr-theme-switching *::before,
.tr-theme-switching *::after {
	transition: none !important;
}

/* ════════════════════════════════════════════════════════════════════
   1. DARK TOKENS
   ════════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
	color-scheme: dark;

	/* Ink role (text, lines, selected fills): light on the dark table. */
	--tr-color-ink: #ededeb;
	--tr-color-text: #ededeb;
	--tr-color-text-muted: #a9adb4;

	/* Surfaces: the page is printed in the brand ink; soft sections are the
	   deeper table, media wells are lifted. */
	--tr-color-paper: var(--tr-fixed-ink);
	--tr-color-surface: var(--tr-fixed-ink);
	--tr-color-surface-soft: #141517;
	--tr-color-surface-sunken: #26282c;
	--tr-color-ink-deep: #111214;        /* footer, process band, dark heads */
	--tr-color-antrasit: #3a3c42;        /* secondary buttons: lifted graphite */

	--tr-color-border: #35373c;          /* decorative dividers */
	--tr-color-border-strong: #80848c;   /* form controls */

	/* Magenta: fills keep the logo magenta (white text 4.54); text and
	   links use the on-dark magenta. */
	--tr-color-magenta-text: var(--tr-color-magenta-on-dark);
	--tr-color-magenta-tint: #3b1229;
	--tr-color-focus: var(--tr-color-magenta-on-dark);

	--tr-color-success: #5fd49a;
	--tr-color-success-tint: #12291d;
	--tr-color-warning: #f2b654;
	--tr-color-warning-tint: #2e2210;
	--tr-color-danger: #ff8a80;
	--tr-color-danger-tint: #34161a;

	--tr-overprint-blend: screen;

	/* Editor palette (theme.json presets, printed by WordPress on :root):
	   the same re-map, so block colours chosen in the editor stay legible. */
	--wp--preset--color--ink: #ededeb;
	--wp--preset--color--paper: var(--tr-fixed-ink);
	--wp--preset--color--surface-soft: #141517;
	--wp--preset--color--text-muted: #a9adb4;
	--wp--preset--color--antrasit: #3a3c42;

	--tr-shadow-1: 0 1px 2px rgb(0 0 0 / 0.45);
	--tr-shadow-2: 0 8px 24px -12px rgb(0 0 0 / 0.7);
	/* Paper on the light table: a deep drop plus a faint glow from below. */
	--tr-shadow-sheet: 0 30px 60px -30px rgb(0 0 0 / 0.9), 0 0 80px -24px rgb(255 255 255 / 0.14);
	--tr-shadow-overlay: 0 24px 64px -16px rgb(0 0 0 / 0.75);
}

/* ════════════════════════════════════════════════════════════════════
   2. PAPER SCOPE — paper objects keep the light values
   ════════════════════════════════════════════════════════════════════ */
:where(:root[data-theme="dark"]) .tr-sheet {
	color-scheme: light;
	--tr-color-ink: var(--tr-fixed-ink);
	--tr-color-text: var(--tr-fixed-ink);
	--tr-color-text-muted: var(--tr-fixed-text-muted);
	--tr-color-paper: var(--tr-fixed-paper);
	--tr-color-surface: var(--tr-fixed-paper);
	--tr-color-surface-soft: var(--tr-fixed-surface-soft);
	--tr-color-border: var(--tr-fixed-border);
	--tr-color-border-strong: var(--tr-fixed-border-strong);
	--tr-color-magenta-text: var(--tr-fixed-magenta-text);
	--tr-color-focus: var(--tr-color-magenta);
	--tr-overprint-blend: multiply;      /* ink on paper (motion-high plates) */
}

/* ════════════════════════════════════════════════════════════════════
   3. BASE
   ════════════════════════════════════════════════════════════════════ */
:where(:root[data-theme="dark"]) .tr-skip-link { color: var(--tr-fixed-ink); }

:where(:root[data-theme="dark"]) :is(.tr-input, .tr-textarea, .comment-form input, .comment-form textarea, .woocommerce .input-text)::placeholder {
	color: var(--tr-color-text-muted);
	opacity: 1;
}

/* ════════════════════════════════════════════════════════════════════
   4. COMPONENTS (components.css)
   ════════════════════════════════════════════════════════════════════ */
/* Buttons: the default (graphite) button lifts on hover instead of turning
   ink; the variants that rely on .tr-btn:hover are restated after it. */
:where(:root[data-theme="dark"]) .tr-btn:hover { --_bg: #4a4d54; }
:where(:root[data-theme="dark"]) .tr-btn--primary:hover { --_bg: var(--tr-color-magenta-hover); }
:where(:root[data-theme="dark"]) .tr-btn--outline:hover { --_bg: var(--tr-color-ink); --_fg: var(--tr-fixed-ink); }
:where(:root[data-theme="dark"]) .tr-btn--ghost:hover { --_bg: var(--tr-color-surface-sunken); }
:where(:root[data-theme="dark"]) .tr-btn--on-dark:hover { --_bg: rgb(255 255 255 / 0.08); }
:where(:root[data-theme="dark"]) :is(.tr-btn:disabled, .tr-btn[aria-disabled="true"]) { --_bg: var(--tr-color-surface-sunken); }
:where(:root[data-theme="dark"]) .tr-btn--primary[aria-busy="true"] { --_bg: var(--tr-color-magenta-hover); }

:where(:root[data-theme="dark"]) .tr-icon-btn:hover { background: var(--tr-color-surface-sunken); }
:where(:root[data-theme="dark"]) .tr-icon-btn:active { background: #33353a; }

/* Ink fills carry dark text. */
:where(:root[data-theme="dark"]) .tr-badge--dark,
:where(:root[data-theme="dark"]) .tr-chip input:checked + span,
:where(:root[data-theme="dark"]) .tr-pagination .page-numbers.current,
:where(:root[data-theme="dark"]) a.tr-chip-link[aria-current="page"] { color: var(--tr-fixed-ink); }

:where(:root[data-theme="dark"]) .tr-chip input:checked + span small { color: var(--tr-fixed-text-muted); }

:where(:root[data-theme="dark"]) .tr-search__submit:hover { background: #4a4d54; }

:where(:root[data-theme="dark"]) .tr-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ededeb' stroke-width='1.8'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

:where(:root[data-theme="dark"]) .tr-dialog {
	box-shadow: var(--tr-shadow-overlay), 0 0 0 1px var(--tr-color-border);
}

:where(:root[data-theme="dark"]) .tr-dialog::backdrop { background: rgb(0 0 0 / 0.72); }

/* Category swatch book: the plate carries dark strokes except on magenta. */
:where(:root[data-theme="dark"]) .tr-cat-grid > li:nth-child(4n+1),
:where(:root[data-theme="dark"]) .tr-cat-grid > li:nth-child(4n+3),
:where(:root[data-theme="dark"]) .tr-cat-grid > li:nth-child(4n) { --_on: var(--tr-fixed-ink); }

:where(:root[data-theme="dark"]) .tr-product-card:hover .tr-product-card__cta,
:where(:root[data-theme="dark"]) .tr-product-card__cta:hover { --_bg: var(--tr-color-ink); --_fg: var(--tr-fixed-ink); }

/* Logo on a paper chip: a trimmed sheet with crop-mark ticks in its
   corners, so the official logo keeps its paper ground. */
:where(:root[data-theme="dark"]) .tr-site-header .custom-logo-link,
:where(:root[data-theme="dark"]) .tr-site-footer__logo {
	--_tick: var(--tr-fixed-border-strong);
	--_in: 3px;
	--_len: 7px;
	padding: 4px 14px;
	background:
		linear-gradient(var(--_tick) 0 0) left var(--_in) top var(--_in) / var(--_len) 1px,
		linear-gradient(var(--_tick) 0 0) left var(--_in) top var(--_in) / 1px var(--_len),
		linear-gradient(var(--_tick) 0 0) right var(--_in) top var(--_in) / var(--_len) 1px,
		linear-gradient(var(--_tick) 0 0) right var(--_in) top var(--_in) / 1px var(--_len),
		linear-gradient(var(--_tick) 0 0) left var(--_in) bottom var(--_in) / var(--_len) 1px,
		linear-gradient(var(--_tick) 0 0) left var(--_in) bottom var(--_in) / 1px var(--_len),
		linear-gradient(var(--_tick) 0 0) right var(--_in) bottom var(--_in) / var(--_len) 1px,
		linear-gradient(var(--_tick) 0 0) right var(--_in) bottom var(--_in) / 1px var(--_len),
		var(--tr-fixed-paper);
	background-repeat: no-repeat;
	box-shadow: 0 10px 24px -14px rgb(0 0 0 / 0.9);
	--tr-color-focus: var(--tr-color-magenta-on-dark);
}

:where(:root[data-theme="dark"]) .tr-site-footer__logo {
	--_in: 5px;
	--_len: 10px;
	padding: 12px 18px;
}

/* The chip adds 8px: at ≥ 1024 the logo steps down to 56px (wordmark caps
   stay well above 11px), so the chip keeps air inside the 72px bar. */
@media (min-width: 1024px) {
	:root[data-theme="dark"] { --tr-logo-h: 56px; }
}

/* Product thumbnails: a visible edge on the dark page (≥ 3:1). */
:where(:root[data-theme="dark"]) .tr-pdp__thumb { border-color: var(--tr-color-border-strong); }

/* K of the CMYK rules (page heads, footer, reading progress): the logo
   grey vanishes on the dark page (~1.6:1); a lighter steel keeps the four
   segments readable (≈ 4:1 on ink). */
:root[data-theme="dark"] { --tr-rule-k: var(--tr-fixed-border-strong); }

/* Phones and tablets: a tighter chip (short ticks clear of the wordmark)
   and a logo 6px shorter, so chip + logo stay within the light header's
   logo height and the bar keeps room for the menu, toggle and quote. */
@media (max-width: 1023px) {
	:root[data-theme="dark"] { --tr-logo-h: 46px; }

	:where(:root[data-theme="dark"]) .tr-site-header .custom-logo-link {
		--_in: 2px;
		--_len: 4px;
		padding: 2px 8px;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	:root[data-theme="dark"] { --tr-logo-h: 50px; }
}

/* Footer: the brand band becomes part of the dark footer; the chip keeps
   the logo on paper, the CMYK rule still divides it from the link grid. */
:where(:root[data-theme="dark"]) .tr-site-footer__brandbar {
	--tr-color-focus: var(--tr-color-magenta-on-dark);
	border-top: 1px solid var(--tr-color-border);
}

/* Crop marks and registration marks outside paper: light on the table. */
:where(:root[data-theme="dark"]) .tr-sheet > .tr-proof__crop::before,
:where(:root[data-theme="dark"]) .tr-sheet > .tr-proof__crop::after { background: var(--tr-color-text-muted-on-dark); }

/* ════════════════════════════════════════════════════════════════════
   5. PAGES (pages.css)
   ════════════════════════════════════════════════════════════════════ */
/* Hero: the proof on the light table at night. The halftone dot grid is
   printed in light; the overprint blocks behind the sheet add light. */
:where(:root[data-theme="dark"]) .tr-hero {
	background:
		radial-gradient(rgb(255 255 255 / 0.07) 1.2px, transparent 1.5px) 0 0 / 12px 12px,
		var(--tr-color-surface-soft);
}

:where(:root[data-theme="dark"]) .tr-hero .tr-proof::before,
:where(:root[data-theme="dark"]) .tr-hero .tr-proof::after { --tr-overprint-blend: screen; }

/* CTA band (magenta): white button with dark text, ink hover stays dark. */
:where(:root[data-theme="dark"]) .tr-cta-band .tr-btn--primary { --_fg: var(--tr-fixed-ink); }
:where(:root[data-theme="dark"]) .tr-cta-band .tr-btn--primary:hover { --_bg: var(--tr-fixed-ink); --_fg: var(--tr-fixed-paper); }
:where(:root[data-theme="dark"]) .tr-cta-band .tr-btn--on-dark:hover { --_bg: var(--tr-fixed-ink); --_bd: var(--tr-fixed-ink); }

/* Dark page head: below the page, not above it. */
:where(:root[data-theme="dark"]) .tr-page-head--dark {
	background:
		linear-gradient(90deg, var(--tr-color-cyan) 0 25%, var(--tr-color-magenta) 0 50%, var(--tr-color-yellow) 0 75%, var(--tr-rule-k, var(--tr-color-logo-grey)) 0) bottom / 100% 6px no-repeat,
		var(--tr-color-ink-deep);
}

/* The cover that motion-site.css rolls off the dark head's colour band
   must match the head colour. */
:where(:root[data-theme="dark"]) .tr-page-head--dark::after { background: var(--tr-color-ink-deep); }

/* ════════════════════════════════════════════════════════════════════
   6. CONFIGURATOR (option cards, sticky quote bar)
   ════════════════════════════════════════════════════════════════════ */
:where(:root[data-theme="dark"]) .tr-option-card__item:has(input:checked)::after {
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1c1f' stroke-width='3'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 12px no-repeat,
		var(--tr-color-ink);
}

:where(:root[data-theme="dark"]) .tr-sticky-mobile-bar {
	border-top-color: var(--tr-color-border-strong);
	box-shadow: 0 -12px 28px -16px rgb(0 0 0 / 0.9);
}

/* ════════════════════════════════════════════════════════════════════
   7. CONTENT (content.css): block buttons, page links
   ════════════════════════════════════════════════════════════════════ */
:where(:root[data-theme="dark"]) .wp-block-button > .wp-block-button__link:hover,
:where(:root[data-theme="dark"]) .tr-flow .wp-element-button:hover { background: #4a4d54; color: var(--tr-fixed-paper); }

:where(:root[data-theme="dark"]) .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--tr-color-ink); color: var(--tr-fixed-ink); }
:where(:root[data-theme="dark"]) .wp-block-button.is-style-primary > .wp-block-button__link:hover { background: var(--tr-color-magenta-hover); }

:where(:root[data-theme="dark"]) .tr-page-links .page-numbers.current,
:where(:root[data-theme="dark"]) .tr-page-links [aria-current="page"] { color: var(--tr-fixed-ink); }

/* Editor palette: "paper" text on the fills that stay dark or magenta
   keeps its white. */
:where(:root[data-theme="dark"]) :is(.has-antrasit-background-color, .has-magenta-background-color).has-paper-color {
	color: var(--tr-fixed-paper) !important;
}

/* ════════════════════════════════════════════════════════════════════
   8. WOOCOMMERCE (woocommerce.css)
   ════════════════════════════════════════════════════════════════════ */
:where(:root[data-theme="dark"]) .woocommerce :is(a.button, button.button, input.button):hover { background: #4a4d54; color: var(--tr-fixed-paper); }

:where(:root[data-theme="dark"]) .woocommerce #place_order:hover,
:where(:root[data-theme="dark"]) .woocommerce .checkout-button:hover,
:where(:root[data-theme="dark"]) .woocommerce .single_add_to_cart_button:hover { background: var(--tr-color-magenta-hover); }

:where(:root[data-theme="dark"]) .woocommerce span.onsale { color: var(--tr-fixed-ink); }

/* The WooCommerce placeholder (a near-white tile) is not a product photo:
   printed as a negative it becomes a dark tile with a light outline, so
   the well no longer glares. Real product photos are never filtered. */
:where(:root[data-theme="dark"]) img:is(.woocommerce-placeholder, [src*="woocommerce-placeholder"]) {
	filter: invert(0.86);
}

/* ════════════════════════════════════════════════════════════════════
   9. HOME MOTION (motion.css, motion-high.css)
   The plates on the proof sheet are in the paper scope (multiply); the
   halftone loupe draws on the dark hero and follows the theme (screen).
   The CTA sheen stays soft-light: it is a highlight on the magenta band,
   not an overprint, and reads the same on both themes.
   ════════════════════════════════════════════════════════════════════ */

@media (forced-colors: active) {
	.tr-theme-switch__thumb { background: ButtonText; }
	.tr-theme-switch[aria-pressed="true"] .tr-theme-switch__thumb { background: Highlight; }
}