/* ═══════════════════════════════════════════════════════════════════════════════ * @agentui/design-system — Design Tokens * Light mode default, dark mode opt-in via .theme-dark * ═══════════════════════════════════════════════════════════════════════════════ */ :root { /* ─── Light mode (default) ──────────────────────────────────────────────── */ /* Backgrounds */ --color-bg-primary: #FFFFFF; --color-bg-secondary: #F9FAFB; --color-bg-tertiary: #F3F4F6; --color-bg-hover: #E5E7EB; --color-bg-canvas: #FDFDFD; /* Borders */ --color-border: #E5E7EB; --color-border-strong: #D1D5DB; /* Text */ --color-text-primary: #111111; --color-text-secondary: #6B7280; --color-text-muted: #9CA3AF; --color-text-on-canvas: #111111; /* Primary action */ --color-accent-blue: #266DF0; --color-accent-blue-hover: #3B7FF5; /* Status dots */ --color-status-blue: #3B82F6; --color-status-green: #10B981; --color-status-red: #EF4444; --color-status-amber: #F59E0B; /* Data viz palette */ --color-viz-blue: #3B82F6; --color-viz-green: #10B981; --color-viz-amber: #F59E0B; --color-viz-red: #EF4444; --color-viz-purple: #8B5CF6; --color-viz-pink: #EC4899; --color-viz-teal: #14B8A6; /* Surfaces */ --color-surface-card: #FFFFFF; --color-surface-modal: rgba(255, 255, 255, 0.95); --color-surface-glass: rgba(255, 255, 255, 0.85); --color-surface-overlay: rgba(0, 0, 0, 0.3); /* ─── Typography ────────────────────────────────────────────────────────── */ --font-display: 'Inter', system-ui, -apple-system, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.5rem; --text-2xl: 2rem; --text-3xl: 3rem; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.625; /* ─── Spacing ───────────────────────────────────────────────────────────── */ --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; /* ─── Radius ────────────────────────────────────────────────────────────── */ --radius-sm: 6px; --radius-md: 9px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* ─── Shadows (light mode) ──────────────────────────────────────────────── */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08); --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.04); /* ─── Animation ─────────────────────────────────────────────────────────── */ --duration-fast: 50ms; --duration-normal: 150ms; --duration-slow: 300ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ─── Layout ────────────────────────────────────────────────────────────── */ --sidebar-width: 240px; --config-panel-width: 300px; --header-height: 48px; --status-bar-height: 32px; } /* ─── Dark mode (opt-in via .theme-dark on ) ─────────────────────────── */ .theme-dark { --color-bg-primary: #161719; --color-bg-secondary: #1E1F22; --color-bg-tertiary: #26272B; --color-bg-hover: #2C2D31; --color-bg-canvas: #1A1B1E; --color-border: #2E2F33; --color-border-strong: #3A3B3F; --color-text-primary: #EAEAEA; --color-text-secondary: #8B8D93; --color-text-muted: #5C5E64; --color-text-on-canvas: #EAEAEA; --color-surface-card: #1E1F22; --color-surface-modal: rgba(22, 23, 25, 0.95); --color-surface-glass: rgba(30, 31, 34, 0.85); --color-surface-overlay: rgba(0, 0, 0, 0.5); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.2); }