/* Sirix design tokens, taken from the Maps app as built (29 Sep 2026). Dark is the default; light is the in-app toggle: . Full reference and usage rules: DESIGN.md. */ :root { color-scheme: dark; /* Surfaces */ --stage: #141414; /* map/canvas ground, same in both themes */ --topbar: #141414; --bg: #1a1a1a; /* app ground */ --panel: #1f1f1f; /* right panel, fly panels, dialogs */ --bg-soft: #242424; /* cards, floating toolbar, menus */ --bg-soft-2: #2b2b2c; /* tiles, active buttons, raised rows */ /* Text */ --ink: #f0f0f1; --ink-2: #d0d0d3; --gray: #9a9a9e; --gray-2: #6a6a6f; /* decorative and placeholders only: under 4.5:1 */ /* Edges */ --line: rgba(255,255,255,.08); /* cards, panels, dividers, tiles */ --line-2: rgba(255,255,255,.14); /* inputs, fly panels, dialogs, chips, active buttons, toasts */ --line-float: rgba(255,255,255,.10); /* floating toolbar and its menus */ /* Tones */ --accent: #41c5a0; --accent-soft: rgba(65,197,160,.14); --on-accent: #06080b; --danger: #e0533d; --warning: #e8b339; --warning-bg: rgba(232,179,57,.10); --warning-line: rgba(232,179,57,.30); --warning-ink: #e0c184; --ai: #6ea8ff; --ai-soft: rgba(110,168,255,.12); --ai-line: rgba(110,168,255,.45); /* Category tones */ --cat-video: #2f9bec; --cat-intrusion: #f2556f; --cat-access: #2fd1a3; --cat-infra: #a3a3ad; /* Infrastructure and Structure */ /* Service bands (same in both themes) */ --band-video: #5b9bf5; --band-access: #41c5a0; --band-iot: #a78bfa; --band-patrol: #ffcb45; /* Type */ --font: "Geist", "Inter", system-ui, sans-serif; /* Radius */ --r-xs: 4px; /* small bits */ --r-tool: 6px; /* toolbar buttons (6–7) */ --r: 8px; /* buttons, inputs, toasts (default) */ --r-menu: 9px; /* menus, search fields */ --r-card: 10px; /* toolbar, cards, rail buttons */ --r-tile: 11px; /* component tiles */ --r-panel: 14px; /* fly panels, dialogs */ --r-lib: 16px; /* symbol library */ --r-pill: 999px; /* chips */ /* Elevation: black only, no coloured glow */ --sh-toolbar: 0 6px 20px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.3); --sh-menu: 0 12px 30px rgba(0,0,0,.5); --sh-fly: 0 18px 44px rgba(0,0,0,.5); --sh-dialog: 0 24px 60px rgba(0,0,0,.55); --sh-modal: 0 30px 80px rgba(0,0,0,.55); --sh-toast: 0 8px 24px rgba(0,0,0,.5); --scrim: rgba(10,10,10,.62); --scrim-blur: 3px; /* Sizes */ --topbar-h: 52px; --rail-w: 52px; --rail-btn: 38px; --panel-w: 320px; --tool-btn: 34px; --header-ctl: 32px; /* 32–34 */ --input-h: 38px; --search-h: 32px; --dialog-btn: 36px; --chip-h: 26px; /* Motion */ --t-fast: 120ms; /* rail and tiles */ --t: 150ms; /* most hovers and states */ --t-panel: 180ms; --t-toast: 250ms; --ease: ease; --ease-std: cubic-bezier(.4,0,.2,1); --ease-out: cubic-bezier(.3,.75,.3,1); } :root[data-theme="light"] { color-scheme: light; --topbar: #ffffff; --bg: #eef0ec; --panel: #ffffff; --bg-soft: #ffffff; --bg-soft-2: #f4f5f2; --ink: #1c2228; --ink-2: #3a424c; --gray: #69707a; --gray-2: #9aa0a8; --line: #e2e5df; --line-2: #d3d7cf; --accent: #178a66; --accent-soft: rgba(23,138,102,.14); --danger: #d4493a; --warning: #b07e0a; --warning-bg: rgba(176,126,10,.09); --warning-line: rgba(176,126,10,.28); --warning-ink: #6b4e08; --ai: #2f6fe0; --ai-soft: rgba(47,111,224,.09); --ai-line: rgba(47,111,224,.42); --cat-video: #0b78c4; --cat-intrusion: #d6334f; --cat-access: #0f9f78; --cat-infra: #6b7280; --sh-fly: 0 18px 44px rgba(0,0,0,.16); } /* Focus: 2px accent outline, 1px offset, no glow ring. Inputs swap their border instead. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--accent); } .tnum { font-variant-numeric: tabular-nums; }