/* ==================================================================
   TOKENI - jedino mesto na kome sme da stoji boja.
   Sloj 1: sirova paleta. Sloj 2: značenje. Komponente koriste samo sloj 2.
   Promena cele šeme = izmena sloja 1.
================================================================== */
:root {
	/* ---------- SLOJ 1: sirova paleta ---------- */
	/* zelena, nosi identitet */
	--z950: #0C241D;
	--z900: #113128;
	--z800: #18432F;
	--z700: #215A41;
	--z600: #2D6E52;
	--z300: #9DB9A9;
	--z200: #C4D6CB;
	--z100: #E2ECE6;
	--z050: #F0F5F2;

	/* mesing, tanki detalji i brojevi */
	--m700: #7A5B27;
	--m600: #977235;
	--m500: #B08A4A;
	--m300: #D8C197;
	--m200: #E7D8BC;
	--m100: #F4ECDD;

	/* neutralne */
	--belo: #FFFFFF;
	--papir: #F7F5F0;
	--kamen: #EEEBE4;
	--mastilo: #15201B;
	--siva: #47534D;
	--siva-2: #66716B;
	--linija: #E0DCD3;
	--linija-2: #CBC5B8;

	/* providne vrednosti za tamne površine */
	--belo-90: rgba(255, 255, 255, .9);
	--belo-72: rgba(255, 255, 255, .72);
	--belo-16: rgba(255, 255, 255, .16);
	--belo-08: rgba(255, 255, 255, .08);
	--senka-boja: rgba(12, 36, 29, .14);
	--veo-boja: rgba(12, 36, 29, .78);

	/* ---------- SLOJ 2: značenje ---------- */
	--boja-osnovna: var(--z800);
	--boja-osnovna-hover: var(--z700);
	--boja-osnovna-tamna: var(--z900);
	--boja-najtamnija: var(--z950);
	--boja-osnovna-blaga: var(--z100);
	--boja-osnovna-najblaza: var(--z050);

	--boja-detalj: var(--m500);
	--boja-detalj-tekst: var(--m700);
	--boja-detalj-jaka: var(--m600);
	--boja-detalj-blaga: var(--m100);
	--boja-detalj-na-tamnom: var(--m300);
	--boja-detalj-na-tamnom-hover: var(--m200);

	--pozadina: var(--belo);
	--pozadina-2: var(--papir);
	--pozadina-3: var(--kamen);
	--povrsina: var(--belo);

	--tekst: var(--mastilo);
	--tekst-blag: var(--siva);
	--tekst-slab: var(--siva-2);
	--naslov: var(--z900);

	--ivica: var(--linija);
	--ivica-jaka: var(--linija-2);

	--na-tamnom: var(--belo);
	--na-tamnom-blag: var(--belo-72);
	--na-tamnom-jak: var(--belo-90);
	--na-tamnom-blag-2: var(--z200);
	--na-tamnom-ivica: var(--belo-16);
	--na-tamnom-povrsina: var(--belo-08);

	--senka: 0 24px 48px -32px var(--senka-boja);
	--senka-s: 0 10px 24px -18px var(--senka-boja);
	--veo: var(--veo-boja);
	--fokus: var(--m500);

	/* ---------- tipografija ---------- */
	--serif: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
	--sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	/* ---------- oblik i razmak ---------- */
	--r: 4px;
	--r-s: 2px;
	--maxw: 1200px;
	--strana: clamp(16px, 4vw, 32px);
	--sekcija: clamp(72px, 9vw, 128px);
}