/* ============================================================================
   SaveVision · Linear-style design system (shared tokens + base)

   One canonical token sheet for every operator-web page. The visual language
   follows Linear: neutral near-black canvas, layered surfaces, hairline
   borders, Inter with tight display tracking, 13px UI text, one restrained
   brand accent (clinical mint), semantic color reserved for status only.

   Pages keep their historical variable names (--bg / --panel / --dim / …) so
   their inline component styles keep working — the names are aliased here.
   Load this file FIRST; page styles refine on top.
============================================================================ */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  color-scheme: dark;

  /* canvas + surfaces */
  --bg: #08090b;
  --bg2: #0c0e11;
  --card: #101318;
  --panel: #101318;
  --panel2: #161a20;
  --surface-3: #1c212a;
  --border: #22262e;
  --border-strong: #303743;

  /* text ladder */
  --fg: #eef1f5;
  --fg2: #c6ccd6;
  --dim: #8b93a1;
  --fg-dim: #8b93a1;
  --faint: #5b6270;

  /* brand accent — clinical mint (the old #00ff95 neon, disciplined) */
  --accent: #3dd68c;
  --accent-hover: #4ce09a;
  --accent-dim: rgba(61, 214, 140, 0.13);
  --accfg: #07130d;
  --accent-fg: #07130d;

  /* status only */
  --crit: #ff5d5d;
  --danger: #ff5d5d;
  --urg: #e6a23c;
  --ops: #e6a23c;
  --ok: #3fb950;

  /* operator / route / info blue (replaces neon cyan) */
  --op: #62a8ff;
  --share: #62a8ff;
  --accent2: #62a8ff;
  --draw: #62a8ff;

  /* glasses-HUD sim overlay green — intentionally brighter than the UI
     accent: it simulates the additive display, not the app chrome */
  --hud: #4de3a1;

  --radius: 8px;
  --radius-sm: 6px;
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
}

html { font-family: var(--font); }
body {
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv05", "ss01";
}

::selection { background: rgba(61, 214, 140, 0.25); }

:focus-visible {
  outline: 2px solid rgba(61, 214, 140, 0.55);
  outline-offset: 1px;
}

kbd {
  background: var(--panel2);
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 1px 6px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg2);
}

/* quiet scrollbars, Linear-style */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: #3d4552; }

/* dark leaflet chrome to match the canvas */
.leaflet-container { background: #0b0d10; font-family: var(--font); }
.leaflet-tile { filter: brightness(.62) contrast(1.05) hue-rotate(180deg) invert(.92) saturate(.5); }
.leaflet-control-zoom a {
  background: var(--panel) !important;
  color: var(--fg2) !important;
  border-color: var(--border) !important;
}
.leaflet-control-attribution {
  background: rgba(8, 9, 11, 0.7) !important;
  color: var(--faint) !important;
}
.leaflet-control-attribution a { color: var(--dim) !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}