/** * tokens.css — nova paleta iz mockapa (jul 2026), UVEK ucitana (kao base.css). * * Tamni mod se aktivira atributom data-kam-theme="dark" na — postavlja ga * kam-theme-toggle.js na osnovu kolacica kam_theme (ili prefers-color-scheme ako * kolacica jos nema). Isti mehanizam kao toggleTheme() u svim mockapima. */ :root { --kam-red: #C22B3D; --kam-purple: #5B3FC7; --kam-canvas: #E6EAF0; --kam-surface: #FFFFFF; --kam-ink: #14151A; --kam-muted: #5B6472; --kam-line: #D3D9E2; --kam-line-soft: #DCE1E9; --kam-chip-red-bg: #FBE4E7; --kam-chip-purple-bg: #ECE7FA; --kam-success: #1F8B57; --kam-warning: #B7791F; /* izvedeni tokeni */ --kam-red-tamnije: color-mix(in srgb, var(--kam-red) 82%, black); --kam-na-akcentu: #FFFFFF; /* fiksno belo za tekst/ikone NA red/purple pozadini - namerno se NE menja sa temom */ } html[data-kam-theme="dark"] { --kam-red: #E4586A; --kam-purple: #8B70F2; --kam-canvas: #12141A; --kam-surface: #1B1E27; --kam-ink: #EEF0F4; --kam-muted: #9AA3B2; --kam-line: #2B2F3A; --kam-line-soft: #1E212A; --kam-chip-red-bg: #3A2028; --kam-chip-purple-bg: #241F3A; --kam-success: #3FBE7C; --kam-warning: #E0A034; } /* Kratak prelaz pri promeni teme, dosledno mockap ponasanju (transition: background .2s,color .2s). */ html[data-kam-theme] body { transition: background-color .2s ease, color .2s ease; } /** * KOMPATIBILNI SLOJ (kam-plan-v4.md paragraf 6.1) - stare promenljive iz Bricks Global * Variables (kam-primarna, kam-akcija, kam-garancija, kam-ev, kam-bela...) se PRESMERAVAJU * da citaju nove tokene. Efekat: SVAKI postojeci shortcode (buybox, varijante, dileri, * recenzije...) odmah dobija i novu paletu boja i tamni mod, BEZ izmene njihovog CSS-a. * !important je namerno - garantuje pobedu nad Bricks-ovim inline :root izlazom bez obzira * na redosled ucitavanja. Nove datoteke ubuduce koriste --kam-* direktno (bez ovog sloja). */ :root { --kam-primarna: var(--kam-red) !important; --kam-primarna-tamnija: var(--kam-red-tamnije) !important; --kam-primarna-svetla: var(--kam-chip-red-bg) !important; --kam-primarna-linija: var(--kam-line) !important; --kam-primarna-linija-2: var(--kam-line) !important; --kam-primarna-naslovi: var(--kam-ink) !important; --kam-primarna-tekst: var(--kam-ink) !important; --kam-primarna-tekst-2: var(--kam-muted) !important; --kam-primarna-tekst-3: var(--kam-muted) !important; --kam-primarna-pozadina-1: var(--kam-canvas) !important; --kam-primarna-pozadina-2: var(--kam-surface) !important; --kam-bela: var(--kam-na-akcentu) !important; --kam-akcija: var(--kam-red) !important; --kam-akcija-svetla: var(--kam-chip-red-bg) !important; --kam-garancija: var(--kam-purple) !important; --kam-garancija-svetla: var(--kam-chip-purple-bg) !important; --kam-ev: var(--kam-purple) !important; --kam-povrsina-2: var(--kam-surface) !important; --kam-tamna-pozadina: var(--kam-ink) !important; --kam-linija-3: var(--kam-line-soft) !important; --kam-tekst-4: var(--kam-muted) !important; --kam-plum: var(--kam-purple) !important; } /* Radius/shadow kompat tokeni - nedostajali celu sesiju, dugmad (.kam-btn preko --kam-radius-s) i vise kartica (--kam-radius/--kam-shadow) su imali oštre uglove bez senke jer se ove promenljive nigde nisu resolvale. */ :root { --kam-radius: 14px; --kam-radius-s: 10px; --kam-radius-xs: 8px; --kam-shadow: 0 4px 16px rgba(0,0,0,.08); }