/* ==========================================================================
   DESIGN TOKENS

   Jediný zdroj pravdy pre farby / typografiu / spacing je theme.json.
   Tento súbor iba skracuje WP preset premenné na čitateľné názvy
   a dopĺňa tokeny, ktoré theme.json nevie vyjadriť (radius, tiene, layout).

   PRAVIDLO: v žiadnom komponente nepoužívaj natvrdo zapísanú hodnotu.
   Vždy siahni po premennej odtiaľto. Hodnoty pochádzajú z Figmy.
   ========================================================================== */

:root {
	/* ---- Farby ------------------------------------------------------- */
	--pc-blue: var(--wp--preset--color--blue);
	--pc-blue-dark: var(--wp--preset--color--blue-dark);
	--pc-pink: var(--wp--preset--color--pink);
	--pc-lime: var(--wp--preset--color--lime);
	--pc-mint: var(--wp--preset--color--mint);
	--pc-sale: var(--wp--preset--color--sale);
	--pc-sky: var(--wp--preset--color--sky);
	--pc-mist: var(--wp--preset--color--mist);
	--pc-leaf: var(--wp--preset--color--leaf);
	--pc-white: var(--wp--preset--color--white);
	--pc-black: var(--wp--preset--color--black);
	--pc-grey: var(--wp--preset--color--grey);
	--pc-border: var(--wp--preset--color--border);

	/* Farby ikon z Figmy. Zámerne nie sú v theme.json palette —
	   klient ich needituje, len by mu zaplnili paletu v editore. */
	--pc-cart: #8a38f5;
	--pc-icon-muted: #b7b7b7;
	/* Placeholder vo formulároch (Figma). */
	--pc-caption: #808080;
	/* Plné hviezdy hodnotenia (rovnaké ako na karte produktu). */
	--pc-star: #fbbf24;

	/* ---- Typografia -------------------------------------------------- */
	--pc-font: var(--wp--preset--font-family--inter);
	--pc-font-tile: var(--wp--preset--font-family--figtree);
	/* Len na dekoratívne prekrytie fotiek („faq“) — nie na bežný text. */
	--pc-font-display: var(--wp--preset--font-family--playfair);

	--pc-fs-badge: var(--wp--preset--font-size--badge);
	--pc-fs-micro: var(--wp--preset--font-size--micro);
	--pc-fs-small: var(--wp--preset--font-size--small);
	--pc-fs-base: var(--wp--preset--font-size--base);
	--pc-fs-tile: var(--wp--preset--font-size--tile);
	--pc-fs-price-old: var(--wp--preset--font-size--price-old);
	--pc-fs-lead: var(--wp--preset--font-size--lead);
	--pc-fs-heading: var(--wp--preset--font-size--heading);
	--pc-fs-price: var(--wp--preset--font-size--price);
	--pc-fs-title: var(--wp--preset--font-size--title);
	--pc-fs-display: var(--wp--preset--font-size--display);

	--pc-weight-regular: 400;
	--pc-weight-medium: 500;
	--pc-weight-bold: 700;
	--pc-weight-extrabold: 800;

	--pc-lh-tight: 1.15;
	--pc-lh-base: 1.45;
	/* Footer zoznamy vo Figme: 22px text / 39px riadok */
	--pc-lh-loose: 1.77;

	/* ---- Spacing ----------------------------------------------------- */
	--pc-space-4: var(--wp--preset--spacing--10);
	--pc-space-8: var(--wp--preset--spacing--20);
	--pc-space-12: var(--wp--preset--spacing--30);
	--pc-space-16: var(--wp--preset--spacing--40);
	--pc-space-24: var(--wp--preset--spacing--50);
	--pc-space-32: var(--wp--preset--spacing--60);
	--pc-space-48: var(--wp--preset--spacing--70);
	--pc-space-64: var(--wp--preset--spacing--80);
	--pc-space-section: var(--wp--preset--spacing--90);

	/* ---- Layout ------------------------------------------------------ */
	/* Figma: plátno 1920, obsah 259 → 1659 = 1400px kontajner */
	--pc-container: var(--wp--style--global--content-size);
	/*
	 * Bočný odstup obsahu od okraja okna. Na desktope 60px; na úzkych
	 * displejoch klesá, inak by 60px na oboch stranách zjedlo tretinu
	 * šírky telefónu.
	 */
	--pc-gutter: clamp(20px, 5vw, 60px);

	/* ---- Radius (z Figmy) -------------------------------------------- */
	--pc-radius-xs: 2.5px; /* tlačidlá, badge */
	--pc-radius-sm: 5px;   /* dlaždice kategórií, karty */
	--pc-radius-md: 8px;   /* USP dlaždice */

	/* ---- Rozmery opakujúcich sa prvkov ------------------------------- */
	--pc-btn-height: 40px;
	--pc-badge-height: 20px;
	/* Figma: lišta headera 94px */
	--pc-header-height: 94px;

	/* ---- Pohyb ------------------------------------------------------- */
	--pc-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--pc-duration: 0.2s;
}

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