/*
 * Design tokeny. Bloky a šablony používají jen tyto proměnné, žádné natvrdo zapsané barvy.
 * Kontrast ověřen (WCAG): --muted na krému 5,2:1, --accent-text na krému 5,9:1,
 * --ink na --accent 6,1:1. --muted-soft (3,3:1) jen pro velký nebo nepodstatný text.
 */

:root {
	/* Barvy: základ */
	--ink: #12332b;
	--ink-hover: #1f4a3e;
	--ink-2: #2d4a42;
	--muted: #5d6b66;
	--muted-soft: #7d8a85;
	--white: #fff;

	/* Pozadí */
	--bg: #fbf6ec;
	--sand: #f5efe2;
	--sand-2: #efe7d6;
	--sand-3: #ebe3d3;
	--photo: #fff;              /* rámeček fotky produktu: fotky jsou na bílém pozadí, zobrazují se celé */
	--line: #efe8da;
	--line-2: #e6dfd0;
	--line-card: #ebe4d6;
	--line-strong: #c9c0ae;

	/* Akcent (jantar) */
	--accent: #f8962d;
	--accent-hover: #ec7c0e;
	--accent-text: #a53e00;
	--accent-on-dark: #ffa746;
	--accent-light: #ffc165;
	--gold: #ffd27a;

	/* Stav skladu */
	--ok: #2c965d;
	--ok-text: #156f41;
	--ok-strong: #005e31;
	--ok-bg: #d2f6dd;

	/* Logo */
	--logo-1: #d58d25;
	--logo-2: #00847e;
	--logo-3: #ca4b85;
	--logo-dot: #d35f00;
	--logo-1-dark: #f0a646;
	--logo-2-dark: #43b2ac;
	--logo-3-dark: #e96fa3;
	--logo-dot-dark: #fb9f44;

	/* Na tmavém podkladu */
	--on-dark: #c9d6d1;
	--on-dark-muted: #9fb3ac;
	--on-dark-line: rgba(255, 255, 255, .14);
	--on-dark-fill: rgba(255, 255, 255, .1);

	/* Písma */
	--font-nadpis: "Bricolage Grotesque", "Bricolage Fallback", sans-serif;
	--font-text: "Hanken Grotesk", "Hanken Fallback", sans-serif;

	/* Rozměry */
	--sirka: 80rem;            /* 1280 px obsah */
	--sirka-panel: 85rem;      /* 1360 px barevné panely (o 40 px širší z každé strany) */
	--okraj: clamp(1rem, 5.5vw, 5rem);
	--okraj-panel: clamp(.75rem, 2.8vw, 2.5rem);
	--sekce: clamp(2.25rem, 5vw, 5rem);
	/* Vodorovné odsazení obsahu na šířku --sirka (procenta se dopočítají až v místě použití). */
	--vnitrek: max(var(--okraj), calc((100% - var(--sirka)) / 2));
	--vnitrek-panel: max(var(--okraj-panel), calc((100% - var(--sirka-panel)) / 2));

	/* Zaoblení: střídmé. --r-pill jen pro chipy, štítky a odznaky, tlačítka a pole mají --r-md. */
	--r-sm: .25rem;
	--r: .375rem;
	--r-md: .5rem;
	--r-lg: .75rem;
	--r-xl: 1rem;
	--r-pill: 999px;

	--stin: 0 .625rem 1.75rem rgba(18, 51, 43, .1);
	--stin-karta: 0 .375rem 1.25rem rgba(18, 51, 43, .08);
	--stin-lista: 0 -.375rem 1.25rem rgba(18, 51, 43, .08);

	--hlavicka-offset: var(--wp-admin--admin-bar--height, 0px);
}

/* Na mobilu jeden boční okraj pro hlavičku, obsah i barevné panely, aby lícovaly. */
@media (max-width: 47.99rem) {
	:root {
		--okraj: 1rem;
		--okraj-panel: 1rem;
	}
}

/* Do 600 px admin bar WordPressu odjíždí se stránkou (position: absolute), nic pod ním neodsazujeme. */
@media screen and (max-width: 600px) {
	:root {
		--hlavicka-offset: 0px;
	}
}