/* ========================================================================== EDGE DSS, tokeni vizuelnog identiteta Verzija 1.0, 14.08.2026. Svetla podloga je podrazumevana. Tamna je dodatna i nije automatski obrnuta svetla, nego zaseban skup vrednosti biran za tamnu podlogu. Pravilo koje drzi ceo sistem: crna nosi znacenje, bela nosi sadrzaj, narandzasta pokazuje gde si i sta je vazno. Narandzasta se koristi retko. Kada je svuda, ne znaci nista. ========================================================================== */ :root { color-scheme: light; /* --- Podloge -------------------------------------------------------- */ /* Stranica i kartica su obe bele. Odluka vlasnika, avgust 2026. Posledica se mora ispostovati svuda: kada podloga i kartica imaju istu svetlinu, senka nema sta da razdvoji, pa razdvajanje preuzima granica. Zato kartica ovde ima liniju a nema senku. Senka ostaje samo slojevima koji stvarno lebde iznad sadrzaja: prozor, oblacic, traka koja prati pogled. */ --surface-page: #FFFFFF; /* pozadina cele stranice */ --surface-card: #FFFFFF; /* kartica, lezi na podlozi */ --surface-sunken: #F6F5F2; /* uvucene zone, polja za unos */ --surface-hover: #F5F4F1; /* prelaz misem preko reda */ --surface-inverse: #0B0B0B; /* crne povrsine, glavno dugme */ /* Crna kartica nosi jedan jedini broj po ekranu, onaj oko koga se sve vrti. Pravilo iz zaglavlja ovog fajla kaze da crna nosi znacenje, pa je ona ovde nosilac naglaska umesto jarke boje. */ --surface-ink: #14140F; --surface-ink-soft: #26261F; /* --- Mastilo -------------------------------------------------------- */ --ink-primary: #0B0B0B; /* 19.7:1 naslovi, brojevi */ --ink-secondary: #52514E; /* 7.9:1 telo teksta, opisi */ --ink-muted: #767570; /* 4.7:1 oznake, ose, pomocni tekst */ --ink-inverse: #FFFFFF; /* tekst na crnoj povrsini */ /* --- Brend ---------------------------------------------------------- */ /* Cista brend narandzasta. Kontrast prema beloj je 2.87:1, sto znaci da NIKADA ne nosi beli tekst i nikada nije jedini nosilac znacenja. Koristi se za: znak, traku aktivne stavke, fokus prsten, ispune sa crnim tekstom, tanke naglasene linije. */ --brand: #FF6A00; --brand-hover: #E85F00; --brand-wash: #FFF3EA; /* vrlo blaga ispuna iza naglaska */ --brand-wash-strong: #FFE3D0; /* Tamnija narandzasta za sve sto nosi tekst ili mora da se cita kao mark u grafikonu. Beli tekst na njoj daje 4.42:1. */ --brand-ink: #C25A00; /* --- Stanje --------------------------------------------------------- */ --status-good: #0A7C2F; /* 5.3:1 */ --status-warning: #A16207; /* 4.9:1 */ --status-critical: #C0392B; /* 5.4:1 */ --status-good-wash: #E8F5EC; --status-warning-wash: #FBF3E3; --status-critical-wash:#FBEBE9; /* --- Linije i razdvajanje ------------------------------------------- */ --border-hairline: #E5E4DF; /* granica kartice, linija reda */ --border-strong: #C9C8C2; /* granica polja za unos */ --border-focus: #FF6A00; /* --- Grafikoni ------------------------------------------------------ */ /* Redosled je fiksan. Boja prati entitet, nikada njegov rang. Ne menjaj redosled i ne dodaj sedmu boju, jer ceo skup je proveren zajedno: prolazi razdvojivost kod daltonizma i kontrast 3:1 prema beloj. */ --series-1: #C25A00; /* narandzasta, brend */ --series-2: #2A78D6; /* plava */ --series-3: #0F7A57; /* zelena */ --series-4: #4A3AA7; /* ljubicasta */ --series-5: #B84A72; /* ruzicasta */ --series-6: #8A6D00; /* zlatna */ --chart-grid: #EEEDE8; --chart-axis: #C9C8C2; --chart-label: #767570; /* Sekvencijalna skala za intenzitet, jedna boja, svetlo ka tamnom */ --seq-100: #FFE3D0; --seq-200: #FFC9A3; --seq-300: #FFA766; --seq-400: #F58230; --seq-500: #C25A00; --seq-600: #8F4200; /* --- Razmak, korak 4 ------------------------------------------------ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* --- Zaobljenje ----------------------------------------------------- */ /* Zaobljenje je krupno, jer meka forma nosi ovaj identitet zajedno sa senkom. Kartica bez granice mora necim da kaze gde prestaje, a to su zaobljenje i senka. */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 22px; /* kartice, plocice, tabele */ --radius-card: 24px; /* plutajuci meni i veliki kontejneri */ --radius-pill: 999px; /* --- Tipografija ---------------------------------------------------- */ /* Inter se koristi ako je na racunaru. Ne preuzima se sa mreze, jer program radi i bez veze sa internetom, a font koji se ceka je prazan ekran. */ --font-sans: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; --text-2xs: 11px; /* oznake u grafikonu */ --text-xs: 12px; /* natpisi sekcija, sitne oznake */ --text-sm: 13px; /* tabele, pomocni tekst */ --text-md: 15px; /* telo teksta, podrazumevano */ --text-lg: 17px; /* naslov kartice */ --text-xl: 20px; /* naslov ekrana */ --text-2xl: 28px; /* vrednost pokazatelja */ --text-3xl: 40px; /* glavni broj dana */ --leading-tight: 1.2; --leading-normal: 1.5; --tracking-tight: -0.02em; /* veliki brojevi i naslovi */ --tracking-wide: 0.06em; /* natpisi sekcija velikim slovima */ /* --- Senke, samo za lebdece slojeve --------------------------------- */ /* Senka je ovde nosilac granice, jer granice nema. Zato je siroka i vrlo slaba: kartica se odvaja od podloge, a da se nigde ne vidi linija. Uska i tamna senka bi izgledala kao okvir, sto je bas ono sto se izbegava. */ --shadow-popover: 0 12px 40px -8px rgba(11, 11, 11, 0.22), 0 2px 6px rgba(11, 11, 11, 0.06); --shadow-drawer: -8px 0 32px rgba(11, 11, 11, 0.08); --shadow-card: 0 1px 2px rgba(11, 11, 11, 0.03), 0 10px 28px -10px rgba(11, 11, 11, 0.10); /* Sloj koji stvarno lebdi: plutajuci meni i trake koje prate pogled. */ --shadow-float: 0 2px 4px rgba(11, 11, 11, 0.03), 0 20px 44px -14px rgba(11, 11, 11, 0.18); /* --- Kretanje ------------------------------------------------------- */ --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); --ease-exit: cubic-bezier(0.4, 0.0, 1, 1); --duration-fast: 120ms; --duration-normal: 200ms; --duration-slow: 320ms; } /* ========================================================================== Tamna podloga. Zaseban izbor vrednosti, ne obrnuta svetla. ========================================================================== */ :root[data-theme="dark"] { color-scheme: dark; --surface-page: #0D0D0D; --surface-card: #1A1A19; --surface-sunken: #141413; --surface-hover: #232321; --surface-inverse: #FFFFFF; /* Na tamnoj podlozi naglasak ne moze da bude crna kartica, jer se ne bi videla. Nosi ga svetlija povrsina od okoline, po istoj logici: naglasak je razlika prema podlozi, ne boja sama po sebi. */ --surface-ink: #2E2E28; --surface-ink-soft: #3A3A33; --ink-primary: #FFFFFF; --ink-secondary: #C3C2B7; --ink-muted: #898781; --ink-inverse: #0B0B0B; --brand: #FF7A1A; --brand-hover: #FF8C38; --brand-wash: #2A1A0D; --brand-wash-strong: #3D2412; --brand-ink: #FF8C38; --status-good: #2FB44E; --status-warning: #E0A82E; --status-critical: #E5564B; --status-good-wash: #12240F; --status-warning-wash: #2A2109; --status-critical-wash:#2B1210; --border-hairline: #2C2C2A; --border-strong: #454541; --border-focus: #FF7A1A; --series-1: #F07A1E; --series-2: #3987E5; --series-3: #199E70; --series-4: #9085E9; --series-5: #D55181; --series-6: #C98500; --chart-grid: #262624; --chart-axis: #383835; --chart-label: #898781; /* Na tamnoj podlozi senka ne razdvaja, jer je sve tamno. Razdvaja svetlina povrsine, pa je senka slabija i sluzi samo lebdecim slojevima. */ --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-float: 0 20px 44px -14px rgba(0, 0, 0, 0.55); --shadow-popover: 0 12px 40px -8px rgba(0, 0, 0, 0.60); --seq-100: #3D2412; --seq-200: #6B3A12; --seq-300: #9A5214; --seq-400: #C46A18; --seq-500: #F07A1E; --seq-600: #FFA05C; } /* ========================================================================== Osnovni elementi ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--surface-page); color: var(--ink-primary); font-family: var(--font-sans); font-size: var(--text-md); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; } /* Fokus je uvek vidljiv i uvek narandzast. Nikada se ne uklanja. */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: var(--radius-sm); } /* Brojevi u kolonama se poravnavaju, samostalni veliki brojevi ne. */ .tabular { font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }