/* zBreach design tokens. Dark-first: the product is an offensive-security command centre and every existing page assumes a dark ground. A light theme is available by stamping data-theme="light" on . Pages style themselves through these tokens; never through literals. */ :root { color-scheme: dark; --zb-font-sans: "IBM Plex Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --zb-font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; /* ground and surfaces */ --zb-bg: #0C1116; --zb-bg-2: #10171E; --zb-surface: #121920; --zb-surface-2: #182028; --zb-surface-3: #1F2933; --zb-line-soft: #1B242D; --zb-line: #26313B; --zb-line-strong: #34414D; /* ink */ --zb-ink: #E6ECF1; --zb-ink-2: #B8C2CC; --zb-muted: #8A97A4; --zb-faint: #5E6B78; /* the one interactive accent; severity and status are separate below */ --zb-accent: #4FB0CF; --zb-accent-2: #7CCBE3; --zb-accent-ink: #0C1116; --zb-accent-soft: #12303B; --zb-accent-line: #1E5F76; --zb-focus: #7CCBE3; /* semantic: severity */ --zb-sev-critical: #E5484D; --zb-sev-high: #F0883E; --zb-sev-medium: #E3B341; --zb-sev-low: #3FB950; --zb-sev-info: #79A8C5; /* semantic: status */ --zb-ok: #3FB950; --zb-warn: #E3B341; --zb-danger: #E5484D; /* brand mark colours are fixed, theme-independent */ --zb-brand: #1B6B87; --zb-brand-ink: #FFFFFF; /* shape and rhythm */ --zb-r-1: 6px; --zb-r-2: 10px; --zb-r-pill: 999px; --zb-s-1: 4px; --zb-s-2: 8px; --zb-s-3: 12px; --zb-s-4: 16px; --zb-s-5: 24px; --zb-s-6: 32px; --zb-s-7: 48px; --zb-shadow-1: 0 1px 2px rgba(0, 0, 0, .35); --zb-shadow-2: 0 10px 30px rgba(0, 0, 0, .45); } /* "Ember": the original orange identity, kept as a selectable design. Same components, same structure; only the accent, ground temperature and brand colour change. Severity and status colours are shared. */ :root[data-theme="ember"] { color-scheme: dark; --zb-bg: #070605; --zb-bg-2: #0c0a08; --zb-surface: #121010; --zb-surface-2: #1a1614; --zb-surface-3: #221c19; --zb-line-soft: #1e1815; --zb-line: #2a221e; --zb-line-strong: #3a2f29; --zb-ink: #FFFFFF; --zb-ink-2: #CFC3B8; --zb-muted: #9A8B7D; --zb-faint: #6A5D52; --zb-accent: #FF5522; --zb-accent-2: #FF7744; --zb-accent-ink: #1A0D08; --zb-accent-soft: #2B140C; --zb-accent-line: #7A3418; --zb-focus: #FF7744; --zb-brand: #FF5522; --zb-brand-ink: #FFFFFF; --zb-shadow-1: 0 1px 2px rgba(0, 0, 0, .4); --zb-shadow-2: 0 10px 30px rgba(0, 0, 0, .5); } :root[data-theme="light"] { color-scheme: light; --zb-bg: #F4F6F8; --zb-bg-2: #EEF2F5; --zb-surface: #FFFFFF; --zb-surface-2: #F7F9FB; --zb-surface-3: #EEF2F5; --zb-line-soft: #E8ECF0; --zb-line: #D8DEE4; --zb-line-strong: #C3CCD5; --zb-ink: #141A20; --zb-ink-2: #2E3A45; --zb-muted: #5C6975; --zb-faint: #8A97A4; --zb-accent: #1B6B87; --zb-accent-2: #2A8AAB; --zb-accent-ink: #FFFFFF; --zb-accent-soft: #E1EEF3; --zb-accent-line: #9CC9D9; --zb-focus: #1B6B87; --zb-sev-critical: #B42318; --zb-sev-high: #C0561B; --zb-sev-medium: #9A7410; --zb-sev-low: #2E7D4F; --zb-sev-info: #5C6975; --zb-ok: #2E7D4F; --zb-warn: #9A7410; --zb-danger: #B42318; --zb-shadow-1: 0 1px 2px rgba(20, 26, 32, .06); --zb-shadow-2: 0 10px 30px rgba(20, 26, 32, .12); }