/* Fontes auto-hospedadas (fontsource, OFL). Cobertura pt-BR medida com fontTools em 2026-10-05:
   acentos e cedilha com glifo próprio (não apontam para o glifo base). Licenças em /assets/fonts/OFL-*.txt */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/montserrat-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/montserrat-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Montserrat Fallback";src:local("Arial");size-adjust:112%;ascent-override:85%;descent-override:22%}
@font-face{font-family:"IBM Plex Sans Fallback";src:local("Arial");size-adjust:100%;ascent-override:100%;descent-override:27%}

/*
  Thiago Makioszek, Engenheiro Civil — Design Tokens
  Origem: Manual_da_Marca_Thiago_Makioszek.pdf (lido como imagem, 6 páginas) + LOGOS/SVG (font-family
  confirmado no código). Arquétipo: institucional-corporativo. Direção de cor confirmada pelo
  operador: monocromático no grafite da marca, amarelo só como assinatura mínima.
  Ver design-system.md para as regras de uso de cada token (não usar valores "a olho").
*/

:root{
  /* ===== COR — papéis (ver design-system.md §2) ===== */
  /* Base clara (corpo do site — a maioria das seções) */
  --c-bg:            #F6F5F3;  /* fundo claro principal, "papel" aquecido (não branco clínico) */
  --c-surface:       #FFFFFF;  /* cartões/painéis elevados sobre --c-bg */
  --c-n200:          #ECEAE7;  /* painel/zebra suave, divisores leves */
  --c-n400:          #D9D9D9;  /* Cinza Claro oficial do manual — bordas, filetes, divisores */
  --c-n500:          #A8A6A3;  /* neutro médio — placeholder, ícone inativo, legendas de grade */

  /* Texto sobre claro */
  --c-text:          #242321;  /* texto principal sobre --c-bg/--c-surface (quase-preto grafite) */
  --c-muted:         #6B6966;  /* texto secundário sobre claro */

  /* Base escura (hero, header fixo, rodapé — "casa" preferencial da logo) */
  --c-dark:          #211F1D;  /* grafite escuríssimo — fundo de hero/header/footer, texto sobre claro quando precisa de um "escuro" */
  --c-dark-surface:  #322F2C;  /* elevação sobre --c-dark (cards, inputs, divisores em seção escura) */
  --c-white:         #FFFFFF;  /* texto sobre --c-dark e sobre --c-primary quando ele for usado como bloco escuro */

  /* Marca */
  --c-primary:       #666463;  /* Grafite Principal (oficial do manual) — blocos estruturais, botão primário, headers de tabela */
  --c-primary-dark:  #4A4846;  /* grafite mais escuro — hover/pressed do primário, 2ª elevação sobre --c-dark */
  --c-accent:        #F2C230;  /* Amarelo Ouro (oficial) — SÓ assinatura mínima: ícone, filete, número, palavra-chave, estado ativo */
  --c-accent-ink:    #8A6A12;  /* amarelo escurecido — texto/ícone em amarelo sobre fundo claro quando precisa de contraste AA (nunca o amarelo puro em texto pequeno sobre --c-bg) */

  /* Estados */
  --c-success:       #4C7A5E;
  --c-error:         #A3453A;

  /* ===== TIPOGRAFIA (ver §3) ===== */
  --font-display: "Montserrat", "Montserrat Fallback", -apple-system, sans-serif; /* rastreável ao wordmark da logo (font-family confirmado no SVG oficial) */
  --font-body:    "IBM Plex Sans", "IBM Plex Sans Fallback", -apple-system, sans-serif; /* par técnico/institucional — ver justificativa §3 */

  /* escala — contida (institucional-corporativo), não expressiva/gigante */
  --fs-eyebrow:  clamp(0.72rem, 0.68rem + 0.2vw, 0.8rem);
  --fs-small:    clamp(0.82rem, 0.8rem + 0.1vw, 0.9rem);
  --fs-body:     clamp(1rem, 0.97rem + 0.15vw, 1.1rem);
  --fs-lead:     clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
  --fs-h3:       clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem);
  --fs-h2:       clamp(1.9rem, 1.5rem + 1.8vw, 2.75rem);
  --fs-h1:       clamp(2.4rem, 1.8rem + 3vw, 4.2rem);
  --fs-stat:     clamp(2.2rem, 1.6rem + 2.6vw, 3.6rem); /* números/stats de prova */

  --lh-tight: 1.08;
  --lh-heading: 1.18;
  --lh-body: 1.6;
  --tracking-eyebrow: var(--tracking-label);
  /* rótulo em caixa alta = eco do subtítulo "ENGENHEIRO CIVIL" do logo (Montserrat, tracking .2em medido no SVG oficial) */
  --font-label: var(--font-display);
  --weight-label: 600;
  --tracking-label: 0.2em;
  --tracking-h1: -0.01em;
  --weight-display-strong: 700;
  --weight-display-medium: 600;
  --weight-body-regular: 400;
  --weight-body-medium: 500;

  /* ===== ESPAÇO, GRID, RAIO, SOMBRA (ver §4) ===== */
  --container: 1200px;
  --px: clamp(20px, 5vw, 64px);
  --section-y: clamp(72px, 10vw, 140px); /* respiro generoso entre seções — arquétipo sóbrio */
  --gap-sm: 12px;
  --gap-md: 24px;
  --gap-lg: 48px;

  --r-sm: 4px;   /* inputs, badges pequenos — raio contido, não "app fofo" */
  --r-md: 10px;  /* cards, botões, imagens */
  --r-pill: 999px; /* pílulas/eyebrow/tag */

  --shadow-sm: 0 1px 2px rgba(20,18,16,0.07), 0 1px 1px rgba(20,18,16,0.04);
  --shadow-md: 0 16px 40px rgba(20,18,16,0.12), 0 4px 12px rgba(20,18,16,0.06);
  --photo-mask: color-mix(in srgb, var(--c-dark) 16%, transparent); /* foto real em COR: máscara leve de preto (preferência do usuário); duotone só quando a foto é fundo de texto */

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-fast: 160ms;
  --dur-base: 320ms;
  --dur-slow: 560ms;

  /* ===== SISTEMA GRÁFICO DA MARCA (DS "Sistema gráfico da marca") ===== */
  /* ângulo do chanfro do "C" medido no vetor (LOGOS EM SVG-05): terminal inferior 45,0°, superior 46,0° -> 45°.
     Com 45° o corte anda o mesmo tanto em x e em y: um único comprimento (--chanfro) define o chanfro. */
  --chanfro-ang: 45deg;
  --chanfro: clamp(12px, 1.3vw, 20px);
  --chanfro-sm: 8px;
  /* quadrado vazado do símbolo: lado 38% do C, traço 8,3% do lado; em marcador pequeno o traço vai a 1.5px (legível) */
  --quadro: 9px;
  --quadro-traco: 1.5px;
  /* pattern e símbolo: arquivos de 1 cor usados como MÁSCARA, a cor vem sempre de token */
  --pt-url: url("/assets/img/marca/pattern-simbolo.svg?v=3");
  --pt-size: 56px;
  --simbolo-url: url("/assets/img/marca/simbolo.svg?v=3");

  /* ajuste etapa 6: o lockup da logo é vertical (~1,95:1); com o mínimo de 120px de largura do manual ele pede ~64px de altura */
  --header-h: 96px;
  --header-h-scrolled: 80px;
}