/* ============================================================================
   theme.css — single source of truth for the Optix look.
   Palette lifted verbatim from the live ga.optix.earth CSS variables
   (48 vars, captured 2026-08-16). Fonts are the exact Optix families:
   Oswald (wordmark/headers) + Roboto (body). Change nothing here casually —
   every component reads from these tokens so the look stays coherent.
   ========================================================================== */

/* ---- Fonts (bundled OFL/Apache families, same as Optix) ---- */
@font-face { font-family: "Oswald"; font-weight: 300; font-display: swap;
  src: url("../assets/fonts/Oswald-Light.ttf") format("truetype"); }
@font-face { font-family: "Oswald"; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/Oswald-Regular.ttf") format("truetype"); }
@font-face { font-family: "Oswald"; font-weight: 700; font-display: swap;
  src: url("../assets/fonts/Oswald-Bold.ttf") format("truetype"); }
@font-face { font-family: "Roboto"; font-weight: 300; font-display: swap;
  src: url("../assets/fonts/Roboto-Light.ttf") format("truetype"); }
@font-face { font-family: "Roboto"; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/Roboto-Regular.ttf") format("truetype"); }
@font-face { font-family: "Roboto"; font-weight: 500; font-display: swap;
  src: url("../assets/fonts/Roboto-Medium.ttf") format("truetype"); }
@font-face { font-family: "Roboto"; font-weight: 700; font-display: swap;
  src: url("../assets/fonts/Roboto-Bold.ttf") format("truetype"); }

:root {
  /* --- Optix neutral ramp (dark chrome) --- */
  --neutral-50:  #f3f3f3;  --neutral-100: #dfdfdf;  --neutral-200: #c8c8c8;
  --neutral-300: #b2b2b2;  --neutral-400: #9b9b9b;  --neutral-500: #848484;
  --neutral-600: #6e6e6e;  --neutral-700: #585858;  --neutral-800: #414141;
  --neutral-850: #373737;  --neutral-900: #2b2b2b;

  /* --- Optix accents --- */
  --accent-red:    #ee5f5b;
  --accent-blue:   #2196f3;
  --accent-orange: #ffa500;
  --accent-green:  #46b748;
  --accent-gold:   #ffb000;
  --active-green:  #72ff3f;
  --primary-blue:  #5371bf;
  --primary-700:   #5371bf;

  /* --- Semantic surfaces (built from the ramp) --- */
  --bg-app:        #0d0f12;   /* deepest — behind the map */
  --bg-chrome:     #1b1d21;   /* top bar / bottom bar */
  --bg-panel:      #212327;   /* left Layer Manager, cards */
  --bg-panel-2:    #1a1c1f;   /* nested / inputs */
  --bg-header:     #2b2d31;   /* section headers */
  --bg-hover:      #2f3237;
  --line:          #34373c;   /* hairline separators */
  --line-soft:     #26282c;

  /* --- Text --- */
  --text-1: #eaeaea;   /* primary */
  --text-2: #b6b6b6;   /* secondary */
  --text-3: #8a8a8a;   /* tertiary / labels */
  --text-dim: #6b6b6b;

  /* --- Domain track colors (match Optix layer swatches) --- */
  --trk-air:      #5b8dff;   /* ADS-B / air */
  --trk-air-un:   #3a4d80;   /* unfused air */
  --trk-sea:      #ee5f5b;   /* AIS / surface */
  --trk-mq9:      #b061ff;   /* MQ-9 track (magenta/violet) */
  --trk-lynx:     #46b748;   /* Lynx GMTI */
  --trk-lyntrk:   #7fd4ff;   /* Lynx tracks (cyan) */
  --trk-correlated: #ffb000; /* fused / correlated */
  --threat-missile: #ee5f5b;
  --threat-uav:     #ffa500;

  /* --- Typography --- */
  --font-head: "Oswald", system-ui, sans-serif;
  --font-body: "Roboto", system-ui, sans-serif;

  /* --- Geometry --- */
  --topbar-h: 40px;
  --bottombar-h: 56px;       /* compact timeline (axis + controls); expands on demand */
  --left-w: 300px;
  --rail-w: 40px;
  --radius: 4px;
  --radius-lg: 6px;
  --shadow-panel: 0 6px 24px rgba(0,0,0,0.5);

  --dur: 140ms;
}

/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--bg-app);
  color: var(--text-1);
  font-family: var(--font-body);
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  user-select: none;
}
button { font-family: inherit; color: inherit; cursor: pointer; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #3a3d42; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #4a4e54; }
::-webkit-scrollbar-track { background: transparent; }

/* small shared helpers */
.head { font-family: var(--font-head); font-weight: 400; letter-spacing: .04em; }
.mono-caps { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .08em; }