/* ==========================================================================
   Sistema visual "MoMA" — tokens v2 (controlemoma + reunioesmoma)
   --------------------------------------------------------------------------
   Proposta do Agente Design, 24/10/2026. Substitui design-tokens/tokens.css.
   • Estende os tokens v1: TODOS os nomes antigos (--cor-*, --fs-*, --esp-*,
     --raio-*, --sombra-*, --toque-min, --transicao…) continuam existindo,
     então o CSS atual dos dois apps não quebra ao trocar o arquivo.
   • Só custom properties + @font-face. Nenhuma regra de componente aqui
     (componentes: ver sistema-visual.md e os protótipos).
   • Contrastes WCAG 2.x calculados em ferramentas/contraste.py
     (saída em ferramentas/contraste-resultado.txt).
   • PADRÃO SELÀH (28/10/2026): cores da marca (manual p.11) mapeadas sobre os
     nomes v2 conforme design-propostas/selah (tabela v2 → Selàh). Cores de
     STATUS continuam as do v2 (a marca não define status). Contrastes:
     docs/contraste-selah.md (gerado por testes/selah/contraste-selah.py).
   • Fonte: Plus Jakarta Sans (SIL OFL 1.1), auto-hospedada, subconjunto latino
     (cobre todo o pt-BR), 400/500/600/700. Vonca NÃO entra na web (licença
     pendente): títulos também em Jakarta. CSP font-src 'self' já permite.
     Arquivos: public/fonts/plus-jakarta-sans-latin-{400,500,600,700}.woff2
   ========================================================================== */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* texto aparece já com a fonte do sistema; troca sem bloquear */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap; /* texto aparece já com a fonte do sistema; troca sem bloquear */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap; /* texto aparece já com a fonte do sistema; troca sem bloquear */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap; /* texto aparece já com a fonte do sistema; troca sem bloquear */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ======================= 0. MARCA SELÀH (manual p.11; tons da faixa p.11) ======================= */
  --selah-verde: #19323a; --selah-salmao: #d87464; --selah-areia: #e8e3dd; --selah-branco: #ffffff;
  --selah-verde-1: #102428; --selah-verde-2: #163438; --selah-verde-3: #244442; --selah-verde-4: #395b58;
  --selah-salmao-1: #a3423b;
  --selah-areia-1: #dbcfc1; --selah-areia-2: #e2dbd5; --selah-areia-3: #eae4df; --selah-areia-4: #f2eeeb;

  /* ======================= 1. NEUTROS (Selàh) ======================= */
  --cor-fundo: #e8e3dd;          /* Areia (v2 #e9edef). texto 10,56:1 · suave 5,86:1 */
  --cor-superficie: #ffffff;     /* cartões, folhas, tabelas */
  --cor-superficie-2: #f2eeeb;   /* areia 4: cabeçalho de tabela (texto 11,68:1 · suave 6,48:1) */
  --cor-superficie-3: #eae4df;   /* areia 3: hover, trilho de segmento, chip neutro */
  --cor-trilho: #eae4df;         /* areia 3: trilho de barra/progresso (areia 2 #e2dbd5 deixaria a barra de atraso em 2,91:1) */
  --cor-texto: #19323a;          /* Verde Profundo (v2 #16242b). 13,47:1 s/ branco · 10,56:1 s/ areia */
  --cor-texto-2: #244442;        /* verde 3: 10,60:1 · 8,31:1 */
  --cor-texto-suave: #395b58;    /* verde 4: 7,47:1 · 5,86:1 — mínimo para texto, nunca mais claro */
  --cor-linha: #dbcfc1;          /* areia 1: contorno de cartão/divisória (decorativo) */
  --cor-linha-2: #eae4df;        /* divisória interna leve */
  --cor-borda-campo: #74827f;    /* campo/controle: 4,01:1 s/ branco · 3,14:1 s/ areia (WCAG 1.4.11) */

  /* ======================= 2. MARCA (estrutura, não ação) ======================= */
  --cor-primaria: #19323a;       /* Verde Profundo: link, ícone ativo, foco (substitui o petróleo da v2). 13,47:1 */
  --cor-primaria-forte: #102428; /* verde 1 */
  --cor-primaria-suave: #dde6e4; /* indicador de navegação (protótipo Selàh). verde s/ ele 10,59:1 */
  --cor-primaria-linha: #a9bcb8; /* só decorativo */
  --cor-cabecalho: #19323a;      /* barra superior Verde Profundo. areia 10,56:1 */
  --cor-cabecalho-texto: #e8e3dd;   /* Areia (combinação oficial do logo, p.12) */
  --cor-cabecalho-texto-2: #dbcfc1; /* areia 1: 8,79:1 */

  /* ======================= 3. AÇÃO PRIMÁRIA: Verde (o âmbar sai) =======================
     Botão primário/FAB em Verde Profundo cheio, texto branco 13,47:1.
     Salmão NÃO é ação nem status: só acento (sublinhado da aba ativa, marcador). */
  --cor-acento: #19323a;         /* preenchimento do primário/FAB */
  --cor-acento-hover: #163438;   /* verde 2: branco 13,27:1 */
  --cor-acento-borda: #19323a;
  --cor-sobre-acento: #ffffff;   /* texto/ícone sobre o primário 13,47:1 */
  --cor-marca-acento: #d87464;   /* Salmão: só grafismo/indicador (3,18:1 s/ branco; reprovado como texto) */
  --cor-marca-acento-texto: #a3423b; /* salmão quando é texto: 4,84:1 s/ areia · 6,18:1 s/ branco */

  /* ======================= 4. SEMÂNTICAS (sempre com ícone + texto) ======================= */
  --cor-ok: #146c3c;      --cor-ok-fundo: #e2f3e8;      /* 5,62:1 · ícone s/ branco 6,48:1 */
  --cor-alerta: #7a4a00;  --cor-alerta-fundo: #fdf0d4;  /* 6,62:1 */
  --cor-alerta-borda: #b86e00;                          /* borda de KPI em alerta 3,99:1 */
  --cor-perigo: #a3201a;  --cor-perigo-fundo: #fde6e3;  /* 6,34:1 · branco s/ perigo 7,56:1 */
  --cor-info: #19323a;    --cor-info-fundo: #e8e3dd;    /* Verde sobre Areia (revisão Selàh 29/10, sai o petróleo) */
  --cor-neutro: #56666e;  --cor-neutro-fundo: #eaeef0;  /* 5,11:1 */
  --cor-toast: #102428;   /* verde 1: branco s/ toast 16,09:1 */

  /* Status de ação (reunioesmoma) e de sincronização → mesmos pares */
  --status-andamento-txt: var(--cor-info);    --status-andamento-fundo: var(--cor-info-fundo);
  --status-vencida-txt: var(--cor-perigo);    --status-vencida-fundo: var(--cor-perigo-fundo);
  --status-concluida-txt: var(--cor-ok);      --status-concluida-fundo: var(--cor-ok-fundo);
  --status-atraso-txt: var(--cor-alerta);     --status-atraso-fundo: var(--cor-alerta-fundo);
  --status-sem-txt: var(--cor-neutro);        --status-sem-fundo: var(--cor-neutro-fundo);
  /* Preenchimento de barra contra --cor-trilho #eae4df (≥ 3:1): andamento 10,69 · concluída 5,14 · vencida 6,00 · atraso 3,16 */
  --barra-andamento: #19323a; --barra-concluida: #146c3c; --barra-vencida: #a3201a; --barra-atraso: #b86e00;

  /* ======================= 5. FOCO ======================= */
  --foco-contorno: 2px solid #19323a;            /* 13,47:1 s/ branco · 10,56:1 s/ areia */
  --foco-anel: 0 0 0 3px rgba(25, 50, 58, .28);
  --foco-offset: 2px;

  /* ======================= 6. TIPOGRAFIA ======================= */
  --fonte: "Plus Jakarta Sans", Aptos, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* só para código/ID técnico */
  /* números: tabular + zero cortado (evita 0/O em placa, lote, CPF) */
  --fonte-numeros: "tnum" 1, "zero" 1;
  /* desambiguação Il1 em códigos de pavimento/lote: use só onde precisa */
  --fonte-codigo: "tnum" 1, "zero" 1, "ss02" 1;

  /* Escala de 6 tamanhos (passo ≈1,2) — nenhum texto abaixo de 12 px */
  --fs-12: 0.75rem;   --lh-12: 1rem;      /* rótulo de KPI, legenda, metadado */
  --fs-14: 0.875rem;  --lh-14: 1.25rem;   /* corpo denso (tabela desktop), ajuda, chip */
  --fs-16: 1rem;      --lh-16: 1.5rem;    /* corpo padrão, campo, botão */
  --fs-18: 1.125rem;  --lh-18: 1.5rem;    /* título de cartão/seção */
  --fs-22: 1.375rem;  --lh-22: 1.75rem;   /* título de página */
  --fs-28: 1.75rem;   --lh-28: 2.25rem;   /* valor de KPI (desktop) */
  --peso-normal: 400; --peso-medio: 500; --peso-forte: 600; --peso-titulo: 700;
  --tracking-rotulo: 0.02em;   /* rótulo 12 px; sem caixa-alta em frases */
  --tracking-titulo: 0;        /* Jakarta: sem tracking negativo */
  /* aliases v1 (mantidos) */
  --fs-base: 1rem;  --fs-base-movel: 1rem;
  --fs-xs: var(--fs-12); --fs-sm: var(--fs-14); --fs-md: var(--fs-16);
  --fs-lg: var(--fs-18); --fs-xl: var(--fs-22); --fs-2xl: var(--fs-28);
  --entrelinha: 1.5;

  /* ======================= 7. ESPAÇO (grid de 8 pt, meio-passo 4) ======================= */
  --esp-0: 0;  --esp-1: 4px;  --esp-2: 8px;  --esp-3: 12px;  --esp-4: 16px;
  --esp-5: 24px;  --esp-6: 32px;  --esp-7: 40px;  --esp-8: 48px;  --esp-9: 64px;
  --margem-tela-movel: 16px;  --margem-tela-desktop: 32px;
  --gap-cartoes-movel: 8px;   --gap-cartoes-desktop: 16px;
  --largura-max-conteudo: 1280px;

  /* ======================= 8. RAIOS ======================= */
  /* Raios de antes do Selàh (3ea6f60), a pedido do Guilherme em 29/10: cantos arredondados de volta;
     cores, fontes e o resto do Padrão Selàh ficam como estão */
  --raio-xs: 4px;      /* marcador, tag pequena */
  --raio-sm: 6px;      /* v1, mantido para não quebrar */
  --raio: 8px;         /* botão, campo, segmento */
  --raio-lg: 12px;     /* cartão, modal no desktop */
  --raio-xl: 16px;     /* FAB, bottom-sheet (cantos de cima) */
  --raio-pilula: 999px;/* chip de status, indicador de navegação */

  /* ======================= 9. ELEVAÇÃO ======================= */
  --sombra-0: none;                                                         /* cartão: borda, não sombra */
  --sombra-1: 0 1px 2px rgba(25, 50, 58, .08);                               /* cartão clicável em repouso */
  --sombra-2: 0 4px 12px rgba(25, 50, 58, .12);                              /* menu, barra inferior */
  --sombra-3: 0 12px 32px rgba(25, 50, 58, .24);                             /* modal, bottom-sheet */
  --sombra-fab: 0 6px 16px rgba(25, 50, 58, .28), 0 1px 3px rgba(25, 50, 58, .2);

  /* ======================= 10. TOQUE E LAYOUT ======================= */
  --toque-min: 44px;           /* mínimo absoluto (HIG / WCAG 2.5.5) */
  --toque-campo: 48px;         /* padrão de campo/botão no celular (luva) — Material 48dp */
  --altura-controle-desktop: 40px;
  --altura-controle-sm: 32px;  /* só desktop, ações de linha */
  --altura-cabecalho: 56px;
  --altura-nav-inferior: 64px; /* + env(safe-area-inset-bottom) — M3 Expressive */
  --nav-indicador-l: 56px;  --nav-indicador-a: 32px;
  --fab-tamanho: 56px;  --fab-margem: 16px;
  --reserva-fab: calc(var(--fab-tamanho) + 2 * var(--fab-margem)); /* 88px livres no fim da lista: o último item nunca fica atrás do FAB */
  --chip-altura: 28px;         /* celular; 24px no desktop */
  --breakpoint-movel: 720px;   /* referência (não dá para usar var() em @media) */

  /* ======================= 11. MOVIMENTO ======================= */
  --transicao: 120ms ease;
  --transicao-folha: 200ms cubic-bezier(.2, 0, 0, 1);
}

/* ==========================================================================
   MODO ALTO CONTRASTE ("modo sol")
   Ativado por: preferência do sistema (prefers-contrast: more) OU
   botão no app → <html data-contraste="alto"> (salvo em localStorage).
   Alvo: texto ≥ 7:1 (WCAG AAA 1.4.6), contornos ≥ 3:1, fundo branco puro,
   status em chip CHEIO (branco sobre cor ≥ 8,3:1), bordas de 2 px.
   ========================================================================== */
:root[data-contraste="alto"], [data-contraste="alto"] {  /* também vale num contêiner (vitrine) */
  --cor-fundo: #ffffff;
  --cor-superficie: #ffffff;
  --cor-superficie-2: #ffffff;
  --cor-superficie-3: #e2dbd5;
  --cor-texto: #0f1f24;          /* 16,91:1 */
  --cor-texto-2: #19323a;        /* 13,47:1 */
  --cor-texto-suave: #244442;    /* 10,60:1 */
  --cor-linha: #395b58;          /* 7,47:1 — cartão passa a ter contorno real */
  --cor-linha-2: #74827f;
  --cor-borda-campo: #244442;
  --cor-primaria: #19323a;       /* 13,47:1 */
  --cor-sobre-acento: #ffffff;   /* primário verde: 13,47:1 */
  --cor-acento-borda: #19323a;
  /* texto semântico sobre branco fica mais escuro (≥ 8,3:1)… */
  --cor-ok: #0f5a31;  --cor-alerta: #6b4100;  --cor-perigo: #8c1a15;  --cor-info: #19323a;  --cor-neutro: #3b4d55;
  /* …e o CHIP de status vira cheio: branco sobre a cor */
  --status-concluida-txt: #ffffff; --status-concluida-fundo: #0f5a31;   /* 8,31:1 */
  --status-atraso-txt: #ffffff;    --status-atraso-fundo: #6b4100;      /* 8,82:1 */
  --status-vencida-txt: #ffffff;   --status-vencida-fundo: #8c1a15;     /* 9,24:1 */
  --status-andamento-txt: #ffffff; --status-andamento-fundo: #19323a;   /* 13,47:1 */
  --status-sem-txt: #ffffff;       --status-sem-fundo: #3b4d55;         /* 8,83:1 */
  --peso-normal: 500;            /* traço mais grosso ao sol */
  --sombra-1: none; --sombra-2: none;
  --foco-contorno: 3px solid #000000;
}
@media (prefers-contrast: more) {
  :root:not([data-contraste="normal"]) {
    --cor-fundo: #ffffff; --cor-superficie-2: #ffffff; --cor-superficie-3: #e2dbd5;
    --cor-texto: #0f1f24; --cor-texto-2: #19323a; --cor-texto-suave: #244442;
    --cor-linha: #395b58; --cor-linha-2: #74827f; --cor-borda-campo: #244442;
    --cor-primaria: #19323a; --cor-sobre-acento: #ffffff; --cor-acento-borda: #19323a;
    --cor-ok: #0f5a31; --cor-alerta: #6b4100; --cor-perigo: #8c1a15; --cor-info: #19323a; --cor-neutro: #3b4d55;
    --status-concluida-txt: #fff; --status-concluida-fundo: #0f5a31; --status-atraso-txt: #fff; --status-atraso-fundo: #6b4100;
    --status-vencida-txt: #fff; --status-vencida-fundo: #8c1a15; --status-andamento-txt: #fff; --status-andamento-fundo: #19323a;
    --status-sem-txt: #fff; --status-sem-fundo: #3b4d55;
    --peso-normal: 500; --sombra-1: none; --sombra-2: none; --foco-contorno: 3px solid #000000;
  }
}
/* Movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  :root { --transicao: 0ms; --transicao-folha: 0ms; }
}