/*
 * SicherSatt design tokens — mirrored 1:1 from the prototype's app.jsx :root
 * (design.relaunch.dev.sichersatt.ch). Single source of truth for colour,
 * type and surface. All component CSS consumes these --sisa-* variables so the
 * WP build matches the React design exactly. Light mode only for now; the
 * prototype's dark theme picker is a later feature.
 */
/* Fonts are self-hosted via theme.json @font-face (IBM Plex Sans, Inter Tight,
 * Brauer LL, JetBrains Mono). No Google Fonts CDN — DSGVO compliance + perf. */

:root {
	--sisa-bg:                #FAFAF7;
	--sisa-bg-archive:        #EEEDED;
	--sisa-bg-card:           #DFDFDF;
	--sisa-bg-input:          #F4F4F4;
	--sisa-panel:             #FFFFFF;
	--sisa-panel-2:           #FAFAF7;
	--sisa-emphasis:          #1A1A1A;
	--sisa-emphasis-2:        #0F0F0F;
	--sisa-emphasis-line:     #2D2D2D;
	--sisa-on-emphasis:       #FFFFFF;
	--sisa-on-emphasis-muted: #A8A6A0;
	--sisa-on-emphasis-dim:   #676562;
	--sisa-ink:               #1A1A1A;
	--sisa-text-1:            #3F3D3A;
	--sisa-text-2:            #676562;
	--sisa-text-3:            #A8A6A0;
	--sisa-hairline:          #ECEAE3;
	--sisa-hairline-soft:     #F4F2EE;
	--sisa-yellow:            #F4D435;
	--sisa-yellow-ink:        #1A1A1A;
	/* Wasser metric (header Notvorrat tracker) — muted swiss-utility steel blue:
	   sits calm beside the brand yellow, dark enough for icon/fill duty on paper
	   white. Tints = the pill/chip cell fill levels (kcal .38 / water .20). */
	--sisa-water:             #2F7290;
	--sisa-water-tint:        rgba(47, 114, 144, 0.20);
	--sisa-yellow-tint:       rgba(244, 212, 53, 0.38);
	--sisa-stock-ok:          #27C93F;
	--sisa-stock-off:         #C8C8C8;
	--sisa-wishlist:          #E0394A;
	--sisa-veil:              rgba(0, 0, 0, 0.45);
	--sisa-shadow-card:       0 12px 32px rgba(0, 0, 0, 0.06);
	--sisa-shadow-pop:        0 24px 48px rgba(0, 0, 0, 0.12);

	--sisa-display: "Brauer LL", Georgia, serif;
	--sisa-body:    "IBM Plex Sans", "Inter Tight", system-ui, sans-serif;
	--sisa-mono:    "JetBrains Mono", ui-monospace, monospace;

	--sisa-container: 1360px;
	--sisa-pad:       clamp(16px, 4vw, 32px);   /* 16px on mobile → 32px desktop; header + content share it */

	/* Bridge Blocksy's default body stack onto our body font. */
	--theme-font-stack-default: var(--sisa-body);
}

/* ---------- Base typography (match the prototype defaults) ---------- */
/* Blocksy's ct-main-styles loads AFTER our child CSS and redefines
   --theme-font-stack-default on :root. Override it at higher specificity
   (html:root) so body/buttons/inputs inherit the brand body font through
   Blocksy's own --theme-font-family chain regardless of load order. */
html:root {
	--theme-font-stack-default: var(--sisa-body);
	/* Unify every Blocksy .ct-container on the design's 1360 width. Blocksy sets
	   --theme-normal-container-max-width:1290 on :root; the header, footer and our
	   custom page wrappers (single-product, ratgeber) already use --sisa-container
	   (1360), so the shop archive + plain pages were the odd ones out — ~35px
	   narrower each side on wide screens. Remapping the Blocksy var at html:root
	   (beats its :root) aligns them all from one place. */
	--theme-normal-container-max-width: var(--sisa-container);
}
html body,
.ct-container,
.entry-content,
button,
input,
select,
textarea {
	font-family: var(--sisa-body);
}
/* html body: beat Blocksy's late body{background:var(--theme-palette-color-7)}.
   Design page bg = --sisa-bg (#FAFAF7), per prototype app.jsx :root. */
html body {
	background: var(--sisa-bg);
	color: var(--sisa-ink);
	-webkit-font-smoothing: antialiased;
}

body h1, body h2, body h3, body h4, body h5, body h6,
.wp-block-heading,
.entry-title,
.ct-module-heading {
	font-family: var(--sisa-display);
	font-weight: 700;
	letter-spacing: -0.4px;
	color: var(--sisa-ink);
}

/* Shared content container — design's 1360 / 32px gutter. */
.sisa-container {
	max-width: var(--sisa-container);
	margin-inline: auto;
	padding-inline: var(--sisa-pad);
	box-sizing: border-box;
}

/* The logo carries the brand; keep the site title for a11y/schema but hide it. */
.site-title-container .site-title {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap; border: 0;
}

/* The design language is sharp-cornered — remove stray Blocksy/WC radii. */
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	border-radius: 0;
}

/* ============================================================
   DARK MODE — values mirrored from the prototype app.jsx
   :root[data-theme="dark"]. Set via the header theme picker
   (Auto/Hell/Dunkel) + a no-flash <head> script.
   ============================================================ */
:root[data-theme="dark"] {
	--sisa-bg:                #1B1814;
	--sisa-bg-archive:        #13110D;
	--sisa-bg-card:           #181510;
	--sisa-bg-input:          #1B1814;
	--sisa-panel:             #23201A;
	--sisa-panel-2:           #1B1814;
	--sisa-emphasis:          #000000;
	--sisa-emphasis-2:        #15130F;
	--sisa-emphasis-line:     #2D2D2D;
	--sisa-on-emphasis:       #F0EDE5;
	--sisa-on-emphasis-muted: #908D88;
	--sisa-on-emphasis-dim:   #6B6964;
	--sisa-ink:               #F0EDE5;
	--sisa-text-1:            #D8D4CA;
	--sisa-text-2:            #A19E97;
	--sisa-text-3:            #6F6C66;
	--sisa-hairline:          #2D2A24;
	--sisa-hairline-soft:     #25221E;
	/* Wasser: lifted for dark surfaces (fill + icon duty on #23201A panels). */
	--sisa-water:             #6FB1CE;
	--sisa-water-tint:        rgba(111, 177, 206, 0.22);
	--sisa-yellow-tint:       rgba(244, 212, 53, 0.30);
	--sisa-stock-off:         #4A4744;
	color-scheme: dark;

	/* Remap WP presets so Gutenberg block content flips too (brand/brand-ink stay). */
	--wp--preset--color--panel:       #23201A;
	--wp--preset--color--panel-2:     #1B1814;
	--wp--preset--color--base:        #13110D;
	--wp--preset--color--ink:         #F0EDE5;
	--wp--preset--color--emphasis:    #000000;
	--wp--preset--color--on-emphasis: #F0EDE5;
	--wp--preset--color--text-1:      #D8D4CA;
	--wp--preset--color--text-2:      #A19E97;
	--wp--preset--color--text-3:      #6F6C66;
	--wp--preset--color--hairline:    #2D2A24;
}

/* Yellow surfaces always keep dark text (brand identity isn't theme-bound). */
:root[data-theme="dark"] .has-brand-background-color,
:root[data-theme="dark"] .has-brand-background-color *,
:root[data-theme="dark"] [style*="background-color:#F4D435"],
:root[data-theme="dark"] [style*="background-color:#f4d435"] { color: var(--sisa-yellow-ink) !important; }

/* Flip the explicit hex section backgrounds used in page block markup. */
:root[data-theme="dark"] [style*="background-color:#ffffff"],
:root[data-theme="dark"] [style*="background-color:#FFFFFF"] { background-color: var(--sisa-panel) !important; }
:root[data-theme="dark"] [style*="background-color:#EEEDED"] { background-color: var(--sisa-bg-archive) !important; }
:root[data-theme="dark"] [style*="background-color:#FAFAF7"] { background-color: var(--sisa-panel-2) !important; }
:root[data-theme="dark"] [style*="background-color:#1A1A1A"],
:root[data-theme="dark"] [style*="background-color:#1a1a1a"] { background-color: #000 !important; }

/* Product images use mix-blend multiply (packshots on light); on dark that hides
   them — render normally on dark surfaces. */
:root[data-theme="dark"] .woocommerce ul.products li.product img,
:root[data-theme="dark"] .single-product .woocommerce-product-gallery img,
:root[data-theme="dark"] .sisa-search__thumb { mix-blend-mode: normal !important; }