/* ==========================================================================
   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--…)`.

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

:root {
	/* ---- Plochy -------------------------------------------------------- */
	--cpx-bg: var(--wp--preset--color--midnight-950);
	--cpx-surface: var(--wp--preset--color--midnight-900);
	--cpx-surface-card: var(--wp--preset--color--midnight-800);
	--cpx-surface-raised: var(--wp--preset--color--midnight-700);
	--cpx-surface-inset: var(--wp--custom--surface--inset);
	--cpx-surface-overlay: var(--wp--custom--surface--overlay);
	--cpx-surface-nav: var(--wp--custom--surface--nav);
	--cpx-surface-nav-solid: var(--wp--custom--surface--nav-solid);

	/* ---- Text ---------------------------------------------------------- */
	--cpx-text-strong: var(--wp--preset--color--text-strong);
	--cpx-text: var(--wp--preset--color--text-body);
	--cpx-text-muted: var(--wp--preset--color--text-muted);
	--cpx-text-faint: var(--wp--preset--color--text-faint);
	--cpx-text-dim: var(--wp--preset--color--text-dim);
	--cpx-text-on-accent: var(--wp--preset--color--midnight-900);

	/* ---- Značkové farby ------------------------------------------------ */
	--cpx-accent: var(--wp--preset--color--turquoise);
	--cpx-accent-hover: var(--wp--preset--color--turquoise-400);
	--cpx-accent-active: var(--wp--preset--color--turquoise-600);
	--cpx-data: var(--wp--preset--color--blue);
	--cpx-data-hover: var(--wp--preset--color--blue-400);
	--cpx-positive: var(--wp--preset--color--emerald);
	--cpx-critical: var(--wp--preset--color--coral);

	/* ---- Okraje -------------------------------------------------------- */
	--cpx-border-faint: var(--wp--custom--border--faint);
	--cpx-border-subtle: var(--wp--custom--border--subtle);
	--cpx-border: var(--wp--custom--border--default);
	--cpx-border-strong: var(--wp--custom--border--strong);

	/*
	 * Farebné podklady ikon a rámčekov. Dvojica „výplň + linka" na tón,
	 * aby sa akcentová sekcia dala prefarbiť jedinou triedou.
	 */
	--cpx-tint-turquoise: var(--wp--custom--tint--turquoise);
	--cpx-tint-turquoise-line: var(--wp--custom--tint--turquoise-line);
	--cpx-tint-blue: var(--wp--custom--tint--blue);
	--cpx-tint-blue-line: var(--wp--custom--tint--blue-line);
	--cpx-tint-emerald: var(--wp--custom--tint--emerald);
	--cpx-tint-emerald-line: var(--wp--custom--tint--emerald-line);
	--cpx-tint-coral: var(--wp--custom--tint--coral);
	--cpx-tint-coral-line: var(--wp--custom--tint--coral-line);

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

	--cpx-fs-eyebrow: var(--wp--preset--font-size--eyebrow);
	--cpx-fs-caption: var(--wp--preset--font-size--caption);
	--cpx-fs-small: var(--wp--preset--font-size--small);
	--cpx-fs-body: var(--wp--preset--font-size--body);
	--cpx-fs-base: var(--wp--preset--font-size--base);
	--cpx-fs-lead: var(--wp--preset--font-size--lead);
	--cpx-fs-h3: var(--wp--preset--font-size--h3);
	--cpx-fs-metric: var(--wp--preset--font-size--metric);
	/*
	 * Plynulé veľkosti sa skladajú TU, nie v theme.json.
	 *
	 * WordPress prepúšťa hodnoty presetov (font-size, spacing) cez vlastnú
	 * funkciu pre plynulú typografiu. `clamp(...)` zapísaný priamo do
	 * presetu z nej nevyjde — premenná ostane nedefinovaná, `font-size`
	 * sa stane neplatným a nadpis zdedí veľkosť bežného textu.
	 * Hodnoty v `settings.custom` ňou neprechádzajú, preto sú krajné body
	 * aj koeficient tam a `clamp()` sa skladá až v CSS.
	 *
	 * Preset (`--wp--preset--font-size--h1`) ostáva ako pevná veľkosť
	 * pre výber v editore.
	 */
	--cpx-fs-h2: clamp(
		var(--wp--custom--fluid--heading--min),
		var(--wp--custom--fluid--heading--scale),
		var(--wp--custom--fluid--heading--max)
	);
	--cpx-fs-h1: clamp(
		var(--wp--custom--fluid--title--min),
		var(--wp--custom--fluid--title--scale),
		var(--wp--custom--fluid--title--max)
	);

	/* Názov kroku — väčší ako bežný H3, je to ťažisko riadku. */
	--cpx-fs-step: clamp(
		var(--wp--custom--fluid--step--min),
		var(--wp--custom--fluid--step--scale),
		var(--wp--custom--fluid--step--max)
	);

	--cpx-weight-regular: var(--wp--custom--weight--regular);
	--cpx-weight-medium: var(--wp--custom--weight--medium);
	--cpx-weight-semibold: var(--wp--custom--weight--semibold);
	--cpx-weight-bold: var(--wp--custom--weight--bold);
	--cpx-weight-black: var(--wp--custom--weight--black);

	--cpx-lh-display: var(--wp--custom--line--display);
	--cpx-lh-tight: var(--wp--custom--line--tight);
	--cpx-lh-base: var(--wp--custom--line--base);
	--cpx-lh-loose: var(--wp--custom--line--loose);

	--cpx-ls-display: var(--wp--custom--tracking--display);
	--cpx-ls-heading: var(--wp--custom--tracking--heading);
	--cpx-ls-h3: var(--wp--custom--tracking--h3);
	--cpx-ls-eyebrow: var(--wp--custom--tracking--eyebrow);
	--cpx-ls-wordmark: var(--wp--custom--tracking--wordmark);

	/* ---- Spacing ------------------------------------------------------- */
	--cpx-space-4: var(--wp--preset--spacing--10);
	--cpx-space-8: var(--wp--preset--spacing--20);
	--cpx-space-12: var(--wp--preset--spacing--30);
	--cpx-space-16: var(--wp--preset--spacing--40);
	--cpx-space-20: var(--wp--preset--spacing--50);
	--cpx-space-26: var(--wp--preset--spacing--60);
	--cpx-space-34: var(--wp--preset--spacing--70);
	--cpx-space-44: var(--wp--preset--spacing--80);
	--cpx-space-64: var(--wp--preset--spacing--90);
	--cpx-space-section: clamp(
		var(--wp--custom--fluid--section--min),
		var(--wp--custom--fluid--section--scale),
		var(--wp--custom--fluid--section--max)
	);

	/* ---- Rozmery ------------------------------------------------------- */
	--cpx-container: var(--wp--style--global--content-size);
	--cpx-gutter: clamp(
		var(--wp--custom--fluid--gutter--min),
		var(--wp--custom--fluid--gutter--scale),
		var(--wp--custom--fluid--gutter--max)
	);
	--cpx-header-height: var(--wp--custom--size--header);
	--cpx-control-height: var(--wp--custom--size--control);

	/* ---- Tvar ---------------------------------------------------------- */
	--cpx-radius-xs: var(--wp--custom--radius--xs);
	--cpx-radius-sm: var(--wp--custom--radius--sm);
	--cpx-radius-md: var(--wp--custom--radius--md);
	--cpx-radius-lg: var(--wp--custom--radius--lg);
	--cpx-radius-pill: var(--wp--custom--radius--pill);

	/* ---- Pohyb --------------------------------------------------------- */
	--cpx-ease: var(--wp--custom--motion--ease);
	--cpx-duration-fast: var(--wp--custom--motion--fast);
	--cpx-duration: var(--wp--custom--motion--base);
	--cpx-duration-slow: var(--wp--custom--motion--slow);
	--cpx-duration-signal: var(--wp--custom--motion--signal);
}

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