/**
 * INCUBALOG — Design tokens (identidade Vibra Foods)
 * Fonte única de cores, tipografia, espaçamento e movimento da PWA de campo.
 * Tema escuro por regra de marca E por função: uso noturno, baixa luz.
 */

@import url("https://fonts.googleapis.com/css2?family=Ubuntu+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800&display=swap");

:root {
  /* ── Marca Vibra ─────────────────────────────────────── */
  --verde-vibra: #2dd1a9;
  --verde-escuro: #004349;
  --verde-brasil: #01bb31;
  --verde-citrico: #c7eb2e;
  --offwhite: #eff0e6;
  --cinza-30: #bcbec0;

  /* ── Superfícies (derivadas do verde-escuro da marca) ── */
  --fundo: #00343a;            /* página */
  --superficie: #004349;       /* cards e painéis */
  --superficie-alta: #015059;  /* inputs, elementos elevados */
  --borda: rgba(239, 240, 230, 0.14);
  --borda-forte: rgba(239, 240, 230, 0.30);

  /* ── Texto ───────────────────────────────────────────── */
  --texto: #ffffff;
  --texto-suave: rgba(239, 240, 230, 0.75);
  --texto-fraco: rgba(239, 240, 230, 0.55);

  /* ── Semântica de alerta (AA sobre #004349) ───────────
     Cor nunca é o único diferenciador: cada nível tem
     ícone próprio, espessura de borda e rótulo textual. */
  --normal: #2dd1a9;
  --normal-tonal: rgba(45, 209, 169, 0.10);
  --atencao: #ffc24b;
  --atencao-tonal: rgba(255, 194, 75, 0.12);
  --tendencia: #ff9b54;
  --tendencia-tonal: rgba(255, 155, 84, 0.14);
  --critico: #ff6b5e;
  --critico-tonal: rgba(255, 107, 94, 0.16);
  --vazio: #bcbec0; /* variável não capturada: neutro, não é erro */

  /* ── Tipografia (Ubuntu Sans — alternativa oficial Vibra) ── */
  --fonte: "Ubuntu Sans", system-ui, -apple-system, Roboto, sans-serif;
  --fs-corpo: 1rem;        /* 16px */
  --fs-rotulo: 0.875rem;   /* 14px — mínimo absoluto da interface */
  --fs-titulo: 1.25rem;    /* 20px */
  --fs-destaque: 1.5rem;   /* 24px */
  --fs-valor: 2.25rem;     /* 36px — valor numérico das leituras */
  --fs-valor-critico: 2.5rem; /* crítico pesa mais */

  /* ── Espaçamento ─────────────────────────────────────── */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 20px;
  --esp-6: 24px;
  --esp-8: 32px;

  /* ── Raios e sombras ─────────────────────────────────── */
  --raio: 14px;
  --raio-g: 18px;
  --sombra: 0 2px 6px rgba(0, 20, 22, 0.35);
  --sombra-alta: 0 6px 20px rgba(0, 20, 22, 0.45);

  /* ── Alvos de toque (uso com luvas) ──────────────────── */
  --toque: 56px;
  --toque-primario: 64px;

  /* ── Movimento ───────────────────────────────────────── */
  --t-rapido: 150ms;
  --t-medio: 200ms;
  --t-lento: 250ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ── Safe areas Android ──────────────────────────────── */
  --safe-topo: env(safe-area-inset-top, 0px);
  --safe-base: env(safe-area-inset-bottom, 0px);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-rapido: 0ms;
    --t-medio: 0ms;
    --t-lento: 0ms;
  }
}