/** * BlueDXP / Wajeeh BI — Enterprise Design System Tokens * ═══════════════════════════════════════════════════════ * Single source of truth for visual consistency across every surface. * * Dark mode default · Light via html[data-theme="light"] * Typography: IBM Plex Sans (UI) · IBM Plex Mono (data) · Syne (display) * * Design principles: * ADHD-friendly — strong visual hierarchy, generous spacing, prominent focus * Emotionally intelligent — calming palette, non-aggressive feedback * Enterprise-grade — restrained accents, refined typography, professional depth * * Load BEFORE wajeeh-theme-ui.css. * Set before this file loads to prevent flash. */ :root { /* ─── Surface scale ────────────────────────────────── Deep navy with warm undertones. s0 = page canvas … s5 = highest-elevation element */ --s0: #060a10; --s1: #0b111c; --s2: #0f1826; --s3: #16202e; --s4: #1d2a3d; --s5: #243348; /* ─── Text hierarchy ───────────────────────────────── Four-level system for clear cognitive chunking. */ --tp: #dce6f5; /* primary — headings, emphasis */ --tp-bright: #f8fafc; /* brightest — hero headings, values */ --ts: #7a8ba8; /* secondary — body copy */ --tt: #3d4f68; /* tertiary — captions, labels */ --tm: #1e2d42; /* muted — disabled, decorative */ /* ─── Primary accent — authoritative blue ────────── */ --blue: #2563eb; --blue-l: #3b82f6; --blue-xl: #60a5fa; --blue-2xl: #93c5fd; --blue-dim: rgba(37, 99, 235, 0.12); --blue-glow: rgba(37, 99, 235, 0.25); /* ─── Semantic colors — calming, non-aggressive ──── */ --green: #10b981; --green-l: #34d399; --green-dim: rgba(16, 185, 129, 0.12); --amber: #f59e0b; --amber-l: #fbbf24; --amber-dim: rgba(245, 158, 11, 0.12); --red: #ef4444; --red-l: #f87171; --red-dim: rgba(239, 68, 68, 0.10); --purple: #8b5cf6; --purple-l: #a78bfa; --purple-dim: rgba(139, 92, 246, 0.12); --teal: #06b6d4; --teal-l: #22d3ee; --teal-dim: rgba(6, 182, 212, 0.10); --orange: #f97316; --orange-dim: rgba(249, 115, 22, 0.10); /* ─── Borders ────────────────────────────────────── */ --border: rgba(255, 255, 255, 0.055); --border-med: rgba(255, 255, 255, 0.09); --border-hi: rgba(255, 255, 255, 0.14); /* ─── Glass / frosted surfaces ───────────────────── */ --glass: rgba(6, 10, 16, 0.78); --glass-border: rgba(255, 255, 255, 0.06); /* ─── Typography stacks ──────────────────────────── */ --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", monospace; --display: "IBM Plex Sans", system-ui, -apple-system, sans-serif; /* ─── Font sizes — readable, ADHD-friendly scale ── */ --fs-2xs: 0.625rem; /* 10 px — micro labels, mono data */ --fs-xs: 0.6875rem; /* 11 px — small captions */ --fs-sm: 0.78rem; /* 12.5px — secondary text */ --fs-base: 0.875rem; /* 14 px — body baseline */ --fs-md: 1rem; /* 16 px — emphasized body */ --fs-lg: 1.125rem; /* 18 px — card titles */ --fs-xl: 1.25rem; /* 20 px — section titles */ --fs-2xl: clamp(1.5rem, 2.5vw, 1.875rem); /* 24-30 px */ --fs-3xl: clamp(1.6rem, 3.6vw, 2.5rem); /* 26-40 px */ --fs-4xl: clamp(2.2rem, 5.8vw, 3.5rem); /* 35-56 px */ /* ─── Font weights ───────────────────────────────── */ --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* ─── Line heights — generous for scanning ───────── */ --lh-tight: 1.05; --lh-snug: 1.3; --lh-normal: 1.6; --lh-relaxed: 1.75; /* ─── Spacing — 4 px base grid ───────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; /* ─── Border radius ──────────────────────────────── */ --r-sm: 4px; --r: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-2xl: 24px; --r-full: 999px; /* ─── Shadows — layered, natural depth ───────────── */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.15); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.20); --shadow: 0 4px 24px rgba(0, 0, 0, 0.50); --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.70); --shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.80); /* ─── Overlay ────────────────────────────────────── */ --modal-overlay: rgba(4, 8, 14, 0.88); /* ─── Focus — ADHD-friendly, high-visibility ─────── */ --focus-ring: 0 0 0 2px #060a10, 0 0 0 4px #2563eb; /* ─── Transitions — snappy, never sluggish ───────── */ --ease-out: cubic-bezier(0.2, 0, 0, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 0.12s; --dur-normal: 0.2s; --dur-slow: 0.35s; /* ─── Layout ─────────────────────────────────────── */ --max-w: 1200px; --max-w-narrow: 900px; --nav-height: 56px; /* ─── Route / corridor tokens ────────────────────── */ --route-money: #fbbf24; --route-blue-ui: #60a5fa; --route-doc-pill: #93c5fd; --route-mitigation: #6ee7b7; /* ─── Legacy radius aliases ──────────────────────── */ --r3: 3px; --r4: 4px; --r6: 6px; /* ─── Legacy spacing aliases ─────────────────────── */ --sp1: 8px; --sp2: 16px; --sp3: 24px; --sp4: 32px; --sp5: 48px; --sp6: 72px; --sp7: 96px; /* ─── Backward-compatible aliases ────────────────── * * Pages that still use old variable names (--bg, * --surface, --text, --brand, etc.) will resolve * through these aliases into the canonical tokens. * ────────────────────────────────────────────────── */ --bg: var(--s0); --bg-soft: var(--s1); --surface: var(--s2); --card: var(--s3); --line: var(--border-med); --line-soft: var(--border); --text: var(--tp); --text-strong: var(--tp-bright); --muted: var(--ts); --dim: var(--tt); --font: var(--sans); --brand: #38bdf8; --brand-2: #22d3ee; --brand-glow: rgba(56, 189, 248, 0.28); --ok: var(--green-l); --warn: var(--amber); --danger: var(--red-l); --max: var(--max-w); /* ─── Agent / component aliases ───────────────────── Used by agent-core.js, portal surfaces, etc. Map to canonical surface/text tokens so they automatically adapt when data-theme changes. */ --bg-card: var(--s2); --bg-surface: var(--s3); --bg-hover: var(--s4); --text-muted: var(--ts); --text-dim: var(--tt); } /* ═══════════════════════════════════════════════════════ LIGHT MODE Soft blue-gray surfaces, deep slate text. Calming, easy on the eyes, McKinsey-grade restraint. ═══════════════════════════════════════════════════════ */ [data-theme="light"] { /* Surfaces — soft blue-gray, never stark white */ --s0: #eef1f7; --s1: #ffffff; --s2: #f4f6fb; --s3: #e8ecf4; --s4: #dce2ee; --s5: #cbd5e5; /* Text — deep slate, easy on eyes */ --tp: #0f172a; --tp-bright: #0f172a; --ts: #475569; --tt: #64748b; --tm: #94a3b8; /* Borders */ --border: rgba(15, 23, 42, 0.08); --border-med: rgba(15, 23, 42, 0.12); --border-hi: rgba(15, 23, 42, 0.18); /* Glass */ --glass: rgba(255, 255, 255, 0.86); --glass-border: rgba(15, 23, 42, 0.08); /* Accent dims for light backgrounds */ --blue-dim: rgba(37, 99, 235, 0.08); --blue-glow: rgba(37, 99, 235, 0.18); --green-dim: rgba(16, 185, 129, 0.14); --amber-dim: rgba(245, 158, 11, 0.16); --red-dim: rgba(239, 68, 68, 0.10); --purple-dim: rgba(139, 92, 246, 0.10); --teal-dim: rgba(6, 182, 212, 0.10); --orange-dim: rgba(249, 115, 22, 0.10); /* Shadows — subtler on light backgrounds */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06); --shadow: 0 4px 24px rgba(15, 23, 42, 0.08); --shadow-lg: 0 16px 48px rgba(15, 23, 42, 0.12); --shadow-xl: 0 24px 80px rgba(15, 23, 42, 0.16); /* Overlay — lighter for less drama */ --modal-overlay: rgba(15, 23, 42, 0.40); /* Focus ring works on white surfaces */ --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #2563eb; /* Backward-compatible light aliases */ --brand: #0284c7; --brand-2: #0ea5e9; --brand-glow: rgba(14, 165, 233, 0.22); /* Agent / component aliases — light values */ --bg-card: var(--s2); --bg-surface: var(--s3); --bg-hover: var(--s4); --text-muted: var(--ts); --text-dim: var(--tt); /* Route tokens */ --route-money: #92400e; --route-blue-ui: #1d4ed8; --route-doc-pill: #1e40af; --route-mitigation: #047857; } /* ═══════════════════════════════════════════════════════ BASE RESETS ═══════════════════════════════════════════════════════ */ html { color-scheme: dark light; scroll-behavior: smooth; } html[data-theme="light"] { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }