:root { /* ── Surfaces (deep, cool, premium) ───────────────────────── */ --color-bg: #07080d; --color-bg-2: #0c0e16; --color-surface: #12141d; --color-surface-2: #1a1d29; --color-border: #262a39; --color-border-soft: rgba(255, 255, 255, 0.07); /* ── Text ─────────────────────────────────────────────────── */ --color-text: #eef0f6; --color-muted: #8b93a8; --color-faint: #5d6478; /* ── Accent + brand gradient (purple → pink) ──────────────── */ --color-accent: #2f6bff; --color-accent-hover: #5a8bff; --color-pink: #ff5c93; --color-cyan: #38e1d4; /* Blue identity. Gradients kept very subtle (near-solid) so the UI reads calm/blue rather than rainbow — most surfaces use the solid --color-accent. */ --gradient-brand: linear-gradient(135deg, #2f6bff 0%, #3f78ff 100%); --gradient-brand-soft: linear-gradient(135deg, rgba(47, 107, 255, 0.16), rgba(47, 107, 255, 0.07)); --gradient-text: linear-gradient(120deg, #9ec0ff 0%, #5a8bff 100%); /* ── Status ───────────────────────────────────────────────── */ --color-good: #3ee08e; --color-warn: #f7b955; --color-bad: #ff6b6b; /* ── Spacing ──────────────────────────────────────────────── */ --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; /* ── Radii + elevation ────────────────────────────────────── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25); --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.5); --shadow-lg: 0 24px 60px -16px rgba(0, 0, 0, 0.6); --glow-accent: 0 0 0 1px rgba(47, 107, 255, 0.35), 0 12px 40px -8px rgba(47, 107, 255, 0.45); --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Consolas, monospace; /* ── Theme-aware surfaces (flipped in light theme below) ──── */ --card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)); --sidebar-bg: linear-gradient(180deg, rgba(18, 20, 29, 0.9), rgba(10, 11, 16, 0.9)); --input-bg: rgba(0, 0, 0, 0.25); --track: rgba(255, 255, 255, 0.08); --ring-well: var(--color-bg-2); --hover-row: rgba(255, 255, 255, 0.03); --blob-opacity: 0.22; } /* ════════ LIGHT THEME ════════════════════════════════════════ Toggled via . Accent + brand gradient + status colors are shared (they read well on both). */ :root[data-theme="light"] { --color-bg: #eef1f8; --color-bg-2: #e3e8f3; --color-surface: #ffffff; --color-surface-2: #f1f3fa; --color-border: #dce0ec; --color-border-soft: rgba(20, 22, 31, 0.09); --color-text: #181b27; --color-muted: #5b6378; --color-faint: #9197aa; --shadow-sm: 0 1px 2px rgba(40, 50, 90, 0.08); --shadow-md: 0 10px 28px -12px rgba(40, 50, 90, 0.22); --shadow-lg: 0 28px 64px -20px rgba(40, 50, 90, 0.26); --glow-accent: 0 0 0 1px rgba(124, 92, 255, 0.3), 0 14px 40px -10px rgba(124, 92, 255, 0.4); --card-bg: #ffffff; --sidebar-bg: linear-gradient(180deg, #ffffff, #f4f6fc); --input-bg: #ffffff; --track: rgba(20, 22, 31, 0.09); --ring-well: #ffffff; --hover-row: rgba(20, 22, 31, 0.035); --blob-opacity: 0.12; --gradient-text: linear-gradient(120deg, #2f6bff 0%, #4f8bff 100%); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: var(--font-sans); background: var(--color-bg); color: var(--color-text); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; position: relative; } /* Ambient gradient blobs — fixed, behind everything, pure decoration. */ body::before, body::after { content: ""; position: fixed; z-index: 0; width: 60vw; height: 60vw; max-width: 720px; max-height: 720px; border-radius: 50%; filter: blur(120px); opacity: var(--blob-opacity); pointer-events: none; } body::before { top: -18vw; left: -10vw; background: radial-gradient(circle, #7c5cff, transparent 70%); } body::after { bottom: -22vw; right: -12vw; background: radial-gradient(circle, #ff5c93, transparent 70%); } a { color: var(--color-accent); text-decoration: none; transition: color 0.15s ease; } a:hover { color: var(--color-accent-hover); } h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: var(--space-4); } h2 { font-size: 20px; font-weight: 650; letter-spacing: -0.01em; margin-bottom: var(--space-3); } h3 { font-size: 16px; font-weight: 650; margin-bottom: var(--space-2); } p { margin-bottom: var(--space-3); } code, pre { font-family: var(--font-mono); font-size: 13px; } pre { background: var(--color-surface-2); padding: var(--space-3); border-radius: var(--radius-sm); overflow-x: auto; } .text-muted { color: var(--color-muted); } .text-faint { color: var(--color-faint); } .text-good { color: var(--color-good); } .text-warn { color: var(--color-warn); } .text-bad { color: var(--color-bad); } .text-right { text-align: right; } .text-center { text-align: center; } .text-sm { font-size: 13px; } .text-xs { font-size: 12px; } /* Gradient text helper — for hero numbers and brand wordmark. */ .gradient-text { background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; }