/* ═══════════════════════════════════════════════════════════════════════════ Arsenal — design tokens Single source of truth for colour, type, space, motion and layout. THESIS: colour is evidence. The only saturated colour on the page is a verdict. Chrome — buttons, borders, headings, icons, rails — is achromatic. If you see colour, there is a finding there. There is no brand accent, by design: an accent would mean colour no longer carries judgement. Theme switching: ONE attribute, on . (default) The old split (data-theme on the shell vs data-arsenal-theme in the iframes) is gone along with the iframes. Contrast: every ratio below is measured against --pane, the surface the text actually sits on, and meets WCAG AA (>= 4.5:1 for text, >= 3:1 for icons and borders). ═══════════════════════════════════════════════════════════════════════════ */ :root{ /* ── Housing ─────────────────────────────────────────────────────────── Cold graphite. Not pure black (halation on OLED, and black reads as "void" rather than "instrument"). Four depths only. */ --bg: #0e1113; /* application floor */ --pane: #161a1c; /* panel surface — the reference for contrast */ --raised: #1d2225; /* card, popover, input-on-panel */ --sunken: #0a0c0d; /* editor well, textarea */ /* ── Hairlines ───────────────────────────────────────────────────────── Structure is drawn with 1px lines, not shadows and not radii. */ --line: #262c30; /* default divider */ --line-soft: #1e2427; /* within-group divider */ --line-hard: #394247; /* control border, selected edge — 3:1 vs --pane */ /* ── Ink ───────────────────────────────────────────────────────────── */ --ink: #e6eaec; /* primary text 15.6:1 */ --ink-2: #9aa5aa; /* secondary text 7.0:1 */ --ink-3: #7d878c; /* tertiary, hint, label 4.7:1 */ /* ── Verdict — the only saturated colours in the system ─────────────── Never the sole carrier of meaning: always paired with an icon, a text label and a fixed position. See .vd and .cell in components.css. */ --v-malicious: #ff5a52; /* 5.7:1 */ --v-suspicious: #f2a33c; /* 8.4:1 */ --v-clean: #4cc38a; /* 7.9:1 */ --v-trusted: #4aa3ff; /* 6.7:1 — "do not block", NOT "clean" */ --v-unknown: #7d878c; /* 4.7:1 — neutral, never green */ --v-error: #b98cff; /* 6.4:1 — source failed != indicator is bad */ /* Verdict washes — backgrounds/fills derived from the verdict hues. Kept as explicit tokens so light theme can diverge. */ --v-malicious-wash: rgba(255,90,82,.13); --v-suspicious-wash: rgba(242,163,60,.13); --v-clean-wash: rgba(76,195,138,.13); --v-trusted-wash: rgba(74,163,255,.13); --v-unknown-wash: rgba(125,135,140,.12); --v-error-wash: rgba(185,140,255,.13); /* ── KQL syntax ──────────────────────────────────────────────────────── Tokenised so the highlighter is legible in BOTH themes. The previous build hardcoded dark hues and kept them on a white background. */ --k-key: #7dd3fc; /* let, where, project, summarize */ --k-str: #a3e635; /* string literal */ --k-com: #7d878c; /* comment */ --k-op: #f2a33c; /* pipe, operator */ --k-tab: #c084fc; /* table name */ --k-ind: #4cc38a; /* interpolated indicator */ /* ── Type ────────────────────────────────────────────────────────────── No webfonts: the product must run offline and from file://. Three roles, three stacks, all system-resident. Structural — Bahnschrift is the DIN-descended variable condensed grotesque shipped with Windows 10+, which is what the target analyst runs. Elsewhere it degrades to another condensed grotesque, so the narrow signage character survives. Used uppercase, for labels and structure only. UI — the platform text face, for prose and controls. Data — every technical value: hash, IP, ASN, count, KQL. */ --f-struct:Bahnschrift,"Franklin Gothic Medium","Arial Narrow",system-ui,sans-serif; --f-ui:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif; --f-data:"Cascadia Mono","SF Mono",Consolas,"Liberation Mono","Courier New",monospace; /* Fixed px, not rem: this is a dense operator console, not a document. line-height is baked into each step. */ --t-micro: 10px; --lh-micro: 1.4; /* structural, tracking .08em */ --t-label: 11px; --lh-label: 1.4; /* structural, tracking .06em */ --t-body: 13px; --lh-body: 1.5; --t-data: 12px; --lh-data: 1.6; --t-lead: 15px; --lh-lead: 1.4; --t-head: 20px; --lh-head: 1.2; --t-num: 28px; --lh-num: 1.0; --tr-wide: .08em; /* micro */ --tr-mid: .06em; /* label */ /* ── Space — 4px base ─────────────────────────────────────────────── */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-6:24px; --s-8:32px; --s-12:48px; /* ── Form ────────────────────────────────────────────────────────────── One sentence: the housing is machined (square panels, hairline seams), the controls are keys (3px). Panels never get a radius. */ --r-control:3px; --r-chip:2px; --r-pane:0; /* ── Motion ────────────────────────────────────────────────────────── */ --m-fast:120ms; /* hover, focus, chip */ --m-base:180ms; /* panel, disclosure, view change */ --m-fill:600ms; /* consensus bar fill — the one orchestrated moment */ --ease:cubic-bezier(.2,0,0,1); /* ── Layout ──────────────────────────────────────────────────────────── The rail does NOT expand on hover. Hover-reveal is undiscoverable, dead on touch and fires when the pointer merely crosses it. */ --rail:44px; --topbar:40px; --intake:380px; --kql:236px; /* runtime-overridden by the drag handle */ --kql-min:120px; --row-h:36px; /* ── Depth ───────────────────────────────────────────────────────────── Shadows are for things that genuinely float. Panels use hairlines. */ --shadow-pop:0 8px 28px rgba(0,0,0,.55); --shadow-modal:0 18px 60px rgba(0,0,0,.68); --scrim:rgba(0,0,0,.66); /* ── Stacking ────────────────────────────────────────────────────────── */ --z-sticky:10; --z-pop:100; --z-toast:200; --z-modal:300; } /* ═══════════════════════════════════════════════════════════════════════════ LIGHT — a first-class set, not an override block. Every value is recomputed for a light surface; verdict hues are darkened until they clear 4.5:1 on --pane rather than being reused from dark. ═══════════════════════════════════════════════════════════════════════════ */ :root[data-theme="light"]{ --bg: #eceef0; --pane: #f7f8f9; --raised: #ffffff; --sunken: #e4e7e9; --line: #d3d8db; --line-soft: #e2e6e8; --line-hard: #aab2b7; --ink: #14181a; /* 16.3:1 */ --ink-2: #4a5459; /* 8.2:1 */ --ink-3: #626c71; /* 5.1:1 */ --v-malicious: #c0342c; /* 5.2:1 */ --v-suspicious: #96590a; /* 5.3:1 */ --v-clean: #0f7048; /* 5.8:1 */ --v-trusted: #0a5fbd; /* 5.9:1 */ --v-unknown: #626c71; /* 5.1:1 */ --v-error: #6f42c1; /* 6.1:1 */ --v-malicious-wash: rgba(192,52,44,.10); --v-suspicious-wash: rgba(150,89,10,.10); --v-clean-wash: rgba(15,112,72,.10); --v-trusted-wash: rgba(10,95,189,.10); --v-unknown-wash: rgba(98,108,113,.10); --v-error-wash: rgba(111,66,193,.10); --k-key: #0550ae; --k-str: #0a7d3f; --k-com: #626c71; --k-op: #953800; --k-tab: #8250df; --k-ind: #b34700; --shadow-pop:0 8px 24px rgba(20,24,26,.14); --shadow-modal:0 18px 50px rgba(20,24,26,.20); --scrim:rgba(20,24,26,.34); } /* Follows the OS when the user picks "system" (app clears data-theme). */ @media (prefers-color-scheme: light){ :root:not([data-theme]){ --bg:#eceef0; --pane:#f7f8f9; --raised:#ffffff; --sunken:#e4e7e9; --line:#d3d8db; --line-soft:#e2e6e8; --line-hard:#aab2b7; --ink:#14181a; --ink-2:#4a5459; --ink-3:#626c71; --v-malicious:#c0342c; --v-suspicious:#96590a; --v-clean:#0f7048; --v-trusted:#0a5fbd; --v-unknown:#626c71; --v-error:#6f42c1; --v-malicious-wash:rgba(192,52,44,.10); --v-suspicious-wash:rgba(150,89,10,.10); --v-clean-wash:rgba(15,112,72,.10); --v-trusted-wash:rgba(10,95,189,.10); --v-unknown-wash:rgba(98,108,113,.10); --v-error-wash:rgba(111,66,193,.10); --k-key:#0550ae; --k-str:#0a7d3f; --k-com:#626c71; --k-op:#953800; --k-tab:#8250df; --k-ind:#b34700; --shadow-pop:0 8px 24px rgba(20,24,26,.14); --shadow-modal:0 18px 50px rgba(20,24,26,.20); --scrim:rgba(20,24,26,.34); } } /* Honour the OS motion setting. Absent from the previous build entirely. */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }