/* ==========================================================
   ROTAS — tokens compartilhados (app do operador + painel)
   ========================================================== */
:root {
  --ink: #1B2A36;
  --ink-2: #3E5263;
  --muted: #66788A;
  --paper: #EEF2F1;
  --surface: #FFFFFF;
  --surface-2: #F5F8F7;
  --line: #D5DDDB;
  --line-2: #E6ECEA;

  --amber: #F0A800;
  --amber-hi: #FFC21A;
  --amber-ink: #3D2B00;
  --amber-soft: #FFF1C7;

  --ok: #1F8A55;
  --ok-soft: #DDF1E6;
  --bad: #C8372D;
  --bad-soft: #F8DEDB;
  --just: #4D5FD0;
  --just-soft: #E1E5FA;
  --idle: #C3CDD2;

  --plate-1: #DCE3E6;
  --plate-2: #A7B4BB;
  --plate-ink: #1B2A36;

  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 22px;

  --shadow-1: 0 1px 2px rgba(27, 42, 54, .08), 0 2px 8px rgba(27, 42, 54, .06);
  --shadow-2: 0 10px 40px rgba(27, 42, 54, .22);

  --font: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --cond: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #E8EEF1; --ink-2: #BAC7D0; --muted: #8B9CA9; --paper: #111B22; --surface: #18252F; --surface-2: #1F2E39;
    --line: #2C3D49; --line-2: #243540; --amber-soft: #3A2E0E; --amber-ink: #241900; --ok-soft: #12382A; --bad-soft: #401C1A;
    --just-soft: #1E2550; --idle: #3A4A55; --plate-1: #8C9AA2; --plate-2: #5B6970; --plate-ink: #0E171D;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .3); --shadow-2: 0 10px 40px rgba(0, 0, 0, .55);
  }
}
:root[data-theme="dark"] {
  --ink: #E8EEF1; --ink-2: #BAC7D0; --muted: #8B9CA9; --paper: #111B22; --surface: #18252F; --surface-2: #1F2E39;
  --line: #2C3D49; --line-2: #243540; --amber-soft: #3A2E0E; --amber-ink: #241900; --ok-soft: #12382A; --bad-soft: #401C1A;
  --just-soft: #1E2550; --idle: #3A4A55; --plate-1: #8C9AA2; --plate-2: #5B6970; --plate-ink: #0E171D;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3); --shadow-2: 0 10px 40px rgba(0, 0, 0, .55);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--paper); line-height: 1.45; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
img { max-width: 100%; display: block; }

/* A plaqueta metálica — elemento de identidade do Rotas */
.plate {
  position: relative;
  color: var(--plate-ink);
  border-radius: 9px;
  background:
    radial-gradient(circle at 14px 14px, rgba(0,0,0,.35) 0 3px, rgba(255,255,255,.55) 3.5px 4.5px, transparent 5px),
    radial-gradient(circle at calc(100% - 14px) 14px, rgba(0,0,0,.35) 0 3px, rgba(255,255,255,.55) 3.5px 4.5px, transparent 5px),
    radial-gradient(circle at 14px calc(100% - 14px), rgba(0,0,0,.35) 0 3px, rgba(255,255,255,.55) 3.5px 4.5px, transparent 5px),
    radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), rgba(0,0,0,.35) 0 3px, rgba(255,255,255,.55) 3.5px 4.5px, transparent 5px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, rgba(0,0,0,.03) 1px 3px),
    linear-gradient(165deg, var(--plate-1), var(--plate-2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), inset 0 -2px 0 rgba(0,0,0,.18), 0 1px 0 rgba(0,0,0,.08), 0 6px 18px rgba(27,42,54,.18);
}
.plate .emboss {
  font-family: var(--cond);
  font-weight: 700;
  letter-spacing: .015em;
  line-height: .9;
  text-shadow: 0 1px 0 rgba(255,255,255,.55), 0 -1px 0 rgba(0,0,0,.28);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
[hidden] { display: none !important; }