/**
 * FoodMaster design styles.
 *
 * Three storefront temperaments, each a token set on the body class the
 * plugin prints (body.fm-style-<key>) and on any element that carries the
 * same class (a block's additional CSS class), so a block can override the
 * site-wide style for its own subtree. Every chain keeps the operator's
 * --foodmaster-* value first, so a tweak made in Settings > Design wins
 * wherever it is set and the style fills what the operator left empty.
 *
 * The Takeaway Flyer is the default set in css/foodmaster-tokens.css; its
 * class only restates it so a Flyer block inside a Counter page works.
 * Component moves a token cannot carry live in css/styles/<key>.css.
 */

/* ------------------------------------------------------------------ */
/* Takeaway Flyer: two inks on glossy paper, condensed caps, flat         */
/* ------------------------------------------------------------------ */

body.fm-style-flyer,
.fm-style-flyer {
	--fm-paper-2: var(--fm-paper);
	--fm-card: var(--fm-paper);
	--fm-card-border: var(--fm-rule-strong);
	--fm-card-shadow: none;
	--fm-image-shadow: none;
	--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-strong: 2px solid var(--fm-black);
	--fm-shadow: var(--foodmaster-shadow, none);
	--fm-rule: 1px solid var(--fm-n2);
	--fm-price-ink: var(--fm-ink);
	--fm-selected-bg: var(--fm-black);
	--fm-on-selected: var(--fm-paper);
	--fm-caps: uppercase;
	--fm-display-weight: 800;
	--fm-tracking: 1;
	--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);
}

/* ------------------------------------------------------------------ */
/* Counter Display: white cards on a quiet grey ground, one accent       */
/* ------------------------------------------------------------------ */

body.fm-style-counter,
.fm-style-counter {
	/* Motion: a soft lift, no hard edge */
	--fm-slow: 480ms;
	--fm-rise: 24px;
	--fm-ease-out: cubic-bezier(0.2, 0, 0, 1);
	--fm-paper-2: color-mix(in oklab, var(--fm-black) 5%, var(--foodmaster-bg, #ffffff));
	--fm-card: var(--foodmaster-bg, #ffffff);
	--fm-card-border: 1px solid var(--fm-n2);
	--fm-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.05);
	--fm-image-shadow: none;
	--fm-radius: var(--foodmaster-border-radius, 16px);
	--fm-control-radius: var(--foodmaster-button-radius, 999px);
	--fm-image-radius: calc(var(--fm-radius) * 0.75);
	--fm-chip-radius: 999px;
	--fm-add-radius: 50%;
	--fm-rule-strong: 1px solid var(--fm-n2);
	--fm-rule: 1px solid var(--fm-n2);
	--fm-shadow: var(--foodmaster-shadow, 0 1px 2px rgba(0, 0, 0, 0.08));
	--fm-tag-border: 1px solid transparent;
	--fm-tag-radius: 999px;
	--fm-tag-deal-border: transparent;
	--fm-chip-border: 1px solid var(--fm-n2);
	--fm-chip-bg: var(--fm-card);
	--fm-chip-color: var(--fm-black);
	--fm-chip-active-bg: var(--fm-black);
	--fm-chip-active-color: var(--fm-paper);
	--fm-chip-active-count: var(--fm-n2);
	--fm-chip-active-shadow: none;
	--fm-bar-bg: var(--fm-card);
	--fm-bar-text: var(--fm-black);
	--fm-bar-muted: var(--fm-n6);
	--fm-bar-total: var(--fm-black);
	--fm-bar-shadow: 0 -8px 24px rgba(0, 0, 0, 0.06);
	--fm-caps: none;
	--fm-display-weight: 700;
	--fm-tracking: 0;
	--fm-font-display: var(--foodmaster-heading-font, "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	--fm-font-body: var(--foodmaster-body-font, "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	--fm-leading: var(--foodmaster-line-height, 1.45);
	/* The accent means "add": prices and heads are set in black. */
	--fm-price-ink: var(--fm-black);
	--fm-selected-bg: var(--fm-black);
	--fm-on-selected: 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: var(--fm-ink-tint);
	--fm-on-ink-2: var(--fm-ink-hover);
	--fm-ink-2-tint: color-mix(in oklab, var(--fm-ink) 6%, var(--fm-paper));
}

/* ------------------------------------------------------------------ */
/* Night Service: two charcoal depths, glowing plates, brass             */
/* ------------------------------------------------------------------ */

body.fm-style-night,
.fm-style-night {
	/* Motion: the sheet comes up out of the dark, short travel, longer fade */
	--fm-slow: 440ms;
	--fm-rise: 16px;
	/* A near-black room warmed by the operator's primary (the footer colour is derived from it below, so it cannot feed back in). */
	--fm-paper: color-mix(in oklab, #141210 88%, var(--foodmaster-primary, #d92b1f));
	--fm-paper-2: color-mix(in oklab, var(--fm-paper) 90%, #ffffff);
	--fm-card: var(--fm-paper-2);
	--fm-card-border: 1px solid color-mix(in oklab, var(--fm-paper) 80%, #ffffff);
	--fm-card-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
	/* Text takes the scheme's paper tint (lifted to light in the oklch block, so a dark scheme stays readable). */
	--fm-black: #f4efe6;
	/* The primary keeps its hue and is lifted until it reads on the dark (see the oklch block below). */
	--fm-ink: color-mix(in oklab, var(--foodmaster-primary, #d92b1f) 70%, #ffffff);
	--fm-ink-hover: color-mix(in oklab, var(--fm-ink) 85%, #ffffff);
	--fm-on-ink: #141210;
	--fm-ink-2: var(--foodmaster-secondary, #ffd23f);
	--fm-on-ink-2: var(--foodmaster-on-secondary, #141414);
	--fm-success: color-mix(in oklab, var(--foodmaster-success, #1f7a3a) 55%, #ffffff);
	--fm-error: color-mix(in oklab, var(--foodmaster-error, #b3261e) 55%, #ffffff);
	--fm-image-shadow: 0 10px 26px color-mix(in oklab, var(--fm-ink) 22%, transparent), 0 2px 6px rgba(0, 0, 0, 0.6);
	--fm-radius: var(--foodmaster-border-radius, 12px);
	--fm-control-radius: var(--foodmaster-button-radius, 999px);
	--fm-image-radius: calc(var(--fm-radius) * 0.75);
	--fm-chip-radius: 999px;
	--fm-add-radius: 50%;
	--fm-rule-strong: 1px solid color-mix(in oklab, var(--fm-paper) 78%, #ffffff);
	--fm-rule: 1px solid var(--fm-n2);
	--fm-price-ink: var(--fm-ink);
	--fm-selected-bg: var(--fm-ink);
	--fm-on-selected: var(--fm-on-ink);
	--fm-tag-border: 1px solid var(--fm-n4);
	--fm-tag-radius: 4px;
	--fm-tag-deal-border: var(--fm-ink-2);
	--fm-chip-border: 1px solid var(--fm-n4);
	--fm-chip-bg: transparent;
	--fm-chip-color: var(--fm-n6);
	--fm-chip-active-bg: color-mix(in oklab, var(--fm-ink) 14%, var(--fm-paper));
	--fm-chip-active-color: var(--fm-ink);
	--fm-chip-active-count: var(--fm-n6);
	--fm-chip-active-shadow: inset 0 0 0 1px var(--fm-ink);
	--fm-bar-bg: var(--fm-paper-2);
	--fm-bar-text: var(--fm-black);
	--fm-bar-muted: var(--fm-n6);
	--fm-bar-total: var(--fm-ink);
	--fm-bar-shadow: 0 -12px 32px rgba(0, 0, 0, 0.45);
	--fm-shadow: var(--foodmaster-shadow, 0 2px 6px rgba(0, 0, 0, 0.5));
	--fm-caps: none;
	--fm-display-weight: 600;
	--fm-tracking: 0;
	--fm-font-display: var(--foodmaster-heading-font, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	--fm-font-body: var(--foodmaster-body-font, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	--fm-leading: var(--foodmaster-line-height, 1.45);
	--fm-focus: 0 0 0 2px var(--fm-paper), 0 0 0 4px var(--fm-ink);
	/* The theme shell takes the same two depths. */
	--foodmaster-header-bg: var(--fm-paper-2);
	--foodmaster-header-text: var(--fm-black);
	--foodmaster-footer-bg: color-mix(in oklab, var(--fm-paper) 70%, #000000);
	--foodmaster-footer-text: var(--fm-black);
	color: var(--fm-black);
}

body.fm-style-night {
	background: var(--fm-paper);
}

@supports (color: color-mix(in oklab, red 50%, blue)) {
	body.fm-style-night,
	.fm-style-night {
		--fm-n1: color-mix(in oklab, var(--fm-black) 6%, var(--fm-paper));
		--fm-n2: color-mix(in oklab, var(--fm-black) 12%, var(--fm-paper));
		--fm-n3: color-mix(in oklab, var(--fm-black) 22%, var(--fm-paper));
		--fm-n4: color-mix(in oklab, var(--fm-black) 38%, var(--fm-paper));
		--fm-n5: color-mix(in oklab, var(--fm-black) 54%, var(--fm-paper));
		--fm-n6: color-mix(in oklab, var(--fm-black) 68%, var(--fm-paper));
		--fm-n7: color-mix(in oklab, var(--fm-black) 80%, var(--fm-paper));
		--fm-ink-tint: color-mix(in oklab, var(--fm-ink) 14%, var(--fm-paper));
		--fm-ink-2-tint: color-mix(in oklab, var(--fm-ink-2) 24%, var(--fm-paper));
	}
}

@media (prefers-reduced-motion: no-preference) {
	.fm-style-night img {
		transition: box-shadow 160ms var(--fm-ease);
	}
}

/* The primary keeps its hue on the dark: lift lightness until it reads, cap chroma so it stays a colour, not a glare. */
@supports (color: oklch(from red l c h)) {
	body.fm-style-night,
	.fm-style-night {
		--fm-ink: oklch(from var(--foodmaster-primary, #d92b1f) max(l, 0.76) min(c, 0.16) h);
		--fm-black: oklch(from var(--foodmaster-bg, #ffffff) clamp(0.94, l, 0.955) min(c, 0.02) h);
		--fm-ink-2: oklch(from var(--foodmaster-secondary, #ffd23f) max(l, 0.78) min(c, 0.17) h);
		--fm-on-ink-2: #141210;
		--fm-success: oklch(from var(--foodmaster-success, #1f7a3a) max(l, 0.74) c h);
		--fm-error: oklch(from var(--foodmaster-error, #b3261e) max(l, 0.74) c h);
	}
}

/* Right-to-left: a price keeps the order the store configured ("$10.00" or
   "10.00 ₪") instead of being re-ordered by the surrounding paragraph. */
/*rtl:begin:ignore*/
[dir="rtl"] .woocommerce-Price-amount {
	direction: ltr;
	unicode-bidi: isolate;
}
/*rtl:end:ignore*/