/* ============================================================================ * Agent Monitor Unified Design Tokens * ---------------------------------------------------------------------------- * Single source of truth for the monitor feed's visual language. Served at * /api/shared/monitor-tokens.css by the monitor schema blueprint, so both * Predictive Canvas (harold_chat.html) and Trade Canvas v2 (Svelte feed) * consume identical tokens without duplication. * * Design DNA: harold_chat.html's dark purple-indigo aesthetic, translated * for a feed surface. The feed is a chronological list, not a conversation, * so we intentionally skip chat-only patterns (bubbles, typing indicators, * side differentiation) while preserving the deep background, generous * accent color, and semi-transparent glass panels. * * Light theme follows the same palette with purple text on cream backgrounds. * Triggered by [data-theme="light"] on or . * * Mobile: safe-area insets are resolved against env() once. Component CSS * should anchor bottom padding etc. to --monitor-safe-bottom so iOS PWA * bottom-bar handoff works without per-component overrides. * * Token naming convention: * --monitor-[-] * concept ∈ {bg, text, border, color, space, font, radius, shadow, * transition, gradient, header, safe} * variant is optional (e.g. -xs, -hover, -strong, -muted) * * Changes here cascade to every monitor surface. If a component needs a * one-off value, use a local CSS variable scoped to that component; don't * add to this file unless it's truly shared. * ========================================================================= */ :root { /* ─── Typography ──────────────────────────────────────────────────────── */ --monitor-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --monitor-font-mono: "JetBrains Mono", "Fira Code", "SF Mono", ui-monospace, monospace; /* Sizes: xs for dense labels, base for body, md/lg for headers. Stable values — don't subdivide further unless a pattern demands it. */ --monitor-font-xs: 10px; /* timestamps, detail labels, chip text */ --monitor-font-sm: 12px; /* secondary text, meta rows */ --monitor-font-base: 14px; /* body, feed item title */ --monitor-font-md: 15px; /* emphasized body, buttons */ --monitor-font-lg: 17px; /* panel headings */ --monitor-font-xl: 20px; /* rare: modal titles */ /* Weights: reserve 600 for UI emphasis, not reading text. */ --monitor-weight-regular: 400; --monitor-weight-medium: 500; --monitor-weight-semibold: 600; --monitor-line-height-dense: 1.3; /* feed title/body truncation */ --monitor-line-height-normal: 1.5; /* readable prose */ --monitor-line-height-relaxed: 1.6; /* code / pre */ --monitor-letter-spacing-caps: 0.05em; /* UPPERCASE labels */ --monitor-letter-spacing-wide: 0.08em; /* section titles */ /* ─── Color: Backgrounds ─────────────────────────────────────────────── */ --monitor-bg-base: #0f0f23; /* app root */ --monitor-bg-elevated: #1a1a2e; /* raised surface, sidebar */ --monitor-bg-sunken: #0a0a18; /* recessed areas */ --monitor-bg-glass: rgba(15, 15, 35, 0.85); /* panels over gradients */ --monitor-bg-card: rgba(26, 26, 46, 0.7); /* feed item default */ --monitor-bg-card-hover: rgba(26, 26, 46, 0.92); --monitor-bg-input: rgba(30, 30, 60, 0.8); /* inputs, dropdowns */ --monitor-bg-scrim: rgba(0, 0, 0, 0.55); /* modal backdrop */ /* ─── Color: Text ────────────────────────────────────────────────────── */ --monitor-text-primary: #f8fafc; --monitor-text-secondary: #cbd5e1; --monitor-text-muted: #94a3b8; --monitor-text-dim: #64748b; --monitor-text-accent: #a78bfa; --monitor-text-inverted: #0f172a; /* on light/neon surfaces */ /* ─── Color: Borders ─────────────────────────────────────────────────── */ --monitor-border-subtle: rgba(168, 85, 247, 0.15); --monitor-border-default: rgba(168, 85, 247, 0.3); --monitor-border-strong: rgba(168, 85, 247, 0.6); /* focus, hover-emph. */ --monitor-border-divider: rgba(255, 255, 255, 0.06); /* list separators */ /* ─── Color: Accent (purple) ─────────────────────────────────────────── */ --monitor-accent: #8b5cf6; --monitor-accent-bright: #a855f7; --monitor-accent-soft: #c084fc; --monitor-accent-bg: rgba(139, 92, 246, 0.15); --monitor-accent-bg-strong: rgba(139, 92, 246, 0.25); /* ─── Color: Semantic (non-event chrome) ─────────────────────────────── */ --monitor-success: #10b981; --monitor-success-text: #6ee7b7; --monitor-success-bg: rgba(16, 185, 129, 0.15); --monitor-danger: #ef4444; --monitor-danger-text: #fca5a5; --monitor-danger-bg: rgba(239, 68, 68, 0.15); --monitor-warning: #f59e0b; --monitor-warning-text: #fcd34d; --monitor-warning-bg: rgba(245, 158, 11, 0.15); --monitor-info: #38bdf8; --monitor-info-bg: rgba(56, 189, 248, 0.15); /* ─── Event source chrome (left border stripe on feed items) ─────────── */ --monitor-stripe-decision: #6366f1; /* agent */ --monitor-stripe-order: #3b82f6; /* order events */ --monitor-stripe-risk: #ef4444; /* stop_loss, critical */ --monitor-stripe-take-profit: #22c55e; --monitor-stripe-briefing: #ec4899; /* macro/scheduler */ --monitor-stripe-command: #06b6d4; /* manual */ --monitor-stripe-system: #64748b; /* system alerts */ --monitor-stripe-pattern: #a78bfa; /* pattern signals */ --monitor-stripe-macro: #818cf8; /* macro reports */ /* ─── Spacing (4-based scale, occasional 2px half-step) ──────────────── */ --monitor-space-2xs: 2px; --monitor-space-xs: 4px; --monitor-space-sm: 8px; --monitor-space-md: 12px; --monitor-space-lg: 16px; --monitor-space-xl: 20px; --monitor-space-2xl: 24px; --monitor-space-3xl: 32px; /* ─── Radius ─────────────────────────────────────────────────────────── */ --monitor-radius-sm: 4px; /* tight chips, scrollbars */ --monitor-radius-md: 6px; /* filter pills, small buttons */ --monitor-radius-lg: 8px; /* cards, inputs, dropdowns */ --monitor-radius-xl: 12px; /* panels, modals */ --monitor-radius-2xl: 16px; /* prominent surfaces */ --monitor-radius-pill: 9999px; /* ─── Shadows & Effects ──────────────────────────────────────────────── */ --monitor-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2); --monitor-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.25); --monitor-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35); --monitor-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45); --monitor-shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.55); --monitor-shadow-glow: 0 0 24px rgba(168, 85, 247, 0.3); --monitor-backdrop-blur: 16px; /* glassmorphism standard */ /* ─── Transitions ────────────────────────────────────────────────────── */ --monitor-transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1); --monitor-transition-base: 180ms cubic-bezier(0.4, 0, 0.2, 1); --monitor-transition-slow: 280ms cubic-bezier(0.4, 0, 0.2, 1); /* ─── Gradients ──────────────────────────────────────────────────────── */ --monitor-gradient-bg: linear-gradient( 135deg, #0f0f23 0%, #1a0f2e 50%, #2d1b4e 100% ); --monitor-gradient-accent: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%); --monitor-gradient-header: linear-gradient(135deg, #9333ea 0%, #6366f1 100%); /* ─── Layout & Breakpoints ───────────────────────────────────────────── */ --monitor-header-h: 48px; --monitor-sidebar-w: 280px; --monitor-tab-bar-h: 52px; --monitor-bp-mobile: 768px; /* for @media (max-width: 768px) authors */ /* ─── Safe areas (iOS PWA) ───────────────────────────────────────────── */ --monitor-safe-top: env(safe-area-inset-top, 0px); --monitor-safe-right: env(safe-area-inset-right, 0px); --monitor-safe-bottom: env(safe-area-inset-bottom, 0px); --monitor-safe-left: env(safe-area-inset-left, 0px); /* ─── Touch target sizes ─────────────────────────────────────────────── */ --monitor-touch-target-min: 44px; /* WCAG 2.1 AA */ --monitor-touch-target-comfortable: 48px; /* ─── Focus ring (accessibility) ─────────────────────────────────────── */ --monitor-focus-ring: 0 0 0 2px rgba(139, 92, 246, 0.6); --monitor-focus-ring-inset: inset 0 0 0 2px rgba(139, 92, 246, 0.6); } /* ─── Light theme ───────────────────────────────────────────────────────── */ [data-theme="light"] { --monitor-bg-base: #f5f3ff; --monitor-bg-elevated: #ede9fe; --monitor-bg-sunken: #ddd6fe; --monitor-bg-glass: rgba(255, 255, 255, 0.92); --monitor-bg-card: rgba(255, 255, 255, 0.8); --monitor-bg-card-hover: rgba(255, 255, 255, 1); --monitor-bg-input: rgba(245, 243, 255, 0.95); --monitor-bg-scrim: rgba(30, 27, 75, 0.45); --monitor-text-primary: #1e1b4b; --monitor-text-secondary: #3730a3; --monitor-text-muted: #6366f1; --monitor-text-dim: #8b8fa3; --monitor-text-accent: #7c3aed; --monitor-border-subtle: rgba(124, 58, 237, 0.12); --monitor-border-default: rgba(124, 58, 237, 0.22); --monitor-border-strong: rgba(124, 58, 237, 0.5); --monitor-border-divider: rgba(30, 27, 75, 0.08); --monitor-accent: #7c3aed; --monitor-accent-bright: #9333ea; --monitor-accent-soft: #a78bfa; --monitor-accent-bg: rgba(124, 58, 237, 0.12); --monitor-accent-bg-strong: rgba(124, 58, 237, 0.22); --monitor-success: #059669; --monitor-success-bg: rgba(5, 150, 105, 0.1); --monitor-danger: #dc2626; --monitor-danger-bg: rgba(220, 38, 38, 0.1); --monitor-warning: #d97706; --monitor-warning-bg: rgba(217, 119, 6, 0.1); --monitor-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06); --monitor-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.08); --monitor-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1); --monitor-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.14); --monitor-shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.18); --monitor-shadow-glow: 0 0 24px rgba(124, 58, 237, 0.18); --monitor-gradient-bg: linear-gradient( 135deg, #f5f3ff 0%, #ede9fe 50%, #ddd6fe 100% ); } /* ─── Prefers reduced motion ────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { :root { --monitor-transition-fast: 0ms; --monitor-transition-base: 0ms; --monitor-transition-slow: 0ms; } } /* ─── Utility classes (opt-in helpers only — no style overrides) ────────── */ /* Apply .monitor-scrollbar to a scrollable container for consistent styling. Hidden on touch devices where native scroll indicators suffice. */ .monitor-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; } .monitor-scrollbar::-webkit-scrollbar-track { background: transparent; } .monitor-scrollbar::-webkit-scrollbar-thumb { background: var(--monitor-border-default); border-radius: var(--monitor-radius-sm); } .monitor-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--monitor-border-strong); } @media (hover: none) { .monitor-scrollbar::-webkit-scrollbar { width: 0; height: 0; } } /* Ensure interactive elements hit the 44px target on touch without forcing desktop to use the same footprint. Opt in via class. Uses ::before overlay so visual size doesn't change. */ .monitor-tap-target { position: relative; } @media (hover: none) and (pointer: coarse) { .monitor-tap-target::before { content: ""; position: absolute; inset: 50% auto auto 50%; width: max(100%, var(--monitor-touch-target-min)); height: max(100%, var(--monitor-touch-target-min)); transform: translate(-50%, -50%); pointer-events: auto; } } /* Focus ring helper */ .monitor-focusable:focus-visible { outline: none; box-shadow: var(--monitor-focus-ring); }