/* Tokens e base do painel. Unico lugar onde a cor da marca e escrita. */

:root {
  /* Marca (decisao do DIA 3, ver CLAUDE.md "Identidade visual deste projeto") */
  --cor-primaria: #3387E9;
  --cor-primaria-escura: #1E6FD0;
  --cor-primaria-suave: color-mix(in srgb, var(--cor-primaria) 12%, #fff);

  /* Superficies e texto (tema light) */
  --branco: #fff;
  --fundo: #F5F7FA;
  --borda: #E5E7EB;
  --texto: #111827;
  --texto-suave: #374151;
  --texto-secundario: #4B5563;
  --texto-fraco: #6B7280;

  /* Estados */
  --verde: #16a34a;
  --verde-suave: #e6f6ec;
  --verde-escuro: #15803d;
  --perigo: #dc2626;

  /* Tipografia */
  --font: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-titulo: "Sora", "Inter", sans-serif;

  /* Forma */
  --raio: 12px;
  --raio-sm: 8px;
  --raio-lg: 18px;
  --raio-full: 999px;
  --sombra: 0 1px 2px rgba(17, 24, 39, .06), 0 1px 3px rgba(17, 24, 39, .08);
  --transicao: .15s ease;

  /* Espaco (Padrao_Espacamento_e_Respiro: fora respira mais que dentro) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  /* Chrome */
  --sidebar-width: 248px;
  --topbar-h: 58px;
}

*, *::before, *::after { box-sizing: border-box; }

/* hidden vence qualquer display de componente */
[hidden] { display: none !important; }

html, body { margin: 0; }

body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* CRITICO: sem isso, form vai pra Arial/-apple-system */
button, input, select, textarea { font-family: inherit; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-titulo);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--texto);
  line-height: 1.2;
  margin: 0;
}

a { color: var(--cor-primaria-escura); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--cor-primaria);
  outline-offset: 2px;
}

.icon { font-size: 1.1rem; line-height: 1; display: inline-flex; vertical-align: middle; }