/* Sky Patrol V3 design tokens (SPEC §10.11; restyled to the Sky Patrol V2 look 2026-11-12, LOOKV2.md).
   V2 palette (Bootswatch "Yeti": nav #333, primary #008cba, page #efefef, borders #d1d1d1,
   Open Sans) with minimal AA fixes: white text sits on #007fa9 (V2 #008cba is 3.85:1), on #258472
   (V2 message #2fa790 is 2.98:1) and on #e91c23 (V2 error #ed1c24 is 4.38:1); WARN #f18f01 keeps its
   colour with dark text; grey secondary text is #767676 / #6b6b6b (V2 #999 is 2.85:1). Text pairs checked for WCAG AA (P1 palette/ui_contrast.json);
   band colours checked with the dataviz validator (P1 palette/palette_validation.json).
   Theme: OS preference by default; <html data-theme="light|dark"> wins both ways. */

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(../fonts/OpenSans-latin-var.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --bg: #efefef;
  --surface: #ffffff;
  --surface-2: #f9f9f9;
  --surface-3: #eeeeee;
  --border: #d1d1d1;
  --border-strong: #c1c1c1;
  --border-input: #949494;
  --text: #222222;
  --text-2: #6b6b6b;
  --text-3: #767676;
  --text-on-accent: #ffffff;
  --nav-bg: #333333;
  --nav-bg-2: #2a2a2a;
  --nav-text: #ffffff;
  --nav-text-2: #cccccc;
  --nav-hover: #006687;
  --accent: #0072a3;
  --accent-hover: #006687;
  --accent-soft: #e3f2f8;
  --accent-soft-2: #cfe8f3;
  --brand: #008cba;
  --focus: #008cba;
  --info: #258472;
  --info-soft: #e4f3ef;
  --warning: #f18f01;
  --warning-soft: #fdf1df;
  --warning-text: #222222;
  --danger: #c4161c;
  --danger-soft: #fbe7e7;
  --ok: #1b7a68;
  --band-g: #6250d6;
  --band-V: #1baf7a;
  --nondet: #7b8590;
  --grid: #e6e6e6;
  --axis: #5c6670;
  --plot-frame: #b9bec4;
  --plot-bg: #ffffff;
  --cam-1: #2a78d6; --cam-2: #eb6834; --cam-3: #1baf7a; --cam-4: #eda100;
  --cam-5: #e87ba4; --cam-6: #008300; --cam-7: #6250d6; --cam-8: #e34948;

  /* V2 component colours (LOOKV2.md) */
  --v2-title: #333333;
  --v2-primary: #007fa9; --v2-primary-hover: #006687; --v2-primary-line: #008cba;
  --v2-info: #258472; --v2-info-line: #2fa790;
  --v2-warn: #f18f01; --v2-warn-text: #222222;
  --v2-error: #e91c23; --v2-error-line: #ed1c24;
  --v2-debug: #2b4680;
  --v2-tab: #ffffff; --v2-tab-active: #f0f0f0; --v2-tab-hover: #dcdcdc; --v2-tab-line: #c1c1c1;
  --v2-btn: #e7e7e7; --v2-btn-hover: #dcdcdc; --v2-btn-line: #cccccc;
  --v2-zebra: #f9f9f9; --v2-row-hover: #f5f5f5; --v2-tfoot: #eeeeee;
  --v2-formbody: #efefef;
  --v2-strip: #e0e0e0;
  --v2-tile: #474747; --v2-tile-line: #616161; --v2-tile-text: #ffffff;

  --font-sans: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --fs-11: 0.6875rem; --fs-12: 0.75rem; --fs-13: 0.8125rem; --fs-14: 0.875rem; --fs-15: 0.9375rem;
  --fs-16: 1rem; --fs-18: 1.125rem; --fs-20: 1.25rem; --fs-24: 1.5rem; --fs-32: 2rem; --fs-40: 2.5rem;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --radius: 0px; --radius-lg: 0px; --radius-pill: 999px;
  --shadow: none;
  --shadow-pop: 0 2px 6px rgb(0 0 0 / .10), 0 12px 32px rgb(0 0 0 / .14);
  --content-max: 1400px;
  --col-max: min(85%, 1400px);
  --gutter: 15px;
  --nav-h: 47px;
  --dur: 120ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #121212; --surface: #1c1c1c; --surface-2: #222222; --surface-3: #2a2a2a;
    --border: #3a3a3a; --border-strong: #4a4a4a; --border-input: #7a7a7a;
    --text: #e6e6e6; --text-2: #a8a8a8; --text-3: #9a9a9a; --text-on-accent: #0e1013;
    --nav-bg: #262626; --nav-bg-2: #1e1e1e; --nav-text: #f0f0f0; --nav-text-2: #b8b8b8; --nav-hover: #006687;
    --accent: #36b3e0; --accent-hover: #4cc3ee; --accent-soft: #15303b; --accent-soft-2: #1b3d4b; --focus: #4cc3ee;
    --info: #258472; --info-soft: #12302b; --warning: #ffb547; --warning-soft: #33280f; --warning-text: #1f2328;
    --danger: #ff6b6b; --danger-soft: #3a1c1e; --ok: #4fc3a1;
    --band-g: #9085e9; --band-V: #199e70; --nondet: #7d8692;
    --grid: #2a2a2a; --axis: #a8a8a8; --plot-frame: #3a3a3a; --plot-bg: #1c1c1c;
    --cam-1: #3987e5; --cam-2: #d95926; --cam-3: #199e70; --cam-4: #c98500;
    --cam-5: #d55181; --cam-6: #008300; --cam-7: #9085e9; --cam-8: #e66767;
    --v2-title: #e6e6e6;
    --v2-tab: #1c1c1c; --v2-tab-active: #262626; --v2-tab-hover: #303030; --v2-tab-line: #444444;
    --v2-btn: #2e2e2e; --v2-btn-hover: #3a3a3a; --v2-btn-line: #4a4a4a;
    --v2-zebra: #212121; --v2-row-hover: #282828; --v2-tfoot: #262626;
    --v2-formbody: #262626; --v2-strip: #2a2a2a;
    --v2-tile: #333333; --v2-tile-line: #4f4f4f;
    --shadow-pop: 0 2px 6px rgb(0 0 0 / .5), 0 12px 32px rgb(0 0 0 / .5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121212; --surface: #1c1c1c; --surface-2: #222222; --surface-3: #2a2a2a;
  --border: #3a3a3a; --border-strong: #4a4a4a; --border-input: #7a7a7a;
  --text: #e6e6e6; --text-2: #a8a8a8; --text-3: #9a9a9a; --text-on-accent: #0e1013;
  --nav-bg: #262626; --nav-bg-2: #1e1e1e; --nav-text: #f0f0f0; --nav-text-2: #b8b8b8; --nav-hover: #006687;
  --accent: #36b3e0; --accent-hover: #4cc3ee; --accent-soft: #15303b; --accent-soft-2: #1b3d4b; --focus: #4cc3ee;
  --info: #258472; --info-soft: #12302b; --warning: #ffb547; --warning-soft: #33280f; --warning-text: #1f2328;
  --danger: #ff6b6b; --danger-soft: #3a1c1e; --ok: #4fc3a1;
  --band-g: #9085e9; --band-V: #199e70; --nondet: #7d8692;
  --grid: #2a2a2a; --axis: #a8a8a8; --plot-frame: #3a3a3a; --plot-bg: #1c1c1c;
  --cam-1: #3987e5; --cam-2: #d95926; --cam-3: #199e70; --cam-4: #c98500;
  --cam-5: #d55181; --cam-6: #008300; --cam-7: #9085e9; --cam-8: #e66767;
  --v2-title: #e6e6e6;
  --v2-tab: #1c1c1c; --v2-tab-active: #262626; --v2-tab-hover: #303030; --v2-tab-line: #444444;
  --v2-btn: #2e2e2e; --v2-btn-hover: #3a3a3a; --v2-btn-line: #4a4a4a;
  --v2-zebra: #212121; --v2-row-hover: #282828; --v2-tfoot: #262626;
  --v2-formbody: #262626; --v2-strip: #2a2a2a;
  --v2-tile: #333333; --v2-tile-line: #4f4f4f;
  --shadow-pop: 0 2px 6px rgb(0 0 0 / .5), 0 12px 32px rgb(0 0 0 / .5);
}
@media (max-width: 760px) { :root { --col-max: 100%; } }
@media (prefers-reduced-motion: reduce) { :root { --dur: 0ms; } }