/*
 * Stijl "Warm" — zacht beige, organische vormen, zaadpapier en gevulde bloemen.
 * Kleuren komen uit het logo (brandy rose) en de uitlegkaarten van Miwimae.
 */

@font-face {
	font-family: "Cormorant Garamond";
	src: url("../fonts/cormorant-garamond-var.woff2") format("woff2");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Cormorant Garamond";
	src: url("../fonts/cormorant-garamond-italic-var.woff2") format("woff2");
	font-weight: 300 700;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Montserrat";
	src: url("../fonts/montserrat-var.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

:root {
	--bg: #fcf5ef;
	--bg-soft: #f6e6da;
	--surface: #fffaf6;
	--ink: #4a352c;
	--ink-soft: #6c554a;
	--heading: #5b3d30;
	--brand: #a4806d;
	--eyebrow: #8a6553;
	--accent: #c9745c;
	--accent-ink: #ab573f;
	--accent-contrast: #fff;
	--leaf: #66755a;
	--stem: #7d8c6e;
	--vein: rgb(255 255 255 / 0.5);
	--flower-heart: #5b463c;
	--line: #ecd9cb;
	--underline: #cfae9b;
	--focus: #8a6553;
	--ghost-border: #c9aa97;

	--button-bg: #5b3d30;
	--button-ink: #fff8f2;
	--button-bg-hover: #ab573f;

	--announce-bg: #66755a;
	--announce-ink: #fdf8f1;
	--header-bg: #fcf5ef;
	--hero-bg: #f6e6da;
	--usp-bg: #fcf5ef;
	--page-head-bg: #f6e6da;
	--card-border: 0;
	--step-bg: #e6eadc;
	--step-ink: #55634a;
	--mix-bg: #f3dfd0;
	--quote-bg: #ecd0ba;
	--quote-border: 0;
	--insta-bg: #f6e6da;
	--footer-bg: #6b4c3e;
	--footer-ink: #fbeee4;
	--footer-brand: #f4dccb;
	--footer-line: rgb(255 255 255 / 0.18);

	--radius: 20px;
	--radius-small: 12px;
	--radius-button: 999px;

	--font-display: "Cormorant Garamond", "Palatino Linotype", Palatino, Georgia, serif;
	--font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-label: var(--font-body);
	--display-weight: 500;
	--display-tracking: -0.01em;
	--body-leading: 1.75;
	--loop-title-size: 1.6rem;
}

/* Zaadpapier: fijne vezels en stukjes bloemblad over de hele pagina. */
body {
	background-image: url("../img/botanical/zaadpapier.svg");
	background-size: 400px;
}

.hero {
	background-image: url("../img/blob-tl.svg"), url("../img/blob-br.svg");
	background-repeat: no-repeat;
	background-position: left top, right bottom;
	background-size: min(46%, 640px) auto, min(34%, 460px) auto;
}

.page-head {
	background-image: url("../img/blob-tl.svg"), url("../img/blob-br.svg");
	background-repeat: no-repeat;
	background-position: left top, right bottom;
	background-size: min(38%, 420px) auto, min(22%, 240px) auto;
}

.soon {
	background-image: url("../img/blob-tl.svg"), url("../img/blob-br.svg");
	background-repeat: no-repeat;
	background-position: left top, right bottom;
	background-size: min(60%, 640px) auto, min(42%, 460px) auto;
}

.insta {
	background-image: url("../img/blob-br.svg");
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: min(30%, 380px) auto;
}

.steps li,
.mix li {
	box-shadow: 0 1px 0 rgb(91 61 48 / 0.04), 0 14px 30px -18px rgb(91 61 48 / 0.28);
}

.quote-card .botanical .b-line:not([data-vein]) {
	stroke: #8a6553;
}

.woocommerce ul.products li.product a img,
.woocommerce div.product div.images img {
	box-shadow: 0 14px 30px -20px rgb(91 61 48 / 0.35);
}

.site-footer .botanical .b-line {
	stroke: currentColor;
}

@media (max-width: 860px) {
	.hero {
		background-size: 70% auto, 42% auto;
	}
}