:root {
	/* BURMAK palette (Assfalg-inspired navy) — mirrored in theme.json (settings.color.palette). Edit both together. */
	--myco-color-navy: #0c1431;
	--myco-color-navy-line: #4a5373;
	--myco-color-gray: #5e5e5e;
	--myco-color-gray-2: #818489;
	--myco-color-silver: #9da2a8;
	--myco-color-light: #f4f4f5;
	--myco-color-line: #e2e8ef;
	--myco-color-green: #54ac3c;
	--myco-color-green-text: #2e6f1e;
	/* Category accents (hover colours of the four product groups). */
	--myco-color-yellow: #fbb916;
	--myco-color-cyan: #21bbee;
	--myco-color-orange: #f2683c;

	/* Semantic roles. Components use these, never the raw brand values above. */
	--myco-color-bg: #ffffff;
	--myco-color-surface: var(--myco-color-light);
	--myco-color-text: var(--myco-color-navy);
	--myco-color-body: var(--myco-color-gray);
	--myco-color-muted: var(--myco-color-gray-2);
	--myco-color-border: var(--myco-color-line);
	--myco-color-primary: var(--myco-color-navy);
	/* Green is BURMAK's fill accent; use accent-text for green text on white. */
	--myco-color-accent: var(--myco-color-green);
	--myco-color-accent-text: var(--myco-color-green-text);
	--myco-color-on-dark: #ffffff;
	--myco-color-on-dark-muted: rgba(255, 255, 255, 0.72);
	--myco-color-dark-line: rgba(255, 255, 255, 0.1);
	--myco-color-pill-icon: var(--myco-color-silver);
	/* Semantic state tokens (form notices) — functional states, not part of the visual identity. */
	--myco-color-success: #2f7d5d;
	--myco-color-danger: #b3261e;
	--myco-color-warning: #e8a317;
	--myco-color-warning-bg: #fff6e2;
	--myco-color-white: #ffffff;

	/* Self-hosted in assets/fonts (SIL OFL), declared in typography.css. Saira stands in for Klavika. */
	--myco-font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--myco-font-heading: "Saira", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--myco-heading-stretch: 92%;
	--myco-font-size-xs: 0.8125rem;
	--myco-font-size-sm: 0.9375rem;
	--myco-font-size-base: 1rem;
	--myco-font-size-lg: 1.125rem;
	--myco-font-size-xl: clamp(1.125rem, 1.6vw, 1.375rem);
	--myco-line-height: 1.6;
	--myco-line-height-tight: 1.15;

	--myco-container: 1296px;
	--myco-container-wide: 1440px;
	--myco-container-content: 760px;
	--myco-gutter: clamp(1rem, 3vw, 1.5rem);

	--myco-space-2xs: 0.25rem;
	--myco-space-xs: 0.5rem;
	--myco-space-sm: 0.75rem;
	--myco-space-md: 1rem;
	--myco-space-lg: 1.5rem;
	--myco-space-xl: 2rem;
	--myco-space-2xl: 3rem;
	--myco-space-3xl: 4.5rem;
	--myco-space-4xl: 7rem;
	--myco-section-space: clamp(4rem, 8vw, 7rem);

	/* Large soft corners (cards, media) and pill buttons. */
	--myco-radius-sm: 8px;
	--myco-radius-md: 20px;
	--myco-radius-lg: 30px;
	--myco-radius-xl: 40px;
	--myco-radius-pill: 999px;

	--myco-shadow-soft: 0 1px 2px rgba(12, 20, 49, 0.06);
	--myco-shadow-card: 0 24px 60px rgba(12, 20, 49, 0.18);
	--myco-shadow-header: 0 10px 30px rgba(0, 0, 0, 0.25);

	--myco-topbar-height: 3.9375rem;
	--myco-header-height: 4.5rem;

	--myco-z-header: 50;
	--myco-z-menu: 60;
	--myco-z-offcanvas: 100;

	--myco-transition: 200ms ease;
}

/* Desktop header — keep in sync with header.css (75rem / 1200px). */
@media (min-width: 75rem) {
	:root {
		--myco-header-height: 5.0625rem;
	}
}