/* ===================================================================================== 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:#8b929e; /* 2026-09-04 — podignuto sa #d1d5db (1,47:1) na #8b929e (3,13:1). Granica polja je element korisničkog sučelja i traži najmanje 3:1; tema Clean Slate daje presvetlu vrednost. Staro na stranama zgrada bilo je #b0b0b0 (2,17:1), pa je i pre padalo — ovo popravlja oboje. */ /* ---------- 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 */ /* Visina fiksnog zaglavlja. Postoji kao token jer se STALNO propušta: svaka sekcija na vrhu strane centrira sadržaj po svojoj kutiji, a zaglavlje pokriva njen gornji deo — pa vidljivi razmak iznad nije isti kao izmereni. Izmereno 04.09.2026: 49px i na 1280 i na 390. */ --nav-h:49px; --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. ───────────────────────────────────────────────────────────────────────── */ /* ===================================================================================== POLJA ZA UNOS — rečnik (dodato 05.09.2026, korak 1 od tri) Zatečeno stanje je bilo tri odvojena sistema na jednoj strani, izmereno uživo: pretraga u heroju 50px visine, zaobljenje 10,5, ivica 2px Ulica / Broj / Grad 48px, zaobljenje 0 (potpuno oštro), ivica 2px dva izbornika 44px, zaobljenje 6,5, ivica 1,5px, slog w600 Decimale dolaze iz `html { font-size: 13px }` i `calc(0.5rem ± Npx)`. Odluka: jedno polje za sve, uz jedan izuzetak (pretraga u heroju ostaje pilula). Kontrast je RAČUNAT, ne procenjen. Brojevi su odnosi prema podlozi: --kz-field-border #857c6e 4,11 bela · 3,74 siva #f3f4f6 · 3,26 peščana #ebe4d8 (stara #8b929e daje 3,13 / 2,85 / 2,48 i pada na peščanoj) --kz-field-placeholder #6f6a60 5,38 na beloj (P6 siva #7c808b bi bila 3,95 i pala) --kz-field-ring #1b1f2a 16,2 na papiru (raniji providni prsten bio je 1,95) --kz-field-error-text #a32721 7,32 bela · 5,79 peščana (opeka #c8332c pada na 4,19) Kao i ostatak ovog fajla: dok nijedan selektor ne koristi ove promenljive, NE MENJAJU NIJEDAN PIKSEL. Koristi ih css/components/field.css, koji dolazi u koraku 2. ===================================================================================== */ :root{ /* slog */ --kz-field-font: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Open Sans', sans-serif; --kz-field-fs: 16px; /* 16 i na telefonu: ispod toga iOS zumira stranu na fokus */ --kz-field-fw: 400; --kz-field-lh: 1.35; /* mere */ --kz-field-h: 48px; --kz-field-r: 12px; --kz-field-bw: 1px; --kz-field-px: 16px; --kz-field-py: 12px; --kz-field-icon: 18px; --kz-field-icon-x: 14px; --kz-field-pad-icon: 44px; /* 14 + 18 + 12 */ /* boje */ --kz-field-bg: #ffffff; --kz-field-bg-soft: #f8f4ed; /* onemogućeno i samo za čitanje */ --kz-field-fg: #1b1f2a; --kz-field-fg-soft: #7c808b; /* SAMO onemogućeno, izuzeto iz kontrasta */ --kz-field-placeholder: #6f6a60; --kz-field-border: #857c6e; --kz-field-border-hover: #5f574c; --kz-field-border-focus: #1b1f2a; --kz-field-border-soft: #d9d2c5; --kz-field-caret: #c8332c; --kz-field-accent: #c8332c; --kz-field-error: #c8332c; --kz-field-error-text: #a32721; /* prsten fokusa: PUN, ne providan */ --kz-field-ring: #1b1f2a; --kz-field-ring-w: 2px; --kz-field-ring-gap: 2px; /* pomoćni delovi */ --kz-field-label-fg: #4b505c; --kz-field-label-fs: 13px; --kz-field-label-fw: 600; --kz-field-gap: 6px; /* kućice i radio */ --kz-choice-size: 20px; --kz-choice-bw: 1.5px; /* 1px na kutiji od 20px optički nestaje */ --kz-choice-r: 6px; /* pokret */ --kz-field-t: 180ms; --kz-field-ease: cubic-bezier(.2,.7,.2,1); }