/*
 * Design tokeni — Extra Potencija
 *
 * Jedini izvor istine za boje, tipografiju i spacing. Nijedna druga datoteka
 * ne smije sadržavati hex vrijednost; ako ti treba nova boja, dodaj token ovdje.
 *
 * Odluka o ljubičastoj: sajt je imao tri ljubičaste u opticaju (#3A1076 logo,
 * #5640AF Blocksy paleta, #613594 render gumba). Primarna je ona iz logotipa.
 * #5640AF preživljava isključivo kao CTA/badge na tamnim pločama, gdje
 * primarna nema dovoljan kontrast prema #1E0842.
 */

:root {
	/* — Brend ————————————————————————————————— */
	--ep-brand: #3A1076;
	--ep-brand-alt: #5640AF;
	--ep-brand-dark: #1E0842;
	--ep-brand-tint: #F2EEFA;
	--ep-brand-tint-2: #F4F0FB;
	--ep-brand-line: #D3CBE4;

	/* Hover za primarne gumbe i linkove. */
	--ep-brand-hover: #240A3F;

	/* — Tekst ————————————————————————————————— */
	--ep-ink: #1C1524;
	--ep-ink-70: #48414F;
	--ep-muted: #6C6A66;
	--ep-muted-purple: #8A7FA0;

	/* — Podloge ——————————————————————————————— */
	--ep-paper: #F6F4F1;
	--ep-surface: #FFFFFF;

	/* — Linije ———————————————————————————————— */
	--ep-hair: #E2DDD6;
	--ep-hair-soft: #F1EEE9;
	--ep-hair-dark: rgba(255, 255, 255, 0.14);
	--ep-hair-dark-soft: rgba(255, 255, 255, 0.10);

	/* — Semantika ————————————————————————————— */
	--ep-success: #0F7A4E;
	--ep-success-on-dark: #9BE8C0;
	--ep-on-dark: #C9BCDD;
	--ep-on-dark-strong: #E4E0EC;
	--ep-on-dark-accent: #9C86E0;
	--ep-ticker-text: #EDE6F7;
	--ep-selection: #D8CCF3;

	/* — Tipografija ——————————————————————————— */
	--ep-font-display: "Antonio", "Arial Narrow", system-ui, sans-serif;
	--ep-font-body: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Naslovi su uvijek uppercase s vrlo tijesnim line-heightom — to je potpis dizajna. */
	--ep-display-lh: 0.92;
	--ep-display-ls: 0.002em;

	/* Micro-labeli: eyebrow, meta, oznake stupaca. */
	--ep-micro-size: 10px;
	--ep-micro-ls: 0.2em;

	/* — Skala naslova (desktop) ————————————————— */
	--ep-h1-hero: 88px;
	--ep-h1-page: 62px;
	--ep-h2-section: 45px;
	--ep-h2-panel: 40px;
	--ep-card-title: 25px;
	--ep-card-price: 32px;
	--ep-single-price: 58px;

	/* — Layout ———————————————————————————————— */
	--ep-container: 1360px;
	--ep-gutter: 32px;
	--ep-section-y: 72px;

	/* — Oblik ————————————————————————————————— */
	/* Nula posvuda; 3px isključivo na gumbima i inputima. Nema sjena — dubina
	   se gradi hairline linijama i tamnim pločama. */
	--ep-radius: 0;
	--ep-radius-control: 3px;

	/* — Ostalo ———————————————————————————————— */
	--ep-tap: 44px;
	--ep-ease: 0.22s ease;
	--ep-ticker-duration: 34s;
}

/* Tipografska skala se smanjuje prije nego što layout pukne — 88px h1
   na 1024px širine prelama se na četiri reda i guši hero. */
@media (max-width: 1199px) {
	:root {
		--ep-h1-hero: 68px;
		--ep-h1-page: 52px;
		--ep-h2-section: 38px;
		--ep-h2-panel: 34px;
		--ep-single-price: 48px;
	}
}

@media (max-width: 767px) {
	:root {
		--ep-h1-hero: 36px;
		--ep-h1-page: 32px;
		--ep-h2-section: 28px;
		--ep-h2-panel: 26px;
		--ep-card-title: 19px;
		--ep-card-price: 24px;
		--ep-single-price: 34px;
		--ep-gutter: 18px;
		--ep-section-y: 44px;
	}
}