/*!
 * STŠ Škola — dizajn tokeni (zajednički za sts-skola i sts-motion).
 * Svetao, vedar, uredan; boje polaze od logoa (crvena, plava/crna, bela) + tirkizna sa starog sajta.
 * Logo (izmereno): crvena #FF0000, nebo-plava #3C9CDD, crna, bela. Za tekst/UI koriste se tamnije,
 * pristupačne varijante (kontrast ≥ 4.5:1 na beloj); #3C9CDD je samo dekorativni ton.
 */
:root {
	/* Osnova */
	--sts-pozadina: #ffffff;
	--sts-povrsina: #f4f7fa;
	--sts-povrsina-2: #e9eff5;
	--sts-tekst: #14202e;
	--sts-tekst-blag: #4a5a6c;
	--sts-linija: #d6dee8;
	--sts-linija-jaka: #b4c1d0;

	/* Brend */
	--sts-primarna: #17325c;      /* tamnoplava (umesto crne iz logoa) */
	--sts-akcenat: #d7262e;       /* crvena (pristupačna varijanta #FF0000) */
	--sts-tirkizna: #0e9c93;
	--sts-nebo: #3c9cdd;          /* plava iz logoa — dekorativno */
	--sts-plava: #1f6fb0;         /* glavna plava: plava iz logoa potamnjena za kontrast 5,3:1 na beloj */

	/* Područja rada */
	--sts-elektro: #1f6fb0;
	--sts-masinstvo: #d7262e;
	--sts-saobracaj: #0e9c93;
	--sts-opste: #17325c;

	/* Tekst preko boje područja (tamnija varijanta za tekst na beloj) */
	--sts-elektro-tekst: #1f6fb0;
	--sts-masinstvo-tekst: #b51f26;
	--sts-saobracaj-tekst: #0b7a73;

	/* Tipografija */
	--sts-font-naslov: "Unbounded", "Segoe UI", system-ui, -apple-system, sans-serif;
	--sts-font-tekst: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
	--sts-font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
	--sts-h1: clamp(2rem, 1.2rem + 3.6vw, 3.75rem);
	--sts-h2: clamp(1.6rem, 1.1rem + 2.2vw, 2.6rem);
	--sts-h3: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
	--sts-tekst-velicina: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
	--sts-mali: 0.875rem;
	--sts-sitno: 0.75rem;

	/* Prostor i oblik */
	--sts-razmak-1: 0.25rem;
	--sts-razmak-2: 0.5rem;
	--sts-razmak-3: 0.75rem;
	--sts-razmak-4: 1rem;
	--sts-razmak-5: 1.5rem;
	--sts-razmak-6: 2rem;
	--sts-razmak-7: 3rem;
	--sts-razmak-8: clamp(3rem, 2rem + 4vw, 6rem);
	--sts-radijus: 10px;
	--sts-radijus-mali: 6px;
	--sts-radijus-pun: 999px;
	--sts-sirina: 1240px;
	--sts-senka: 0 1px 2px rgba(20, 32, 46, 0.06), 0 6px 20px rgba(20, 32, 46, 0.06);
	--sts-senka-hover: 0 2px 4px rgba(20, 32, 46, 0.08), 0 12px 32px rgba(20, 32, 46, 0.1);
	--sts-fokus: 0 0 0 3px #ffffff, 0 0 0 5px var(--sts-plava);

	/* Pokret */
	--sts-trajanje: 220ms;
	--sts-kriva: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--sts-trajanje: 0ms;
	}
}