/**
 * YUM design system — CSS custom properties and shared primitives.
 * Load before any feature CSS (e.g. css/landing.css).
 * Documented in docs/DESIGN_SYSTEM.md
 */

:root {
	/* —— Color: text —— */
	--yum-color-text-primary: #121212;
	--yum-color-text-muted: #5a5a5a;
	--yum-color-text-placeholder: #8c8c8c;
	--yum-color-text-on-strong: #ffffff;

	/* —— Color: surface —— */
	--yum-color-surface-base: #ffffff;
	--yum-color-surface-muted: #f7f7f5;

	/* —— Color: border —— */
	--yum-color-border-default: #d9d9d9;
	--yum-color-border-hover: #b3b3b3;
	--yum-color-border-strong: #121212;

	/* —— Color: fill (interactive) —— */
	--yum-color-fill-primary: #121212;
	--yum-color-fill-primary-hover: #2c2c2c;

	/* —— Focus —— */
	--yum-color-focus-ring: #121212;
	--yum-focus-ring-width: 2px;
	--yum-focus-ring-offset: 2px;

	/* —— Typography: families —— */
	--yum-font-serif: "Literata", Georgia, "Times New Roman", serif;
	--yum-font-sans: "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* —— Typography: scale (rem) —— */
	--yum-font-size-xs: 0.6875rem; /* 11px — kicker */
	--yum-font-size-sm: 0.75rem; /* 12px — footer */
	--yum-font-size-ui: 0.8125rem; /* 13px — nav, buttons */
	--yum-font-size-body: 1rem; /* 16px — body, inputs */
	--yum-font-size-masthead: 1.75rem; /* 28px */
	/* Headline: use clamp in feature CSS; step documented in DESIGN_SYSTEM.md */
	--yum-line-height-tight: 1.2;
	--yum-line-height-body: 1.5;
	--yum-line-height-relaxed: 1.55;

	/* —— Typography: weight —— */
	--yum-font-weight-regular: 400;
	--yum-font-weight-medium: 500;
	--yum-font-weight-semibold: 600;
	--yum-font-weight-bold: 700;

	/* —— Letter-spacing —— */
	--yum-tracking-kicker: 0.14em;
	--yum-tracking-nav: 0.06em;
	--yum-tracking-button: 0.04em;
	--yum-tracking-headline: -0.02em;

	/* —— Spacing scale (rem) —— */
	--yum-space-1: 0.375rem; /* 6 */
	--yum-space-2: 0.625rem; /* 10 */
	--yum-space-3: 0.75rem; /* 12 */
	--yum-space-4: 1rem; /* 16 */
	--yum-space-5: 1.25rem; /* 20 */
	--yum-space-6: 1.5rem; /* 24 */
	--yum-space-8: 2rem; /* 32 */
	--yum-space-9: 2.25rem; /* 36 */
	--yum-space-10: 2.5rem; /* 40 */

	/* —— Layout —— */
	--yum-page-padding-x: clamp(1.25rem, 4vw, 2.5rem);
	--yum-content-max-width-sm: 32rem; /* ~512px — readable measure */
	--yum-content-max-width-md: 42rem; /* ~672px — hero column */

	/* —— Radius —— */
	--yum-radius-sm: 2px;
	/* Capsule shape: use for search fields, primary/secondary buttons, and other pill controls. */
	--yum-radius-pill: 9999px;
	/* Semantic alias — same geometry as pill; use for button components in feature CSS. */
	--yum-radius-button: var(--yum-radius-pill);

	/* —— Size: touch targets —— */
	--yum-touch-target-min: 44px;
	--yum-input-height: 44px;
	--yum-field-min-height: 48px;

	/* —— Border width —— */
	--yum-border-width-hairline: 1px;

	/* —— Motion —— */
	--yum-duration-fast: 150ms;
	--yum-ease-standard: ease;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--yum-duration-fast: 0ms;
	}
}

/* Baseline box model when using the design system on a page. */
.yum-ds,
.yum-ds *,
.yum-ds *::before,
.yum-ds *::after {
	box-sizing: border-box;
}

/** Screen-reader-only label; keep visible pair in UI for sighted users. */
.yum-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}