/* ==========================================================================
   TOKENY

   Skratky pre premenné, ktoré generuje theme.json. Nikdy tu nevznikajú
   nové hodnoty — jediným zdrojom pravdy je theme.json. Tento súbor
   existuje preto, aby sa v CSS nepísalo `var(--wp--preset--color--…)`.

   Výnimka sú odvodené rozmery na konci súboru: tie nič nové nezavádzajú,
   len škálujú hodnotu z theme.json podľa šírky okna. Dizajn je kreslený
   na 1728 px, percentá nižšie sú prepočty z tejto šírky.

   Čo tu NEMÁ byť: farba, veľkosť ani spacing zapísané natvrdo.
   ========================================================================== */

:root {
	/* ---- Farby --------------------------------------------------------- */
	--shs-brand: var(--wp--preset--color--brand);
	--shs-brand-dark: var(--wp--preset--color--brand-dark);
	--shs-wash: var(--wp--preset--color--wash);
	--shs-sage: var(--wp--preset--color--sage);
	--shs-sand: var(--wp--preset--color--sand);
	--shs-cream: var(--wp--preset--color--cream);
	--shs-white: var(--wp--preset--color--white);
	--shs-black: var(--wp--preset--color--black);
	--shs-grey: var(--wp--preset--color--grey);
	--shs-border: var(--wp--preset--color--border);
	--shs-mist: var(--wp--preset--color--mist);

	/* ---- Typografia ---------------------------------------------------- */
	--shs-font-display: var(--wp--preset--font-family--display);
	--shs-font-body: var(--wp--preset--font-family--body);

	--shs-fs-micro: var(--wp--preset--font-size--micro);
	--shs-fs-small: var(--wp--preset--font-size--small);
	--shs-fs-reading: var(--wp--preset--font-size--reading);
	--shs-fs-base: var(--wp--preset--font-size--base);
	--shs-fs-lead: var(--wp--preset--font-size--lead);
	--shs-fs-heading: var(--wp--preset--font-size--heading);
	--shs-fs-script: var(--wp--preset--font-size--script);
	--shs-fs-card: var(--wp--preset--font-size--card);
	--shs-fs-stat: var(--wp--preset--font-size--stat);
	--shs-fs-wordmark: var(--wp--preset--font-size--wordmark);
	--shs-fs-title: var(--wp--preset--font-size--title);
	--shs-fs-display: var(--wp--preset--font-size--display);

	--shs-weight-thin: 100;
	--shs-weight-extralight: 200;
	--shs-weight-light: 300;
	--shs-weight-regular: 400;
	--shs-weight-medium: 500;

	/*
	 * Nadpisy aj tlačidlá v dizajne sedia na 0.95 — písmo je tým
	 * zovreté do bloku. `--shs-lh-lead` je riadkovanie perexu v hero,
	 * `--shs-lh-list` riadkovanie odkazov v pätičke.
	 */
	--shs-lh-tight: 0.95;
	--shs-lh-snug: 1.02;
	--shs-lh-lead: 1.07;
	--shs-lh-relaxed: 1.13;
	--shs-lh-loose: 1.24;
	--shs-lh-airy: 1.26;
	--shs-lh-base: 1.5;
	--shs-lh-list: 1.95;

	/* ---- Spacing ------------------------------------------------------- */
	--shs-space-4: var(--wp--preset--spacing--4);
	--shs-space-8: var(--wp--preset--spacing--8);
	--shs-space-11: var(--wp--preset--spacing--11);
	--shs-space-12: var(--wp--preset--spacing--12);
	--shs-space-16: var(--wp--preset--spacing--16);
	--shs-space-18: var(--wp--preset--spacing--18);
	--shs-space-19: var(--wp--preset--spacing--19);
	--shs-space-23: var(--wp--preset--spacing--23);
	--shs-space-24: var(--wp--preset--spacing--24);
	--shs-space-31: var(--wp--preset--spacing--31);
	--shs-space-32: var(--wp--preset--spacing--32);
	--shs-space-42: var(--wp--preset--spacing--42);
	--shs-space-48: var(--wp--preset--spacing--48);
	--shs-space-64: var(--wp--preset--spacing--64);
	--shs-space-80: var(--wp--preset--spacing--80);
	--shs-space-96: var(--wp--preset--spacing--96);

	/* Zaužívaný odstup sekcie zhora a zdola — je to tá istá hodnota. */
	--shs-space-section: var(--shs-space-96);

	/* ---- Rozmery ------------------------------------------------------- */
	--shs-container: var(--wp--style--global--content-size);

	/*
	 * Bočný odstup obsahu. V dizajne 42 px pri 1728 px — teda 2.43 %.
	 * Na úzkom okne klesá, ale nie pod čitateľnú mieru.
	 */
	/* Okraj stránky: 60 px na desktope, 20 px na mobile. */
	--shs-gutter: clamp(20px, 3.5vw, 60px);

	/*
	 * Vzdialenosť od kraja plochy k obsahu kontajnera (1600 px): na
	 * bežnej šírke je to okraj stránky, na širokom monitore polovica
	 * prebytku — obsah sekcií bez .shs-container tak ostáva v strede
	 * a „neulieta" k okrajom obrazovky. Percento sa počíta z prvku,
	 * na ktorom sa token použije, preto patrí len na plné šírky.
	 */
	--shs-edge: max(var(--shs-gutter), calc((100% - var(--shs-container)) / 2));
	--shs-edge-inset: calc(var(--shs-edge) + var(--shs-inset));

	/*
	 * Text v hero je odsadený hlbšie ako obsah hlavičky: 160 px pri
	 * 1728 px = 9.26 %. Nie je to nový rozmer, len väčšie odsadenie
	 * toho istého kontajnera.
	 */
	--shs-hero-inset: max(clamp(var(--shs-space-24), 9.26vw, 160px), calc((100% - var(--shs-container)) / 2 + 100px));

	/* Dekor (sociálne siete v hero) končí 112 px od pravého okraja. */
	--shs-decor-inset: max(clamp(var(--shs-space-24), 6.48vw, 112px), calc((100% - var(--shs-container)) / 2 + 52px));

	/*
	 * Vnútorné odsadenie v kontajneri — 108 px pri 1728 px (6.25 %).
	 * Používa ho pätička (odkazy a siete) aj sekcia s číslami.
	 */
	/* Hlboký odsek obsahu OD hrany kontajnera: 150 px od kraja = 60 + 90. */
	--shs-inset: clamp(0px, 5.2vw, 90px);

	/*
	 * Koľko položiek vidno v kolotoči. Na bežnom monitore dve — tri by
	 * boli také úzke, že by sa text v karte lámal po slove. Tri sa
	 * ukážu až od 1900 px (2K a viac), kde je na ne miesto.
	 */
	--shs-carousel-count: 2;

	/* Vlas — linky a rámiky tlačidiel majú v dizajne 0.5 px. */
	--shs-hairline: 0.5px;

	/* ---- Ostatné ------------------------------------------------------- */
	--shs-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--shs-duration: 0.2s;
}

@media (min-width: 1900px) {
	:root {
		--shs-carousel-count: 3;
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--shs-duration: 0.01ms;
	}
}