/* Midnight Cyan: the selected palette for the web and standalone phone game. */
:root {
  color-scheme:dark;
  --midnight-background:#111b29;
  --midnight-surface:#192637;
  --midnight-raised:#22364b;
  --midnight-selected:#23434f;
  --midnight-cyan:#59d4d8;
  --midnight-amber:#f4ba5b;
  --midnight-on-accent:#10202d;
  --midnight-positive:#75daa7;
  --midnight-error:#ffb2a6;
  --ink:#eef4f8;
  --muted:#a8bdcd;
  --teal:var(--midnight-cyan);
  --paper:var(--midnight-surface);
  --line:#3a4c60;
  color:var(--ink);
  background:var(--midnight-background);
}
body,.shell,.content { background:var(--midnight-background);color:var(--ink); }
a { color:var(--midnight-cyan); }
::selection { background:var(--midnight-cyan);color:var(--midnight-on-accent); }
button,input,select,textarea,summary { accent-color:var(--midnight-cyan); }
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,a:focus-visible {
  outline:3px solid var(--midnight-cyan);outline-offset:2px;
}
input,select,textarea,.intro input,#starting-city,.select-rig,
.journey-destination select,.atlas-route-form select,.career-form select,.map-tools select {
  background:var(--midnight-raised);color:var(--ink);border-color:var(--line);
}
input::placeholder,textarea::placeholder { color:var(--muted);opacity:1; }
option { background:var(--midnight-surface);color:var(--ink); }
.muted,small,.intro p,.topbar .sub,.stat label,.city-heading p,.cargo-heading small,
.job .cargo-type,.cargo-type em,.route-cities,.atlas-info small,.atlas-connections small,
.atlas-route-result small { color:var(--muted); }
.eyebrow,.tag,.save-status,.atlas-directory .eyebrow,.city-heading p>span { color:var(--midnight-cyan); }

/* App chrome, cards and navigation. */
.topbar { background:var(--midnight-surface);border-color:var(--line);box-shadow:0 2px 6px #0003; }
.rank-chip,.balance-chip,.header-icon { background:var(--midnight-background);border-color:var(--line);box-shadow:none; }
.rank-chip>svg { color:var(--midnight-amber);fill:var(--midnight-amber);filter:none; }
.balance-chip>svg { color:var(--muted); }
.rank-track,.xpbar,.progress { background:var(--line); }
.rank-track i,.xpbar i,.progress i { background:var(--midnight-cyan); }
.rank .level { background:var(--midnight-selected);border-color:var(--line); }
.sidebar,.fleet-deck { background:var(--midnight-background);border-color:var(--line); }
.nav,.tabs button { background:var(--midnight-surface);color:var(--ink);border-color:var(--line);box-shadow:none; }
.nav.active,.tabs button.active {
  background:var(--midnight-cyan);color:var(--midnight-on-accent);border-color:var(--midnight-cyan);box-shadow:none;
}
.nav:hover:not(.active),.tabs button:hover:not(.active) { background:var(--midnight-raised); }
.panel,.card,dialog { background:var(--midnight-surface);color:var(--ink);border-color:var(--line); }
.tabs { background:transparent; }
.vehicle-card,.job { background:var(--midnight-background);color:var(--ink);border-color:var(--line);box-shadow:none; }
.vehicle-card.selected,.job.checked { background:var(--midnight-selected);border-color:var(--midnight-cyan);box-shadow:none; }
.job:focus-within { outline-color:var(--midnight-amber); }
.job.checked .job-check,.tier,.monogram { background:var(--midnight-cyan);color:var(--midnight-on-accent); }
.next-vehicle .tier { background:var(--line);color:var(--ink); }
.fuel-track { background:var(--line); }
.fuel-track i { background:var(--midnight-positive); }
.vehicle-status>i { background:var(--midnight-cyan); }
.vehicle-status>i.driving { background:var(--midnight-positive); }
.city-preview { background:var(--midnight-raised);border-color:var(--line);box-shadow:none; }
.selection-summary,.depot-summary,.city-supplies span,.fuel-itinerary,.recovery-code,.run-strip {
  background:var(--midnight-raised);color:var(--ink);border-color:var(--line);
}
.selection-summary button,.manifest-links button,.depot-summary button { color:var(--midnight-cyan); }
.atlas-connections button { background:var(--midnight-raised);color:var(--ink);border-color:var(--line); }
.receipt-highlight { background:var(--midnight-selected);border-color:var(--line); }

/* Cyan selects and navigates; amber marks the dispatch action. */
.primary,.primary:not(.orange) { background:var(--midnight-cyan);color:var(--midnight-on-accent);box-shadow:0 2px 4px #0003; }
.orange,.primary.orange { background:var(--midnight-amber);color:var(--midnight-on-accent);border-color:var(--midnight-amber);box-shadow:0 2px 4px #0003; }
.secondary { background:var(--midnight-raised);color:var(--ink);border-color:var(--line); }
.soft { color:var(--midnight-cyan);border-color:var(--line);background:transparent; }
.danger { background:#3e2831;color:var(--midnight-error); }
.pill,.hint { background:var(--midnight-raised);color:var(--muted); }
.pill.amber,.hint.amber,.tutorial-tip,.notice,.connection { background:#3b3322;color:var(--midnight-amber);border-color:#6f5932; }
.positive,.activity-list span { color:var(--midnight-positive); }
.negative,.coin { color:var(--midnight-amber); }
.error { color:var(--midnight-error); }
.status-separator { color:var(--muted); }
dialog::backdrop { background:#05101dcc; }
dialog .close { background:var(--midnight-raised);color:var(--ink); }
#toast { background:var(--midnight-raised);color:var(--ink);border:1px solid var(--line);box-shadow:0 6px 24px #0006; }

/* Map artwork keeps its original colours; its controls use the selected palette. */
.map-region-label,.map-search,.zoom-control,.atlas-loading,.map-controls .map-view-toggle,
.atlas-toolbar select,.atlas-toolbar>button,.atlas-info>summary,.atlas-info>div {
  background:var(--midnight-surface);color:var(--ink);border-color:var(--line);box-shadow:0 2px 5px #0003;
}
.map-search input,.map-search button { background:transparent;color:var(--ink); }
.atlas-info[open]>summary { background:var(--midnight-cyan);color:var(--midnight-on-accent); }
.map-expanded .map-controls .map-view-toggle { background:var(--midnight-cyan);color:var(--midnight-on-accent);border-color:var(--midnight-cyan); }
.world-city span,.city-button,.atlas-city {
  background:var(--midnight-cyan);color:var(--midnight-on-accent);border-color:var(--midnight-on-accent);text-shadow:none;
}
.world-city small { color:inherit; }
.world-city i { background:var(--midnight-cyan);border-color:var(--midnight-on-accent); }
.world-city.selected span,.city-button.active,.atlas-city.selected {
  background:var(--midnight-amber);color:var(--midnight-on-accent);border-color:var(--midnight-on-accent);box-shadow:0 2px 5px #0005;
}
.world-city.selected i { background:var(--midnight-amber); }
.world-port button { background:var(--midnight-surface);color:var(--midnight-cyan);border-color:var(--midnight-cyan); }
.atlas-city.owned:before { color:var(--midnight-on-accent); }
.map-credit,.map-credit a { color:#eef4f8; }

/* Loading, setup and the compact brand remain legible on dark surfaces. */
.ltw-brand,.ltw-name>strong,.brand { color:var(--ink); }
.ltw-name>span,.brand span,.brandmark b,.brandmark>svg { color:var(--midnight-cyan); }
.boot,.onboarding { background:var(--midnight-background);color:var(--ink); }
.intro { background:var(--midnight-surface); }
.boot>p { color:var(--muted); }
.boot .loading-track { background:var(--line); }
.boot .loading-track>i { background:var(--midnight-cyan); }
.intro-art>.location { background:var(--midnight-surface);color:var(--ink);border-color:var(--line); }
.intro-art:after { background:linear-gradient(transparent,var(--midnight-background)); }