/* Controle de Obra e Empreita — tokens de design
   Fonte da verdade das cores e da tipografia. Ver docs/DESIGN.md. */

@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..900&display=swap");

:root {
  /* Marca */
  --azul: #16365C;        /* azul planta: principal */
  --azul-2: #1E4A7A;      /* azul de apoio: botões, links, abas */
  --trena: #F5C518;       /* amarelo trena: destaque. NUNCA como cor de texto sobre branco */
  --trena-escuro: #C9A000;

  /* Neutros */
  --grafite: #262B31;     /* texto */
  --suave: #4F5A66;       /* texto secundário */
  --papel: #EEF1F4;       /* fundo de tela */
  --branco: #FFFFFF;      /* cartões */
  --linha: #D3DAE2;       /* divisórias */
  --sobre-azul: #DCE6F1;  /* texto secundário sobre azul */

  /* Situação (sempre com ícone + palavra) */
  --ok: #2E7D4F;
  --ok-fundo: #E5F3EA;
  --atencao: #C9A000;
  --atencao-fundo: #FFF8DB;
  --erro: #B3261E;
  --erro-fundo: #FFF1F0;

  /* WhatsApp */
  --whats: #25D366;
  --whats-texto: #073B1C;

  /* Tipografia */
  --fonte: "Archivo", "Arial Narrow", Arial, Helvetica, sans-serif;
  --texto-base: 17px;
  --largura-titulo: 100;  /* font-variation-settings: "wdth" — era 118; o Murilo achou o app "esticado" (17/10/2026) */

  /* Medidas */
  --toque-min: 48px;
  --toque-acao: 56px;
  --raio-cartao: 14px;
  --raio-botao: 12px;
  --raio-chip: 999px;
  --espaco: 4px;          /* múltiplos de 4 */
}

html { font-family: var(--fonte); font-size: var(--texto-base); color: var(--grafite); background: var(--papel); }
h1, h2, h3 { font-weight: 800; font-variation-settings: "wdth" var(--largura-titulo); line-height: 1.1; }

.botao-principal {
  min-height: var(--toque-acao); padding: 0 24px; border: 0; border-radius: var(--raio-botao);
  background: var(--trena); color: var(--grafite); font: 800 18px/1 var(--fonte); cursor: pointer;
}
.botao-secundario {
  min-height: var(--toque-acao); padding: 0 24px; border: 2px solid var(--azul-2); border-radius: var(--raio-botao);
  background: var(--branco); color: var(--azul-2); font: 700 18px/1 var(--fonte); cursor: pointer;
}
:focus-visible { outline: 3px solid var(--trena); outline-offset: 2px; }