/**
 * FoodMaster design tokens.
 *
 * The plugin owns every design value; the FoodMaster theme and third-party
 * themes read these. Operator-chosen values arrive through the
 * --foodmaster-* variables the styling settings emit inline; this file holds
 * the static defaults and derives everything else, so a site with no saved
 * settings still renders the complete system.
 *
 * World: two inks on glossy paper, an 8px module, aligned price columns.
 *   ink      the operator's primary colour: prices, primary action, selected state, shell bar
 *   ink-2    deal stock and live state only
 *   black    text and rules
 *   paper    page ground
 *   n1..n7   a fixed neutral ramp mixed from black into paper; no ad-hoc greys
 */

:root {
	/* Colour roles */
	--fm-ink: var(--foodmaster-primary, #d92b1f);
	--fm-ink-hover: var(--foodmaster-accent, #b5231a);
	--fm-ink-2: var(--foodmaster-secondary, #ffd23f);
	--fm-on-ink-2: var(--foodmaster-on-secondary, #141414);
	--fm-black: var(--foodmaster-text, #141414);
	--fm-paper: var(--foodmaster-bg, #ffffff);
	--fm-on-ink: var(--foodmaster-button-text, #ffffff);
	--fm-price-ink: var(--fm-ink);
	--fm-selected-bg: var(--fm-black);
	--fm-on-selected: var(--fm-paper);

	/* Tag voice (Deal, Sold out): the flyer's outlined stamp */
	--fm-tag-border: 1.5px solid var(--fm-black);
	--fm-tag-radius: var(--fm-radius);
	--fm-tag-caps: uppercase;

	/* Category chips: the flyer's underlined strip */
	--fm-chip-border: 0 solid transparent;
	--fm-chip-bg: transparent;
	--fm-chip-color: var(--fm-n6);
	--fm-chip-active-bg: transparent;
	--fm-chip-active-color: var(--fm-black);
	--fm-chip-active-count: var(--fm-n6);
	--fm-chip-active-shadow: inset 0 -3px 0 var(--fm-ink);

	/* Sticky bottom bar: the flyer's black bar */
	--fm-bar-bg: var(--fm-black);
	--fm-bar-text: var(--fm-paper);
	--fm-bar-muted: var(--fm-n3);
	--fm-bar-total: var(--fm-paper);
	--fm-success: var(--foodmaster-success, #1f7a3a);
	--fm-error: var(--foodmaster-error, #b3261e);

	/* Neutral ramp: static fallbacks, overridden below where color-mix exists */
	--fm-n1: #f5f5f5;
	--fm-n2: #e8e8e8;
	--fm-n3: #d0d0d0;
	--fm-n4: #a3a3a3;
	--fm-n5: #7a7a7a;
	--fm-n6: #5c5c5c;
	--fm-n7: #3d3d3d;

	/* Type */
	--fm-font-display: var(--foodmaster-heading-font, "Sofia Sans Extra Condensed", "Sofia Sans", system-ui, sans-serif);
	--fm-font-body: var(--foodmaster-body-font, "Sofia Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	--fm-size: var(--foodmaster-font-size, 16px);
	--fm-leading: var(--foodmaster-line-height, 1.4);

	/* Module and shape */
	--fm-m: 8px;
	--fm-radius: var(--foodmaster-border-radius, 2px);
	--fm-control-radius: var(--foodmaster-button-radius, var(--fm-radius));
	--fm-image-radius: var(--fm-radius);
	--fm-chip-radius: var(--fm-radius);
	--fm-add-radius: var(--fm-radius);
	--fm-rule: 1px solid var(--fm-n2);
	--fm-rule-strong: 2px solid var(--fm-black);
	--fm-container: var(--foodmaster-container-width, 1200px);

	/* Surfaces and depth: the flyer is flat paper; other styles lift cards */
	--fm-paper-2: var(--fm-paper);
	--fm-card: var(--fm-paper);
	--fm-card-border: var(--fm-rule-strong);
	--fm-shadow: var(--foodmaster-shadow, none);
	--fm-card-shadow: none;
	--fm-image-shadow: none;

	/* Voice: the flyer shouts in condensed caps; other styles set these to none, 600, 0 */
	--fm-caps: uppercase;
	--fm-display-weight: 800;
	--fm-tracking: 1;

	/* Motion: one ease, three durations, one travel distance.
	   fast = feedback, base = state change, slow = the sheet arriving. */
	--fm-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--fm-ease-out: cubic-bezier(0.2, 0, 0, 1);
	--fm-fast: 160ms;
	--fm-base: 240ms;
	--fm-slow: 420ms;
	--fm-rise: 40px;

	/* Focus ring */
	--fm-focus: 0 0 0 2px var(--fm-paper), 0 0 0 4px var(--fm-ink);
}

@supports (color: color-mix(in oklab, red 50%, blue)) {
	:root {
		--fm-n1: color-mix(in oklab, var(--fm-black) 4%, var(--fm-paper));
		--fm-n2: color-mix(in oklab, var(--fm-black) 10%, var(--fm-paper));
		--fm-n3: color-mix(in oklab, var(--fm-black) 20%, var(--fm-paper));
		--fm-n4: color-mix(in oklab, var(--fm-black) 36%, var(--fm-paper));
		--fm-n5: color-mix(in oklab, var(--fm-black) 52%, var(--fm-paper));
		--fm-n6: color-mix(in oklab, var(--fm-black) 64%, var(--fm-paper));
		--fm-n7: color-mix(in oklab, var(--fm-black) 78%, var(--fm-paper));
		--fm-ink-hover: color-mix(in oklab, var(--fm-ink) 84%, var(--fm-black));
		--fm-ink-tint: color-mix(in oklab, var(--fm-ink) 8%, var(--fm-paper));
		--fm-ink-2-tint: color-mix(in oklab, var(--fm-ink-2) 24%, var(--fm-paper));
	}
}

/* Base typography on plugin roots only; the host theme keeps its own body. */
.foodmaster-menu-layout,
.foodmaster-menu-container,
.foodmaster-element,
.foodmaster-mini-cart-wrapper,
.foodmaster-modern-modal,
.wf_product_view,
.foodmaster-sheet {
	font-family: var(--fm-font-body);
	font-size: var(--fm-size);
	line-height: var(--fm-leading);
	color: var(--fm-black);
	font-variant-numeric: tabular-nums;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	box-sizing: border-box;
}

.foodmaster-menu-layout *,
.foodmaster-menu-container *,
.foodmaster-element *,
.foodmaster-mini-cart-wrapper *,
.foodmaster-modern-modal *,
.wf_product_view *,
.foodmaster-sheet * {
	box-sizing: inherit;
}

/* Browser surfaces carry the palette too. */
.foodmaster-menu-layout ::selection,
.foodmaster-menu-container ::selection,
.foodmaster-mini-cart-wrapper ::selection,
.foodmaster-modern-modal ::selection {
	background: var(--fm-ink);
	color: var(--fm-on-ink);
}

.foodmaster-menu-layout :focus-visible,
.foodmaster-menu-container :focus-visible,
.foodmaster-mini-cart-wrapper :focus-visible,
.foodmaster-modern-modal :focus-visible {
	outline: none;
	box-shadow: var(--fm-focus);
	border-radius: var(--fm-radius);
}

.foodmaster-menu-layout input,
.foodmaster-menu-container input,
.foodmaster-modern-modal input,
.foodmaster-modern-modal textarea {
	caret-color: var(--fm-ink);
	accent-color: var(--fm-ink);
}

/* Utilities shared by every surface */
.foodmaster-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Plugin action anchors own their colour and underline under any theme. */
.foodmaster-mini-cart-wrapper a.foodmaster-cart-button,
.foodmaster-mini-cart-wrapper .foodmaster-sticky-cart-bar a,
.foodmaster-hero-section a.foodmaster-hero-button,
.foodmaster-featured-product-wrapper a.foodmaster-featured-product-button,
.foodmaster-element a.foodmaster-element-button,
.foodmaster-menu-layout .product-button a.button,
.foodmaster-menu-container .product-button a.button,
.foodmaster-availability-modal a.foodmaster-cart-button,
.foodmaster-deal-combo a.button {
	text-decoration: none;
}

.foodmaster-mini-cart-wrapper a.foodmaster-cart-button:hover,
.foodmaster-hero-section a.foodmaster-hero-button:hover,
.foodmaster-featured-product-wrapper a.foodmaster-featured-product-button:hover,
.foodmaster-element a.foodmaster-element-button:hover {
	text-decoration: none;
}

/* Display voice: condensed caps for heads and prices */
.fm-display {
	font-family: var(--fm-font-display);
	font-weight: var(--fm-display-weight);
	text-transform: var(--fm-caps);
	letter-spacing: calc(0.01em * var(--fm-tracking));
	line-height: 1;
}

/* Price: the signature. Always ink, always tabular, always flush to its column. */
.fm-price {
	font-family: var(--fm-font-display);
	font-weight: var(--fm-display-weight);
	font-size: 1.125em;
	line-height: 1;
	color: var(--fm-price-ink);
	font-variant-numeric: tabular-nums lining-nums;
	white-space: nowrap;
	text-align: end;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--fm-fast: 0ms;
		--fm-base: 0ms;
		--fm-slow: 0ms;
		--fm-rise: 0px;
	}
}