/* ================================================================= RAXE Unified Design Tokens v4.0.0 Single source of truth for the entire site. Philosophy: - Dark-first: the "dark intel" aesthetic IS the brand, not a modifier - Semantic naming: tokens describe purpose, not appearance - No duplication: one token per concept - Full coverage: marketing pages, TI reports, advisories, labs — all draw from this one file with zero page-specific token overrides Architecture: - :root contains all primitive + semantic tokens (dark mode default) - .light-section overrides surface/text tokens for light marketing sections - @media print overrides for paper output - No .threat-intel-page, .advisory-report-page, or .advisories-page token blocks needed — they all inherit from :root Migration: This replaces: - public/assets/css/tokens.css (global, light-first) - public/assets/css/ti/00-tokens.css (TI dark scope) - public/assets/css/advisory-report.css (top ~76 lines) - public/assets/css/adv/00-tokens.css (advisories listing scope) Color count: 33 unique base colors (down from 65+) ================================================================= */ /* ================================================================= 1. PRIMITIVES — Raw color values Named by hue, not by usage. Referenced only by semantic tokens below. Never use primitives directly in component CSS. ================================================================= */ :root { /* --- Neutrals (blue-tinted slate scale) --- */ --raw-slate-950: #0b0e14; --raw-slate-900: #0d1018; --raw-slate-850: #111520; --raw-slate-800: #151a26; --raw-slate-750: #1a2030; --raw-slate-700: #1e293b; --raw-slate-600: #334155; --raw-slate-500: #475569; --raw-slate-400: #64748b; --raw-slate-300: #94a3b8; --raw-slate-200: #cbd5e1; --raw-slate-100: #e2e8f0; --raw-slate-50: #f1f5f9; --raw-slate-25: #f8fafc; --raw-white: #ffffff; /* --- Brand --- */ --raw-cyan: #38bdf8; /* Sky-400: the RAXE primary. Picked for WCAG AA on dark backgrounds (4.7:1 on #0b0e14), sat enough for badges/links, calm enough for large surfaces. Replaces #22d3ee and #62DDFC. */ --raw-cyan-bright: #22d3ee; /* Cyan-400: highlight/emphasis only — hover states, code highlights, sparklines. */ --raw-magenta: #e879f9; /* Fuchsia-400: secondary brand, Defend sub-brand */ --raw-indigo: #818cf8; /* Indigo-400: tertiary accent, chart variety */ --raw-violet: #a78bfa; /* Violet-400: new/novel indicators, chart color */ /* --- Semantic status (Tailwind-aligned) --- */ --raw-red: #ef4444; /* Red-500: critical / danger / error */ --raw-orange: #f97316; /* Orange-500: high severity / warning-high */ --raw-amber: #f59e0b; /* Amber-500: medium severity / warning */ --raw-yellow: #eab308; /* Yellow-500: medium severity alt */ --raw-green: #22c55e; /* Green-500: success / low severity / trend-down */ --raw-blue: #3b82f6; /* Blue-500: info / severity-info */ --raw-teal: #2dd4bf; /* Teal-400: chart color */ --raw-rose: #fb7185; /* Rose-400: chart color */ --raw-emerald: #34d399; /* Emerald-400: chart color */ } /* ================================================================= 2. SEMANTIC TOKENS — Dark mode default These are what component CSS actually references. Grouped by function, not by visual property. ================================================================= */ :root { /* --------------------------------------------------------- 2.1 SURFACES 5-tier elevation stack for spatial hierarchy. Darker = further back; lighter = more elevated. --------------------------------------------------------- */ --color-surface-inset: var(--raw-slate-900); /* Code blocks, recessed panels */ --color-surface-primary: var(--raw-slate-950); /* Page background */ --color-surface-secondary: var(--raw-slate-850); /* Alternate sections, sidebar */ --color-surface-card: var(--raw-slate-800); /* Cards, panels, tables */ --color-surface-elevated: var(--raw-slate-750); /* Hover states, active elements, dropdowns */ --color-surface-overlay: rgba(11, 14, 20, 0.92); /* Sticky navs, modals (with backdrop-filter) */ /* --------------------------------------------------------- 2.2 TEXT HIERARCHY 5-tier contrast stack. Primaries must pass WCAG AA (4.5:1) against --color-surface-primary. --------------------------------------------------------- */ --color-text-primary: var(--raw-slate-100); /* #e2e8f0 — headings, body (11.5:1) */ --color-text-secondary: var(--raw-slate-300); /* #94a3b8 — supporting text (6.2:1) */ --color-text-muted: #7c8da1; /* Tertiary labels, timestamps (4.6:1 — AA pass) */ --color-text-dim: #5c6d82; /* Decorative, disabled (3.2:1 — AA-large only) */ --color-text-accent: var(--raw-cyan); /* Links, interactive text */ /* --------------------------------------------------------- 2.3 BRAND COLORS Primary: cyan (RAXE identity, Labs sub-brand) Secondary: magenta (Defend sub-brand) Tertiary: indigo (variety, charts) --------------------------------------------------------- */ --color-brand-primary: var(--raw-cyan); --color-brand-primary-hover: var(--raw-cyan-bright); --color-brand-secondary: var(--raw-magenta); --color-brand-tertiary: var(--raw-indigo); --color-brand-gradient: linear-gradient(135deg, var(--raw-cyan) 0%, var(--raw-magenta) 100%); /* Brand glow effects (subtle radial backgrounds) */ --color-brand-glow: rgba(56, 189, 248, 0.15); --color-brand-glow-secondary: rgba(232, 121, 249, 0.12); /* Sub-brand aliases (for Labs vs Defend sections) */ --color-accent-labs: var(--raw-cyan); --color-accent-labs-glow: rgba(56, 189, 248, 0.15); --color-accent-defend: var(--raw-magenta); --color-accent-defend-glow: rgba(232, 121, 249, 0.15); /* Eyebrow labels */ --color-eyebrow-labs: var(--raw-cyan); --color-eyebrow-defend: var(--raw-magenta); /* --------------------------------------------------------- 2.4 SEMANTIC STATUS COLORS Used for alerts, toasts, form validation, inline feedback. --------------------------------------------------------- */ --color-success: var(--raw-green); --color-error: var(--raw-red); --color-warning: var(--raw-amber); --color-info: var(--raw-blue); /* --------------------------------------------------------- 2.5 SEVERITY SCALE 5-tier scale for security risk levels. Each has a solid foreground + translucent background for badge/pill usage. --------------------------------------------------------- */ --color-severity-critical: var(--raw-red); --color-severity-critical-bg: rgba(239, 68, 68, 0.12); --color-severity-high: var(--raw-orange); --color-severity-high-bg: rgba(249, 115, 22, 0.12); --color-severity-medium: var(--raw-yellow); --color-severity-medium-bg: rgba(234, 179, 8, 0.12); --color-severity-low: var(--raw-green); --color-severity-low-bg: rgba(34, 197, 94, 0.12); --color-severity-info: var(--raw-blue); --color-severity-info-bg: rgba(59, 130, 246, 0.12); /* --------------------------------------------------------- 2.6 TLP (Traffic Light Protocol) COLORS Used for classification markings on intel and advisory pages. --------------------------------------------------------- */ --color-tlp-white: var(--raw-white); --color-tlp-white-bg: rgba(255, 255, 255, 0.08); --color-tlp-green: var(--raw-green); --color-tlp-green-bg: rgba(34, 197, 94, 0.08); --color-tlp-amber: var(--raw-amber); --color-tlp-amber-bg: rgba(245, 158, 11, 0.08); --color-tlp-red: var(--raw-red); --color-tlp-red-bg: rgba(239, 68, 68, 0.08); /* --------------------------------------------------------- 2.7 TREND INDICATORS Directional indicators for month-over-month data. Up = bad (more threats), down = good (fewer threats). --------------------------------------------------------- */ --color-trend-up: var(--raw-red); --color-trend-stable: var(--raw-slate-400); --color-trend-down: var(--raw-green); --color-trend-new: var(--raw-violet); /* --------------------------------------------------------- 2.8 CHART PALETTE 11 distinct colors for threat family donut/bar charts. Chosen for perceptual distinguishability at small sizes. --------------------------------------------------------- */ --color-chart-1: #f87171; /* Red-400: Exfiltration */ --color-chart-2: var(--raw-emerald); /* Emerald-400: Tool abuse */ --color-chart-3: var(--raw-slate-400); /* Slate-500: Benign */ --color-chart-4: #c084fc; /* Purple-400: RAG poisoning */ --color-chart-5: #fbbf24; /* Amber-400: Jailbreak */ --color-chart-6: var(--raw-cyan); /* Sky-400: Injection */ --color-chart-7: var(--raw-teal); /* Teal-400: Goal hijack */ --color-chart-8: #fde047; /* Yellow-300: Encoding */ --color-chart-9: var(--raw-violet); /* Violet-400: Inter-agent */ --color-chart-10: var(--raw-rose); /* Rose-400: Priv escalation */ --color-chart-11: var(--raw-slate-500); /* Slate-600: Other */ /* Research stream colors (advisory portal categories) */ --color-stream-adversarial: var(--raw-violet); /* Adversarial ML */ --color-stream-adversarial-bg: rgba(167, 139, 250, 0.12); --color-stream-agent: var(--raw-cyan-bright); /* Agent Security */ --color-stream-agent-bg: rgba(34, 211, 238, 0.12); --color-stream-supply: var(--raw-orange); /* Supply Chain */ --color-stream-supply-bg: rgba(251, 146, 60, 0.12); --color-stream-injection: #f472b6; /* Prompt Injection */ --color-stream-injection-bg: rgba(244, 114, 182, 0.12); /* --------------------------------------------------------- 2.9 BORDERS Translucent borders that adapt to any surface. Using slate-300 as base for alpha blending on dark bgs. --------------------------------------------------------- */ --color-border-subtle: rgba(148, 163, 184, 0.06); --color-border-primary: rgba(148, 163, 184, 0.12); --color-border-strong: rgba(148, 163, 184, 0.20); --color-border-accent: rgba(56, 189, 248, 0.30); /* --------------------------------------------------------- 2.10 SHADOWS Progressive depth stack. Opaque on dark bg. --------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); --shadow-glow: 0 0 20px rgba(56, 189, 248, 0.10); --shadow-glow-brand: 0 4px 24px rgba(56, 189, 248, 0.25); /* Severity-keyed glow shadows (advisory cards) */ --shadow-glow-critical: 0 0 16px rgba(239, 68, 68, 0.15); --shadow-glow-high: 0 0 16px rgba(249, 115, 22, 0.12); --shadow-glow-medium: 0 0 16px rgba(234, 179, 8, 0.10); --shadow-glow-low: 0 0 16px rgba(34, 197, 94, 0.10); /* ============================================================= 3. TYPOGRAPHY ============================================================= */ /* --------------------------------------------------------- 3.1 FONT FAMILIES Two families: Inter for prose, JetBrains Mono for data. --font-sans is the canonical name (kills --font-primary dup). --------------------------------------------------------- */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; /* --------------------------------------------------------- 3.2 TYPE SCALE — Headings (Inter) Fluid where needed, fixed for data-dense contexts. --------------------------------------------------------- */ --text-h1: 2.25rem; /* 36px — page/report titles */ --text-h2: 1.5rem; /* 24px — section titles */ --text-h3: 1.125rem; /* 18px — subsection / card titles */ --text-h4: 0.9375rem; /* 15px — minor headings */ --text-overline: 0.6875rem; /* 11px — labels, TLP markings, badges */ /* Fluid heading for hero/marketing sections */ --text-display: clamp(1.953rem, 4vw, 3.052rem); /* --------------------------------------------------------- 3.3 TYPE SCALE — Body (Inter) --------------------------------------------------------- */ --text-body-lg: 1rem; /* 16px — long-form prose (marketing) */ --text-body: 0.875rem; /* 14px — default body (intel/data pages) */ --text-body-sm: 0.8125rem; /* 13px — compact body, table cells */ --text-caption: 0.75rem; /* 12px — captions, footnotes */ /* --------------------------------------------------------- 3.4 TYPE SCALE — Data (JetBrains Mono) For numeric values, identifiers, code, timestamps. --------------------------------------------------------- */ --text-data-xl: 2rem; /* 32px — hero stat values */ --text-data-lg: 1.5rem; /* 24px — section stat callouts */ --text-data-md: 1.125rem; /* 18px — inline stat values */ --text-data-sm: 0.8125rem; /* 13px — table data, badge text */ --text-data-xs: 0.6875rem; /* 11px — axis labels, micro-data */ /* --------------------------------------------------------- 3.5 FONT WEIGHTS --------------------------------------------------------- */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 900; /* --------------------------------------------------------- 3.6 LINE HEIGHTS --------------------------------------------------------- */ --leading-tight: 1.15; /* Headings, large display */ --leading-snug: 1.3; /* Compact headings, card titles */ --leading-normal: 1.5; /* Body text */ --leading-relaxed: 1.65; /* Long-form prose, readability-first */ /* --------------------------------------------------------- 3.7 LETTER SPACING --------------------------------------------------------- */ --tracking-tight: -0.01em; /* Large headings */ --tracking-normal: 0; /* Body text */ --tracking-wide: 0.05em; /* Overlines, small labels */ --tracking-wider: 0.08em; /* Uppercase labels */ --tracking-widest: 0.12em; /* Classification markings */ /* ============================================================= 4. SPACING ============================================================= */ /* --------------------------------------------------------- 4.1 SPACING SCALE 4px base unit. Named by multiplier for predictability. --------------------------------------------------------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* Semantic spacing aliases */ --space-section-y: var(--space-16); /* Vertical padding between sections */ --space-section-gap: var(--space-12); /* Gap between section content blocks */ --space-card-pad: var(--space-5); /* Card internal padding */ --space-card-gap: var(--space-4); /* Gap between cards in grid */ /* ============================================================= 5. BORDERS & RADII ============================================================= */ /* --------------------------------------------------------- 5.1 BORDER RADIUS Tight radii for the intel aesthetic (no pill buttons, no huge rounded corners — that reads as consumer SaaS). --------------------------------------------------------- */ --radius-sm: 2px; /* Badges, inline pills */ --radius-md: 4px; /* Cards, inputs, buttons */ --radius-lg: 6px; /* Modal corners, panels */ --radius-xl: 8px; /* Feature cards, hero elements */ --radius-2xl: 12px; /* Marketing hero cards (light sections only) */ --radius-full: 9999px; /* Circular avatars, dot indicators */ /* --------------------------------------------------------- 5.2 BORDER WIDTHS --------------------------------------------------------- */ --border-width: 1px; --border-width-thick: 2px; --border-width-band: 3px; /* TLP classification bands */ /* ============================================================= 6. MOTION ============================================================= */ --transition-fast: 0.15s ease; --transition-base: 0.2s ease; --transition-slow: 0.35s ease; /* ============================================================= 7. CODE SYNTAX HIGHLIGHTING Monokai-inspired palette for code blocks. ============================================================= */ --code-comment: #75715e; --code-keyword: #66d9ef; --code-function: #a6e22e; --code-string: #e6db74; --code-number: #ae81ff; --code-operator: #f92672; --code-class: #a6e22e; --code-name: #f8f8f2; --code-punct: #f8f8f2; /* Legacy code tokens (for existing templates — use above in new code) */ --code-legacy-comment: #6b7280; --code-legacy-keyword: #c084fc; --code-legacy-function: #fbbf24; --code-legacy-string: #34d399; --code-legacy-class: #60a5fa; /* Terminal chrome dots */ --terminal-dot-red: #ff5f57; --terminal-dot-yellow: #febc2e; --terminal-dot-green: #28c840; } /* ================================================================= 8. LIGHT SECTION OVERRIDES For marketing pages that alternate dark/light sections. Apply .light-section to any container that needs white bg. ================================================================= */ .light-section { --color-surface-primary: var(--raw-white); --color-surface-secondary: var(--raw-slate-25); --color-surface-card: var(--raw-white); --color-surface-elevated: var(--raw-slate-50); --color-surface-inset: var(--raw-slate-25); --color-text-primary: #0f172a; /* Near-black */ --color-text-secondary: #1e293b; /* Dark slate */ --color-text-muted: #374151; /* Gray-700 — passes AA on white */ --color-text-dim: var(--raw-slate-300); --color-border-subtle: rgba(0, 0, 0, 0.04); --color-border-primary: #e2e8f0; --color-border-strong: #cbd5e1; --color-border-accent: rgba(56, 189, 248, 0.40); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07); --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.10); --shadow-glow-brand: 0 4px 24px rgba(56, 189, 248, 0.25); } /* ================================================================= 9. PRINT OVERRIDES Force light surfaces and solid borders for paper output. ================================================================= */ @media print { :root { --color-surface-primary: #ffffff; --color-surface-secondary: #f8fafc; --color-surface-card: #ffffff; --color-surface-elevated: #f1f5f9; --color-surface-inset: #f8fafc; --color-text-primary: #0f172a; --color-text-secondary: #334155; --color-text-muted: #64748b; --color-text-dim: #94a3b8; --color-text-accent: #0284c7; --color-border-primary: #d1d5db; --color-border-subtle: #e5e7eb; --color-border-strong: #9ca3af; --color-brand-primary: #0284c7; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-glow: none; } } /* ================================================================= 10. REDUCED MOTION ================================================================= */ @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 0.01ms; --transition-base: 0.01ms; --transition-slow: 0.01ms; } } /* ================================================================= 11. BACKWARD COMPAT — Legacy token aliases Required by compiled React Flow bundles (public/assets/react/). Remove after Vite rebuild updates bundle references. ================================================================= */ :root { --accent-cyan: var(--color-brand-primary); --accent-magenta: var(--color-brand-secondary); --accent-labs: var(--color-accent-labs); --accent-defend: var(--color-accent-defend); --bg-dark: var(--color-surface-primary); --bg-dark-card: var(--color-surface-card); --bg-card: var(--color-surface-card); --bg-secondary: var(--color-surface-secondary); --gradient-primary: var(--color-brand-gradient); --text-primary: var(--color-text-primary); --text-secondary: var(--color-text-secondary); --text-muted: var(--color-text-muted); --text-on-dark: var(--color-text-primary); --text-on-dark-muted: var(--color-text-secondary); --border-light: var(--color-border-subtle); --border-dark-subtle: var(--color-border-subtle); /* Typography aliases (used by advisories listing CSS) */ --font-size-base: var(--text-body); /* 14px */ --font-size-xs: var(--text-data-xs); /* 11px */ --font-size-sm: var(--text-body-sm); /* 13px */ --font-size-lg: var(--text-data-lg); /* 24px */ --font-bold: var(--weight-bold); /* 700 */ --font-semibold: var(--weight-semibold); /* 600 */ --font-medium: var(--weight-medium); /* 500 */ /* Semantic spacing aliases (used by layout, homepage, components, legal, about, pricing) */ --space-xs: var(--space-1); /* 4px */ --space-sm: var(--space-2); /* 8px */ --space-md: var(--space-4); /* 16px */ --space-lg: var(--space-6); /* 24px */ --space-xl: var(--space-8); /* 32px */ --space-2xl: var(--space-12); /* 48px */ --space-3xl: var(--space-16); /* 64px */ } /* ================================================================= 12. UTILITY CLASSES — Accessibility ================================================================= */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }