/* WareQuery design tokens — Linear-minimal palette + spacing + type scale. * Light theme is default. data-theme="dark" on swaps the values. */ :root, :root[data-theme="light"] { /* Surface */ --color-bg: #ffffff; --color-bg-subtle: #fafafa; --color-bg-muted: #f4f4f5; --color-bg-emphasis: #e4e4e7; /* Text */ --color-text: #18181b; --color-text-muted: #52525b; --color-text-subtle: #71717a; --color-text-inverse: #fafafa; /* Border */ --color-border: #e4e4e7; --color-border-strong: #d4d4d8; --color-border-focus: #3b82f6; /* Accent (Linear-style cool blue) */ --color-accent: #3b82f6; --color-accent-bg: #eff6ff; --color-accent-text: #1d4ed8; /* Semantic */ --color-success: #10b981; --color-warning: #f59e0b; --color-danger: #ef4444; /* Pulse marker (existing) */ --color-pulse: #6366f1; /* Shadow */ --shadow-sm: 0 1px 2px rgba(0,0,0,.04); --shadow-md: 0 4px 12px rgba(0,0,0,.06); --shadow-lg: 0 12px 32px rgba(0,0,0,.10); --shadow-modal: 0 24px 48px rgba(0,0,0,.18); } :root[data-theme="dark"] { --color-bg: #09090b; --color-bg-subtle: #18181b; --color-bg-muted: #27272a; --color-bg-emphasis: #3f3f46; --color-text: #fafafa; --color-text-muted: #a1a1aa; --color-text-subtle: #71717a; --color-text-inverse: #18181b; --color-border: #27272a; --color-border-strong: #3f3f46; --color-border-focus: #60a5fa; --color-accent: #60a5fa; --color-accent-bg: #1e3a8a; --color-accent-text: #93c5fd; --color-success: #34d399; --color-warning: #fbbf24; --color-danger: #f87171; --color-pulse: #818cf8; --shadow-sm: 0 1px 2px rgba(0,0,0,.30); --shadow-md: 0 4px 12px rgba(0,0,0,.40); --shadow-lg: 0 12px 32px rgba(0,0,0,.55); --shadow-modal: 0 24px 48px rgba(0,0,0,.65); } :root { /* Spacing — 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; /* Type scale */ --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --text-xs: 11px; --text-sm: 12px; --text-base: 14px; --text-md: 15px; --text-lg: 17px; --text-xl: 20px; --text-2xl: 24px; --leading-tight: 1.25; --leading-snug: 1.4; --leading-normal: 1.55; --leading-relaxed: 1.7; /* Radius */ --radius-sm: 3px; --radius-md: 4px; --radius-lg: 6px; --radius-xl: 10px; /* Layout */ --topbar-h: 48px; --sidebar-w: 240px; --context-w: 280px; --content-max: 880px; /* Motion */ --duration-fast: 120ms; --duration-normal: 200ms; --easing: cubic-bezier(0.4, 0, 0.2, 1); /* Focus ring */ --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-border-focus); } /* Honor prefers-color-scheme on first paint when localStorage is empty. * The inline head script writes data-theme to documentElement before this * media query has a chance to matter, but keeping it here ensures any CSS * @media-relative rules (e.g., dark images) still react correctly. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; } }