/*
 * Lactus design tokens for the web (site and Expo web panel).
 * Source of truth: brand/tokens.json. Keep both files in sync and run
 * `node brand/verificar-contraste.mjs` after changing any color.
 */
:root {
  /* Brand */
  --cor-azul-escuro: #0B3C5D;
  --cor-azul-claro: #378CCC;      /* icons, borders, large text only (3.63:1 on white) */
  --cor-branco: #FFFFFF;

  /* Derived */
  --cor-azul-claro-texto: #2A73AD; /* links and small text in light blue */
  --cor-azul-profundo: #072A41;
  --cor-azul-claro-fundo: #E6F1FA;

  /* Neutrals */
  --cor-cinza-50: #F4F7FA;
  --cor-cinza-100: #E8EEF3;
  --cor-cinza-200: #D3DDE5;
  --cor-cinza-300: #B3C1CC;
  --cor-cinza-400: #8A9BA8;       /* not for text */
  --cor-cinza-500: #5B6C7D;
  --cor-cinza-600: #4D5E6E;
  --cor-cinza-700: #3A4856;
  --cor-cinza-800: #26323D;
  --cor-cinza-900: #151E26;

  /* States */
  --cor-ok: #2F9E5B;              /* dots and icons, not text */
  --cor-ok-texto: #1F7A45;
  --cor-ok-fundo: #E3F4EA;
  --cor-atencao: #F6C445;         /* background only, with --cor-azul-escuro text */
  --cor-atencao-texto: #7A5200;
  --cor-atencao-fundo: #FDF3D6;
  --cor-alarme: #E5484D;          /* dots, icons, chart limit line */
  --cor-alarme-texto: #B42328;
  --cor-alarme-fundo: #FDE8E8;

  /* Semantic aliases */
  --cor-fundo: var(--cor-cinza-50);
  --cor-superficie: var(--cor-branco);
  --cor-borda: var(--cor-cinza-200);
  --cor-texto: var(--cor-azul-escuro);
  --cor-texto-secundario: var(--cor-cinza-500);
  --cor-link: var(--cor-azul-claro-texto);
  --cor-primaria: var(--cor-azul-escuro);
  --cor-primaria-pressionada: var(--cor-azul-profundo);

  /* Typography (Clayful is only inside the logo images) */
  --fonte-texto: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-tamanho-legenda: 0.875rem;  /* 14px */
  --fonte-tamanho-base: 1.0625rem;    /* 17px */
  --fonte-tamanho-destaque: 1.25rem;  /* 20px */
  --fonte-tamanho-titulo: 1.5rem;     /* 24px */
  --fonte-tamanho-titulo-grande: 2rem;/* 32px */
  --fonte-tamanho-leitura: 3rem;      /* 48px, tank temperature */
  --fonte-altura-linha: 1.45;

  /* Spacing, radius, touch */
  --espaco-1: 4px;
  --espaco-2: 8px;
  --espaco-3: 12px;
  --espaco-4: 16px;
  --espaco-5: 24px;
  --espaco-6: 32px;
  --espaco-7: 48px;
  --raio-pequeno: 6px;
  --raio-medio: 12px;
  --raio-grande: 20px;
  --raio-pilula: 999px;
  --toque-alvo-minimo: 48px;
  --toque-botao-principal: 56px;
}