/* ==========================================================================
   AURIS ENGENHARIA ELÉTRICA — tokens do design system (etapa 3)
   Arquétipo: cinematografico-dark · Direção de cor: navy (LP anterior) + âmbar — trocado em 19/10 a pedido do operador
   Origem das cores: ver design-system.md §2 (âmbar amostrado do condutor
   energizado do render imagens/Image_4.png; navy herdado da LP anterior (#182334 e família)).
   Fontes: Google Fonts (Sora · IBM Plex Sans · IBM Plex Mono). Cobertura PT-BR
   conferida com fontTools (design-system.md §3). Autohospedagem: fonts.css.
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&family=Sora:wght@400;600;700;800&display=swap" rel="stylesheet">
   ========================================================================== */

:root {
  /* ---------- COR · fundos e superfícies (navy) ---------- */
  --c-bg:           #101B2B;   /* fundo-base da página, navy profundo (base da LP anterior) */
  --c-surface:      #132238;   /* seção alternada / card em repouso (navy da LP anterior) */
  --c-surface-2:    #182334;   /* card elevado, painel de legenda (navy principal da LP anterior) */
  --c-surface-3:    #22314A;   /* hover de card, chip, trilho */
  --c-line:         #283D59;   /* hairline padrão (1px), navy claro da LP anterior */
  --c-line-strong:  #3B5272;   /* hairline de destaque, contorno do "prédio fantasma" */

  /* ---------- COR · texto ---------- */
  --c-text:         #F2F0EB;   /* texto principal (off-white levemente quente) */
  --c-muted:        #A7AEB8;   /* texto secundário, legendas (cinza frio) */
  --c-white:        #FFFFFF;   /* branco puro: só logo e picos de ênfase */
  --c-dark:         #0A1220;   /* navy quase-preto: texto SOBRE o âmbar */
  --c-n200:         #D9D7D1;   /* cinza claro (rótulos sobre imagem) */
  --c-n400:         #8A93A0;   /* cinza médio (metadados, placeholder) */
  --c-n500:         #687386;   /* cinza apagado: só ornamento/estado desabilitado, NÃO é texto */

  /* ---------- COR · âmbar do condutor energizado (assinatura) ---------- */
  --c-primary:      #FFB416;   /* âmbar do condutor (CTA, 1 acento por dobra) */
  --c-primary-dark: #FE9323;   /* laranja do corpo do condutor (hover/pressed) */
  --c-accent:       #FFB416;   /* mesmo âmbar: cotas, número ativo, linha energizada */
  --c-glow:         #FFBB45;   /* núcleo quente do condutor (halo mínimo no raio-x) */
  --c-accent-soft:  rgba(255, 180, 22, .12);   /* fundo de tag/seleção, nunca bloco */

  /* ---------- COR · estados ---------- */
  --c-ok:           #7BC49A;
  --c-err:          #F0705C;
  --c-focus:        #FFB416;

  /* ---------- TIPOGRAFIA ---------- */
  --font-display: 'Sora', 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --fs-display: clamp(2.75rem, 7.2vw, 6.25rem);   /* hero, 1 por página */
  --fs-h1:      clamp(2.5rem, 5.4vw, 4.75rem);
  --fs-h2:      clamp(2rem, 3.8vw, 3.25rem);
  --fs-h3:      clamp(1.375rem, 2vw, 1.75rem);
  --fs-lead:    clamp(1.125rem, 1.5vw, 1.3125rem);
  --fs-body:    1.0625rem;                         /* 17px, nunca abaixo de 16px */
  --fs-small:   .875rem;
  --fs-label:   .75rem;                            /* mono, caixa alta, tracking */
  --lh-display: 1.02;
  --lh-title:   1.1;
  --lh-body:    1.65;
  --tracking-display: -.025em;
  --tracking-label:   .14em;

  /* ---------- ESPAÇO (base 4px, respiro generoso) ---------- */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4.5rem;
  --s-9: 6.5rem;  --s-10: 9rem;
  --section-y: clamp(6rem, 12vw, 11rem);           /* padding vertical de seção */

  /* ---------- GRID ---------- */
  --container: 1280px;
  --container-narrow: 880px;
  --px: clamp(20px, 5vw, 72px);                    /* gutter lateral */
  --gap: clamp(20px, 2.4vw, 32px);

  /* ---------- RAIO (engenharia: quase reto) ---------- */
  --r-sm:   2px;
  --r-md:   4px;
  --r-lg:   8px;
  --r-pill: 999px;

  /* ---------- SOMBRA (no escuro, sombra é profundidade, não brilho) ---------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .03) inset;
  --shadow-md: 0 12px 32px rgba(0, 0, 0, .5);
  --shadow-lg: 0 28px 64px rgba(0, 0, 0, .6);
  --shadow-cta: 0 0 0 1px rgba(255, 180, 22, .55), 0 10px 28px rgba(255, 147, 35, .22);  /* só hover do CTA */

  /* ---------- MOVIMENTO ---------- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur-fast: 180ms;
  --dur: 420ms;
  --dur-slow: 900ms;

  /* ---------- LAYOUT ---------- */
  --header-h: 104px;                               /* logo completa 80px de altura + respiro */
  --logo-h-header: 80px;
  --logo-h-footer: 128px;
  --logo-h-min: 64px;                              /* NUNCA abaixo disto (logo completa) */
}

@media (max-width: 767px) {
  :root {
    --header-h: 80px;
    --logo-h-header: 60px;
    --logo-h-footer: 96px;
  }
}