/* ==========================================================================
   MoMA — design tokens compartilhados (controlemoma + reunioesmoma)
   --------------------------------------------------------------------------
   Fonte única: /workspace/equipe-moma/design-tokens/tokens.css
   Cada app guarda uma CÓPIA IDÊNTICA em public/css/tokens.css, porque são
   deploys estáticos separados (não há origem comum para servir um só arquivo).
   Ao mudar um token: edite a fonte, copie para os dois apps, suba o CACHE do
   sw.js de cada um. Só custom properties aqui — nenhuma regra de componente.
   Contrastes (WCAG 2.1, calculados) estão em programador-visual.md.
   ========================================================================== */
:root {
  /* ---- Neutros (grafite com leve tom petróleo) ---- */
  --cor-fundo: #f3f5f6;          /* fundo da página (neutro claro) */
  --cor-superficie: #ffffff;     /* cartões, modais, tabelas */
  --cor-superficie-2: #f7f9fa;   /* cabeçalho de tabela, áreas secundárias */
  --cor-superficie-3: #eaeef0;   /* hover, trilhos, faixas */
  --cor-texto: #16242b;          /* 15,9:1 sobre branco */
  --cor-texto-2: #3b4d55;        /* 8,8:1 */
  --cor-texto-suave: #56666e;    /* 5,96:1 sobre branco; 5,45:1 sobre fundo */
  --cor-linha: #d3dade;          /* divisórias */
  --cor-linha-2: #e4e9eb;        /* divisórias leves */
  --cor-borda-campo: #7b8a91;    /* borda de campo: 3,57:1 (não-texto ≥3:1) */

  /* ---- Marca: azul-petróleo / grafite ---- */
  --cor-primaria: #0e4a57;       /* 9,8:1 com branco */
  --cor-primaria-forte: #0a3a45;
  --cor-primaria-suave: #e3eef0; /* fundo de destaque */
  --cor-primaria-linha: #9fc0c7;
  --cor-cabecalho: #15313b;      /* barra superior escura (sol: 13,7:1 c/ branco) */
  --cor-cabecalho-texto: #ffffff;
  --cor-cabecalho-texto-2: #c9d6db;

  /* ---- Acento único: âmbar (somente ações principais) ---- */
  --cor-acento: #f0a202;         /* fundo do botão principal */
  --cor-acento-hover: #d98e00;
  --cor-acento-borda: #b86e00;   /* 3,99:1 sobre branco (indicadores) */
  --cor-sobre-acento: #1b1f22;   /* texto sobre âmbar: 7,8:1 (hover 6,2:1) */

  /* ---- Estados semânticos ---- */
  --cor-ok: #146c3c;      --cor-ok-fundo: #e2f3e8;      /* 5,6:1 */
  --cor-alerta: #7a4a00;  --cor-alerta-fundo: #fdf0d4;  /* 6,6:1 */
  --cor-perigo: #a3201a;  --cor-perigo-fundo: #fde6e3;  /* 6,3:1; branco sobre perigo 7,6:1 */
  --cor-info: #0e4a57;    --cor-info-fundo: #e3eef0;
  --cor-toast: #1d2a30;   /* branco sobre toast 14,7:1 */

  /* ---- Foco ---- */
  --foco-anel: 0 0 0 3px rgba(14, 74, 87, .35);
  --foco-contorno: 2px solid #0e4a57;

  /* ---- Tipografia (somente fontes do sistema) ---- */
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --fonte-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --fs-base: 15px;        /* desktop; ≤640px/touch sobe para --fs-base-movel */
  --fs-base-movel: 16px;
  --fs-xs: .8rem;  --fs-sm: .875rem;  --fs-md: 1rem;  --fs-lg: 1.125rem;  --fs-xl: 1.375rem;  --fs-2xl: 1.75rem;
  --peso-normal: 400;  --peso-medio: 500;  --peso-forte: 600;  --peso-titulo: 700;
  --entrelinha: 1.5;

  /* ---- Espaços, raios, sombras, toque ---- */
  --esp-1: 4px;  --esp-2: 8px;  --esp-3: 12px;  --esp-4: 16px;  --esp-5: 24px;  --esp-6: 32px;
  --raio-sm: 6px;  --raio: 8px;  --raio-lg: 12px;  --raio-pilula: 999px;
  --sombra-1: 0 1px 2px rgba(22, 36, 43, .06), 0 1px 1px rgba(22, 36, 43, .04);
  --sombra-2: 0 4px 12px rgba(22, 36, 43, .10);
  --sombra-3: 0 12px 32px rgba(22, 36, 43, .22);
  --toque-min: 44px;      /* alvo de toque mínimo (WCAG 2.5.5 / HIG) */
  --transicao: 120ms ease;
}