/*
 * Marra – dizajnerski tokeni.
 * Iste vrijednosti koriste se u Elementor nacrtu početne stranice.
 */
:root {
	/* Boje */
	/* Tekst – tri boje (svijetla pozadina) */
	--marra-black: #111111;         /* naslovi, nazivi proizvoda, cijene, navigacija */
	--marra-ink: #4a403b;           /* sav tekst i opisi */
	--marra-muted: #4a403b;         /* isto kao tekst (hijerarhija ide veličinom, ne bojom) */
	/* --marra-caramel: oznake iznad naslova, linkovi, akcijske cijene, male ikone */

	/* Tekst na crnoj pozadini */
	--marra-on-dark: #f5efe6;
	--marra-on-dark-soft: rgba(245, 239, 230, 0.7);
	--marra-cream: #f5efe6;
	--marra-ivory: #fbf8f3;
	--marra-white: #ffffff;
	--marra-blush: #f7f0eb;
	--marra-blush-strong: #ead3cb;
	--marra-sage: #edeee6;
	--marra-caramel: #9a6b47;
	--marra-champagne: #b89b6e;
	--marra-line: #e6dccf;
	--marra-sale: #9a6b47;          /* akcijska cijena = naglasna (karamel) boja */

	/* Tipografija */
	--marra-font-display: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
	--marra-font-body: "Jost", "Jost Fallback", "Helvetica Neue", Arial, sans-serif;
	--marra-tracking-label: 0.28em;
	--marra-tracking-button: 0.2em;

	/* Razmaci */
	--marra-space-xs: 0.5rem;
	--marra-space-sm: 1rem;
	--marra-space-md: 1.5rem;
	--marra-space-lg: 3rem;
	--marra-space-xl: 5.5rem;
	--marra-container: 1200px;
	--marra-gutter: 20px;

	/* Oblici i pokreti */
	--marra-radius: 0;
	--marra-transition: 0.25s ease;
}

@media (min-width: 768px) {
	:root {
		--marra-gutter: 40px;
	}
}