/* =========================================================================
   MAGICON ENGENHARIA E CONSTRUÇÃO CIVIL — DESIGN TOKENS
   Origem: marca real (Marca/Magicon) — cores extraídas por pixel da logo
   oficial (#394E4B e #DE6D3B); direção MONOCROMÁTICA no verde-ardósia,
   confirmada pelo operador em 2026-10-05 (laranja só em dose de assinatura).
   Arquétipo: revista-assimetrico (narrativa problema). Ver design-system.md.
   ========================================================================= */

:root{
  /* ---------- 1. COR — papéis ---------- */
  /* Fundo / superfícies (claro, respirado, tingido na matiz da marca — NUNCA cinza neutro de catálogo) */
  --c-bg:            #F5F6F3;   /* fundo padrão de página — ardósia a 3% */
  --c-surface:       #FFFFFF;   /* cards, inputs, blocos elevados sobre --c-bg */
  --c-surface-2:     #ECEFEA;   /* superfície secundária (zebra, faixa, footer claro) */

  /* Texto */
  --c-text:          #1E2624;   /* texto principal — quase-preto tingido de ardósia, NUNCA #000 puro */
  --c-muted:         #5B6B68;   /* texto secundário / legenda / metadado */
  --c-white:         #FFFFFF;   /* texto sobre fundo escuro (hero, footer, cards dark) */
  --c-dark:          #16201E;   /* fundo escuro real (hero overlay, footer, seção de prova) — não é --c-primary */

  /* Marca */
  --c-primary:       #394E4B;   /* verde-ardósia da logo — cor dominante: header, CTA sólido, títulos de destaque */
  --c-primary-dark:  #232F2D;   /* hover/active do primary; também usado como 2º tom do gradiente de overlay no hero */
  --c-accent:        #DE6D3B;   /* laranja da logo — SÓ dose de assinatura (nunca bloco/fundo de seção) */
  --c-accent-dark:   #B8542A;   /* hover do acento quando usado em link/ícone interativo */

  /* Estados */
  --c-success:       #3F7A5C;
  --c-error:         #B3463C;
  --c-focus:         #DE6D3B;   /* outline de foco usa o acento — único lugar de acento "funcional" */

  /* Neutros (escala derivada da MATIZ do primary, não cinza de catálogo) */
  --c-n200:          #DFE3E0;   /* hairline, borda de card, divisor */
  --c-n300:          #C7CDC9;   /* borda de input, separador mais visível */
  --c-n400:          #9AA6A2;   /* ícone secundário, placeholder, grafismo decorativo */
  --c-n500:          #6B7875;   /* texto terciário sobre --c-surface (nunca sobre --c-bg em corpo de texto) */

  /* ---------- 2. TIPOGRAFIA — par deliberado pelo arquétipo revista-assimétrico ---------- */
  /* Display expressiva (headline gigante, atitude de capa de revista) — NÃO é a fonte da marca;
     escolhida pelo conteúdo (construção civil → "Bricolage" = ofício manual/construção) */
  --font-display: "Bricolage Grotesque", "Arial Black", sans-serif;
  /* Corpo — Montserrat é a fonte OFICIAL da marca (Marca/Magicon/fontes/) */
  --font-body: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  --fw-display-regular: 600;
  --fw-display-bold: 800;
  --fw-body-regular: 400;
  --fw-body-medium: 500;
  --fw-body-semibold: 600;

  /* Escala tipográfica — expressiva/contida conforme o papel (revista-assimétrico pede contraste de escala) */
  --fs-display-xl: clamp(3rem, 2.1rem + 4.2vw, 6.25rem);   /* H1 hero — "gigante" */
  --fs-display-lg: clamp(2.25rem, 1.7rem + 2.6vw, 4rem);   /* H2 de seção */
  --fs-display-md: clamp(1.625rem, 1.4rem + 1.1vw, 2.25rem); /* H3 / título de card grande */
  --fs-display-sm: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);  /* H4 / título de card pequeno */
  --fs-eyebrow:    0.8125rem;  /* etiqueta acima do título — caixa alta, tracking largo */
  --fs-body-lg:    1.1875rem; /* lead/intro */
  --fs-body:       1.0625rem; /* corpo padrão */
  --fs-body-sm:    0.9375rem; /* legenda, meta de card */
  --fs-small:      0.8125rem; /* rodapé, fine print */

  --lh-display: 1.04;
  --lh-heading: 1.15;
  --lh-body: 1.62;
  --ls-eyebrow: 0.14em;
  --ls-display: -0.01em;

  /* ---------- 3. ESPAÇO / GRID / RAIO / SOMBRA ---------- */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2.25rem;
  --sp-5: 3.5rem;
  --sp-6: 5rem;
  --sp-7: 7.5rem;    /* respiro entre seções (desktop) */
  --sp-8: 10rem;     /* respiro de seção "assinatura" / hero */

  --container: 1280px;
  --container-wide: 1440px; /* usado só no bento/interstício assimétrico do hero e galeria */
  --px: clamp(1.25rem, 5vw, 4rem);

  --r-sm: 4px;      /* botões, inputs, badges — quina quase reta, ecoa o corte facetado da logo */
  --r-md: 2px;      /* cards e imagens usam "chanfro" (clip-path), não raio — ver seção 6 */
  --r-lg: 0px;      /* blocos full-bleed e molduras do bento: sempre retos */
  --r-pill: 999px;  /* CTA principal e eyebrow/badge — único lugar redondo */

  --shadow-sm: 0 1px 2px rgba(22,32,30,0.06), 0 1px 1px rgba(22,32,30,0.04);
  --shadow-md: 0 12px 28px rgba(22,32,30,0.12), 0 2px 8px rgba(22,32,30,0.06);
  --shadow-lg: 0 24px 56px rgba(22,32,30,0.18);

  --ease: cubic-bezier(.16,1,.3,1);
  --dur-fast: 180ms;
  --dur-base: 420ms;
  --dur-slow: 820ms;

  --header-h: 92px;
  --header-h-scrolled: 72px;

  /* ---------- 4. MARCA — facetas, pattern, rótulos (ajuste de marca, 2026-10-05) ---------- */
  /* Ângulo das facetas medido no vetor do símbolo (LOGOTIPO_CURVAS_SIMBOLO / magicon-simbolo-color.svg):
     faces grandes 20,3°, faces pequenas 18,9°, topo dos pilares 22,8° → padrão 20°.
     Todo corte/chanfro/inclinação da interface usa ESTE ângulo (nunca 45°). */
  --facet-angle: 20deg;
  --facet-cot: 2.747;          /* 1/tan(20°): avanço horizontal do chanfro = queda vertical × 2.747 */
  --facet-tan: 0.364;          /* tan(20°): queda vertical = largura × 0.364 */
  /* Pattern oficial (monograma "M" empilhado, extraído de vetor/PATTERN _TEXTURAS.pdf, pág. 3):
     tile SVG de 1 cor usado como MÁSCARA; a cor vem do token via background-color. */
  --pt-url: url("/assets/img/marca/pattern-monograma.svg");
  --pt-size: 40px;             /* largura do tile na tela (altura proporcional, 44.35:117.05) */
  /* Rótulos em Montserrat caixa alta com tracking aberto, como o subtítulo do logotipo */
  --ls-label: 0.2em;
}