/* 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;
}