/* ============================================================
   TOKENS · Variáveis de design, reset e scrollbar
   ------------------------------------------------------------
   VERSÃO LIGHT — fundo cinza claro, texto escuro.
   Mantém os mesmos nomes de variáveis da versão dark para
   que todos os componentes funcionem sem alterações.
   ============================================================ */

:root {
  /* ----- Superfícies (do mais ténue para o mais saliente) -----
     --bg         → fundo geral da app (cinza claro)
     --surface    → cards, sidebar, topbar (branco puro)
     --surface-2  → hover, headers de tabela, áreas alternadas
     --surface-3  → chips/divisores mais saturados             */
  --bg:        #f1f3f5;
  --surface:   #ffffff;
  --surface-2: #f5f7fa;
  --surface-3: #e9edf2;

  /* ----- Linhas e separadores ----- */
  --line:      #d6dde5;
  --line-soft: #e6ebf0;

  /* ----- Texto (do mais legível para o mais ténue) ----- */
  --text:      #0f172a;
  --text-dim:  #475569;
  --text-mute: #94a3b8;

  /* ----- Cor primária Palbit (vermelho do logo oficial) ----- */
  --accent:      #ed1c2e;
  --accent-soft: #ed1c2e1a;   /* 10% alpha, usado em fundos light */
  --accent-2:    #c81526;     /* variante mais escura para texto inline */
  --accent-deep: #b01421;     /* variante escura para hover de btn-primary */

  /* ----- Cores semânticas (estado/feedback) ----- */
  --steel:    #5b7a9a;
  --ok:       #15803d;
  --ok-soft:  #15803d1f;
  --warn:     #b45309;
  --warn-soft:#b453091f;
  --err:      #b91c1c;
  --err-soft: #b91c1c1f;
  --info:     #0369a1;
  --info-soft:#0369a11f;

  /* ----- Forma e profundidade ----- */
  --radius:    10px;
  --radius-sm: 6px;
  --shadow:    0 2px 8px rgba(15, 23, 42, .06);
  --shadow-lg: 0 18px 50px rgba(15, 23, 42, .12);

  /* ----- Tipografia ----- */
  --mono: 'JetBrains Mono','Fira Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  /* ----- SVG: dropdown chevron usado nos <select> ----- */
  --select-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2394a3b8' stroke-width='1.5'><path d='M3 4.5L6 7.5L9 4.5'/></svg>");
}


/* ============================================================
   RESET MÍNIMO + base do documento
   ============================================================ */

* { box-sizing: border-box; }

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

a       { color: inherit; text-decoration: none; }
button  { font-family: inherit; cursor: pointer; }

/* Selects sempre flat (sem chevron nativo do SO) */
input, select, textarea { font-family: inherit; }
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}


/* ============================================================
   SCROLLBAR · estilo discreto, claro
   ============================================================ */

::-webkit-scrollbar          { width: 10px; height: 10px; }
::-webkit-scrollbar-track    { background: transparent; }
::-webkit-scrollbar-thumb    { background: var(--surface-3); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--line); }


/* ============================================================
   ANIMAÇÕES partilhadas
   ============================================================ */

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1);   }
}

/* Ponto pulsante usado em tags (live, em fila, etc.) */
.pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse 1.4s infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Anel giratório — usado em botões enquanto uma chamada síncrona está em curso
   (ex: pesquisa por linguagem natural, que pode chamar o Claude em tempo real). */
.spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  vertical-align: -2px;
}

/* Helper SVG: ícones inline herdam tamanho/stroke consistentes */
svg.ico {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke-width: 1.8;
}