/* ===================================================================================== kaza.rs — ZAJEDNIČKI SLOJ TOKENA (predlog, 04.09.2026.) Tema: „Clean Slate" (21st.dev · shadcn/ui, autor Serafim), svetli režim, prevedena u obične CSS promenljive — bez Tailwinda, bez build koraka. Učitava se na SVAKOJ strani odmah posle css/base.css, PRE css/style.css. Dok je nijedan selektor ne koristi, ne menja ništa (korak 0 plana). Sve dole je ili doslovno iz teme, ili označeno kao brend. ===================================================================================== */ :root{ /* ---------- PODLOGE I TEKST (tema, nepromenjeno) ---------- background = podloga strane (slate-50, ne čisto bela) foreground = osnovni tekst (slate-800, ne crna — ovo je „manje crne" u praksi) card = kartice, paneli, zaglavlje, podnožje muted = naizmenične sekcije, tiha podloga unutar kartica secondary = pritisnuto/aktivno stanje tihih elemenata, trake grafikona u miru */ --background:#f8fafc; --foreground:#1e293b; --card:#ffffff; --card-foreground:#1e293b; --popover:#ffffff; --popover-foreground:#1e293b; --muted:#f3f4f6; --muted-foreground:#6b7280; /* sekundarni tekst: 4,8:1 na beloj, 4,6:1 na podlozi (AA) */ --secondary:#e5e7eb; --secondary-foreground:#374151; /* ---------- BREND (tema prilagođena) ---------- primary tema #6366f1 (indigo) → kaza plava. Sve glavne radnje: puna plava + beli tekst (4,66:1). primary-hover naš dodatak (tema koristi primary/90); tekst-linkovi stoje na ovoj tamnijoj (6,8:1). accent tema #e0e7ff (indigo) → svetloplava izvedena iz brenda; podloga izabranog/istaknutog. ring fokus tastaturom i prsten polja — ista plava. */ --primary:#006aff; --primary-foreground:#ffffff; --primary-hover:#0052cc; --accent:#e6f0ff; --accent-foreground:#0052cc; --accent-border:#bcd4ff; --ring:#006aff; --ring-shadow:0 0 0 4px rgba(0,106,255,.18); /* jedan prsten za sva polja i izbore */ /* ---------- UPOZORENJE / GREŠKA ---------- destructive tema #ef4444 → crvena iz palete (#e04848). Tereti (hipoteka), greške u obrascima. */ --destructive:#e04848; --destructive-foreground:#ffffff; /* ---------- OBRUBI (tema) ---------- border = kartice, tabele; input = polja, prekidači, čipovi */ --border:#d1d5db; --input:#d1d5db; /* ---------- ZAOBLJENJA (tema: 0.5rem + skala) ---------- sm 4 = oznake, tačke; md 6 = dugmad, polja, mali čipovi; lg 8 = veća polja, obrasci; xl 12 = kartice; 2xl 16 = veliki paneli (hero kartica, „evidencija", puls); full = pilule */ --radius:0.5rem; --radius-sm:calc(var(--radius) - 4px); --radius-md:calc(var(--radius) - 2px); --radius-lg:var(--radius); --radius-xl:calc(var(--radius) + 4px); --radius-2xl:calc(var(--radius) + 8px); --radius-full:999px; /* ---------- SENKE (tema, doslovno) — jedna lestvica uzdignuća, bez ručnih senki ---------- xs = kartica u miru; sm = pritisnuto/izabrano; md = kartica na prelazak, polje pretrage; lg = podignuti panel (karta), kartica sa fotografijom na prelazak; xl = hero kartica; 2xl = oblačići */ --shadow-xs:0px 4px 8px -1px hsl(0 0% 0% / 0.05); --shadow-sm:0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10); --shadow:0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10); --shadow-md:0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 2px 4px -2px hsl(0 0% 0% / 0.10); --shadow-lg:0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 4px 6px -2px hsl(0 0% 0% / 0.10); --shadow-xl:0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 8px 10px -2px hsl(0 0% 0% / 0.10); --shadow-2xl:0px 4px 8px -1px hsl(0 0% 0% / 0.25); /* ---------- TIPOGRAFIJA ---------- font-sans tema: Inter → Open Sans (sajt već nosi Open Sans lokalno; bez spoljnih fontova) tracking nadnaslovi velikim slovima = widest; naslovi = tight; brojevi = tabular-nums (ne token, pravilo) */ --font-sans:"Open Sans","Segoe UI",Helvetica,Arial,sans-serif; --tracking-normal:0em; --tracking-tight:-0.025em; --tracking-wide:0.025em; --tracking-wider:0.05em; --tracking-widest:0.1em; /* ---------- RAZMAK (tema: spacing 0.25rem × n) ---------- Jedina dozvoljena vrednost za margin/padding/gap: 4·8·12·16·24·32·48·64·96. sekcija od sekcije 64 (telefon 48) · kolone 48 (32) · naslov→sadržaj 24 (16) · kartice unutra 16, između 16 */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; /* ---------- KRETANJE ---------- jedno trajanje, jedna kriva; ulazak 500 ms; reduced-motion gasi sve */ --dur:180ms; --dur-in:500ms; --ease:cubic-bezier(.2,.7,.2,1); /* ---------- TAMNI REŽIM ISTE TEME ---------- Koristi se SAMO kao akcenat na maloj površini: karta oglasa, tamni čipovi (nadnaslov „evidencija"). Nikad kao podloga cele sekcije. */ --d-background:#0f172a; --d-card:#1e293b; --d-foreground:#e2e8f0; --d-muted:#152032; --d-muted-foreground:#9ca3af; --d-border:#4b5563; --d-secondary:#2d3748; --d-secondary-foreground:#d1d5db; /* ---------- IDENTITET VAN TEME (ne dirati) ---------- kaza-red = logotip; star = zvezdice ocena (semantika, ne tema); blue-300 = oznake na tamnoj karti; semantičke zelene sajta (bez tereta, aktivan oglas, POI na mapi) OSTAJU po CLAUDE.md pravilu — nisu ovde. */ --kaza:#c8332c; --star:#f5a623; --on-dark-accent:#93c5fd; /* ---------- STANJA (semantika, NE brend) ---------- Semafor: ok = zeleno, warn = amber, bad = crveno. Vrednosti su one koje sajt već nosi na stranama zgrada (emerald #0f5132 „bez tereta", amber #a16207 „hipoteka"), ne nove. PRAVILO ZELENE (odluka 04.09.2026., v. tema-plan.md §4a): zelena SME samo kao oznaka stanja „u redu" — tekst, tačka, kvačica ili značka visine ≤ 24 px, kroz --status-ok / --status-ok-soft, na belom spisku klasa iz plana; zelena NE SME kao podloga, obrub ili gradijent bilo čega što se klikće (a, button, label, panel sa CTA), kao boja dugmeta ili linka, ni kao tekst koji nije stanje. Radnja je uvek --primary. warn = upisan teret koji ne sprečava prodaju (hipoteka); bad = ono što je blokira (zabrana otuđenja). */ --status-ok:#0f5132; --status-ok-soft:#d1fae5; --status-warn:#a16207; --status-warn-soft:#fef3c7; --status-bad:var(--destructive); --status-bad-soft:#fdecec; } /* ───────────────────────────────────────────────────────────────────────── KORAK 0 — samo tokeni, nijedan selektor koji pogađa postojeće elemente. Iz nacrta su NAMERNO izostavljeni, i idu u kasnije korake: • .status / .status::before / .status-ok|warn|bad Ime `.status` se već koristi (css/admin/admin.css). Uvodi se tek uz stranu koja ga stvarno koristi, i pod imenom koje se ne sudara. • .kz-dark Nema potrošača dok naslovna ne pređe na tokene (korak 2). • @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ transition:none!important; animation:none!important } } 🔴 Ovo bi ugasilo animaciju i tamo gde ona NOSI ZNAČENJE: vrteška „Pretražujemo katastar" na /procena (@keyframes val-spin) stajala bi nepomično četiri sekunde, pa bi korisnik mislio da se ništa ne dešava. Smanjeno kretanje treba rešavati po komponenti, ne jednim globalnim !important pravilom. Posledica: ovaj fajl trenutno NE MENJA nijedan piksel. Tako i treba — korak 0 samo unosi rečnik koji kasniji koraci počinju da koriste. ───────────────────────────────────────────────────────────────────────── */