/* ============================================================
   BASE — Reset, custom properties, typography, scrollbar
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg-primary: #0d0d0f;
  --bg-secondary: #1a1a2e;
  --bg-tertiary: #16213e;
  --accent: #4cc9f0;
  --accent-secondary: #f72585;
  --text-primary: #e0e0e0;
  --text-muted: #6c757d;
  --border: #2a2a3e;

  /* Type scale 1.125 */
  --fs-xs: 0.79rem;
  --fs-sm: 0.889rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.266rem;
  --fs-xl: 1.424rem;

  /* Spacing (8px grid) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 40px;
  --sp-8: 48px;

  /* Radii */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 6px;

  /* Transitions */
  --transition: 150ms ease;

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  color: var(--text-primary);
  background: var(--bg-primary);
}

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  display: flex;
  flex-direction: column;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }