/* ============================================================ ALPR-RU — Design tokens (light + dark) Drop into web/css/main.css (or @import it). ╨Т╤Б╨╡ ╨║╨╛╨╝╨┐╨╛╨╜╨╡╨╜╤В╤Л ╨╕╤Б╨┐╨╛╨╗╤М╨╖╤Г╤О╤В ╤В╨╛╨╗╤М╨║╨╛ var(--*). ╨Э╨╕╨║╨░╨║╨╕╤Е ╤Е╨░╤А╨┤╨║╨╛╨┤-╤Ж╨▓╨╡╤В╨╛╨▓. ============================================================ */ /* ╨и╤А╨╕╤Д╤В╤Л: ╨┤╨╛╨▒╨░╨▓╤М╤В╨╡ ╨▓ ╨╕╨╗╨╕ ╤А╨░╤Б╨║╨╛╨╝╨╝╨╡╨╜╤В╨╕╤А╤Г╨╣╤В╨╡ @import. @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600;700&display=swap'); */ :root { /* surfaces */ --bg:#eaeef4; --surface:#ffffff; --surface-2:#f5f8fc; --surface-3:#eef2f8; --border:#d4dce7; --border-2:#e4e9f1; /* text */ --text:#16202e; --text-2:#54627a; --muted:#8b97a8; /* brand */ --accent:#2563eb; --accent-2:#1d4ed8; --accent-soft:#e7effe; /* status (╨▓╤Б╨╡╨│╨┤╨░ ╨┤╤Г╨▒╨╗╨╕╤А╤Г╨╣╤В╨╡ ╤В╨╡╨║╤Б╤В╨╛╨╝/╨╕╨║╨╛╨╜╨║╨╛╨╣ — ╨┤╨░╨╗╤М╤В╨╛╨╜╨╕╨╖╨╝) */ --green:#0e8a43; --green-soft:#e0f2e7; --red:#d12936; --red-soft:#fbe4e6; --amber:#a96f00; --amber-soft:#f8edcf; --violet:#6d4bd1; --violet-soft:#ece6fb; --shadow:0 14px 40px rgba(20,32,55,.10); --shadow-sm:0 2px 6px rgba(20,32,55,.06); --font-sans:'IBM Plex Sans', system-ui, -apple-system, sans-serif; --font-mono:'IBM Plex Mono', ui-monospace, monospace; } [data-theme="dark"] { --bg:#090e17; --surface:#131b29; --surface-2:#19222f; --surface-3:#202c3d; --border:#283447; --border-2:#1e2837; --text:#e6ebf3; --text-2:#9aa7ba; --muted:#677488; --accent:#4d8bff; --accent-2:#3b82f6; --accent-soft:#16243d; --green:#34c172; --green-soft:#11251b; --red:#f4626d; --red-soft:#2b141a; --amber:#e2a13a; --amber-soft:#2a2210; --violet:#9d83f0; --violet-soft:#1c1730; --shadow:0 14px 40px rgba(0,0,0,.45); --shadow-sm:0 2px 6px rgba(0,0,0,.3); /* structural chrome vs. workspace vs. panel — a8n.bolder.1 surface tier */ --nav-bg:#0a0f18; --header-bg:#0d1320; --panel-bg-strong:#212d40; --panel-shadow:0 1px 0 rgba(255,255,255,.02) inset, 0 10px 24px rgba(0,0,0,.28); --focus-ring:0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); } [data-theme="dark"] { --nav-bg:#0a0f18; --header-bg:#0d1320; --panel-bg-strong:#212d40; --panel-shadow:0 1px 0 rgba(255,255,255,.02) inset, 0 10px 24px rgba(0,0,0,.5); --focus-ring:0 0 0 3px color-mix(in srgb, var(--accent) 50%, transparent); } /* a8n.bolder.1 — radius / spacing scale actually used as custom properties, not just prose in DESIGN.md. Additive: nothing existing is renamed. */ :root { --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:18px; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; } /* a8n.cleanup.2 — explicit shell stacking hierarchy. The mobile sidebar used to hardcode z-index:40, which exactly collided with vehicle_stays.css's .vstay-detail (also 40, undefined stacking order). These two shell-only layers move to 45/46 — clear of every existing page-level overlay value in the codebase — rather than touching VehicleStay's own z-index: 0 workspace content (implicit stacking order) 20 --z-header topbar (sticky, not an overlay) 40 .vstay-detail page-level detail drawer (vehicle_stays.css, unchanged) 45 --z-mobile-backdrop mobile nav backdrop 46 --z-mobile-sidebar mobile nav drawer (must sit above page overlays so global navigation stays reachable) 50 .toast-root notifications (main.css, unchanged) 60 .vpass-drawer full-screen detail modal (vehicle_passages.css, unchanged) 1100 .modal-overlay confirmation dialogs (monitor.css, unchanged) */ :root { --z-header: 20; --z-mobile-backdrop: 45; --z-mobile-sidebar: 46; } /* base */ * { box-sizing:border-box; } html, body { margin:0; padding:0; } body { font-family:var(--font-sans); background:var(--bg); color:var(--text); font-size:13px; -webkit-font-smoothing:antialiased; } .mono { font-family:var(--font-mono); } ::-webkit-scrollbar { width:10px; height:10px; } ::-webkit-scrollbar-thumb { background:var(--border); border-radius:6px; border:2px solid transparent; background-clip:content-box; } ::-webkit-scrollbar-thumb:hover { background:var(--muted); background-clip:content-box; } ::-webkit-scrollbar-track { background:transparent; } @keyframes alprPulse { 0%{opacity:1} 50%{opacity:.35} 100%{opacity:1} }