/* tokens.css — JEDAN izvor boja za cijeli proizvod.
 *
 * UX-06: klijentski, radnicki i mjerni portal su imali svoje, potpuno odvojene palete (151 dodatna
 * boja izvan sistema). Klijent koji dobije link vidio je drugu tipografiju i druge nijanse nego
 * vlasnik u aplikaciji — a ponuda i status posla su jedino sto klijent uopste vidi.
 *
 * Portali zadrzavaju svoja pravila i raspored; samo im se vlastita imena varijabli preslikavaju na
 * ove tokene (vidi dno fajla), pa se boja mijenja na JEDNOM mjestu umjesto na pet.
 */

:root {
  /* P0.2: boja teksta NA brand pozadini. Bijela pada u tamnim temama (2,45:1 i 1,95:1)
     jer brand tamo postaje svijetao. Ovo je jedini nacin da dugme ostane citljivo u sve
     cetiri kombinacije teme. */
  /* P2.7: kroz proizvod je bilo PET nijansi iste narandzaste (#F97015 landing, #94551F Studio,
     #c8832a Radnik, #B8864E Klijent, #c07820 Upute) — drift, ne namjera. Svedeno na DVIJE:
     `--next-brand` za svijetle povrsine i `--next-brand-dark` za tamne (Radnik).
     Dokumentovano u INHOME_PRODUCT_UX_DIRECTION.md §2.8. */
  --next-brand-dark: #C8832A;
  --next-brand-dark-hover: #E8A84A;
  /* UX-03 (revizija 2): par za `--next-brand-dark`, koji je nedostajao. `--next-on-brand` ispod
     je par za `--next-brand` i mijenja se s temom; `--next-brand-dark` je SVIJETLA narandzasta
     koja se koristi na tamnim povrsinama (radnicki portal) i ne mijenja se s temom, pa joj treba
     svoj, stalno taman tekst. Bijelo je na njoj davalo 3,12:1 — ispod AA za obican tekst, na
     jedinom velikom dugmetu koje radnik u radionici i nocu uopste vidi.
     Izmjereno: #1A140E daje 5,86:1 na osnovnoj, 8,81:1 na hover, 4,67:1 na pritisnutoj. */
  --next-on-brand-dark: #1A140E;
  --next-on-brand: #FFFFFF;
  --next-bg: #ECE8DF;
  --next-rail: #15171D;
  --next-rail-soft: #1E222A;
  --next-surface: #FAF8F3;
  --next-panel: #FFFFFF;
  --next-line: rgba(33, 26, 18, 0.13);
  --next-line-strong: rgba(33, 26, 18, 0.22);
  --next-text: #211A12;
  --next-muted: #625A50;
  /* P1.5: bilo #7A7063 — 3,97 na --next-bg. */
  --next-hint: #6E665A;
  --next-brand: #94551F;
  --next-brand-hover: #7A4419;
  --next-brand-soft: #F0DFCA;
  --next-good: #23684A;
  /* UX-30: par za `--next-good`, kao sto je `--next-on-brand` par za `--next-brand`. Klijentski
     portal ima zeleno dugme „Prihvati ponudu" s tvrdo zadatim bijelim tekstom; u tamnoj temi
     `--next-good` postaje svijetlozelen (#7CC79E) i bijelo tamo pada na 2,00:1.
     Izmjereno: #0E1A14 daje 8,94:1 na tamnoj zelenoj, bijelo 6,67:1 na svijetloj. */
  --next-on-good: #FFFFFF;
  --next-good-bg: #DDEEE6;
  /* UX-02: potamnjeno sa #98630D (4,20:1) na 4,73:1 — status upozorenja je bio jedini
     koji ne prolazi AA, a stoji bas tamo gdje treba paznja. */
  --next-warn: #8A5A0B;
  --next-warn-bg: #F7E8C9;
  --next-bad: #9B2C1F;
  --next-bad-bg: #F6DED8;
  --next-blue: #245F8F;
  --next-blue-bg: #DDEBF6;
  --next-shadow: 0 12px 28px rgba(33, 26, 18, 0.08);
  /* UX-01/UX-32: ove tri pozadine su bile tvrdo zadate svijetle boje dok im tekst dolazi
     iz tokena koji prati temu — u tamnoj temi je ispadalo bijelo na bijelom (1,02:1). */
  --next-pill-bg: #EFEAE0;
  --next-pill-neutral-bg: #E9E2D5;
  --next-locked-bg: #F4F0E8;
}

html[data-theme="dark"] {
  --next-on-brand: #1A140E;
  --next-bg: #101217;
  --next-rail: #0B0D11;
  --next-rail-soft: #171A21;
  --next-surface: #171A20;
  --next-panel: #20242B;
  --next-line: rgba(233, 235, 239, 0.12);
  --next-line-strong: rgba(233, 235, 239, 0.22);
  --next-text: #ECEEF3;
  --next-muted: #B1B7C2;
  --next-hint: #8C94A1;
  --next-brand: #D39A61;
  --next-brand-hover: #E0AA74;
  --next-brand-soft: rgba(211, 154, 97, 0.18);
  --next-good: #7CC79E;
  --next-on-good: #0E1A14;
  --next-good-bg: rgba(124, 199, 158, 0.14);
  --next-warn: #E0B15A;
  --next-warn-bg: rgba(224, 177, 90, 0.14);
  --next-bad: #E48276;
  --next-bad-bg: rgba(228, 130, 118, 0.15);
  --next-blue: #85B7E6;
  --next-blue-bg: rgba(133, 183, 230, 0.15);
  --next-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
  --next-pill-bg: rgba(233, 235, 239, 0.10);
  --next-pill-neutral-bg: rgba(233, 235, 239, 0.14);
  --next-locked-bg: rgba(233, 235, 239, 0.07);
}

html[data-ui="modern"] {
  --next-on-brand: #FFFFFF;
  --next-bg: #EEF0EC;
  --next-rail: #151A1D;
  --next-rail-soft: #20272B;
  --next-brand: #2F6F5E;
  --next-brand-hover: #245847;
  --next-brand-soft: #DCEAE4;
  --next-blue: #3C6580;
  --next-blue-bg: #DDEAF0;
}

html[data-ui="modern"][data-theme="dark"] {
  --next-on-brand: #10201A;
  --next-bg: #111513;
  --next-rail: #0B0F0E;
  --next-rail-soft: #18201D;
  --next-surface: #171D1A;
  --next-panel: #202823;
  --next-brand: #82C8A7;
  --next-brand-hover: #9BDBBD;
  --next-brand-soft: rgba(130, 200, 167, 0.16);
  --next-blue: #8FBBD4;
  --next-blue-bg: rgba(143, 187, 212, 0.14);
}

/* --- Preslikavanje imena koja portali vec koriste na zajednicke tokene ---------------------
 * Namjerno se ne diraju njihova pravila: `var(--amber)` u klijentskom portalu i dalje radi, samo
 * sada dobija vrijednost iz sistema. Bez ovoga bi svaka izmjena boje trazila pet fajlova.
 */
:root {
  /* klijent.html / zahtjev.html */
  --amber: var(--next-brand);
  --amber-light: var(--next-brand-hover);
  --text: var(--next-text);
  --text-dim: var(--next-muted);
  --text-muted: var(--next-hint);
  --bg: var(--next-bg);
  --surface: var(--next-panel);
  --border: var(--next-line);
  --green: var(--next-good);
  --green-light: var(--next-good);
  --on-green: var(--next-on-good);
  --on-amber: var(--next-on-brand);
  --red: var(--next-bad);

  /* radnik.html */
  --amber-dim: var(--next-brand-soft);
  --blue-light: var(--next-blue);
  --line: var(--next-line);

  /* mjerni.html */
  --brand: var(--next-brand);
  --brand-dark: var(--next-brand-hover);
  --ink: var(--next-text);
  --muted: var(--next-muted);
  --card: var(--next-panel);
  --bad: var(--next-bad);
}

/* Ista porodica fontova kao aplikacija. Portali su ranije trazili 'Inter' koji se nigdje ne
   ucitava, pa su svejedno padali na sistemski font — ovako je to bar iskreno i isto svuda. */
:root {
  --font-app: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Sistemski serif za editorske naslove (uputstvo, logotip radnickog portala). Postoji da
     stranica koja hoce drugaciji karakter ne mora povlaciti font sa tudjeg servera — Georgia je
     na Windowsu i Androidu, Times na ostalom, i sve troje su prave serifne porodice. */
  --font-display: Georgia, "Times New Roman", "Noto Serif", serif;
}

/* P2.3 — tipografska skala.
   Prije: 12px se javljalo 93 puta, 11px 66 puta, uz 10px i 11.5px kao jednokratne izuzetke.
   Radni tekst od 11px je premali za telefon u radionici i za korisnika koji nosi naocale.
   Sitni kraj skale je podignut (10>12, 11>13, 12>14, 13>14); naslovi se NE diraju, da rast
   ne prelije postojece layoute. Sve u `rem` da postovanje sistemske velicine fonta radi —
   `html { font-size: 100% }` znaci da 1rem = ono sto je korisnik podesio u OS-u.

   Tezine: bilo je 850 (58x), 800, 750, 650, 900 — vrijednosti varijabilnog fonta koje sistemski
   font ne moze da izvede, pa ih je browser sam zaokruzivao ili sinteticki podebljavao.
   Skala je sada troclana i iskrena. */
html { font-size: 100%; }

:root {
  --fs-micro: 0.75rem;    /* 12px — brojevi u znackama, uppercase nadnaslovi */
  --fs-small: 0.8125rem;  /* 13px — sekundarni tekst, meta podaci */
  --fs-base: 0.875rem;    /* 14px — radni tekst, labele, dugmad */
  --fs-md: 0.9375rem;     /* 15px — istaknuta vrijednost u kartici */
  --fs-lg: 1.0625rem;     /* 17px */
  --fs-xl: 1.125rem;      /* 18px */
  --fs-2xl: 1.4375rem;    /* 23px — najveci broj na Danas ekranu */

  --fw-normal: 400;
  --fw-semi: 600;
  --fw-bold: 700;
}

/* P2.7 — zaobljenja. Bilo je 4, 5, 6, 7, 8, 9, 10, 12, 13, 14, 16, 20, 24 i 999px kroz proizvod.
   Razlika izmedju 8 i 9 px se ne cita kao odluka nego kao nesigurnost, a vidi se cim dvije
   kartice stanu jedna uz drugu. Sada dvije vrijednosti, podijeljene po publici, plus pilula. */
:root {
  --r-work: 8px;      /* radne povrsine: aplikacija, radnicki ekran, mjerni alat */
  --r-public: 14px;   /* sto klijent vidi: klijentski portal, javna forma zahtjeva */
  --r-pill: 999px;    /* pilule i znacke, bez obzira na povrsinu */
}

/* F6.7: visina donje navigacije na telefonu. Ista vrijednost koju `radnik.html` vec koristi
   (`--nav-h: 64px`) — navigacija je na oba mjesta isti obrazac, pa je i mjera jedna. */
:root {
  --next-nav-h: 64px;
}

/* UX-01 (revizija 2) — skala razmaka. Jedina kategorija dizajn sistema koja je bila potpuno
   netaknuta: 152 jedinstvene vrijednosti za `padding`/`margin`, od cega 86 samo jednom, i 19
   razlicitih `gap`-ova. Razlika izmedju 7 i 8 px se ne cita kao odluka nego kao nesigurnost, a
   vidi se cim dvije kartice stanu jedna uz drugu.

   ZASTO PARNI BROJEVI, A NE 4/8/12/16: revizija je predlozila da se `2/3/5/7/9px` svedu na
   `--sp-1..4` (4/8/12/16). Provjereno na brojkama prije rada — to bi `2px` udvostrucilo, a `9px`
   pomjerilo za 3, dakle vidno rastresilo 145 gustih redova (KPI plocice, redovi materijala,
   evidencija sati). Skala je zato izvedena iz onoga sto proizvod VEC koristi: parni koraci
   2–16 px, gdje 8 px (236 pojava) i 10 px (196) nose vecinu.

   Ucinak: neparne vrijednosti (3, 5, 7, 9, 11, 13 px — 145 pojava) nestaju, a nijedno mjesto se
   ne pomjeri vise od JEDNOG piksela. Nesigurnost odlazi, raspored ostaje. */
:root {
  --sp-1: 2px;    /* zbijeni redovi: broj iznad etikete */
  --sp-2: 4px;
  --sp-3: 6px;
  --sp-4: 8px;    /* difoltni razmak izmedju srodnih elemenata */
  --sp-5: 10px;   /* difoltni unutrasnji razmak kartice/reda */
  --sp-6: 12px;
  --sp-7: 14px;
  --sp-8: 16px;
}