/* ============================================================================
   tokens.css — contrato visual único dos DOIS produtos do painel Onvox
   (Analisador de Chamadas e Dashboard Onvox).

   Regra de ouro: nenhuma tela crava cor na mão. Se falta um tom, o tom nasce
   AQUI, nos dois modos, e só depois é usado.

   Como ler este arquivo
   ---------------------
   1. Bloco `:root, :root[data-theme="dark"]`  → modo ESCURO (padrão do
      Analisador; herdado de static/index.html linhas ~9-31, valor por valor,
      para que a migração futura do index.html seja um recorte e não um
      redesenho).
   2. Bloco `:root[data-theme="light"]`        → modo CLARO. É o desenho da
      maquete "Onvox — Visão Geral"; é o modo em que o Dashboard nasce.

   O modo é escolhido por `document.documentElement.dataset.theme`, escrito
   pelo anti-flash inline de cada página e por shared/theme.js. Chave de
   localStorage: "theme", COMPARTILHADA pelos dois produtos.

   Famílias de token
   -----------------
   SUPERFÍCIE  --bg --panel --panel2 --border --text/--ink --muted --shadow
   MARCA       --purple --purple2  (roxo Onvox; é a cor de marca nos 2 modos)
   RAMPA       --green --blue --orange --red --yellow
               (paleta de status/série da maquete)
   SEMÂNTICA   --accent --ok --warn --bad + os respectivos *-bg
               (nomes que o index.html já usa; mantidos com os MESMOS valores)
   TINTA       --tint-*  (fundo pastel dos ícones redondos da maquete)
   CROMO       --sidebar-* (a barra lateral roxa é chrome de marca: continua
               roxa nos dois modos, apenas mais funda no escuro)

   Por que --green e --ok coexistem: `--ok` é o verde SEMÂNTICO do Analisador
   (aprovado/bom) e `--green` é o verde da RAMPA da maquete (série de gráfico,
   "Saudável"). Deixá-los separados evita que ajustar o gráfico do Dashboard
   mude o parecer de qualidade do Analisador.
   ========================================================================= */

/* ---------------------------------------------------------------- ESCURO -- */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  /* superfície (idêntico a index.html) */
  --bg:      #0a0d13;
  --panel:   #131824;
  --panel2:  #1c2432;
  --border:  #2d3646;
  --text:    #f3f6fc;
  --ink:     #f3f6fc;   /* alias do nome usado na maquete */
  --muted:   #aeb9cb;
  --shadow:  0 2px 10px rgba(0, 0, 0, .35);
  --ring:    0 0 0 3px var(--accent-bg);

  /* marca — clareado para vencer o fundo escuro sem perder o matiz Onvox.
     #b17cff sobre --panel dá ~6,0:1, ou seja, serve inclusive para texto. */
  --purple:  #b17cff;
  --purple2: #8b47f0;

  /* rampa de status/série (PREENCHIMENTO: barra, fatia, linha, ponto) */
  --green:   #2ee08a;
  --blue:    #5b93ff;
  --orange:  #ff9f45;
  --red:     #ff5b62;
  --yellow:  #f5b021;

  /* mesma rampa para TEXTO. No escuro os tons já passam de 4,5:1 sobre
     --panel, então -ink = a própria cor. Ver o bloco claro para o porquê. */
  --purple-ink: #b17cff;
  --green-ink:  #2ee08a;
  --blue-ink:   #5b93ff;
  --orange-ink: #ff9f45;
  --red-ink:    #ff5b62;
  --yellow-ink: #f5b021;

  /* semântica do Analisador (valores originais do index.html) */
  --accent:    #5b93ff;
  --ok:        #2ee08a;
  --warn:      #f5b021;
  --bad:       #ff5b62;
  --accent-bg: rgba(91, 147, 255, .14);
  --ok-bg:     rgba(46, 224, 138, .16);
  --warn-bg:   rgba(245, 176, 33, .16);
  --bad-bg:    rgba(255, 91, 98, .16);

  /* tintas dos ícones redondos (no escuro, véu translúcido em vez de pastel) */
  --tint-violet: rgba(177, 124, 255, .16);
  --tint-green:  rgba(46, 224, 138, .16);
  --tint-blue:   rgba(91, 147, 255, .16);
  --tint-orange: rgba(255, 159, 69, .16);
  --tint-yellow: rgba(245, 176, 33, .16);
  --tint-red:    rgba(255, 91, 98, .16);

  /* barra lateral: chrome de marca, roxa nos dois modos */
  --sidebar-top:      #3d0d80;
  --sidebar-bottom:   #230d55;
  --sidebar-brand-bg: #fbfcfe;   /* a logo é PNG SEM alfa: precisa de placa clara */
  --sidebar-text:     #ffffff;
  --sidebar-border:   #1a0b3d;
  --sidebar-hairline: rgba(255, 255, 255, .22);  /* moldura do bloco de filtros */
  --sidebar-active:   linear-gradient(90deg, #9b3cff, #7a24e8);

  /* cinza neutro da fatia "Sem utilização" do donut */
  --neutral: #6f778f;

  /* ícones inline usados como background-image (precisam da cor literal) */
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23aeb9cb' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --search:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23aeb9cb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E");

  /* tipografia — Inter quando instalada; sem webfont para não depender de rede */
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* raios e espaços (a maquete usa 10px em cartão e 8px em controle) */
  --r-card: 10px;
  --r-ctrl: 8px;
  --r-pill: 999px;
}

/* ----------------------------------------------------------------- CLARO -- */
:root[data-theme="light"] {
  color-scheme: light;

  /* superfície — os valores da maquete */
  --bg:      #f7f8fc;
  --panel:   #ffffff;
  --panel2:  #f1f4f9;
  --border:  #e8e9f2;
  --text:    #11183f;
  --ink:     #11183f;
  --muted:   #6d7292;
  --shadow:  0 3px 12px rgba(32, 36, 90, .045);
  --ring:    0 0 0 3px var(--accent-bg);

  /* marca — os hexes exatos da maquete */
  --purple:  #7c12e8;
  --purple2: #4c18a8;

  /* rampa de status/série — os hexes EXATOS da maquete, para PREENCHIMENTO
     (fatia de rosca, barra, linha de gráfico, bolinha de legenda). */
  --green:   #16a35b;
  --blue:    #2864e8;
  --orange:  #ff8b00;
  --red:     #ef3e35;
  --yellow:  #f4b400;

  /* A mesma rampa para TEXTO, escurecida.
     Motivo: no claro, o amarelo da maquete dá 1,85:1 sobre branco e o laranja
     2,35:1 — ilegível, e a própria maquete disfarçava usando um tom mais
     escuro cravado no style de cada número (#e4a600, #f36c00). Aqui isso vira
     token: MESMO matiz, luminosidade suficiente para ≥4,5:1 tanto sobre
     --panel quanto sobre a tinta pastel do selo (que é onde o texto de 9px
     do badge vive). Preenchimento continua com o hex da maquete: mudar a cor
     da fatia do gráfico seria mexer no desenho, não na legibilidade. */
  --purple-ink: #7c12e8;   /* 6,76:1 — já passava */
  --blue-ink:   #2864e8;   /* 5,15:1 — já passava */
  --green-ink:  #117f47;   /* 5,06:1 no branco · 4,52:1 na tinta verde */
  --orange-ink: #a75b00;   /* 5,07:1 · 4,55:1 */
  --yellow-ink: #8c6700;   /* 5,18:1 · 4,60:1 */
  --red-ink:    #da1b11;   /* 5,07:1 · 4,55:1 */

  /* semântica do Analisador (valores originais do index.html) */
  --accent:    #2563eb;
  --ok:        #0e9f57;
  --warn:      #b0790a;
  --bad:       #dc2626;
  --accent-bg: rgba(37, 99, 235, .10);
  --ok-bg:     rgba(14, 159, 87, .12);
  --warn-bg:   rgba(176, 121, 10, .12);
  --bad-bg:    rgba(220, 38, 38, .10);

  /* tintas pastel da maquete */
  --tint-violet: #f0e5ff;
  --tint-green:  #e4f7e9;
  --tint-blue:   #e8efff;
  --tint-orange: #fff0e4;
  --tint-yellow: #fff5dc;
  --tint-red:    #ffefef;

  /* barra lateral — gradiente da maquete */
  --sidebar-top:      #5413ad;
  --sidebar-bottom:   #311173;
  --sidebar-brand-bg: #fbfcfe;
  --sidebar-text:     #ffffff;
  --sidebar-border:   #dddddd;
  --sidebar-hairline: #9d78d7;
  --sidebar-active:   linear-gradient(90deg, #8b00f4, #7311db);

  --neutral: #8d94ad;   /* 3,01:1 sobre branco: fatia de rosca visível */

  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236d7292' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --search:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236d7292' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------- base compartilhada */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* Ícone do sprite (shared/icons.svg). Herda currentColor → segue o tema. */
.ic {
  width: 18px; height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ic-sm { width: 14px; height: 14px; }
.ic-lg { width: 22px; height: 22px; }

.hidden { display: none !important; }

/* Modal compartilhado (mesma mecânica do index.html: .show, não display inline) */
.modal {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0, 0, 0, .6);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.modal.show { display: flex; }
.modal-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 26px;
  width: 100%; max-width: 380px;
  box-shadow: var(--shadow);
}
.modal-card h2 { margin: 0 0 4px; font-size: 17px; }
.modal-card .field { margin: 12px 0; }
.modal-card .field label { display: block; color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.modal-card input {
  width: 100%; height: 36px; padding: 0 10px;
  background: var(--panel2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-ctrl);
  font-family: inherit; font-size: 14px;
}
.modal-card input:focus { outline: none; box-shadow: var(--ring); border-color: var(--purple); }
.modal-card .actions { display: flex; gap: 10px; align-items: center; margin-top: 16px; }
.modal-card .count { color: var(--muted); font-size: 12px; }

button.primary {
  height: 36px; padding: 0 16px;
  border: 0; border-radius: var(--r-ctrl);
  background: var(--purple); color: #fff;
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
}
button.primary:hover { filter: brightness(1.08); }
button.primary:focus-visible { outline: none; box-shadow: var(--ring); }

/* Respeita quem pediu menos movimento (TV de operação roda 24h). */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}