/* ========================================================================== VARIABLES.CSS — Probe Toolkit Design Tokens All CSS custom properties. Dark theme is the default. Light theme activated by [data-theme="light"] on . ========================================================================== */ :root { /* ── Colors: Backgrounds ─────────────────────────────────────────────── */ --bg-primary: #0b0e14; --bg-secondary: #131720; --bg-tertiary: #1a1f2e; --bg-elevated: #1e2436; /* ── Colors: Text ────────────────────────────────────────────────────── */ --text-primary: #e5e7eb; --text-secondary: #9ca3af; --text-tertiary: #6b7280; /* ── Colors: Accent ──────────────────────────────────────────────────── */ --accent-green: #22c55e; --accent-green-dim: #16a34a; --accent-blue: #3b82f6; --accent-blue-dim: #2563eb; --accent-amber: #f59e0b; --accent-red: #ef4444; /* ── Colors: Borders ─────────────────────────────────────────────────── */ --border-subtle: #1e293b; --border-focus: #3b82f6; /* ── Typography ──────────────────────────────────────────────────────── */ --font-sans: 'Manrope', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; /* ── Spacing (8px base) ──────────────────────────────────────────────── */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; /* ── Border Radius ───────────────────────────────────────────────────── */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; /* ── Shadows ─────────────────────────────────────────────────────────── */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); /* ── Transitions ─────────────────────────────────────────────────────── */ --transition-fast: 150ms ease; --transition-base: 200ms ease; --transition-slow: 300ms ease; /* ── Layout ──────────────────────────────────────────────────────────── */ --container-max: 1280px; --container-padding: var(--space-4); } /* ========================================================================== Light Theme Override ========================================================================== */ [data-theme="light"] { /* Backgrounds */ --bg-primary: #ffffff; --bg-secondary: #f8fafc; --bg-tertiary: #f1f5f9; --bg-elevated: #ffffff; /* Text */ --text-primary: #0f172a; --text-secondary: #475569; --text-tertiary: #94a3b8; /* Accents */ --accent-green: #16a34a; --accent-green-dim: #15803d; --accent-blue: #2563eb; --accent-blue-dim: #1d4ed8; --accent-amber: #d97706; --accent-red: #dc2626; /* Borders */ --border-subtle: #e2e8f0; --border-focus: #3b82f6; /* Shadows — lighter for light theme */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15); }