/* Design tokens — dense data-tool palette. No framework, hand-authored. */ :root { /* --- Sidebar (dark slate) --- */ --sb-bg: #161b22; --sb-bg-hover: #1f2731; --sb-bg-active: #22303f; --sb-border: #262e38; --sb-text: #c4ccd6; --sb-text-dim: #7d8a9a; --sb-text-active: #ffffff; /* --- Content surface --- */ --bg: #f3f4f6; --surface: #ffffff; --surface-2: #f8f9fb; --surface-3: #eef0f3; --border: #dfe3e8; --border-strong: #c7cdd6; /* --- Text --- */ --text: #1a2027; --text-dim: #5b6472; --text-faint: #8992a0; /* --- Accent --- */ --accent: #2563eb; --accent-hover: #1d4ed8; --accent-bg: #eaf1ff; --accent-text: #ffffff; /* --- Semantic --- */ --success: #0f9d58; --success-bg: #e6f6ec; --success-border: #b7e4c7; --warning: #b7791f; --warning-bg: #fdf3dd; --warning-border: #f0d999; --error: #d64545; --error-bg: #fdecec; --error-border: #f3bcbc; --info: #0284c7; --info-bg: #e6f4fb; --info-border: #a9d9f0; --ghost-bg: #eceff2; --ghost-border: #dadfe5; --secondary: #7c3aed; --secondary-bg: #f1e9fd; --secondary-border: #d9c5f7; /* --- Radii (small, dense look) --- */ --radius-sm: 3px; --radius: 5px; --radius-lg: 8px; --radius-full: 999px; /* --- Spacing scale (matches Tailwind's 0.25rem step, same numbers used in templates) --- */ --sp-0-5: 0.125rem; --sp-1: 0.25rem; --sp-1-5: 0.375rem; --sp-2: 0.5rem; --sp-2-5: 0.625rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; /* --- Typography --- */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* --- Shadow (used sparingly — dense look prefers borders) --- */ --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06); --shadow: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04); /* --- Sidebar width --- */ --sidebar-w: 220px; --sidebar-w-collapsed: 56px; } /* ========================================================================== Dark theme — content tokens only. Sidebar (--sb-*) stays constant in both themes on purpose: a dark rail regardless of content theme is the same choice Grafana/Linear make, and it's the part of the UI the user already confirmed they like as-is. Two ways in: 1. OS already prefers dark AND the user hasn't explicitly overridden (`:root:not([data-theme="light"])` guard) — respects the system. 2. Explicit `[data-theme="dark"]` on , set by the sidebar toggle — wins over the system preference either direction. ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0d1117; --surface: #161b22; --surface-2: #1c222b; --surface-3: #242c37; --border: #2a323d; --border-strong: #3a4451; --text: #e6e9ef; --text-dim: #a2acba; --text-faint: #6c7686; --accent: #5b93ff; --accent-hover: #7ba5ff; --accent-bg: #182741; --accent-text: #ffffff; --success: #3ecf7e; --success-bg: #12301f; --success-border: #1f5636; --warning: #f0b93f; --warning-bg: #392b10; --warning-border: #654a17; --error: #f0685f; --error-bg: #3a1616; --error-border: #632424; --info: #46bdf5; --info-bg: #10293a; --info-border: #1e4a63; --ghost-bg: #1c222b; --ghost-border: #2f3844; --secondary: #b794f6; --secondary-bg: #2a2140; --secondary-border: #453368; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.2); } } :root[data-theme="dark"] { --bg: #0d1117; --surface: #161b22; --surface-2: #1c222b; --surface-3: #242c37; --border: #2a323d; --border-strong: #3a4451; --text: #e6e9ef; --text-dim: #a2acba; --text-faint: #6c7686; --accent: #5b93ff; --accent-hover: #7ba5ff; --accent-bg: #182741; --accent-text: #ffffff; --success: #3ecf7e; --success-bg: #12301f; --success-border: #1f5636; --warning: #f0b93f; --warning-bg: #392b10; --warning-border: #654a17; --error: #f0685f; --error-bg: #3a1616; --error-border: #632424; --info: #46bdf5; --info-bg: #10293a; --info-border: #1e4a63; --ghost-bg: #1c222b; --ghost-border: #2f3844; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.2); }