/*
 * Sizemint design tokens — scoped to .sizemint, never :root.
 *
 * Deliberately NOT global custom properties: putting these on :root would
 * leak a "--sizemint-accent"-style namespace onto the entire host document,
 * risking collision with another plugin or theme using similar names.
 * Every top-level element Sizemint renders (trigger wrapper, popup, the
 * admin builder's own container) carries the .sizemint class itself,
 * so these tokens are visible to that element's own subtree and nowhere
 * else on the page.
 *
 * Two genuinely different kinds of token here, matching the locked
 * "Theme mode" definition precisely — this is not a stylistic choice per
 * property, it's the actual product decision:
 *
 *   - Typography/aesthetic tokens (font-family, base size, weight) use
 *     `inherit` in Theme mode on purpose: the whole point of Theme mode
 *     is that Sizemint's text feels native to the surrounding page.
 *
 *   - Structural/contrast-critical tokens (button background, button
 *     text, button border, focus indicator, and — revised after real
 *     dark-theme testing — the popup's own body text color) are ALWAYS
 *     real, solid, Sizemint-chosen values — never `inherit` or
 *     `currentColor` — in BOTH Theme and Custom mode. This is the
 *     direct fix for both the Astra button failure and a later,
 *     related dark-theme failure: inheriting body text color let a
 *     theme's own white or grey text land on Sizemint's own solid
 *     popup surface, exactly the same category of bug as the button
 *     one, just discovered later. Custom mode only changes WHICH solid
 *     values these are (merchant-chosen instead of Sizemint's own
 *     defaults) — it never changes them back into something
 *     theme-derived.
 */

.sizemint {
	/* Typography — inherited from the surrounding theme by design. */
	--sizemint-font-family: inherit;
	--sizemint-font-size-base: 1em;
	--sizemint-heading-weight: 600;

	/* Body text inside Sizemint's own components. Deliberately a real,
	   solid Sizemint value — NOT inherited — even in Theme mode. Real
	   dark-theme testing found exactly the failure mode inheriting text
	   color risks: a theme's near-white text landing on Sizemint's own
	   solid white popup surface, or a theme's grey text reading poorly
	   against it. Theme mode inherits typography (font-family above);
	   it does not inherit contrast-critical foreground/background pairs,
	   which Sizemint establishes and controls itself, the same
	   principle already applied to buttons. */
	--sizemint-text-color: #1e1e1e;
	--sizemint-text-muted-opacity: 0.75;

	/* Structural colors — always real, solid values. Never inherited,
	   in either Theme or Custom mode. */
	--sizemint-surface: #ffffff;
	--sizemint-border-color: #d0d0d0;
	--sizemint-accent: #1e1e1e;

	/* Lightened from an earlier near-black default after real dark-theme
	   testing: #1e1e1e against a genuinely black page background is
	   only ~1.3:1 contrast — technically no longer invisible (it has a
	   real, solid fill, unlike the original Astra bug), but still not
	   actually visible. #4a4a4a keeps strong contrast with the white
	   button text (8.9:1) while getting close to WCAG's 3:1 non-text
	   minimum against black on its own; the lighter #7a7a7a border adds
	   a distinct edge that clears 3:1 against both black AND white
	   surroundings, so the button reads as a clear, bounded control
	   regardless of how dark or light the page around it is. */
	--sizemint-button-background: #4a4a4a;
	--sizemint-button-text: #ffffff;
	--sizemint-button-border: #7a7a7a;
	--sizemint-button-hover-background: #5c5c5c;

	--sizemint-focus-ring-color: #1e1e1e;

	--sizemint-table-header-background: #f0f0f1;
	--sizemint-table-header-text: #1e1e1e;
	--sizemint-table-border: #dddddd;
	--sizemint-table-row-alt-background: #fafafa;

	--sizemint-result-background: #f6f7f7;
	--sizemint-result-warning-background: #fdf6e3;
	--sizemint-result-warning-text: #8a6d1f;
	--sizemint-result-error-text: #b32d2e;

	/* Shape — a moderate, generically-compatible default in Theme mode.
	   Custom mode overrides these with the merchant's own choice; Theme
	   mode does not attempt to read a radius "from" the theme, since
	   there is no reliable inheritable CSS property for that. */
	--sizemint-button-radius: 4px;
	--sizemint-popup-radius: 8px;
	--sizemint-table-radius: 4px;

	/* Spacing — a single scale multiplier so the three-option
	   compact/comfortable/spacious setting (never raw per-field pixel
	   controls) can drive every component consistently from one value. */
	--sizemint-spacing-unit: 8px;

	/* Minimum touch target, applied wherever a control needs to remain
	   comfortably tappable at mobile widths — not itself a setting. */
	--sizemint-min-touch-target: 44px;
}