/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Base */
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.5;
color: var(--text);
min-width: 100vw;
}
#app {
background: var(--bg-app);
padding: 16px;
border-radius: 12px;
}
/* Color tokens */
:root {
--bg-app: #f8f9fa;
--bg-card: #fff;
--bg-inset: #f5f5f5;
--bg-track: #e0e0e0;
--bg-tint-blue: #e3f2fd;
--bg-tint-green: #e8f5e9;
--bg-tint-purple: #f3e5f5;
--bg-tint-warm: #fbe9e7;
--bg-tint-yellow: #fffde7;
--border: #e0e0e0;
--text: #1a1a2e;
--text-muted: #666;
--text-indigo: #3949ab;
--text-success: #2e7d32;
--accent-blue: #1565c0;
--accent-blue-light: #42a5f5;
--accent-green: #4caf50;
--accent-green-light: #66bb6a;
--accent-red: #ef5350;
--accent-orange: #ff9800;
--accent-purple: #6a1b9a;
--accent-yellow: #ffd54f;
--text-on-accent: #fff;
--error-bg: #ffebee;
--error-text: #c62828;
}
@media (prefers-color-scheme: dark) {
:root {
--bg-app: #1a1a2e;
--bg-card: #16213e;
--bg-inset: #0d1b2a;
--bg-track: #0d1b2a;
--bg-tint-blue: #0f3460;
--bg-tint-green: #1b3a4b;
--bg-tint-purple: #4a148c;
--bg-tint-warm: #4e1a00;
--bg-tint-yellow: #1b3a4b;
--border: #0f3460;
--text: #e0e0e0;
--text-muted: #a0a0a0;
--text-indigo: #a0c4ff;
--text-success: #81c784;
--accent-blue: #64b5f6;
--accent-blue-light: #42a5f5;
--accent-green: #81c784;
--accent-green-light: #66bb6a;
--accent-orange: #ffb74d;
--accent-purple: #ce93d8;
--error-bg: #5c1a1a;
--error-text: #ff8a80;
}
}
/* Shared components */
.error-banner {
background: var(--error-bg);
color: var(--error-text);
padding: 12px;
border-radius: 8px;
text-align: center;
font-weight: 600;
}
