/* ========================================================================= Design tokens — light (default) + dark theme. Toggled by setting data-theme="dark" on . ========================================================================= */ :root { /* Brand */ --brand: #2563eb; --brand-600: #1d4ed8; --brand-700: #1e40af; --brand-soft: #eff4ff; /* Status */ --success: #16a34a; --success-soft: #e8f7ee; --warning: #d97706; --warning-soft: #fdf3e2; --danger: #dc2626; --danger-soft: #fdecec; --info: #0891b2; /* Surfaces */ --bg: #f4f6fb; --surface: #ffffff; --surface-2: #f8fafc; --sidebar: #0f172a; --sidebar-fg: #cbd5e1; --sidebar-active: #1e293b; /* Text */ --fg: #0f172a; --fg-muted: #64748b; --fg-faint: #94a3b8; /* Lines */ --border: #e2e8f0; --border-strong: #cbd5e1; /* Effects */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06); --shadow: 0 4px 16px rgba(15, 23, 42, .08); --shadow-lg: 0 12px 40px rgba(15, 23, 42, .16); --radius: 12px; --radius-sm: 8px; --radius-lg: 18px; /* Layout */ --sidebar-w: 244px; --header-h: 60px; --font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace; --transition: .18s cubic-bezier(.4, 0, .2, 1); } :root[data-theme="dark"] { --brand-soft: #16233d; --success-soft: #12271b; --warning-soft: #2a2110; --danger-soft: #2a1414; --bg: #0b1120; --surface: #131c2e; --surface-2: #0f172a; --sidebar: #060b16; --sidebar-fg: #94a3b8; --sidebar-active: #16233d; --fg: #e6edf7; --fg-muted: #94a3b8; --fg-faint: #64748b; --border: #22304a; --border-strong: #33425f; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --shadow: 0 4px 16px rgba(0, 0, 0, .4); --shadow-lg: 0 12px 40px rgba(0, 0, 0, .55); }