/**
 * STM Smart Checkout — design tokens & base primitives.
 *
 * Contract: components read ONLY --stmc-* tokens; settings override the token
 * values via an inline style block (see STMC_Assets::tokens_css()). Nothing in
 * this plugin uses !important — shop owners keep the last word from their
 * child theme, and our own overrides stay maintainable.
 *
 * Fonts: intentionally none loaded here. The checkout inherits the shop's
 * font stack; remote font loading (GDPR: LG München I, 2022) is never added
 * by this plugin.
 */

:root {
	/* Colors (defaults mirror the settings defaults; inline style wins). */
	--stmc-accent: #ff6600;
	--stmc-accent-hover: #e55a00;
	--stmc-ink: #16265c;
	--stmc-text: #2b3550;
	--stmc-muted: #5b6474;
	--stmc-bg: #f0f2f5;
	--stmc-card: #ffffff;
	--stmc-line: #dde2ec;
	--stmc-good: #1a7f37;
	--stmc-danger: #c62828;

	/*
	 * Voice colors, matched to the live shop's checkout (the design source of
	 * truth): titles speak in a brighter blue than body ink, field and method
	 * labels in the site's link blue. Switches reuse the title blue when on.
	 */
	--stmc-title: #1b3a8c;
	--stmc-label: #00178f;
	--stmc-line-soft: #eef1f6;
	--stmc-switch-off: #d5dbe8;

	/* Shape & depth. */
	--stmc-radius: 12px;
	--stmc-radius-s: calc(var(--stmc-radius) * 0.5);
	--stmc-shadow: 0 1px 2px rgba(22, 38, 92, 0.06), 0 8px 24px rgba(22, 38, 92, 0.07);

	/*
	 * Type scale — one knob, consistent rhythm. Deliberately short: a checkout
	 * is a form, not an article, and every extra step makes it look busier.
	 * xs = fine print, s = secondary (labels, descriptions, legal text),
	 * base = content (inputs, method names, product lines), m = controls,
	 * l = emphasis (section titles, grand total). Nothing else.
	 */
	/*
	 * One knob in PIXELS, and every step is a ratio of it. Pixels because a
	 * shop owner asked in pixels — and because rem hands the real size to the
	 * theme's root font size, so two shops with the same setting rendered
	 * differently. The ratios reproduce the previous 12/13/15/16/17/18.4
	 * scale exactly at the 15px default.
	 */
	--stmc-font-base: 15px;
	--stmc-fs-xs: calc(var(--stmc-font-base) * 0.8);       /* 12px */
	--stmc-fs-s: calc(var(--stmc-font-base) * 0.8667);     /* 13px */
	--stmc-fs-base: var(--stmc-font-base);                 /* 15px */
	--stmc-fs-m: calc(var(--stmc-font-base) * 1.0667);     /* 16px */
	--stmc-fs-l: calc(var(--stmc-font-base) * 1.1333);     /* 17px */
	/* Step headings only — matches the live shop's 1.15rem heads. */
	--stmc-fs-xl: calc(var(--stmc-font-base) * 1.2267);    /* ~18.4px */

	/* Spacing scale. */
	--stmc-sp-1: 4px;
	--stmc-sp-2: 8px;
	--stmc-sp-3: 12px;
	--stmc-sp-4: 16px;
	--stmc-sp-5: 24px;
	--stmc-sp-6: 32px;

	/* Interaction. */
	--stmc-focus-ring: 0 0 0 3px color-mix(in srgb, var(--stmc-accent) 35%, transparent);
	--stmc-touch-target: 44px; /* WCAG-friendly minimum, proven in the Magento edition. */
}

/* ---------------------------------------------------------------------------
 * Base primitives (namespaced; safe to ship before any layout module exists).
 * ------------------------------------------------------------------------- */

.stmc-card {
	background: var(--stmc-card);
	border: 1px solid var(--stmc-line);
	border-radius: var(--stmc-radius);
	box-shadow: var(--stmc-shadow);
	padding: var(--stmc-sp-5);
}

.stmc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--stmc-sp-2);
	min-height: var(--stmc-touch-target);
	padding: 0 var(--stmc-sp-5);
	border: 0;
	border-radius: var(--stmc-radius-s);
	background: var(--stmc-accent);
	color: #fff;
	font-size: var(--stmc-fs-m);
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
}

.stmc-btn:hover,
.stmc-btn:focus {
	background: var(--stmc-accent-hover);
	color: #fff;
}

.stmc-btn:focus-visible,
.stmc-focusable:focus-visible {
	outline: none;
	box-shadow: var(--stmc-focus-ring);
}

.stmc-muted {
	color: var(--stmc-muted);
}

/* Accessible hiding (screen readers keep the content). */
.stmc-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.stmc-scope *,
	.stmc-scope *::before,
	.stmc-scope *::after {
		animation-duration: 0.01ms;
		animation-iteration-count: 1;
		transition-duration: 0.01ms;
	}
}