/* ============================================================
   ProStruct — variáveis de marca
   Da medida ao projeto, com a conta à vista.

   Tudo offline: nenhuma fonte baixada, nenhum @import, nenhuma URL.
   Só fontes que já existem no aparelho.
   ============================================================ */

:root {
  /* ---------- SUPERFÍCIES ----------
     Papel primeiro. O produto entrega prancha, planilha e memorial:
     tudo que ele faz nasceu para ser lido em fundo branco, e o
     comprador usa o celular no sol da obra. */
  --ps-papel:        #ffffff;  /* superfície principal, prancha, tabela   */
  --ps-papel-2:      #f4f5f7;  /* cartão, faixa, linha alternada          */
  --ps-papel-3:      #e9ebee;  /* campo desabilitado, esqueleto de carga  */
  --ps-linha:        #d6d9de;  /* borda de tabela e de campo              */
  --ps-linha-forte:  #b4b9c0;  /* borda de foco secundária, régua         */

  /* Escuro: só para hero de marketing, cabeçalho e visualizador 3D.
     Grafite frio, não preto puro — laranja saturado sobre preto
     absoluto vibra na tela do celular. */
  --ps-grafite:      #0e1114;
  --ps-grafite-2:    #171b21;
  --ps-grafite-3:    #232931;
  --ps-linha-escura: #333b45;

  /* ---------- TINTA (texto e estrutura) ---------- */
  --ps-tinta:        #101418;  /* texto principal, traço da logo   18,8:1 */
  --ps-tinta-2:      #454d57;  /* texto secundário                  8,5:1 */
  --ps-tinta-3:      #6b737e;  /* legenda, unidade, placeholder     4,8:1 */
  --ps-tinta-clara:  #f2f4f6;  /* texto sobre grafite                     */
  --ps-tinta-clara-2:#a9b2bd;  /* texto secundário sobre grafite          */

  /* ---------- COTA (a cor de sinal) ----------
     Laranja de canteiro: colete, cone, fita. Fica sozinho no
     mercado de software técnico, que é todo azul.
     Regra: laranja marca a MEDIDA e a AÇÃO. Nunca é papel de parede. */
  --ps-cota:         #ea580c;  /* grafismo e preenchimento (3,3:1 no branco) */
  --ps-cota-texto:   #c2410c;  /* texto e ícone sobre claro       5,0:1 AA  */
  --ps-cota-clara:   #fb923c;  /* texto e ícone sobre grafite     8,4:1 AA  */
  --ps-cota-fundo:   #fff3ec;  /* realce suave, linha de destaque          */

  /* ---------- SEMÂNTICA DA PROVA ----------
     A marca vende conta conferível: os estados precisam de cor própria. */
  --ps-conferido:      #15803d;  /* passou na verificação de norma  5,0:1 */
  --ps-conferido-fundo:#eaf6ee;
  --ps-atencao:        #a16207;  /* premissa adotada, revisar       4,9:1 */
  --ps-atencao-fundo:  #fdf6e3;
  --ps-reprovado:      #b91c1c;  /* não atende, recalcular          6,5:1 */
  --ps-reprovado-fundo:#fdeeee;

  /* ---------- TIPOGRAFIA ----------
     Só fonte de sistema. Offline, zero requisição, e é a letra que
     o dono da fábrica já lê o dia inteiro no WhatsApp. */
  --ps-fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
              Arial, sans-serif;
  --ps-fonte-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono",
                   "SF Mono", Menlo, Consolas, monospace;

  /* Corpo em 17px: o usuário tem 45–60 anos e lê no celular, na obra. */
  --ps-t-corpo:    1.0625rem;  /* 17px */
  --ps-t-peq:      0.9375rem;  /* 15px — legenda, unidade */
  --ps-t-micro:    0.8125rem;  /* 13px — só rótulo de tabela, nunca frase */
  --ps-t-medio:    1.25rem;    /* 20px */
  --ps-t-grande:   1.625rem;   /* 26px */
  --ps-t-titulo:   2.25rem;    /* 36px */
  --ps-t-hero:     clamp(2rem, 6vw, 3.25rem);

  --ps-peso-normal: 400;
  --ps-peso-medio:  500;
  --ps-peso-forte:  600;   /* teto: o sistema não tem 700 confiável em todo aparelho */

  --ps-entrelinha:      1.5;
  --ps-entrelinha-curta:1.2;
  --ps-tracking-marca: -0.015em;  /* só no nome ProStruct */

  /* ---------- ESPAÇO E FORMA ---------- */
  --ps-e1: 4px;  --ps-e2: 8px;  --ps-e3: 12px; --ps-e4: 16px;
  --ps-e5: 24px; --ps-e6: 32px; --ps-e7: 48px; --ps-e8: 64px;

  --ps-raio:      6px;   /* concreto tem canto vivo, não bolha */
  --ps-raio-peq:  3px;
  --ps-raio-caixa:10px;

  --ps-alvo: 48px;       /* altura mínima de botão e campo: dedo, luva, sol */

  --ps-sombra:   0 1px 2px rgba(16,20,24,.08), 0 2px 8px rgba(16,20,24,.06);
  --ps-foco:     0 0 0 3px rgba(234,88,12,.45);
}

/* Fundo escuro: aplique .ps-escuro no elemento que troca de superfície. */
.ps-escuro {
  --ps-papel:       var(--ps-grafite);
  --ps-papel-2:     var(--ps-grafite-2);
  --ps-papel-3:     var(--ps-grafite-3);
  --ps-linha:       var(--ps-linha-escura);
  --ps-linha-forte: #4a5563;
  --ps-tinta:       var(--ps-tinta-clara);
  --ps-tinta-2:     var(--ps-tinta-clara-2);
  --ps-tinta-3:     #7d8896;
  --ps-cota-texto:  var(--ps-cota-clara);
  --ps-cota-fundo:  #2a1a10;
  --ps-conferido:   #4ade80;  --ps-conferido-fundo: #12251a;
  --ps-atencao:     #fbbf24;  --ps-atencao-fundo:   #2a2110;
  --ps-reprovado:   #f87171;  --ps-reprovado-fundo: #2b1414;
  color: var(--ps-tinta);
  background: var(--ps-papel);
}

/* ---------- BASE ---------- */
body {
  margin: 0;
  font-family: var(--ps-fonte);
  font-size: var(--ps-t-corpo);
  line-height: var(--ps-entrelinha);
  color: var(--ps-tinta);
  background: var(--ps-papel);
  -webkit-text-size-adjust: 100%;
}

/* ---------- NÚMERO ----------
   A marca é feita de números que precisam alinhar em coluna:
   quantidade, preço unitário, total, dia de cronograma.
   Algarismo tabular não é preciosismo, é leitura de planilha. */
.ps-num, table, input[type="number"], output {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.ps-num { letter-spacing: 0; }

/* Código de insumo, referência de norma, item SINAPI: monoespaçado,
   porque é para ser conferido caractere por caractere. */
.ps-cod { font-family: var(--ps-fonte-mono); font-size: 0.95em; }

/* ---------- ASSINATURA ---------- */
.ps-marca {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-weight: var(--ps-peso-forte);
  letter-spacing: var(--ps-tracking-marca);
  line-height: 1;
  color: var(--ps-tinta);
  text-decoration: none;
}
.ps-marca svg { flex: none; }             /* o símbolo nunca distorce */
.ps-marca-nome { font-size: 1.4em; }      /* nome inteiro numa cor só */
.ps-assinatura {
  color: var(--ps-tinta-2);
  font-size: var(--ps-t-peq);
  line-height: var(--ps-entrelinha-curta);
}

/* ---------- FOCO ---------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ps-cota);
  outline-offset: 2px;
  box-shadow: var(--ps-foco);
}