:root {
  --navy-950: #061430;
  --navy-900: #0a1f44;
  --navy-800: #11306a;
  --navy-700: #1a4290;
  --sky: #2f8cff;
  --sky-soft: #e6f0ff;
  --route: #8e24aa;
  --amber: #ffb300;
  --red: #c62828;
  --green: #2e7d32;
  --ink: #0f1b2d;
  --ink-2: #4a5872;
  --line: #dde3ee;
  --bg: #f4f6fa;
  --card: #ffffff;
  --radius: 12px;
  --shadow: 0 6px 24px rgba(6, 20, 48, 0.14);
  --font: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-cond: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--navy-700); }
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); font-weight: 600; font-size: 14px;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .05s;
}
.btn:hover { border-color: #b9c4d8; background: #f7f9fc; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.btn-primary:hover { background: var(--navy-700); border-color: var(--navy-700); }
.btn-accent { background: var(--amber); border-color: var(--amber); color: var(--navy-950); }
.btn-accent:hover { background: #ffc233; border-color: #ffc233; }
.muted { color: var(--ink-2); }
.small { font-size: 13px; }