:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #f4f5f7;
  --text: #111111;
  --text-muted: #545861;
  --border: #dde0e6;
  --accent: #0455a1; /* Linha 1-Azul: links, interruptores, ícones */
  --accent-contrast: #ffffff;
  --btn-bg: #111111; --btn-fg: #ffffff; /* ação primária: pílula preta */
  --focus: #0455a1;
  --brand: #0455a1;
  --error-bg: #fdecec;
  --error-text: #8c1d1d;
  --shadow: 0 2px 12px rgba(20, 28, 45, .14);

  --risk-0: #2e9e5b;
  --risk-1: #f2c744;
  --risk-2: #ee8133;
  --risk-3: #c0262d;
  --route-muted: #9aa3b2;
  --route-casing: #1b1f27;

  --badge-baixo-bg: #dff3e6;   --badge-baixo-fg: #14532d;
  --badge-moderado-bg: #fdf1c4; --badge-moderado-fg: #5e4500;
  --badge-alto-bg: #fde0c8;     --badge-alto-fg: #7a2f00;
  --badge-muito-bg: #f9d3d5;    --badge-muito-fg: #7a0f16;

  /* perfis = linhas do Metrô (não confundir com a escala --risk-*); espelhado em LINES (js/format.js) */
  --line-rapida: #0455a1; --line-equilibrada: #6b3fa0; --line-segura: #00707a;
  --line-fg: #ffffff; --line-tint: 7%;

  --radius: 12px;
  --gutter: 16px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1115;
    --surface: #17191e;
    --surface-2: #1f2229;
    --text: #f1f2f4;
    --text-muted: #a4a9b3;
    --border: #343841;
    --accent: #6fa8f0;
    --accent-contrast: #0b0d10;
    --btn-bg: #f4f5f7; --btn-fg: #111111;
    --focus: #7db4f5;
    --brand: #1f6fcb;
    --line-rapida: #6aa8f0; --line-equilibrada: #b79ce6; --line-segura: #3fb6c0;
    --line-fg: #0b0d10; --line-tint: 12%;
    --error-bg: #3a1c1f;
    --error-text: #ffb4b4;
    --shadow: 0 2px 12px rgba(0, 0, 0, .5);
    --route-muted: #6b7384;
    --route-casing: #0a0c10;
    --risk-0: #3fbf78; --risk-1: #f5d35a; --risk-2: #f29a4d; --risk-3: #ef5b60;
    --badge-baixo-bg: #17382a;   --badge-baixo-fg: #9fe3b9;
    --badge-moderado-bg: #413511; --badge-moderado-fg: #f3d977;
    --badge-alto-bg: #47260f;     --badge-alto-fg: #f8b886;
    --badge-muito-bg: #4a1a1e;    --badge-muito-fg: #f6a3a8;
    color-scheme: dark;
  }
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: "Helvetica Neue", Helvetica, Inter, Arial, system-ui, sans-serif;
  font-size: 15px; line-height: 1.4;
  background: var(--bg); color: var(--text);
  overflow: hidden; /* app de tela cheia: só o painel rola */
}
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
[hidden] { display: none !important; }