/* ============================================================ Smoker Design System — colors_and_type.css Dark-first. Terminal IS the ambient surface. ============================================================ */ :root { /* ---------- Surface / neutrals (warm light) ------------- */ --bg-page: #F5F3EF; /* outer page — warm cream */ --bg-surface: #FFFFFF; /* cards, panels */ --bg-raised: #F9F8F6; /* raised blocks, inputs, stat cards */ --bg-inset: #F0EEEA; /* hover rows */ --bg-terminal: #1A1D22; /* evidence block stays dark (terminal feel) */ --bg-terminal-inset: #111216; /* ---------- Hairlines / borders ------------------------- */ --border-subtle: #E5E2DC; /* warm gray hairline */ --border-strong: #D1CEC7; /* inputs, emphasized */ --border-ink: #B8C4D6; /* ---------- Ink / text ---------------------------------- */ --fg-primary: #1A1A1A; /* body — near-black */ --fg-secondary: #4A4A4A; /* supporting */ --fg-muted: #6B6B6B; /* meta */ --fg-faint: #9A9A9A; /* placeholder, timestamps */ --fg-invert: #FFFFFF; /* text on dark fills */ /* ---------- Brand primary ------------------------------- */ --brand-navy: #C4473A; /* warm terracotta — primary CTA */ --brand-navy-ink: #A83B30; /* hover / active */ --brand-navy-soft: #FDF2F0; /* tinted bg for chips/emphasis */ /* ---------- Severity palette (warm on light) ------------ */ /* Malicious */ --sev-mal: #C4473A; --sev-mal-ink: #9B2C20; --sev-mal-bg: #FDF2F0; --sev-mal-border: #E8B4AE; /* Suspicious */ --sev-sus: #B8860B; --sev-sus-ink: #8B6508; --sev-sus-bg: #FDF8EE; --sev-sus-border: #E8D5A0; /* Clean */ --sev-clean: #2D8659; --sev-clean-ink: #1B6B42; --sev-clean-bg: #F0F9F4; --sev-clean-border:#A8D5B8; /* Neutral info / pending */ --sev-neutral: #6B6B6B; --sev-neutral-bg: #F0EEEA; /* ---------- Terminal syntax colors --------------------- */ --term-fg: #D5DAE4; /* default mono text (stays light-on-dark in terminal) */ --term-muted: #6B7486; --term-blue: #8AB4F8; --term-teal: #5EEAD4; --term-amber: #FBBF24; --term-red: #F87171; --term-green: #86EFAC; --term-event: #94A3B8; /* ---------- Event-log category chips ------------------- */ /* Used in the chronological event log + count chips to differentiate syscall categories at a glance. Hues picked to share the warm-on-light family as the severity palette (no neon, no high saturation). DO NOT introduce new chip colors — extend this block if a new category lands. */ --cat-exec: #7A4F00; /* SPAWN — amber ink, signals "watch this" */ --cat-exec-bg: #FFF1B8; --cat-net: #0F4A8C; /* NETWORK — calm blue */ --cat-net-bg: #D4E5F7; --cat-fs: #4A4A4A; /* FILE — neutral stone */ --cat-fs-bg: #E5E2DC; --cat-mem: #5B2A8C; /* MEM — soft purple */ --cat-mem-bg: #E8DDF5; --cat-fd: #1F5C36; /* FD — muted teal-green */ --cat-fd-bg: #D8EDE0; --cat-flag: #7E1F18; /* FLAG — flag-red, distinct from --sev-mal */ --cat-flag-bg: #FBD9D4; --cat-meta: #9A9A9A; /* META — no chip background, faint text */ /* Chip borders — slightly darker than each *-bg for definition. */ --cat-exec-border: #F0D87B; --cat-net-border: #A8C8E8; --cat-fs-border: #C8C4BC; --cat-mem-border: #C9B5E2; --cat-fd-border: #A8D5B8; --cat-flag-border: #E8B4AE; /* ---------- Timeline / scrubber lane colors ----------- */ /* Used by the syscall timeline lanes + histogram bars + scrubber chips. Distinct hues per syscall family so the timeline reads at a glance. Promoted from det-view.css (was local --lane-*); kept here so any additional lane has to pass palette review. */ --lane-exec: #1E5BD9; /* spawn lane — deep blue */ --lane-net: #0E8F7A; /* network lane — teal */ --lane-fs: #B8860B; /* file lane — warm amber */ --lane-flag: #C4473A; /* flag lane — terracotta (matches --sev-mal) */ /* ---------- Signature accent (replay/live cue) --------- */ /* One high-saturation accent for the page's "live now" cues — replay scrubber, version pill, hover highlights, active tab underlines. Historically defined locally in det-view.css; promoted here so the palette is the single source of truth. Existing var(--hot) refs in det-view.css continue to work via CSS variable inheritance. */ --hot: #FF2E88; --hot-ink: #D81B6E; --hot-soft: rgba(255, 46, 136, .10); --accent-hot: var(--hot); /* alias for new callers */ /* ---------- Score-bar colors ---------------------------- */ --bar-high: #C4473A; /* +30 and up — matches brand red */ --bar-mid: #B8860B; /* +15 to +25 */ --bar-low: #9A9A9A; /* +10 and below */ --bar-track: #E5E2DC; /* ---------- Focus ring --------------------------------- */ --focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.35); /* ---------- Radii -------------------------------------- */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; /* ---------- Spacing ------------------------------------ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* ---------- Elevation (flat on dark) ------------------- */ --shadow-card: 0 1px 3px rgba(0,0,0,.06), 0 0 0 1px var(--border-subtle); --shadow-raised: 0 2px 8px rgba(0,0,0,.08), 0 0 0 1px var(--border-subtle); --shadow-focus: var(--focus-ring); /* ---------- Typography --------------------------------- */ --font-display: "Instrument Serif", "Source Serif 4", "Charter", Georgia, serif; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --fs-display-lg: 52px; --fs-display-md: 36px; --fs-display-sm: 28px; --fs-heading: 20px; --fs-body-lg: 17px; --fs-body: 15px; --fs-body-sm: 13px; --fs-caption: 12px; --fs-mono-lg: 18px; --fs-mono: 14px; --fs-mono-sm: 13px; --lh-tight: 1.15; --lh-snug: 1.3; --lh-normal: 1.5; --lh-loose: 1.7; --ease-standard: cubic-bezier(.2,.6,.2,1); --ease-out-soft: cubic-bezier(.22,.61,.36,1); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 260ms; } /* =========== SEMANTIC TYPE CLASSES ============ */ .smk-h1 { font-family: var(--font-display); font-size: var(--fs-display-lg); line-height: var(--lh-tight); letter-spacing:-.015em; font-weight:500; color:var(--fg-primary); } .smk-h2 { font-family: var(--font-display); font-size: var(--fs-display-md); line-height: var(--lh-tight); letter-spacing:-.01em; font-weight:500; color:var(--fg-primary); } .smk-h3 { font-family: var(--font-display); font-size: var(--fs-display-sm); line-height: var(--lh-snug); letter-spacing:-.005em; font-weight:500; color:var(--fg-primary); } .smk-h4 { font-family: var(--font-sans); font-size: var(--fs-heading); line-height: var(--lh-snug); font-weight:600; color:var(--fg-primary); } .smk-body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-normal); color:var(--fg-primary); } .smk-body-lg { font-family: var(--font-sans); font-size: var(--fs-body-lg); line-height: var(--lh-normal); color:var(--fg-primary); } .smk-meta { font-family: var(--font-sans); font-size: var(--fs-body-sm); line-height: var(--lh-normal); color:var(--fg-muted); } .smk-caption { font-family: var(--font-sans); font-size: var(--fs-caption); line-height: var(--lh-snug); color:var(--fg-muted); letter-spacing:.06em; text-transform:uppercase; font-weight:600; } .smk-mono { font-family: var(--font-mono); font-size: var(--fs-mono); line-height: var(--lh-normal); color:var(--fg-primary); } .smk-mono-lg { font-family: var(--font-mono); font-size: var(--fs-mono-lg); line-height: var(--lh-snug); color:var(--fg-primary); font-weight:500; } .smk-code { font-family: var(--font-mono); font-size: .92em; background: var(--bg-raised); border:1px solid var(--border-subtle); padding:1px 6px; border-radius: var(--radius-xs); color:var(--fg-primary); } /* Default