/* ============================================================
   tokens.css — TOPOGRAFIA PIRITUBA
   Modo referência: identidade do próprio cliente, modernizada.

   Cores tiradas do site atual (topografiapirituba.com):
     laranja do selo      #F68204  (amostrado do logotipo)
     cinza do selo        #B3B4B5  (amostrado do logotipo)
     azul-petróleo fundo  #19526B  (amostrado do fundo da página)
     preto das letras     #111111
   Refinos: o laranja ganhou um tom escuro (#A85400) para texto
   sobre branco (contraste AA); o petróleo ganhou um tom mais
   profundo para o hero e o rodapé.

   Tipografia: o site atual usa Playfair Display + Open Sans do
   Google Sites. Trocadas por Archivo (títulos, desenho técnico,
   de engenharia) + Inter (texto), ambas gratuitas.
   ============================================================ */

:root {
  color-scheme: light;

  /* --- marca --- */
  --laranja:        #F68204;
  --laranja-hover:  #FF9426;
  --laranja-texto:  #A85400;   /* laranja legível sobre branco */
  --laranja-soft:   #FEF0E1;
  --petroleo:       #19526B;
  --petroleo-fundo: #0E3445;
  --petroleo-soft:  #E7F0F4;
  --selo:           #B3B4B5;

  --primary:        #F68204;
  --primary-hover:  #FF9426;
  --primary-soft:   #FEF0E1;
  --primary-tint:   #FFF8F0;
  --on-primary:     #111111;

  --accent:         #19526B;
  --accent-soft:    #E7F0F4;

  --ink:            #111111;
  --body:           #33393D;
  --muted:          #5A6368;
  --muted-soft:     #8A9297;

  --canvas:         #ffffff;
  --surface:        #F4F6F7;
  --surface-card:   #ffffff;
  --border:         #E2E6E8;
  --border-strong:  #C9D0D3;

  --footer-bg:      #0E3445;
  --footer-fg:      #ffffff;
  --header-bg:      rgba(255, 255, 255, .96);
  --header-bg-scrolled: rgba(255, 255, 255, .94);
  --focus:          #19526B;

  /* --- tipografia --- */
  --font-display: 'Archivo', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fs-body:  16px;
  --fs-lead:  18px;
  --fs-h1:    clamp(2.35rem, 1.3rem + 4.2vw, 4.6rem);
  --fs-h2:    clamp(1.85rem, 1.25rem + 2.4vw, 3rem);
  --fs-h3:    1.2rem;
  --fs-h4:    1.05rem;
  --fs-btn:   15px;
  --fw-btn:   700;
  --tracking-display: -.025em;
  --tracking-btn: 0;

  /* --- forma --- */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-btn:  999px;
  --radius-mark: 50%;

  /* --- espaço --- */
  --maxw:      1200px;
  --gutter:    20px;
  --gap:       18px;
  --section-y: clamp(64px, 8vw, 112px);
  --card-p:    24px;
  --btn-py:    13px;
  --btn-px:    22px;
  --header-h:  72px;

  --shadow-sm:  0 1px 2px rgba(14, 52, 69, .06);
  --shadow-md:  0 10px 28px rgba(14, 52, 69, .10);
  --shadow-lg:  0 28px 64px rgba(14, 52, 69, .18);
  --shadow-btn: none;
  --dur:        .2s;
  --dur-slow:   .36s;
  --ease:       cubic-bezier(.2, .7, .3, 1);
}