/* ==========================================================================
   TOKENY — SIDEQUEST

   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ú tri skupiny, ktoré do theme.json nepatria:
     · okraje — poloprehľadné vrstvy, nie farby na výber v editore
     · tracking a riadkovanie — vlastnosti sadzby, nie tokeny obsahu
     · časovanie a rozmery rozhrania — nemá ich meniť redaktor
   ========================================================================== */

:root {
	/* ---- Farby ---------------------------------------------------------- */
	--sq-bg: var(--wp--preset--color--bg);
	--sq-surface: var(--wp--preset--color--surface);
	--sq-elevated: var(--wp--preset--color--elevated);
	--sq-elevated-2: var(--wp--preset--color--elevated-2);

	--sq-text: var(--wp--preset--color--text);
	--sq-text-secondary: var(--wp--preset--color--text-secondary);
	--sq-text-tertiary: var(--wp--preset--color--text-tertiary);

	--sq-accent: var(--wp--preset--color--accent);
	--sq-accent-hover: var(--wp--preset--color--accent-hover);
	--sq-accent-dim: var(--wp--preset--color--accent-dim);
	--sq-accent-ink: var(--wp--preset--color--accent-ink);
	--sq-accent-soft: rgba(204, 255, 51, 0.12);

	--sq-personal: var(--wp--preset--color--personal);
	--sq-personal-soft: rgba(139, 92, 255, 0.14);

	--sq-live: var(--wp--preset--color--live);
	--sq-warning: var(--wp--preset--color--warning);
	--sq-positive: var(--wp--preset--color--positive);

	--sq-border: rgba(255, 255, 255, 0.08);
	--sq-border-strong: rgba(255, 255, 255, 0.16);

	/* ---- Typografia ------------------------------------------------------ */
	--sq-font-display: var(--wp--preset--font-family--display);
	--sq-font: var(--wp--preset--font-family--sans);

	--sq-fs-micro: var(--wp--preset--font-size--micro);
	--sq-fs-small: var(--wp--preset--font-size--small);
	--sq-fs-ui: var(--wp--preset--font-size--ui);
	--sq-fs-base: var(--wp--preset--font-size--base);
	--sq-fs-feed: var(--wp--preset--font-size--feed);
	--sq-fs-lead: var(--wp--preset--font-size--lead);
	--sq-fs-card: var(--wp--preset--font-size--card);
	--sq-fs-heading: var(--wp--preset--font-size--heading);
	--sq-fs-title: var(--wp--preset--font-size--title);
	--sq-fs-display: var(--wp--preset--font-size--display);
	--sq-fs-score: var(--wp--preset--font-size--score);

	--sq-weight-regular: 400;
	--sq-weight-medium: 500;
	--sq-weight-semibold: 600;
	--sq-weight-bold: 700;

	--sq-lh-display: 1.08;
	--sq-lh-tight: 1.15;
	--sq-lh-base: 1.5;
	--sq-lh-body: 1.7;

	/*
	 * Space Grotesk je opticky širšia než klasický condensed grotesk.
	 * Bez záporného trackingu by veľké titulky pôsobili rozsypane.
	 */
	--sq-track-display: -0.03em;
	--sq-track-title: -0.025em;
	--sq-track-heading: -0.015em;
	--sq-track-card: -0.01em;
	--sq-track-eyebrow: 0.08em;

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

	/* ---- Rozmery --------------------------------------------------------- */
	--sq-container: var(--wp--style--global--wide-size);
	--sq-container-text: var(--wp--style--global--content-size);
	--sq-gutter: clamp(16px, 4vw, 40px);

	--sq-header-height: 64px;
	--sq-platformnav-height: 44px;

	/* ---- Ostatné --------------------------------------------------------- */
	--sq-radius: 2px;
	--sq-radius-pill: 999px;
	--sq-btn-height: 40px;

	--sq-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
	--sq-duration: 0.2s;
	--sq-duration-slow: 0.4s;
}

/*
 * Mobilná škála. Prepisujú sa priamo premenné z theme.json — WordPress
 * ich vypisuje na :root, takže ich tu vieme pre užšie okná predefinovať
 * bez toho, aby sme museli meniť každý komponent zvlášť.
 *
 * Nie je to mechanické zmenšenie: pomery medzi stupňami sú na mobile iné,
 * lebo veľké titulky musia klesnúť viac než body text.
 */
@media (max-width: 767px) {
	:root {
		--wp--preset--font-size--display: 32px;
		--wp--preset--font-size--title: 28px;
		--wp--preset--font-size--heading: 21px;
		--wp--preset--font-size--card: 18px;
		--wp--preset--font-size--feed: 17px;
		--wp--preset--font-size--lead: 17px;
		--wp--preset--font-size--base: 16px;
		--wp--preset--font-size--score: 64px;

		--wp--preset--spacing--90: 56px;

		--sq-lh-display: 1.12;
		--sq-header-height: 56px;
		--sq-platformnav-height: 40px;
	}
}

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