/* ═══════════════════════════════════════════════════════════════════════════
   PADRÃO ÚNICO DIWALLI: tokens congelados
   ---------------------------------------------------------------------------
   Decisão do dono (12/08/2026): "vamos considerar a nova Home como referência
   canônica da Diwalli, congelar navbar, rodapé, cores, tipografia,
   espaçamentos, CTAs e formulários como padrão único."

   Este arquivo é a FONTE dos valores. Antes dele os mesmos hexadecimais
   estavam escritos em três lugares (a folha da casca, o <style> da Home e os
   parciais), e "padrão único" escrito em três lugares é só uma coincidência
   esperando divergir.

   Os números não são novos: foram medidos na página de Atendimento, que você
   aprovou como referência, e comprovados na Home. Alterar qualquer valor daqui
   muda TODA página que adota o padrão, é essa a intenção, e é por isso que a
   guarda backend/tests/padrao-unico-guard.test.js trava os valores.

   COMO USAR NUMA PÁGINA
     <link rel="stylesheet" href="/site/css/dw-tokens.css">
     <link rel="stylesheet" href="/site/css/dw-casca.css">
     <link rel="stylesheet" href="/site/css/dw-desktop.css">
   e daí em diante SEMPRE var(--dw-…), nunca o hexadecimal cru.

   Tema: o site comercial usa o tema oficial fixo da marca, sem alternador
   (decisão de 11/08 para atendimento.html, estendida à Home em 12/08). Por
   isso não há bloco de tema escuro aqui: seria um segundo padrão.
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Marca ────────────────────────────────────────────────────────────── */
  --dw-brand:        #4F46E5;  /* roxo Diwalli: navbar, botão principal, destaque */
  --dw-brand-700:    #4338CA;  /* estado :hover e texto sobre fundo claro */
  --dw-brand-fraco:  rgba(79, 70, 229, .08);   /* fundo de etiqueta e numeral */
  --dw-brand-borda:  rgba(79, 70, 229, .26);   /* borda de etiqueta */
  --dw-brand-claro:  #EEF2FF;  /* :hover do botão branco sobre a navbar */
  --dw-brand-500:    #6366F1;  /* tom claro do gradiente do selo */
  --dw-logo-de:      #6D6AF5;  /* gradiente da marca no rodapé */
  --dw-logo-ate:     #4736CE;

  /* ── Superfícies ──────────────────────────────────────────────────────── */
  --dw-page:         #F4F6FB;  /* fundo da página */
  --dw-surface:      #FFFFFF;  /* cartão, rodapé, seção de destaque */
  --dw-surface-2:    #EDF0F8;  /* barra da moldura de demonstração */
  --dw-line:         #E2E8F0;  /* borda e divisor */
  --dw-line-forte:   #CBD5E1;  /* borda de botão secundário */
  --dw-campo:        #F8FAFC;  /* fundo de campo de formulário */

  /* ── Texto ────────────────────────────────────────────────────────────── */
  --dw-t-900:        #0F172A;  /* título */
  --dw-t-700:        #334155;  /* rótulo de formulário */
  --dw-t-600:        #475569;  /* corpo */
  --dw-t-500:        #64748B;  /* apoio, legenda */
  --dw-t-400:        #94A3B8;  /* marca d'água */

  /* ── Semânticas ───────────────────────────────────────────────────────── */
  /* Verde é SÓ confirmação e WhatsApp; vermelho é SÓ erro. Nunca decoração. */
  --dw-ok:           #15803D;
  --dw-ok-fraco:     #ECFDF5;
  --dw-ok-borda:     #A7F3D0;
  --dw-ok-escuro:    #065F46;
  --dw-erro:         #DC2626;

  /* ── Tipografia ───────────────────────────────────────────────────────── */
  --dw-fonte-titulo: "Bricolage Grotesque", system-ui, sans-serif;
  --dw-fonte-corpo:  Manrope, system-ui, -apple-system, sans-serif;
  --dw-fonte-mono:   ui-monospace, SFMono-Regular, Menlo, monospace;

  --dw-h1:           3.4rem;   /* desktop; o celular reduz no bloco da página */
  --dw-h2:           2.2rem;
  --dw-h3:           1.05rem;
  --dw-sub:          1.2rem;
  --dw-corpo:        1rem;
  --dw-mini:         .9rem;

  /* ── Medidas ──────────────────────────────────────────────────────────── */
  --dw-wrap:         1120px;   /* contêiner: medido na página de Atendimento */
  --dw-navbar-h:     64px;     /* altura da navbar: idem */
  --dw-gutter:       24px;     /* margem lateral e das bordas */
  --dw-sec-y:        76px;     /* respiro vertical de seção no desktop */
  --dw-sec-y-cel:    52px;     /* idem no celular */

  /* ── Cantos ───────────────────────────────────────────────────────────── */
  --dw-r-botao:      10px;
  --dw-r-cartao:     16px;
  --dw-r-caixa:      20px;     /* formulário */
  --dw-r-pill:       999px;

  /* ── Sombra ───────────────────────────────────────────────────────────── */
  /* Escala curta de propósito: cartão não tem sombra, só borda. Sombra é
     reservada ao que precisa parecer acima da página (moldura, formulário). */
  --dw-sombra-card:  0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px rgba(15, 23, 42, .06);
  --dw-sombra-alta:  0 12px 32px -16px rgba(15, 23, 42, .40);
}