/* adb-brand v0.1 — 2026-09-29
   Camada de marca (N1) da Amigos do Bem, destilada de
   AmigosdoBem/adb-design-system/docs/design-system/ADB_DESIGN_SYSTEM_SPEC.md
   (§3 cores, §4 tipografia, §6 formas, §10 acessibilidade, §12.4 variaveis).
   Piloto no Recebimentos Sertao: depois de validado, vira o brand-layer/ do design system.
   A SPEC continua sendo a fonte da verdade; este arquivo so a copia. */

/* fontes hospedadas no proprio dominio (a CSP so aceita font-src 'self') */
@font-face{font-family:"Inter";font-style:normal;font-weight:400 900;font-display:swap;src:url("vendor/fonts/inter-var.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:300 700;font-display:swap;src:url("vendor/fonts/montserrat-latin-wght-normal.woff2") format("woff2")}

:root{
  /* Marca (§3.1) */
  --adb-orange:#FF6B00;
  --adb-orange-dark:#E65300;
  --adb-orange-soft:#FFF1E7;
  --adb-orange-text:#B84600;          /* SUGESTAO §3.4.2 — texto laranja pequeno sobre claro */
  --adb-yellow:#FFD900;
  --adb-blue:#0047BA;
  --adb-blue-dark:#003896;
  --adb-teal:#143F43;

  /* Neutros quentes (§3.1) */
  --adb-white:#FFFFFF;
  --adb-sand:#FAF5EE;
  --adb-sand-dark:#F3E6D4;
  --adb-line:#ECE7DF;
  --adb-night:#0A0F1A;

  /* Texto (§3.1) */
  --adb-text-strong:rgba(0,0,0,0.9);
  --adb-text:#2B2B2B;
  --adb-muted:#6B6B6B;
  --adb-red:#F04438;                  /* so erro/validacao */

  /* Texto sobre laranja (§3.4.1): branco, e so em texto >= 14px peso 900 */
  --adb-on-orange:#FFFFFF;

  /* Estados — EXTENSAO DO PILOTO, fora da tabela §3.1 e pendente da Comunicacao. A §3.1 nao tem cor de
     atencao e #F04438 da 3,76:1 em texto pequeno. Tons do Tailwind que o site usa (amigosdobem.org,
     29/09/2026): o de erro e a "caixa vermelha clara com texto vermelho escuro" que a §7.11 registra como
     EXISTENTE (bg-red-50, border-red-200, text-red-800); o de atencao e a caixa do pagamento Pix
     (bg/border/text yellow-50/200/800), que a SPEC nao documenta. Levar a Comunicacao: tom de erro, tom
     de atencao e vermelho como alerta de negocio (cobrar/atrasado), que a §3.1 reserva a erro. */
  --adb-state-err-text:#991B1B;       /* 7,60:1 sobre o fundo */
  --adb-state-err-bg:#FEF2F2;
  --adb-state-err-line:#FECACA;
  --adb-state-warn-text:#854D0E;      /* 6,62:1 sobre o fundo */
  --adb-state-warn-bg:#FEFCE8;
  --adb-state-warn-line:#FEF08A;

  /* Tipografia (§4) */
  --adb-font-sans:'Inter',Arial,sans-serif;
  --adb-font-ui:'Montserrat',sans-serif;
  --adb-fs-display:clamp(44px, 7vw, 116px);   /* lh .93, ls -0.075em, 900 */
  --adb-fs-title:clamp(34px, 4.4vw, 76px);    /* lh 1,   ls -0.055em, 900 */
  --adb-fs-title-sm:clamp(30px, 3.4vw, 54px); /* lh 1,   ls -0.05em,  900 */
  --adb-fs-subtitle:clamp(18px, 2vw, 24px);   /* lh 1.45 */
  --adb-fs-hero-lead:clamp(16px, 1.8vw, 19px);/* descricao do hero */
  --adb-fs-eyebrow:13px;              /* lh 1.2, ls 0.2em, 900, maiusculo */

  /* Forma (§6.1) */
  --adb-radius-button:999px;
  --adb-radius-card-lg:44px;
  --adb-radius-card:28px;
  --adb-radius-modal:24px;
  --adb-radius-md:16px;
  --adb-radius-input:12px;

  /* Profundidade (§6.2) */
  --adb-shadow-card:0 6px 24px rgba(0,0,0,0.07);
  --adb-shadow-soft:0 14px 40px rgba(0,0,0,0.10);
  --adb-shadow-strong:0 24px 60px rgba(0,0,0,0.16);
  --adb-shadow-orange:0 18px 44px rgba(255,107,0,0.30);
  --adb-shadow-orange-sm:0 14px 30px rgba(255,107,0,0.28);
  --adb-shadow-orange-tab:0 10px 22px rgba(255,107,0,0.22);
  --adb-shadow-dropdown:0 20px 60px rgba(0,0,0,0.12),0 1px 3px rgba(0,0,0,0.08);

  /* Layout (§5) — composicao de pagina (N2); o painel N1 nao usa, ficam para a copia ser 1:1 com a §12.4 */
  --adb-container:1180px;
  --adb-section-xl:110px;   /* mobile 76px */
  --adb-section-l:100px;    /* mobile 70px */
  --adb-section-m:80px;     /* mobile 76px ou 56px */
  --adb-strip:40px;         /* mobile 32px */
  --adb-hero-min:520px;     /* mobile 420px */

  /* Movimento (§6.5) */
  --adb-ease:ease-out;
  --adb-dur-fast:150ms;
  --adb-dur:200ms;
  --adb-dur-card:300ms;
}

body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* foco visivel em tudo que e clicavel (§10.2) */
:focus-visible{outline:2px solid var(--adb-orange);outline-offset:2px}

/* §6.5: respeitar prefers-reduced-motion (zerar animacoes) */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}