:root {
  --bg-primary: #f8f9fa;
  --bg-secondary: #ffffff;
  --text-primary: #212529;
  --text-secondary: #495057;
  --border-color: #dee2e6;
  --accent-color: #007bff;
  --accent-hover: #0056b3;
  --divider-color: #ced4da;

  --route-1: #2c5282;
  --route-2: #276749;
  --route-3: #975a16;
  --route-4: #553c9a;
  --route-5: #742a2a;

  --font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #1a202c;
    --bg-secondary: #2d3748;
    --text-primary: #f7fafc;
    --text-secondary: #cbd5e0;
    --border-color: #4a5568;
    --accent-color: #63b3ed;
    --accent-hover: #4299e1;
    --divider-color: #4a5568;

    --route-1: #63b3ed;
    --route-2: #68d391;
    --route-3: #f6ad55;
    --route-4: #b794f4;
    --route-5: #fc8181;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-family);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  height: 100vh;
  overflow: hidden;
}

*:focus-visible {
  outline: 3px solid var(--accent-color);
  outline-offset: 2px;
}