@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@600;700&display=swap");

:root {
  --bg-deep: #0f1722;
  --bg-mid: #1b2737;
  --panel: rgba(18, 30, 44, 0.88);
  --panel-2: rgba(21, 36, 53, 0.82);
  --panel-border: #3e546d;
  --text: #e7edf5;
  --muted: #9fb0c3;
  --accent: #2f6fa5;
  --accent-strong: #23537b;
  --ok: #4ea86d;
  --warn: #d7a44a;
  --danger: #ca5a5a;
}

body.light-theme {
  --bg-deep: #e7edf2;
  --bg-mid: #d6e0ea;
  --panel: rgba(248, 251, 254, 0.92);
  --panel-2: rgba(237, 243, 249, 0.94);
  --panel-border: #aab8c7;
  --text: #152333;
  --muted: #4e6278;
  --accent: #2f6fa5;
  --accent-strong: #23537b;
  --ok: #307a49;
  --warn: #9d6f1e;
  --danger: #9f3434;
}

html,
body {
  font-family: "Manrope", "Aptos", "Segoe UI Variable", "Segoe UI", sans-serif;
  letter-spacing: 0.01em;
}

body {
  background:
    radial-gradient(1200px 700px at 10% -20%, rgba(67, 94, 129, 0.28) 0%, transparent 68%),
    radial-gradient(900px 520px at 92% 5%, rgba(53, 88, 96, 0.2) 0%, transparent 68%),
    linear-gradient(160deg, var(--bg-deep), var(--bg-mid));
  color: var(--text);
}

.theme-toggle,
.btn,
button {
  border-radius: 10px;
  letter-spacing: 0.02em;
}

.theme-toggle,
.btn-primary {
  background: linear-gradient(145deg, var(--accent), var(--accent-strong));
  border-color: color-mix(in srgb, var(--accent-strong) 72%, black 28%);
  box-shadow: 0 10px 24px rgba(8, 13, 21, 0.36);
}

.nav-links a,
.menu a,
a.nav,
.link-card {
  border-radius: 10px;
  border-color: color-mix(in srgb, var(--panel-border) 78%, #6f8499 22%);
}

.card,
.panel,
.box,
.detail-modal-box,
.launchCard,
.header,
.table-wrap,
.train-info-hero {
  border-color: color-mix(in srgb, var(--panel-border) 86%, #889bb0 14%);
  box-shadow: 0 14px 30px rgba(4, 9, 15, 0.34);
}

h1,
h2,
.hero-title,
.brand,
.title {
  font-weight: 700;
  letter-spacing: 0.015em;
}

.mono,
code,
pre,
#emergencyTitle,
#emergencySub {
  font-family: "JetBrains Mono", "Consolas", "Courier New", monospace;
}

.table th,
.tt th,
thead th {
  font-weight: 700;
  background: color-mix(in srgb, var(--panel-2) 90%, #21354a 10%);
}

.table tbody tr:hover,
.tt tbody tr:hover,
tbody tr:hover {
  background: rgba(47, 111, 165, 0.12);
}

input,
select,
textarea {
  border-radius: 9px;
}

body.light-theme input,
body.light-theme select,
body.light-theme textarea {
  background: #f8fbff;
}

.pill-cancel,
.badge-cancel {
  color: #ffd0d0;
  border-color: rgba(202, 90, 90, 0.5);
  background: rgba(202, 90, 90, 0.15);
}

.pill-delay,
.badge-delay {
  color: #ffe1b5;
  border-color: rgba(215, 164, 74, 0.54);
  background: rgba(215, 164, 74, 0.16);
}

.pill-ok,
.badge-ok {
  color: #bce8c8;
  border-color: rgba(78, 168, 109, 0.5);
  background: rgba(78, 168, 109, 0.14);
}