/* Design tokens — single source of truth for visual design. Ported from design-system.md (warm neutrals, sky primary, soft semantics). Light mode on :root; dark mode under .dark on . */ :root { /* Surfaces */ --color-canvas: #FBFAF8; --color-surface: #FFFFFF; --color-surface-muted: #F4F2EF; --color-surface-sunken: #EFEDE9; /* Borders */ --color-border-subtle: rgba(15, 17, 22, 0.06); --color-border: rgba(15, 17, 22, 0.10); --color-border-strong: rgba(15, 17, 22, 0.16); /* Text */ --color-text: rgba(15, 17, 22, 0.92); --color-text-muted: #615D59; --color-text-subtle: #94908A; --color-text-disabled: #BAB6B0; /* Primary (sky) */ --color-primary: #0EA5E9; --color-primary-hover: #0284C7; --color-primary-soft: #E0F2FE; --color-primary-soft-text: #0369A1; /* Semantic — success */ --color-success-accent: #0F9D58; --color-success-soft: #E6F6EC; --color-success-text: #15803D; /* Semantic — info */ --color-info-accent: #0284C7; --color-info-soft: #E0F2FE; --color-info-text: #075985; /* Semantic — warning */ --color-warning-accent: #D97706; --color-warning-soft: #FEF3E2; --color-warning-text: #9A3412; /* Semantic — danger */ --color-danger-accent: #DC2626; --color-danger-soft: #FEE7E7; --color-danger-text: #991B1B; /* Track-B (dropship→stock by shipping savings) — violet */ --color-violet-accent: #7C3AED; --color-violet-soft: #F1ECFE; --color-violet-text: #5B21B6; /* Spacing scale (4px base) */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* Radius */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 9999px; /* Shadows (light) */ --shadow-xs: 0 1px 1px rgba(15, 17, 22, 0.02); --shadow-sm: 0 1px 2px rgba(15, 17, 22, 0.03), 0 1px 1px rgba(15, 17, 22, 0.02); --shadow-md: 0 4px 12px rgba(15, 17, 22, 0.04), 0 1px 3px rgba(15, 17, 22, 0.03); --shadow-lg: 0 14px 28px rgba(15, 17, 22, 0.05), 0 4px 12px rgba(15, 17, 22, 0.03); /* Layout */ --sidebar-width: 240px; --sidebar-width-collapsed: 56px; --topbar-height: 56px; /* Type scale */ --text-display-size: 28px; --text-display-lh: 1.15; --text-h1-size: 22px; --text-h1-lh: 1.25; --text-h2-size: 18px; --text-h2-lh: 1.30; --text-h3-size: 15px; --text-h3-lh: 1.35; --text-body-size: 14px; --text-body-lh: 1.50; --text-body-prose-size: 15px; --text-body-prose-lh: 1.55; --text-ui-size: 14px; --text-ui-lh: 1.30; --text-button-size: 14px; --text-button-lh: 1.20; --text-caption-size: 12px; --text-caption-lh: 1.40; --text-micro-size: 11px; --text-micro-lh: 1.30; /* Motion */ --duration: 150ms; --easing: cubic-bezier(0.2, 0, 0.2, 1); /* Font stack */ --font-sans: 'Inter Variable', -apple-system, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif; --font-features: "cv11", "ss01", "tnum"; } html.dark { /* Surfaces — depth via lightness step (no shadows in dark) */ --color-canvas: #161513; --color-surface: #1E1C19; --color-surface-muted: #252320; --color-surface-sunken: #121110; --color-border-subtle: rgba(255, 250, 240, 0.06); --color-border: rgba(255, 250, 240, 0.10); --color-border-strong: rgba(255, 250, 240, 0.18); --color-text: rgba(255, 250, 240, 0.92); --color-text-muted: #A39E97; --color-text-subtle: #787570; --color-text-disabled: #525049; --color-primary: #38BDF8; --color-primary-hover: #7DD3FC; --color-primary-soft: rgba(56, 189, 248, 0.12); --color-primary-soft-text: #7DD3FC; --color-success-accent: #34D399; --color-success-soft: rgba(52, 211, 153, 0.10); --color-success-text: #86EFAC; --color-info-accent: #7DD3FC; --color-info-soft: rgba(125, 211, 252, 0.10); --color-info-text: #BAE6FD; --color-warning-accent: #F59E0B; --color-warning-soft: rgba(245, 158, 11, 0.12); --color-warning-text: #FCD34D; --color-danger-accent: #F87171; --color-danger-soft: rgba(248, 113, 113, 0.12); --color-danger-text: #FCA5A5; --color-violet-accent: #A78BFA; --color-violet-soft: rgba(167, 139, 250, 0.14); --color-violet-text: #D8B4FE; --shadow-xs: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; }