/* ═══════════════════════════════════════════════════════════════════════════ TiM → Qdrant · Tokeni (svetla i tamna tema), globalni reset i .ico osnova. Deo je podeljenog design sistema (static/css/). REDOSLED UČITAVANJA JE KASKADA i stoji u -u index.html — ne menjaj ga: vendor/phosphor → tokens → primitives → layout → components → help → views → responsive Boje i razmaci se definisu SAMO ovde, i to u oba bloka — :root i [data-theme="dark"]. Pravila i uputstvo za dodavanje novih ekrana: docs/DESIGN_SYSTEM.md ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ TiM → Qdrant · Design System Struktura: 1) tokeni 2) reset 3) primitivi 4) layout 5) komponente Pravila i uputstvo za dodavanje novih ekrana: docs/DESIGN_SYSTEM.md ═══════════════════════════════════════════════════════════════════════════ */ /* ─── 1. TOKENI ─────────────────────────────────────────────────────────── */ :root { /* Brand — narandžasti akcent */ --accent: #f26b21; --accent-strong: #d9560f; --accent-soft: rgba(242, 107, 33, 0.12); --accent-ring: rgba(242, 107, 33, 0.28); --on-accent: #ffffff; /* Kategorijalne boje (ikone, tagovi, grafovi) */ --violet: #6c5ce7; --violet-soft: rgba(108, 92, 231, 0.12); --emerald: #16a34a; --emerald-soft: rgba(22, 163, 74, 0.12); --cyan: #0891b2; --cyan-soft: rgba(8, 145, 178, 0.12); --rose: #e11d48; --rose-soft: rgba(225, 29, 72, 0.12); --slate-soft: rgba(100, 116, 139, 0.12); /* Semantika */ --ok: var(--emerald); --err: var(--rose); --info: var(--cyan); --warn: #d97706; --warn-soft: rgba(217, 119, 6, 0.12); /* Površine — LIGHT (default) */ --bg: #f2f1ee; --surface: #ffffff; --surface-2: #f7f6f4; --surface-3: #edecea; --sidebar-bg: #f7f6f4; --line: #e5e3df; --line-strong: #d6d3cd; /* Tekst */ --ink: #17171a; --ink-2: #45454b; --muted: #7c7a77; --faint: #a8a5a0; /* Tipografija */ --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace; /* Radijusi */ --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px; /* Spacing skala (4px baza) */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; /* Senke */ --sh-sm: 0 1px 2px rgba(23, 23, 26, 0.06); --sh-md: 0 2px 8px rgba(23, 23, 26, 0.06), 0 1px 2px rgba(23, 23, 26, 0.04); --sh-lg: 0 8px 28px rgba(23, 23, 26, 0.1); --sh-xl: 0 24px 64px rgba(23, 23, 26, 0.18); --sh-nav: 0 1px 3px rgba(23, 23, 26, 0.1); /* Ostalo */ --sidebar-w: 264px; --side-col-w: 380px; --ease: cubic-bezier(0.32, 0.72, 0, 1); --log-bg: #fbfaf9; --input-bg: #ffffff; --overlay: rgba(23, 23, 26, 0.34); --scrollbar: #d6d3cd; } /* ─── DARK ─── */ [data-theme="dark"] { --accent: #ff7a3d; --accent-strong: #ff9463; --accent-soft: rgba(255, 122, 61, 0.14); --accent-ring: rgba(255, 122, 61, 0.34); --on-accent: #1a0d05; --violet: #a094ff; --violet-soft: rgba(160, 148, 255, 0.15); --emerald: #4ade80; --emerald-soft: rgba(74, 222, 128, 0.14); --cyan: #38bdf8; --cyan-soft: rgba(56, 189, 248, 0.14); --rose: #fb7185; --rose-soft: rgba(251, 113, 133, 0.14); --slate-soft: rgba(148, 163, 184, 0.14); --warn: #fbbf24; --warn-soft: rgba(251, 191, 36, 0.14); --bg: #141415; --surface: #1e1e20; --surface-2: #262629; --surface-3: #2f2f33; --sidebar-bg: #1a1a1c; --line: #303035; --line-strong: #3d3d43; --ink: #ededf0; --ink-2: #c7c7cd; --muted: #96969e; --faint: #6e6e77; --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --sh-md: 0 2px 10px rgba(0, 0, 0, 0.36); --sh-lg: 0 8px 30px rgba(0, 0, 0, 0.5); --sh-xl: 0 24px 70px rgba(0, 0, 0, 0.7); --sh-nav: 0 1px 3px rgba(0, 0, 0, 0.5); --log-bg: #141416; --input-bg: #1a1a1c; --overlay: rgba(0, 0, 0, 0.66); --scrollbar: #3d3d43; } /* ─── 2. RESET ──────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, p { margin: 0; } button { font: inherit; color: inherit; } .hidden { display: none !important; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: var(--r-pill); border: 3px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-track { background: transparent; } :focus-visible { outline-offset: 1px; } /* Ikone — Phosphor light webfont; veličina kroz font-size, boja iz color. */ .ico { font-size: 18px; line-height: 1; flex-shrink: 0; }