/* =========================================================
   MONITORAX SITE — DESIGN TOKENS
   Espelhados do app interno para manter consistência visual.
   ========================================================= */

:root {
  /* === ESCALA AZUL (PRIMÁRIA) — alinhada à marca MonitoraX === */
  --azul-50:  #eaf5fd;
  --azul-100: #cfe7fa;
  --azul-200: #a6d2f5;
  --azul-300: #75b9ee;
  --azul-400: #4FB7E8;
  --azul-500: #2E86F0;
  --azul-600: #1E6FD9;
  --azul-700: #1559B6;
  --azul-800: #0F4490;
  --azul-900: #0B2F6A;
  --azul-950: #0B1726;

  /* === ESCALA VERDE (SECUNDÁRIA) — verde-lima da marca === */
  --verde-50:  #effbe5;
  --verde-100: #dcf6c2;
  --verde-200: #c2ee99;
  --verde-300: #a5e36c;
  --verde-400: #7ED957;
  --verde-500: #65C13F;
  --verde-600: #4FA83D;
  --verde-700: #3d8531;
  --verde-800: #2f6627;
  --verde-900: #1f4519;

  /* === 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 === */
  --cor-primaria:        var(--azul-500);
  --cor-primaria-hover:  var(--azul-600);
  --cor-primaria-suave:  var(--azul-50);

  --cor-secundaria:        var(--verde-400);
  --cor-secundaria-hover:  var(--verde-500);
  --cor-secundaria-suave:  var(--verde-50);

  --cor-fundo:           var(--branco);
  --cor-fundo-suave:     var(--cinza-50);
  --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);

  /* === STATUS === */
  --cor-sucesso: var(--verde-600);
  --cor-aviso:   #f59e0b;
  --cor-perigo:  #dc2626;
  --cor-info:    var(--azul-500);

  /* === MARCA === */
  --marca-azul:        var(--azul-400);
  --marca-azul-forte:  var(--azul-500);
  --marca-verde:       var(--verde-400);
  --marca-verde-forte: var(--verde-500);
  --marca-noite:       var(--azul-950);
  --marca-grad:        linear-gradient(180deg, var(--azul-400) 0%, var(--azul-500) 55%, var(--verde-400) 100%);
  --marca-grad-x:      linear-gradient(45deg, var(--verde-400) 0%, var(--azul-500) 55%, var(--azul-400) 100%);

  /* === 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;
  --espaco-16: 64px;
  --espaco-20: 80px;
  --espaco-24: 96px;

  /* === RAIO === */
  --raio-sm:   6px;
  --raio:      10px;
  --raio-lg:   14px;
  --raio-xl:   20px;
  --raio-2xl:  28px;
  --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: 16px;
  --tam-lg:   18px;
  --tam-xl:   20px;
  --tam-2xl:  24px;
  --tam-3xl:  30px;
  --tam-4xl:  36px;
  --tam-5xl:  48px;
  --tam-6xl:  60px;

  --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-xl:   0 20px 50px rgba(15, 23, 42, 0.14);
  --sombra-foco: 0 0 0 3px rgba(46, 134, 240, 0.22);

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

  /* === LAYOUT === */
  --container-max: 1200px;
  --container-pad: var(--espaco-6);
}