/* =========================================================
   MONITORAX — DESIGN TOKENS
   Variáveis globais. Trocar uma cor aqui muda o sistema todo.
   ========================================================= */

:root {
  /* === ESCALA AZUL (PRIMÁRIA) === */
  --azul-50:  #eff6ff;
  --azul-100: #dbeafe;
  --azul-200: #bfdbfe;
  --azul-300: #93c5fd;
  --azul-400: #60a5fa;
  --azul-500: #3b82f6;
  --azul-600: #2563eb;  /* azul forte moderno — destaque principal */
  --azul-700: #1d4ed8;
  --azul-800: #1e40af;
  --azul-900: #1e3a8a;
  --azul-950: #172554;

  /* === MONOCROMÁTICOS === */
  --branco:    #ffffff;
  --cinza-50:  #f8fafc;
  --cinza-100: #f1f5f9;
  --cinza-200: #e2e8f0;
  --cinza-300: #cbd5e1;
  --cinza-400: #94a3b8;
  --cinza-500: #64748b;
  --cinza-600: #475569;
  --cinza-700: #334155;
  --cinza-800: #1e293b;
  --cinza-900: #0f172a;
  --preto:     #000000;

  /* === CORES SEMÂNTICAS — usar essas dentro dos componentes === */
  --cor-primaria:        var(--azul-600);
  --cor-primaria-hover:  var(--azul-700);
  --cor-primaria-suave:  var(--azul-50);

  --cor-fundo:           var(--cinza-50);
  --cor-fundo-suave:     var(--cinza-100);
  --cor-superficie:      var(--branco);
  --cor-borda:           var(--cinza-200);
  --cor-borda-forte:     var(--cinza-300);

  --cor-texto:           var(--cinza-900);
  --cor-texto-suave:     var(--cinza-600);
  --cor-texto-fraco:     var(--cinza-400);
  --cor-texto-invertido: var(--branco);

  /* === CORES DE STATUS === */
  --cor-sucesso: #16a34a;
  --cor-aviso:   #f59e0b;
  --cor-perigo:  #dc2626;
  --cor-info:    var(--azul-600);
  --cor-roxo:    #8b5cf6;
  --cor-amarelo: #eab308;

  /* === ESPAÇAMENTO === */
  --espaco-1:  4px;
  --espaco-2:  8px;
  --espaco-3:  12px;
  --espaco-4:  16px;
  --espaco-5:  20px;
  --espaco-6:  24px;
  --espaco-8:  32px;
  --espaco-10: 40px;
  --espaco-12: 48px;

  /* === RAIO DE BORDA === */
  --raio-sm:   6px;
  --raio:      10px;
  --raio-lg:   14px;
  --raio-xl:   20px;
  --raio-pill: 999px;

  /* === TIPOGRAFIA === */
  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
           "Helvetica Neue", Arial, sans-serif;
  --fonte-mono: "JetBrains Mono", "SF Mono", Consolas, monospace;

  --tam-xs:   12px;
  --tam-sm:   13px;
  --tam-md:   14px;
  --tam-base: 15px;
  --tam-lg:   17px;
  --tam-xl:   20px;
  --tam-2xl:  24px;
  --tam-3xl:  30px;
  --tam-4xl:  36px;

  --peso-regular: 400;
  --peso-medio:   500;
  --peso-semi:    600;
  --peso-bold:    700;

  /* === SOMBRAS === */
  --sombra-sm:   0 1px 2px rgba(15, 23, 42, 0.04);
  --sombra:      0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --sombra-md:   0 4px 12px rgba(15, 23, 42, 0.08);
  --sombra-lg:   0 10px 25px rgba(15, 23, 42, 0.10);
  --sombra-foco: 0 0 0 3px rgba(37, 99, 235, 0.18);

  /* === TRANSIÇÕES === */
  --transicao-rapida: 120ms ease;
  --transicao:        180ms ease;
}