/* Design tokens — the single source of truth for the visual system. Dark, IDE-grade aesthetic for a dense data tool. A light theme can be added by overriding these custom properties under a [data-theme="light"] selector. */ :root { /* Surfaces — a cool near-black blue, layered by elevation */ --bg-base: #0b0f14; --bg-surface: #111821; --bg-elevated: #18212c; --bg-input: #0e151d; --bg-hover: #1d2935; --bg-active: #233140; /* Borders / dividers */ --border: #233040; --border-strong: #2f4254; --border-focus: #2bb3a3; /* Text */ --text-primary: #e6edf3; --text-secondary: #aab7c4; --text-muted: #6f7f8e; --text-inverse: #07100e; /* Brand / accent — a confident teal that reads as "data" */ --accent: #2bb3a3; --accent-strong: #1f9d8e; --accent-soft: rgba(43, 179, 163, 0.14); --accent-contrast: #03110f; /* Semantic */ --success: #3fb950; --warning: #d6a417; --danger: #e5534b; --danger-soft: rgba(229, 83, 75, 0.14); --info: #4a9eff; /* Query-category cues */ --cat-read: #4a9eff; --cat-write: #d6a417; --cat-ddl: #e5534b; /* Typography */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace; --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px; --fs-lg: 15px; --fs-xl: 18px; --fs-2xl: 24px; /* Spacing scale (4px base) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-8: 48px; /* Radii */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; /* Elevation */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55); /* Layout */ --topbar-h: 48px; --sidebar-w: 56px; /* Motion */ --ease: cubic-bezier(0.2, 0.8, 0.2, 1); --dur-fast: 120ms; --dur: 200ms; } /* Light theme — overrides the dark defaults. Toggled via [data-theme="light"] on . */ :root[data-theme="light"] { --bg-base: #f3f5f8; --bg-surface: #ffffff; --bg-elevated: #ffffff; --bg-input: #ffffff; --bg-hover: #eef1f5; --bg-active: #e3e9ef; --border: #dce2e9; --border-strong: #c4cdd6; --border-focus: #1f9d8e; --text-primary: #16212d; --text-secondary: #3f4d5a; --text-muted: #6b7a89; --text-inverse: #ffffff; --accent: #128577; --accent-strong: #0e6f63; --accent-soft: rgba(18, 133, 119, 0.12); --accent-contrast: #ffffff; --success: #1a7f37; --warning: #9a6700; --danger: #cf222e; --danger-soft: rgba(207, 34, 46, 0.1); --info: #0969da; --cat-read: #0969da; --cat-write: #9a6700; --cat-ddl: #cf222e; --shadow-sm: 0 1px 2px rgba(16, 33, 50, 0.08); --shadow-md: 0 4px 16px rgba(16, 33, 50, 0.12); --shadow-lg: 0 12px 40px rgba(16, 33, 50, 0.18); }