/* ============================================================================ Intelligence Suite — Design Tokens ============================================================================ Phase A of the SI → IS design-harmonization (2026-05-25). Canonical tokens distilled from: - CISA/frontend/app/globals.css (MI — production at mi.irm.ai) - Sales_Intelligence/ui_sls/styles.css (SI — MEP/pilot) - product_intelligence/web/mission-control/src/styles.css (PI) - frontend/styles/agents.css (MI agent settings) This file is PURELY ADDITIVE — it does not override or replace the existing tokens in ui_sls/styles.css. Phase A ships ZERO visible change. Phases B/C migrate components onto these tokens one surface at a time. Loaded by every HTML page that opts in via ``. Place BEFORE styles.css so styles.css can override if needed during the transition. ============================================================================ */ /* 2026-05-27 — Removed the @import for Google Fonts CSS2. The request was failing in operator browser sessions with strict content shielding (Brave Shields / uBlock / etc.), surfacing a noisy red row in DevTools and a small CSP retry cost on every page load. The font-family declarations below + on each element specify `Inter, system-ui, sans-serif` — system-ui resolves to: - macOS: San Francisco (visually compatible weights) - Win11: Segoe UI - Linux: whatever the desktop ships (DejaVu / Liberation etc.) Acceptable degradation. When we want pixel-perfect Inter on every OS, the path forward is self-hosting the woff2 files under /styles/fonts/ — out of scope for this design pass since the visual diff against system-ui is negligible at our sizes. */ :root { /* -------------------------------------------------------------------------- 1. BRAND COLORS — the "IS blue" family. Unified on #1A4C8A as the canonical Intelligence brand blue, with #2F73C0 as the interactive accent (matches MI production). -------------------------------------------------------------------------- */ --is-blue-900: #0C2A4F; /* deepest — text-on-light emphasis + dark bg */ --is-blue-800: #123A6E; /* headers, dense data labels */ --is-blue-700: #1A4C8A; /* PRIMARY brand blue (buttons, active tabs, logo) */ --is-blue-600: #235FA5; /* hover on primary */ --is-blue-500: #2F73C0; /* ACCENT (focus rings, links, active glow) */ --is-blue-400: #5C94D6; /* subdued links, icons on tinted bg */ --is-blue-300: #A4C3E5; /* disabled-primary, chart mid */ --is-blue-200: #D0E1F2; /* selected row tint, focus halo */ --is-blue-100: #EAF2FB; /* subtle tint fills (hover on neutral rows) */ --is-blue-50: #F2F7FC; /* page accents, table zebra */ /* -------------------------------------------------------------------------- 2. NEUTRALS — Slate scale (matches Tailwind slate). -------------------------------------------------------------------------- */ --is-ink-900: #0F172A; --is-ink-800: #1E293B; --is-ink-700: #334155; --is-ink-600: #475569; --is-ink-500: #64748B; --is-ink-400: #94A3B8; --is-ink-300: #CBD5E1; --is-ink-200: #E2E8F0; --is-ink-100: #F1F5F9; --is-ink-50: #F8FAFC; /* -------------------------------------------------------------------------- 3. SEMANTIC SURFACE TOKENS -------------------------------------------------------------------------- */ --is-bg-app: #F7F9FC; /* canonical IS app background */ --is-bg-subtle: #F1F5F9; /* alternating sections, header strips */ --is-bg-surface: #FFFFFF; /* cards, drawers, modals, table bodies */ --is-bg-surface-alt: #FBFCFE; /* nested surface */ --is-bg-inverse: #0F172A; /* dark code blocks */ --is-fg-primary: var(--is-ink-900); --is-fg-secondary: var(--is-ink-700); --is-fg-muted: var(--is-ink-500); --is-fg-on-brand: #FFFFFF; --is-border-subtle: rgba(15, 23, 42, 0.08); --is-border-default: #E2E8F0; --is-border-strong: #CBD5E1; --is-border-focus: rgba(47, 115, 192, 0.55); /* -------------------------------------------------------------------------- 4. SEMANTIC STATE COLORS -------------------------------------------------------------------------- */ --is-success-50: #F0FDF4; --is-success-100: #DCFCE7; --is-success-200: #BBF7D0; --is-success-300: #86EFAC; --is-success-500: #22C55E; --is-success-600: #16A34A; --is-success-700: #047857; --is-success-900: #14532D; --is-warn-50: #FFFBEB; --is-warn-100: #FEF3C7; --is-warn-200: #FDE68A; --is-warn-300: #FCD34D; --is-warn-500: #EAB308; --is-warn-600: #CA8A04; --is-warn-700: #92400E; --is-warn-900: #713F12; --is-danger-50: #FEF2F2; --is-danger-100: #FEE2E2; --is-danger-200: #FECACA; --is-danger-300: #FCA5A5; --is-danger-500: #EF4444; --is-danger-600: #DC2626; --is-danger-700: #B91C1C; --is-danger-900: #7F1D1D; --is-info-50: #EFF6FF; --is-info-100: #DBEAFE; --is-info-200: #BFDBFE; --is-info-300: #93C5FD; --is-info-500: #3B82F6; --is-info-600: #2563EB; --is-info-700: #1D4ED8; --is-info-900: #1E3A8A; /* Pipeline-stage tints (from SI deals board, kept for consistency) */ --is-stage-high-bg: #F7FDF7; --is-stage-high-chip-bg: rgba(34, 197, 94, 0.18); --is-stage-high-chip-fg: #166534; --is-stage-nurture-bg: #FFFEF6; --is-stage-nurture-chip-bg: rgba(250, 204, 21, 0.18); --is-stage-nurture-chip-fg: #92400E; --is-stage-archive-bg: #F6F9FF; --is-stage-archive-chip-bg: rgba(59, 130, 246, 0.18); --is-stage-archive-chip-fg: #1D4ED8; /* -------------------------------------------------------------------------- 5. TYPOGRAPHY -------------------------------------------------------------------------- */ --is-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --is-font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --is-font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; /* Type scale — 1.125 minor-third, anchored at 16px body */ --is-text-xs: 0.75rem; /* 12 — metadata, chips */ --is-text-sm: 0.875rem; /* 14 — body small, table cells */ --is-text-base: 1rem; /* 16 — body */ --is-text-md: 1.125rem; /* 18 — lead paragraph */ --is-text-lg: 1.35rem; /* ~22 — card titles */ --is-text-xl: 1.6rem; /* ~26 — page titles */ --is-text-2xl: 2rem; /* 32 — hero h1, stat-card values */ --is-text-3xl: 2.5rem; /* 40 — marketing hero */ --is-leading-tight: 1.2; --is-leading-snug: 1.35; --is-leading-normal: 1.5; --is-leading-relaxed: 1.65; --is-weight-regular: 400; --is-weight-medium: 500; --is-weight-semibold: 600; --is-weight-bold: 700; --is-tracking-tight: -0.01em; --is-tracking-normal: 0; --is-tracking-wide: 0.05em; --is-tracking-wider: 0.08em; /* eyebrow uppercase */ /* -------------------------------------------------------------------------- 6. SPACING — 4px base -------------------------------------------------------------------------- */ --is-space-0: 0; --is-space-1: 0.25rem; --is-space-2: 0.5rem; --is-space-3: 0.75rem; --is-space-4: 1rem; --is-space-5: 1.25rem; --is-space-6: 1.5rem; --is-space-8: 2rem; --is-space-10: 2.5rem; --is-space-12: 3rem; --is-space-16: 4rem; --is-space-20: 5rem; /* -------------------------------------------------------------------------- 7. RADII -------------------------------------------------------------------------- */ --is-radius-xs: 4px; --is-radius-sm: 6px; --is-radius-md: 10px; --is-radius-lg: 14px; --is-radius-xl: 18px; --is-radius-2xl: 22px; --is-radius-pill: 999px; /* -------------------------------------------------------------------------- 8. SHADOWS -------------------------------------------------------------------------- */ --is-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.06); --is-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.04); --is-shadow-md: 0 8px 24px rgba(31, 41, 55, 0.08); --is-shadow-lg: 0 16px 36px rgba(15, 23, 42, 0.06); --is-shadow-xl: 0 24px 45px -32px rgba(15, 23, 42, 0.38); --is-shadow-hover: 0 20px 34px -26px rgba(15, 23, 42, 0.7); --is-shadow-primary: 0 18px 40px -28px rgba(37, 99, 235, 0.85); --is-shadow-inner: inset 0 1px 2px rgba(15, 23, 42, 0.06); --is-ring-focus: 0 0 0 3px rgba(47, 115, 192, 0.25); /* -------------------------------------------------------------------------- 9. MOTION -------------------------------------------------------------------------- */ --is-ease-standard: cubic-bezier(0.2, 0, 0, 1); --is-ease-decel: cubic-bezier(0, 0, 0.2, 1); --is-ease-accel: cubic-bezier(0.4, 0, 1, 1); --is-duration-fast: 120ms; --is-duration-base: 180ms; --is-duration-slow: 240ms; /* -------------------------------------------------------------------------- 10. LAYOUT CONTAINERS -------------------------------------------------------------------------- */ --is-container-narrow: 640px; --is-container-read: 760px; --is-container-app: 1180px; --is-container-wide: 1280px; } /* ============================================================================ SEMANTIC TYPE UTILITIES — opt-in via class. No global element selectors so we don't accidentally restyle existing pages during the transition. ============================================================================ */ .is-h1 { font-family: var(--is-font-display); font-size: var(--is-text-2xl); line-height: var(--is-leading-tight); letter-spacing: var(--is-tracking-tight); font-weight: var(--is-weight-bold); color: var(--is-fg-primary); } .is-h2 { font-family: var(--is-font-display); font-size: var(--is-text-xl); line-height: var(--is-leading-tight); font-weight: var(--is-weight-semibold); color: var(--is-fg-primary); } .is-h3 { font-family: var(--is-font-sans); font-size: var(--is-text-lg); line-height: var(--is-leading-snug); font-weight: var(--is-weight-semibold); color: var(--is-fg-primary); } .is-eyebrow { font-family: var(--is-font-sans); font-size: var(--is-text-xs); line-height: 1; font-weight: var(--is-weight-bold); letter-spacing: var(--is-tracking-wider); text-transform: uppercase; color: var(--is-blue-500); } .is-body { font-family: var(--is-font-sans); font-size: var(--is-text-base); line-height: var(--is-leading-normal); color: var(--is-fg-primary); } .is-body-sm { font-family: var(--is-font-sans); font-size: var(--is-text-sm); line-height: var(--is-leading-normal); color: var(--is-fg-secondary); } .is-label { font-family: var(--is-font-sans); font-size: var(--is-text-sm); font-weight: var(--is-weight-semibold); color: var(--is-ink-600); letter-spacing: 0.01em; } .is-meta { font-family: var(--is-font-sans); font-size: var(--is-text-xs); color: var(--is-fg-muted); text-transform: uppercase; letter-spacing: var(--is-tracking-wide); } .is-mono { font-family: var(--is-font-mono); }