/* ============================================================================ BLUEPRINT DESIGN SYSTEM — TOKENS blueprint-tokens.css ---------------------------------------------------------------------------- Semantic design tokens for IT-security & operations frontends. Works for both admin and end-user surfaces. Palette: white · blue · black · grey. No gradients. THEMING Default theme is dark. Switch by setting an attribute on or any ancestor element: (default) If no data-theme is set, the OS preference is honoured via prefers-color-scheme. USAGE Components must reference SEMANTIC tokens only (e.g. var(--bp-surface)), never raw palette values. To re-skin, remap the tokens — not the components. ============================================================================ */ /* ------------------------------------------------------------------ * * 1. PRIMITIVES — raw scales. Do not use directly in components. * * ------------------------------------------------------------------ */ :root { /* type families */ --bp-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --bp-font-mono: "JetBrains Mono", "SFMono-Regular", "Consolas", "Menlo", monospace; /* type scale (px in rem, 16px base) */ --bp-text-2xs: 0.656rem; /* 10.5 — eyebrows, captions */ --bp-text-xs: 0.75rem; /* 12 — micro labels */ --bp-text-sm: 0.781rem; /* 12.5 — small / helper */ --bp-text-base:0.875rem; /* 14 — body */ --bp-text-md: 0.938rem; /* 15 — emphasised body */ --bp-text-lg: 1.125rem; /* 18 — h2 */ --bp-text-xl: 1.375rem; /* 22 — h1 */ --bp-text-2xl: 1.5rem; /* 24 — stat values */ --bp-text-3xl: 1.75rem; /* 28 — display */ --bp-weight-regular: 400; --bp-weight-medium: 500; --bp-weight-semibold:600; --bp-weight-bold: 700; --bp-leading-tight: 1.25; --bp-leading-snug: 1.4; --bp-leading-normal:1.55; --bp-tracking-tight: -0.02em; --bp-tracking-normal: 0; --bp-tracking-wide: 0.08em; --bp-tracking-eyebrow:0.14em; /* spacing scale (4-based) */ --bp-space-1: 4px; --bp-space-2: 8px; --bp-space-3: 12px; --bp-space-4: 16px; --bp-space-5: 20px; --bp-space-6: 24px; --bp-space-8: 32px; --bp-space-10: 40px; --bp-space-12: 48px; --bp-space-16: 64px; /* radii — near-zero, blueprint aesthetic */ --bp-radius-sm: 2px; --bp-radius-md: 2px; --bp-radius-pill: 2px; /* borders */ --bp-border-width: 1px; --bp-border-width-accent: 2px; /* blueprint grid texture */ --bp-grid-size: 56px; /* motion */ --bp-transition-fast: 0.12s ease; --bp-transition: 0.18s ease; /* z-index scale */ --bp-z-base: 1; --bp-z-sticky: 10; --bp-z-overlay: 100; --bp-z-toast: 1000; /* layout */ --bp-sidebar-width: 232px; --bp-rail-width: 72px; --bp-topbar-height: 52px; --bp-tabbar-height: 52px; --bp-content-max: 1320px; /* focus ring */ --bp-focus-ring: 2px; } /* ------------------------------------------------------------------ * * 2. SEMANTIC TOKENS — DARK (default) * * ------------------------------------------------------------------ */ :root, [data-theme="dark"] { color-scheme: dark; /* surfaces */ --bp-bg: #0b0f14; --bp-surface: #11161d; --bp-surface-2: #161c25; --bp-surface-3: #1b2330; /* lines */ --bp-line: #232c38; --bp-line-strong: #33404f; /* ink Contrast on --bp-surface (#11161d): ink 15.4:1 · ink-dim 8.1:1 · ink-faint 5.2:1 (all WCAG AA). */ --bp-ink: #e8edf2; --bp-ink-dim: #a3aebc; --bp-ink-faint: #7f8b9a; --bp-ink-inverse: #0b0f14; /* accent (action only) */ --bp-accent: #2f6df6; --bp-accent-hover: #1d4ed8; --bp-accent-faint: rgba(47, 109, 246, 0.12); --bp-on-accent: #ffffff; /* status */ --bp-ok: #3fa66a; --bp-ok-faint: rgba(63, 166, 106, 0.14); --bp-warn: #c9922b; --bp-warn-faint: rgba(201, 146, 43, 0.14); --bp-high: #cf6a2e; --bp-high-faint: rgba(207, 106, 46, 0.14); --bp-crit: #d2433a; --bp-crit-faint: rgba(210, 67, 58, 0.14); /* grid texture */ --bp-grid-line: #232c38; --bp-grid-veil: rgba(11, 15, 20, 0.86); /* swatch / inset edge */ --bp-inset-ring: rgba(255, 255, 255, 0.08); /* overlay scrim */ --bp-scrim: rgba(0, 0, 0, 0.55); /* charts — flat categorical series (no gradients) */ --bp-chart-1: #2f6df6; --bp-chart-2: #3fa66a; --bp-chart-3: #c9922b; --bp-chart-4: #cf6a2e; --bp-chart-5: #7f8b9a; } /* ------------------------------------------------------------------ * * 3. SEMANTIC TOKENS — LIGHT * * ------------------------------------------------------------------ */ [data-theme="light"] { color-scheme: light; --bp-bg: #f4f6f9; --bp-surface: #ffffff; --bp-surface-2: #eef1f5; --bp-surface-3: #e6eaf0; --bp-line: #dce1e8; --bp-line-strong: #c2cad4; --bp-ink: #14181d; --bp-ink-dim: #55606d; --bp-ink-faint: #8a94a1; --bp-ink-inverse: #ffffff; /* darker blue keeps >=4.5:1 contrast on white */ --bp-accent: #1d4ed8; --bp-accent-hover: #1639a8; --bp-accent-faint: rgba(29, 78, 216, 0.08); --bp-on-accent: #ffffff; --bp-ok: #2f8f57; --bp-ok-faint: rgba(47, 143, 87, 0.10); --bp-warn: #a9781d; --bp-warn-faint: rgba(169, 120, 29, 0.10); --bp-high: #b45416; --bp-high-faint: rgba(180, 84, 22, 0.10); --bp-crit: #c0352c; --bp-crit-faint: rgba(192, 53, 44, 0.10); --bp-grid-line: #e3e8ee; --bp-grid-veil: rgba(244, 246, 249, 0.84); --bp-inset-ring: rgba(0, 0, 0, 0.06); --bp-scrim: rgba(20, 24, 29, 0.35); /* charts — flat categorical series (no gradients) */ --bp-chart-1: #1d4ed8; --bp-chart-2: #2f8f57; --bp-chart-3: #a9781d; --bp-chart-4: #b45416; --bp-chart-5: #55606d; } /* ------------------------------------------------------------------ * * 4. OS PREFERENCE FALLBACK * * Applies only when no explicit data-theme is set. * * ------------------------------------------------------------------ */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --bp-bg: #f4f6f9; --bp-surface: #ffffff; --bp-surface-2: #eef1f5; --bp-surface-3: #e6eaf0; --bp-line: #dce1e8; --bp-line-strong: #c2cad4; --bp-ink: #14181d; --bp-ink-dim: #55606d; --bp-ink-faint: #8a94a1; --bp-ink-inverse: #ffffff; --bp-accent: #1d4ed8; --bp-accent-hover: #1639a8; --bp-accent-faint: rgba(29, 78, 216, 0.08); --bp-on-accent: #ffffff; --bp-ok: #2f8f57; --bp-ok-faint: rgba(47, 143, 87, 0.10); --bp-warn: #a9781d; --bp-warn-faint: rgba(169, 120, 29, 0.10); --bp-high: #b45416; --bp-high-faint: rgba(180, 84, 22, 0.10); --bp-crit: #c0352c; --bp-crit-faint: rgba(192, 53, 44, 0.10); --bp-grid-line: #e3e8ee; --bp-grid-veil: rgba(244, 246, 249, 0.84); --bp-inset-ring: rgba(0, 0, 0, 0.06); --bp-scrim: rgba(20, 24, 29, 0.35); --bp-chart-1: #1d4ed8; --bp-chart-2: #2f8f57; --bp-chart-3: #a9781d; --bp-chart-4: #b45416; --bp-chart-5: #55606d; } }