/**
 * Checkout/cart token-compat layer.
 *
 * The cart/checkout/minicart stylesheets were ported from a sibling Wooptima
 * build that used a value-named token vocabulary (--c-brand, --space-16,
 * --text-14, --surface…). This file re-declares that vocabulary in Bionela's
 * palette (teal brand + green accent) so those stylesheets render on-brand
 * without editing them. Enqueue this BEFORE checkout.css / cart.css /
 * checkout-steps.css. Bionela's own tokens.css must load first (global).
 *
 * @package Bionela_New
 */

:root {
	/* ---- Brand / ink / lines (mapped to Bionela tokens) ---- */
	--c-brand: var(--teal);
	--c-brand-dark: var(--teal-600);
	--c-accent: var(--green);
	--c-ink: var(--ink);
	--c-ink-body: var(--ink-soft);
	--c-line: var(--line);
	--c-muted: var(--muted);
	--c-ok: var(--stock-green);
	--c-white: #ffffff;
	--c-border-hover: var(--line-hover);
	--c-soft: var(--page-bg);

	/* ---- Status ---- */
	--c-success-bg: #e9f7ef;
	--c-success-border: #b6e4c8;
	--c-success-ink: #1b7a43;

	/* ---- Semantic aliases ---- */
	--color-primary: var(--teal);
	--color-primary-strong: var(--teal-600);
	--color-text: var(--ink);
	--color-muted: var(--muted);
	--color-border: var(--line);
	--surface: #ffffff;
	--surface-soft: var(--page-bg);
	--surface-soft2: #eef1f0;
	--on-primary: #ffffff;

	/* ---- Radius ---- */
	--radius-6: 6px;
	--radius-8: 8px;
	--radius-10: 10px;
	--radius-12: 12px;
	--radius-14: 14px;
	--radius-16: 16px;
	--radius-pill: 999px;
	--radius-circle: 50%;

	/* ---- Shadow (brand-tinted with Bionela teal) ---- */
	--shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .05);
	--shadow-brand: 0 8px 18px rgba(14, 85, 81, .24);
	--shadow-add-hover: 0 10px 26px rgba(14, 85, 81, .30);

	/* ---- Typography (Bionela uses one system stack) ---- */
	--font-display: var(--font-body);

	--text-11: 11px;
	--text-12: 12px;
	--text-12-5: 12.5px;
	--text-13: 13px;
	--text-13-5: 13.5px;
	--text-14: 14px;
	--text-14-5: 14.5px;
	--text-15: 15px;
	--text-16: 16px;
	--text-17: 17px;
	--text-18: 18px;
	--text-19: 19px;
	--text-20: 20px;
	--text-22: 22px;
	--text-28: 28px;
	--text-30: 30px;

	--leading-tight: 1.25;
	--leading-165: 1.65;
	--leading-170: 1.7;

	/* ---- Spacing ---- */
	--space-3: 3px;
	--space-4: 4px;
	--space-6: 6px;
	--space-8: 8px;
	--space-10: 10px;
	--space-12: 12px;
	--space-14: 14px;
	--space-16: 16px;
	--space-18: 18px;
	--space-20: 20px;
	--space-22: 22px;
	--space-24: 24px;
	--space-26: 26px;
	--space-28: 28px;
	--space-40: 40px;
	--space-48: 48px;

	/* ---- Layout ---- */
	--wrap-pad: 10px;

	/* ---- Runtime (set by cart.js) ---- */
	--free-shipping-progress: 0%;
}

@media (min-width: 561px) {
	:root {
		--wrap-pad: 22px;
	}
}