:root { --sf-page: #0a0b0d;
--sf-surface: #111318;
--sf-surface-raised: #181a20;
--sf-surface-overlay: #1f222a;
--sf-surface-hover: #252930; --sf-border: rgba(255, 255, 255, 0.08);
--sf-border-strong: rgba(255, 255, 255, 0.14);
--sf-border-focus: rgba(215, 25, 32, 0.65); --sf-text: #f7f8fb;
--sf-text-primary: var(--sf-text);
--sf-text-secondary: #b8beca;
--sf-text-muted: #7b8595; --sf-accent: #d71920;
--sf-accent-bright: #ff3048;
--sf-accent-dark: #b91c1c; --sf-success: #22c55e;
--sf-success-dark: #15803d;
--sf-warning: #ffbf47;
--sf-danger: #ef4444;
--sf-live: #ef4444;
--sf-offline: #7b8595;
--sf-ready: #22c55e;
--sf-connecting: #ffbf47; --sf-space-1: 4px;
--sf-space-2: 8px;
--sf-space-3: 12px;
--sf-space-4: 16px;
--sf-space-5: 24px;
--sf-space-6: 32px;
--sf-space-7: 48px; --sf-radius-sm: 4px;
--sf-radius: 8px;
--sf-radius-lg: 12px;
--sf-radius-xl: 16px; --sf-shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--sf-border);
--sf-shadow-overlay: 0 12px 40px rgba(0, 0, 0, 0.5); --sf-sidebar-width: 260px;
--sf-topbar-height: 64px;
--sf-content-max-width: 1400px; --sf-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--sf-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
--sf-font-display: 700 2rem/1.1 var(--sf-font-sans);
--sf-font-title: 600 1.5rem/1.2 var(--sf-font-sans);
--sf-font-section: 600 1.125rem/1.3 var(--sf-font-sans);
--sf-font-card: 600 1rem/1.3 var(--sf-font-sans);
--sf-font-body: 400 0.9375rem/1.5 var(--sf-font-sans);
--sf-font-metadata: 400 0.8125rem/1.4 var(--sf-font-sans);
--sf-font-label: 500 0.75rem/1.2 var(--sf-font-sans);
--sf-font-caption: 400 0.75rem/1.4 var(--sf-font-sans); --sf-transition: 150ms ease;
}