/* KOZU 5 Tropics: the colors, type and base rules every page shares (index and privacy).
   Dark colors are written once: theme.js sets data-scheme="dark" on <html> when the viewer chose Dark, or chose Auto
   on a device set to dark. */
:root {
  /* KOZU 5 brand */
  --k-navy: #0D1D44; --k-blue: #1C588E; --k-amber: #F5A623; --k-red: #EF5F2E; --k-cyan: #79DCF0; --k-sky: #29ADD3;
  /* surfaces: --bg is the page, --card the map controls and menus, --tile the soft panels and insets */
  --bg: #FFFFFF; --card: #FFFFFF; --tile: #F3F6FA; --border: #D5DEE9; --shadow: 0 1px 2px rgb(13 29 68 / .06), 0 2px 8px rgb(13 29 68 / .04);
  --sea: #EDF3F9; --land: #D3DDE9; --fg: #0B1B3D; --muted: #4E5F79; --line: #D5DEE9; --ctl-off: #7D8DA3; --me: #1673C2;
  --up: #E5532A; --down: #14A38B; --up-ink: #B83A16; --down-ink: #0A7564; --cone: #0D1D44; --trend: var(--up); --trend-ink: var(--up-ink);
  /* one action color for buttons, switches, sliders and selected states; orange is for storm danger only */
  --action: var(--k-blue); --action-ink: #FFFFFF; --accent: var(--action); --accent-ink: #9A5A00; --pill-on: var(--action); --pill-on-ink: var(--action-ink); --storm: var(--up);
  --gfs: #2E6BE6; --ecmwf: #D23A6E; --ukmet: #15946A; --cmc: #8A52D6; --hafsa: #E5810F; --hafsb: #B08A00; --tvcn: #0E8F9C; --ens: #9AA5AB; --other: #B9C1C5;
  /* NHC's standard watch/warning colors, the same in both themes so they match NHC's own maps */
  --hwr: #E3171E; --hwa: #F78FC4; --twr: #1D4FE0; --twa: #F2D600; --ssr: #B000B5; --ssa: #C9A0F2; --ww-casing: #0B1B3D;
  --display: "Montserrat", "Instrument Sans", system-ui, sans-serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* only the raw advisory text uses it: no web font needed */
}
:root[data-scheme="dark"] {
  --bg: #061433; --card: #0C2149; --tile: #132B5A; --border: #22406F; --shadow: 0 1px 2px rgb(0 0 0 / .3);
  --sea: #081A3B; --land: #17315C; --fg: #F2F6FB; --muted: #9DB0CA; --line: #22406F; --ctl-off: #6E86AB; --me: #3BB4E6;
  --up: #FF7A4D; --down: #2FD1B2; --up-ink: #FF8F68; --down-ink: #3FDDBE; --cone: #F2F6FB;
  --action: var(--k-amber); --action-ink: var(--k-navy); --accent-ink: var(--k-amber); --storm: var(--up);
  --gfs: #6B9BFF; --ecmwf: #FF6F9B; --ukmet: #45D69C; --cmc: #B88CFF; --hafsa: #FFA34D; --hafsb: #E5C33F; --tvcn: #3FD3DF; --ens: #5F7590; --other: #435A78;
  color-scheme: dark; }

* { box-sizing: border-box; }
/* iOS tints the strip under the status bar from the page's own background, so the page is navy like the masthead
   (overscroll above and below matches too) and only the content area is the page color, spread edge to edge */
html, body { margin: 0; padding: 0; background: var(--k-navy); }
body { min-height: 100vh; color: var(--fg); -webkit-font-smoothing: antialiased; }
main { background: var(--bg); box-shadow: 0 0 0 100vmax var(--bg); clip-path: inset(0 -100vmax); }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }