/*
 * Design tokens - Ponto Engenharia
 * Fonte: Manual de Identidade Visual v1 (out/2026) + docs/plano-desenvolvimento.md secao 4.
 * Itens marcados PROPOSTA ainda precisam de validacao com o cliente.
 */

/* Fontes self-hosted (subset latin, cobre acentos do pt-BR) */
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/outfit-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/outfit-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

:root {
  /* Cores da marca */
  --azul-ponto: #00234F;
  --laranja-ponto: #F26522;
  --branco: #FFFFFF;
  --fundo-alt: #F3F5F8;
  --concreto: #E3E8EE;
  --linha: #D5DCE5;
  --texto-suave: #5B6B80;
  --texto-suave-escuro: #A9B6C7;
  --laranja-texto: #C2470D;
  --destaque-fundo: #FDE6D9;
  --inverso: var(--azul-ponto);
  /* Borda de componente (chip, campo) com 3,4:1 sobre branco (WCAG 1.4.11) */
  --linha-forte: #7D8CA0;
  /* Tracos e malha sobre o azul (secoes escuras) */
  --linha-escura: rgba(255, 255, 255, .16);
  --malha-escura: rgba(255, 255, 255, .05);
  --malha-clara: rgba(0, 35, 79, .05);

  /* PROPOSTA: cor de erro (6,5:1 sobre branco) */
  --erro: #B42318;
  --erro-fundo: #FEF3F2;

  /* Cores semanticas (trocadas na secao inversa) */
  --cor-texto: var(--azul-ponto);
  --cor-texto-suave: var(--texto-suave);
  --cor-chapeu: var(--laranja-texto);
  --cor-fundo: var(--branco);
  --cor-moldura: var(--azul-ponto);
  /* Foco: laranja-texto em fundo claro (>= 4,5:1); laranja-ponto no azul (4,9:1) */
  --cor-foco: var(--laranja-texto);

  /* Tipografia */
  --fonte-base: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fonte-dado: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* PROPOSTA: escala mobile (padrao, mobile-first) */
  --display-tam: 36px;   --display-ent: 40px;
  --titulo-1-tam: 30px;  --titulo-1-ent: 36px;
  --titulo-2-tam: 24px;  --titulo-2-ent: 30px;
  --titulo-3-tam: 20px;  --titulo-3-ent: 28px;
  --corpo-tam: 17px;     --corpo-ent: 28px;
  --pequeno-tam: 14px;   --pequeno-ent: 22px;
  --chapeu-tam: 13px;    --chapeu-ent: 16px;  --chapeu-esp: 0.24em;
  --dado-tam: 14px;      --dado-ent: 20px;

  /* Espaco */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Raios e tracos */
  --radius-sm: 4px;
  --radius-md: 8px;
  --traco-moldura: 2px;
  --traco-fino: 1px;

  /* Layout */
  --largura-max: 1200px;
  --largura-leitura: 680px;
  --gutter: var(--space-4);
  --secao-pad: var(--space-16);
  --toque-min: 44px;
}

/* Escala desktop (manual) */
@media (min-width: 900px) {
  :root {
    --display-tam: 56px;   --display-ent: 62px;
    --titulo-1-tam: 44px;  --titulo-1-ent: 50px;
    --titulo-2-tam: 28px;  --titulo-2-ent: 34px;
    --gutter: var(--space-8);
    --secao-pad: var(--space-20);
  }
}