/* AgentConnect Design Tokens — single source of truth for the UI kernel. Consumed by every view (marketing + app shell). Components must reference these tokens, never hardcode hex values. Light mode is the default enterprise face; dark mode is a user preference gated by [data-theme="dark"] on . See docs/product/frontend/02-design-tokens.md for the full specification, contrast checks, and coverage checklist. This file is the machine-readable subset needed to render any view. Add new tokens only by editing that doc first, then mirroring here. */ :root { /* ---- Surfaces (light) ---- */ --color-bg: #ffffff; --color-bg-subtle: #f7f8fa; --color-bg-elevated: #ffffff; --color-border: #e2e5ea; --color-border-strong: #c9ced6; /* ---- Text (light) ---- */ --color-fg: #101318; --color-fg-muted: #5b6472; --color-fg-subtle: #8b94a3; /* ---- Dark surfaces ---- */ --color-bg-dark: #14181f; --color-bg-subtle-dark: #1b2129; --color-border-dark: #2a313c; --color-fg-dark: #eef1f5; --color-fg-muted-dark: #9aa4b2; /* ---- Accent (one distinctive color, used sparingly) ---- */ --color-accent: #1f6f8b; --color-accent-hover: #16556b; --color-accent-soft: #e3f0f5; --color-accent-fg: #ffffff; /* ---- Status (semantic; always paired with a label) ---- */ --color-status-success: #157347; --color-status-success-soft: #e7f5ee; --color-status-warning: #b26a00; --color-status-warning-soft: #fdf3e3; --color-status-error: #b42318; --color-status-error-soft: #fbe9e7; --color-status-info: #1f6f8b; --color-status-info-soft: #e3f0f5; --color-status-neutral: #5b6472; --color-status-neutral-soft: #eef1f5; /* ---- Interaction ---- */ --color-focus: #1f6f8b; --color-focus-dark: #0d3a4a; --color-hover: rgba(0, 0, 0, 0.04); --color-hover-dark: rgba(255, 255, 255, 0.04); /* ---- Typography scale (rem-based) ---- */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; /* ---- Type roles ---- */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace; /* ---- Spacing scale (4px base grid) ---- */ --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; /* ---- Motion ---- */ --motion-fast: 120ms; --motion-base: 200ms; --motion-slow: 300ms; --motion-ease: cubic-bezier(0.2, 0, 0, 1); /* ---- Elevation ---- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12); --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-pill: 999px; /* ---- Density ---- */ --density-default: default; --density-compact: compact; } /* Dark mode: override only the tokens that change. Surfaces, borders, text. */ [data-theme="dark"] { --color-bg: var(--color-bg-dark); --color-bg-subtle: var(--color-bg-subtle-dark); --color-bg-elevated: var(--color-bg-dark); --color-border: var(--color-border-dark); --color-border-strong: var(--color-border-dark); --color-fg: var(--color-fg-dark); --color-fg-muted: var(--color-fg-muted-dark); --color-fg-subtle: var(--color-fg-muted-dark); --color-hover: var(--color-hover-dark); --color-focus: var(--color-focus-dark); }