/*
 * MK Kataloog — disainimuutujad.
 * Laaditakse esimesena; kõik ülejäänud stiilid tuletatakse siit.
 * Aktsentvärvi kirjutab Kohandaja üle reasisese :root reegliga.
 */

:root {
	/* Pinnad ja tint */
	--mk-bg: #ffffff;
	--mk-surface: #f4f4f2;
	/* Toonitud pind tootefoto taga (kaardid, plaadid, pisipildid). */
	--mk-media-bg: #f5f4f1;
	--mk-ink: #111111;
	--mk-ink-2: #3b3b37;
	--mk-muted: #5d5d58;
	--mk-line: #e3e3e0;
	--mk-line-2: #d9d9d5;

	/* Aktsent */
	--mk-accent: #d7182a;
	--mk-accent-ink: #ffffff;
	--mk-accent-hover: #b3121f;
	--mk-sale: #d7182a;

	/* Täispuidu riba */
	--mk-oak: #e9d8bc;
	--mk-oak-line: #d6c3a2;

	/* Vorm */
	/* 6 px (varem 2 px): pehmem ja tänapäevasem serv. Märgised hoiavad oma
	   3 px väärtust ja rippmenüü paneeli ülaservad jäävad sirgeks. */
	--mk-radius: 6px;
	--mk-gap: 8px;
	--mk-content: 1312px;
	--mk-gutter: 16px;

	/* Kirjatüübid */
	--mk-font-display: 'Archivo', system-ui, sans-serif;
	--mk-font-body: 'IBM Plex Sans', system-ui, sans-serif;

	/* Kirjasuurused */
	--mk-fs-h1: 46px;
	--mk-fs-h2: 28px;
	--mk-fs-h3: 16.5px;
	--mk-fs-h4: 15px;
	--mk-fs-body: 15px;
	--mk-fs-body-l: 17px;
	--mk-fs-meta: 13px;
	--mk-fs-hint: 12.5px;
	--mk-fs-eyebrow: 11px;
	--mk-fs-price: 19px;

	/* Vahed (8 px samm) */
	--mk-s1: 8px;
	--mk-s2: 16px;
	--mk-s3: 24px;
	--mk-s4: 32px;
	--mk-s5: 48px;
	--mk-s6: 64px;

	/* Komponentide mõõdud */
	--mk-control-h: 48px;
	--mk-control-h-sm: 40px;
	--mk-control-h-lg: 56px;
	--mk-header-tier: 52px;
	--mk-tabbar-h: 60px;
	--mk-grid-gap: 24px;

	/* Kihid */
	--mk-z-header: 40;
	--mk-z-panel: 45;
	--mk-z-drawer: 60;
	--mk-z-tabbar: 50;

	/* Varjud */
	--mk-shadow-panel: 0 14px 24px rgba(17, 17, 17, 0.12);
	/* Kaardi vari hõljutusel ja fookusel. */
	--mk-shadow-hover: 0 8px 24px rgba(17, 17, 17, 0.08);

	/* Liikumine — üks kestus kõigile üleminekutele. */
	--mk-ease: 160ms ease;
}

/* 901–1100 px: avalehe tekstiveerg on kitsas ja 46 px pealkiri murdus kolmele reale (hero 507 px). */
@media (max-width: 1100px) {
	:root {
		--mk-fs-h1: 38px;
	}
}

@media (max-width: 900px) {
	:root {
		--mk-fs-h1: 30px;
		--mk-fs-h2: 22px;
		--mk-grid-gap: 12px;
	}
}

@media (max-width: 560px) {
	:root {
		--mk-fs-h1: 27px;
		--mk-fs-h2: 20px;
	}
}