/*
  Design tokens — extraídos fielmente do handoff aprovado
  "RefresqC - Home Fluida (Responsiva) - Harmonizada.dc.html" (div raiz, style inline).
  Nenhum valor foi inventado ou alterado — apenas nomeado e centralizado.
*/

:root {
  /* Estrutura / grid */
  --max-w: 1440px;
  --gutter: clamp(20px, calc(7.14vw - 14.86px), 88px);
  --header-pad: clamp(16px, 4vw, 44px);
  --card-pad: clamp(24px, 3.5vw, 48px);

  /* Header flutuante: altura da barra e distância do topo do viewport
     quando fixo (estado "is-scrolled" — o estado real no destino de
     qualquer scroll-to-anchor). Usados para calcular o offset de âncoras
     sem números mágicos (ver #manutencao-anchor em base.css). */
  --header-height: 74px;
  --header-top-fixed: 16px;
  --header-clearance: calc(var(--header-top-fixed) + var(--header-height));

  /* Breakpoints de referência (documentação — CSS não permite var() em @media;
     os valores abaixo são repetidos literalmente nos component CSS correspondentes) */
  --bp-nav: 1080px;          /* nav desktop↔hambúrguer e layout do acordeão Equipamentos */
  --bp-credibilidade: 900px; /* Credibilidade: 2 colunas → 1 coluna */

  /* Radius por função */
  --radius-control: 9px;  /* inputs, botões, CTAs */
  --radius-float: 16px;   /* header flutuante, dropdown mobile */
  --radius-card: 20px;    /* cards (credibilidade, contato, foto) */
  --radius-shell: 28px;   /* shell da seção Equipamentos */

  /* Sombras por função */
  --shadow-card: 0 40px 90px rgba(14, 22, 20, 0.20);
  --shadow-cta: 0 6px 18px rgba(11, 60, 45, 0.20);
  --shadow-shell: 0 30px 70px rgba(14, 22, 20, 0.12);

  /*
    Elevação sutil para grandes shells editoriais (Manutenção,
    Credibilidade+Contato) — duas camadas: uma ampla/difusa (afastamento
    do fundo) + uma curta/discreta (definição perto da borda). Uso
    exclusivo desses 2 shells; não usar em cards internos, CTAs, Header
    ou Equipamentos (que mantém --shadow-shell).
  */
  --shadow-shell-elevated: 0 28px 60px rgba(18, 26, 24, 0.10), 0 6px 18px rgba(18, 26, 24, 0.05);

  /* Backgrounds */
  --bg-page: #F4F7F6;
  --bg-section: #F3F5F4;
  --surface: #FFFFFF;
  --footer-bg: #121A18;
  --field-bg: #F4F6F5;

  /* Cor de marca */
  --ink: #0E1614;
  --ink-rgb: 14, 22, 20; /* mesma cor de --ink, em componentes RGB para uso em rgba() */
  --ink-strong: #141E1B; /* usado no nome aberto do acordeão e no texto do hero sobre a foto */
  --green: #0B6B50;
  --green-hover: #0F8A66;
  --accent: #17A97C; /* bullet/dot de destaque, sublinhado do nav ativo, eyebrow do hero */

  /* Texto */
  --text-body: #4E5C59;
  --text-muted: #6E7C79;
  /* Variantes acessíveis de --text-muted (auditoria axe-core, 2026-09-29):
     o mesmo tom não alcança 4.5:1 nem sobre o fundo claro da página nem
     sobre o fundo escuro do Footer ao mesmo tempo (matematicamente
     impossível para um único hex nos dois extremos) — por isso são duas
     variantes centralizadas, cada uma resolvendo 1-2 pontos de contraste
     a mais, preservando a mesma tonalidade e a sensação discreta/editorial. */
  --text-muted-accessible: #667471; /* --text-muted escurecido ~3%: 4.04:1 -> 4.53:1 sobre --bg-page */
  --footer-muted-accessible: #768481; /* --text-muted clareado ~3%: 4.06:1 -> 4.54:1 sobre --footer-bg */
  --text-placeholder: #9AA7A4;
  --text-nav-inactive: #3A4340;
  --text-heading-alt: #12201D;
  --text-on-media: #F4F2EC; /* texto claro sobre foto/vídeo (hero com vídeo, legenda do carrossel) */
  --footer-link: #C9D2CF;
  --footer-address: #8A9794;

  /* Campos de formulário */
  --field-border: #DDE4E1;
  --field-text: #5A6663;

  /* Cores dos universos (acordeão Equipamentos) */
  --universo-frozen: #173F5F;
  --universo-refrescante: #6FC7C3; /* identidade da linha — intocada, usada em legendas/hover/detalhes */
  /* Token só de TEXTO para o numeral "02" quando Refrescante está ativo
     (axe-core, 2026-09-29): --universo-refrescante sozinho só alcança
     1.83:1 sobre --bg-page. Calculado preservando hue (177.3°) e
     saturação (44%) exatos do teal original em HSL, reduzindo apenas a
     luminosidade até o mínimo necessário para 4.5:1 — não é um chute nem
     reaproveita a estimativa de rodadas anteriores. Contraste real: 4.57:1
     (margem de segurança sobre o mínimo de 4.5:1 pedido). Usado
     exclusivamente em .accordion__num quando Refrescante está ativo —
     --universo-refrescante permanece intocado em todos os outros usos. */
  --universo-refrescante-text: #307C78;
  /* Escurecido ~3% (#9A7147 -> #92693F) para contraste WCAG AA do número
     "03" quando o universo Quente está ativo (axe-core, 2026-09-29) —
     mudança imperceptível, mesma cor de marca em qualquer outro uso
     (legenda "DESTAQUE DA LINHA", hover de "também neste universo"). */
  --universo-quente: #92693F;
  --universo-quente-text: #2E1B10;

  /*
    Espaçamento introdutório da seção Equipamentos — segue a mesma família
    clamp(px, vw, px) do resto do sistema (--gutter, --header-pad,
    --card-pad), calibrada para: ~48-56px no desktop grande, ~40-48px em
    notebook, ~32-40px em tablet/mobile.
  */
  --space-equip-handle-margin: clamp(16px, 2vw, 24px); /* topo/base do traço decorativo; gap total até o eyebrow = 2x isto + 4px do traço */
  --space-equip-intro-bottom: clamp(32px, 4vw, 56px); /* fim do bloco introdutório até a linha dos Universos */

  /*
    "Também neste universo" (Frozen/Refrescante/Quente) — caixa fixa do
    ícone + espaçamento até o nome + grid de 2 colunas no desktop.
  */
  --size-tambem-icon-box: 38px; /* caixa visual fixa do ícone, mesma para todos, independente do desenho interno */
  --gap-tambem-icon-text: 12px; /* espaço entre a caixa do ícone e o nome */
  --gap-tambem-grid-x: 28px; /* gap horizontal entre colunas no desktop */
  --gap-tambem-grid-y: 18px; /* gap vertical entre linhas no desktop */
  --gap-tambem-grid-y-mobile: 16px; /* gap vertical em coluna única (mobile/tablet) */

  /*
    Letreiro de marcas — normalização óptica por slots iguais.
    Cada marca ocupa uma célula estrutural idêntica (largura/altura fixas);
    dentro dela, o logo preserva seu aspect-ratio real e é limitado por uma
    das 3 classes ópticas conforme sua proporção visual (não sua "importância").
    Referência desktop (~1440px): slot 172×72px; compact 42–48px,
    horizontal 34–40px, wordmark 24–30px de altura útil.
  */
  --letreiro-slot-w: clamp(120px, 8vw + 56px, 172px);
  --letreiro-slot-h: clamp(56px, 5vw, 72px);
  --logo-cap-compact: clamp(42px, 3.5vw, 48px);
  --logo-cap-horizontal: clamp(34px, 2.9vw, 40px);
  --logo-cap-wordmark: clamp(24px, 2.15vw, 30px);

  /* Tipografia */
  /* No Harmonizada, "Manrope,system-ui,sans-serif" só é usado nos 5 wrappers
     estruturais (nunca visível, sempre sobrescrito pelo elemento de texto real);
     todo elemento de texto real usa "Manrope,sans-serif" — é esse o valor
     efetivamente renderizado, e o que --font-display reproduz aqui. */
  --font-display: Manrope, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

/*
  --shadow-shell-elevated em telas menores: os 2 shells (Manutenção,
  Credibilidade) perdem o gutter lateral do .container abaixo de ~769px
  (ficam de ponta a ponta), então o alcance horizontal da sombra desktop
  fica sem superfície de fundo para aparecer, e o alcance vertical fica
  mais perto do próximo shell empilhado. Reduz blur/spread e opacidade
  mantendo a mesma família de 2 camadas, para não parecer pesada nem
  ocupar área útil de mais nesses breakpoints.
*/
@media (max-width: 768px) {
  :root {
    --shadow-shell-elevated: 0 18px 40px rgba(18, 26, 24, 0.08), 0 4px 12px rgba(18, 26, 24, 0.045);
  }
}