/* Magic Mush brand tokens. Round 4 (Ben, 22 Oct 2026): black and white lead, green is
   the brand accent (about 10 to 15 percent), pink a small extra touch (about 5 percent).
   Cream is retired. Display Bebas Neue (uppercase), everything else DM Sans: the mono
   label face is gone because it was hard to read. Never Anton or Playfair. */

@font-face {
	font-family: 'Bebas Neue';
	src: url('../fonts/bebas-neue-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'DM Sans';
	src: url('../fonts/dm-sans-var.woff2') format('woff2');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'DM Sans';
	src: url('../fonts/dm-sans-italic-400.woff2') format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

:root {
	/* Colour: the four */
	--mm-ink: #0d0d0d;
	--mm-paper: #ffffff;
	--mm-green: #c8e644;
	--mm-pink: #e85a8a;
	/* Roles. The accent is green; on white, green text uses the deep green so it can be
	   read (lime on white cannot). */
	--mm-green-deep: #4c7a00;
	--mm-accent: var(--mm-green);
	--mm-accent-text: var(--mm-green-deep);
	/* The highlight (Ben, 22 Oct follow-up): pink, about 5 percent, only where something
	   must stand out. Its uses are listed in KIT.md and nowhere else: the Sale and Sold out
	   marks, notices and errors, potency 9/10 and up, the email band. Never a button, a
	   heading, a link or another band. On white, pink words use the deep pink. */
	--mm-pink-deep: #c2185b;
	--mm-highlight: var(--mm-pink);
	--mm-highlight-text: var(--mm-pink-deep);
	/* Utility only */
	--mm-white: #ffffff;
	--mm-cell: #f1f1f0;       /* image cells and quiet surfaces on white (neutral, never cream) */
	--mm-line: #e2e2e0;       /* hairline frames inside a component (never between sections) */
	--mm-mute: #5f5f5c;       /* small meta on white */
	--mm-mute-2: #8a8a87;     /* struck prices */
	--mm-on-ink: #d6d6d3;     /* body text on black */
	--mm-cell-ink: #1b1b1b;   /* cells and quiet surfaces on black (the card body on ink bands) */
	--mm-line-ink: rgba(245, 245, 240, .16); /* hairlines and empty segments on black */

	/* Type */
	--mm-display: 'Bebas Neue', Impact, Haettenschweiler, 'Arial Narrow', sans-serif;
	--mm-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--mm-mono: var(--mm-body); /* retired: anything still asking for it gets DM Sans */
	--mm-h1: clamp(52px, 6.4vw, 96px);
	--mm-h2: clamp(42px, 4.6vw, 68px);
	--mm-h3: clamp(30px, 2.7vw, 40px);
	--mm-text: 17px;
	--mm-text-sm: 15px;
	--mm-label: 14px;

	/* Layout */
	--mm-max: 1280px;
	--mm-gutter: clamp(16px, 4vw, 48px);
	--mm-section: clamp(64px, 8vw, 120px);
	--mm-grid-gap: 20px;
	--mm-header-h: 72px;
	--mm-radius: 2px;

	/* Motion */
	--mm-ease: cubic-bezier(.2, .7, .2, 1);
	--mm-ease-out: cubic-bezier(.22, 1, .36, 1);
}

/* On black, green text is the brand lime itself, pink text the pink itself. */
.mm-on-ink, .mm-band--ink, .mm-hero, .mm-footer { --mm-accent-text: var(--mm-green); --mm-highlight-text: var(--mm-pink); }

@media (max-width: 600px) {
	:root {
		--mm-text: 16px;
		--mm-grid-gap: 12px;
		--mm-header-h: 60px;
	}
}