/* Base comum às 3 visões. Tokens em design/tokens-hit.json: só neutros, cantos vivos, chips 8px. */
:root{
  --preto:#000000; --grafite-950:#0f0f0f; --grafite-900:#1d1d1d; --cinza-700:#464646; --cinza-600:#636363;
  --cinza-500:#808080; --cinza-400:#9d9d9d; --prata-300:#b7b7b7; --prata-200:#d9d9d9; --nevoa-100:#e8e8e8;
  --branco:#ffffff;
  --bg:var(--grafite-950); --raised:var(--grafite-900); --ink:var(--branco); --muted:var(--prata-300);
  --line:var(--cinza-500); --hair:#2e2e2e; --hl:var(--prata-200); --on-hl:var(--preto); --sub-on-hl:#3b3b3c;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-label);font-size:15px;line-height:1.4}
button{font-family:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums}
.txt{font-family:var(--f-text)}
.dot{width:14px;height:14px;border-radius:50%;background:currentColor;animation:pulse 1.6s ease-in-out infinite}
.dot.off{animation:none;opacity:.35}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.chip-demo{font-size:11px;letter-spacing:.2em;color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:6px 10px}
.aviso{padding:32px 16px;text-align:center;color:var(--muted);letter-spacing:.15em;font-size:13px}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){.dot{animation:none}}