/*
 * Color-scheme (dark / light) tokens.
 *
 * The toggle mechanism is done (color-scheme.js + the no-flash head script in
 * functions.php sets html.dark-color-scheme / html.light-color-scheme). What
 * still needs DESIGN is the dark palette itself.
 *
 * ⚠️ FLAG (important difference — confirm before committing): the old theme's
 * dark mode was driven by the Skinny parent theme's --skinny--color-scheme-*
 * variables, which we are NOT carrying forward. We're rebuilding dark mode as a
 * small set of our own tokens. The values below are a STARTER scaffold; the real
 * dark palette (backgrounds, text, borders, how product cards/header/footer look
 * in dark) needs to be defined against the current site's dark mode. I'll fill
 * these in during the dark-mode CSS pass once the base (light) CSS is ported.
 */

/* Light scheme (default) — real live Customizer values */
:root,
html.light-color-scheme {
	--surface: #ffffff;
	--surface-alt: #f5f5f5;
	--text: #1d1e25;
	--text-muted: #555555;
	--border: rgb(153, 153, 153);
	--scheme-overlay: rgba(0, 0, 0, 0.3); /* custom header bg overlay (light) */
}

/* Dark scheme — real live Customizer values (dark stylesheet). The accent
   brightens to #019d48 in dark; buttons stay the same green-on-green. */
html.dark-color-scheme {
	--surface: #1d1e25;
	--surface-alt: #24262f;
	--text: #ffffff;
	--text-muted: #b8b8b8;
	--border: #3a3c45;
	--scheme-overlay: rgba(29, 30, 37, 0.8); /* custom header bg overlay (dark) */
	--gvbf-primary: #019d48;                 /* accent brightens in dark mode */
}

/*
 * TODO (dark-mode pass): apply the tokens above to actual elements —
 * header, footer, product cards, filters, buttons, etc. The real dark palette
 * gets extracted from the old theme's compiled .dark-color-scheme rules.
 */

/*
 * Minimal visible scaffold so the toggle is verifiable before the dark-mode
 * pass: flips the page surface/text. Expect BB rows/modules with explicit
 * backgrounds to stay light for now — that's the dark-mode pass's job.
 */
html.dark-color-scheme body,
html.dark-color-scheme .fl-page {
	background-color: var(--surface);
	color: var(--text);
}

/* Toggle button affordance (refine with header design) */
.header__color-scheme-toggle {
	cursor: pointer;
	background: none;
	border: 0;
	color: inherit;
}

/* Indicate state: icon rotates in dark mode */
.header__color-scheme-toggle svg {
	transition: transform 0.3s ease;
	vertical-align: middle;
}
html.dark-color-scheme .header__color-scheme-toggle svg {
	transform: rotate(180deg);
}