/*
 * Theme extras beyond each theme's colours: the FLYABOO wordmark colours and header background, and the EASY TO
 * READ adjustments. NEON has no class; DARK is .theme-midnight (colours in theme_dark.css); CLASSIC AVIATION is
 * .theme-aviation (theme_aviation.css); EASY TO READ is .theme-midnight plus .theme-readable.
 */

/* Wordmark, in the style of the original daytime artwork: a dark FLY, a blue ABOO, the plane matching FLY. Dark
   themes lighten FLY and the plane so they read on a dark header. */
:root {
  --wordmark-fly: #f4f8ff;
  --wordmark-aboo: #2ed5ff;
}

.theme-light {
  --wordmark-fly: #1b3a6b;
  --wordmark-aboo: #2f74b5;
}

.theme-midnight {
  --wordmark-fly: #f1f5f9;
  --wordmark-aboo: #60a5fa;
}

.theme-aviation {
  --wordmark-fly: #f5f7fa;
  --wordmark-aboo: #5ac8fa;
}

.wordmark-fly,
.wordmark-plane {
  fill: var(--wordmark-fly);
}

.wordmark-aboo {
  fill: var(--wordmark-aboo);
}

.theme-light #header {
  background: #ffffff !important;
}

.theme-midnight #header {
  background: #172033 !important;
}

.theme-aviation #header {
  background: #0b1d3a !important;
}

/* The header's bottom rule and menu button in the plane's orange. */
.theme-light #header { border-bottom: 2px solid #ea580c !important; }
.theme-midnight #header { border-bottom: 2px solid #fb923c !important; }
.theme-aviation #header { border-bottom: 2px solid #ff9f43 !important; }

.theme-light #menu-btn { color: #ea580c; }
.theme-midnight #menu-btn { color: #fb923c; }
.theme-aviation #menu-btn { color: #ff9f43; }

/* 🌙 DARK and ✈️ CLASSIC AVIATION: no neon glow anywhere (their colours are generated from the light theme) */
.theme-midnight *,
.theme-midnight *::before,
.theme-midnight *::after,
.theme-aviation *,
.theme-aviation *::before,
.theme-aviation *::after {
  text-shadow: none !important;
}

.theme-midnight *:not(tr),
.theme-aviation *:not(tr) {
  box-shadow: none !important;
}

/* 🔍 EASY TO READ: the DARK palette with a plain, familiar font, larger text, brighter greys and no decorative
   motion. The emergency alarm still flashes. */
html.theme-readable {
  font-size: 112.5%;
}

:root.theme-readable {
  --font-mono: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --c-grey-444: #8f8f8f;
  --c-grey-555: #a3a3a3;
  --c-grey-666: #b8b8b8;
  --c-grey-888: #cfcfcf;
  --c-grey-aaa: #e4e4e4;
}

/* The wordmark keeps its own typeface. */
.theme-readable *:not(svg):not(svg *) {
  font-family: var(--font-mono) !important;
  letter-spacing: normal !important;
}

.theme-readable *:not(#emergency-alarm-hud):not(.emergency-pulse),
.theme-readable *::before,
.theme-readable *::after {
  animation: none !important;
  transition: none !important;
}

.theme-readable [style*="color: #444"], .theme-readable [style*="color:#444"],
.theme-readable [style*="color: #555"], .theme-readable [style*="color:#555"],
.theme-readable [style*="color: #666"], .theme-readable [style*="color:#666"],
.theme-readable [style*="color: #777"], .theme-readable [style*="color:#777"],
.theme-readable [style*="color: #888"], .theme-readable [style*="color:#888"] {
  color: #cfcfcf !important;
}

.theme-readable .view {
  line-height: 1.45;
}