/* =============================================================
   AF Instalacoes - Design Tokens
   Direcao: Profissional / Confianca
   Padrao: "Trust & Authority + Conversion" (ui-ux-pro-max)
   Estilo: "Soft UI Evolution" (profundidade sutil, WCAG AA+)

   ESTRATEGIA DE COR (regra de ouro): base NEUTRA, e o vermelho da
   marca reservado para CTA e destaques pontuais. Nunca inundar a
   pagina de vermelho: ele vale mais quando aparece pouco.
   ============================================================= */

:root {
  /* ---- Marca ---- */
  --af-red: #E60315;
  --af-red-dark: #C00212;
  --af-red-darker: #9E0210;
  --af-red-tint: rgba(230, 3, 21, .08);
  --af-red-tint-strong: rgba(230, 3, 21, .16);

  /* ---- Neutros (a base do site) ---- */
  --af-ink: #151517;
  --af-ink-2: #33333a;
  --af-muted: #5e5e66;
  /* Era #8a8a94 e REPROVAVA no WCAG AA: 3,42:1 sobre branco e 3,19:1 sobre --af-bg-soft,
     contra os 4,5:1 exigidos para texto pequeno. Atingia a data das 37 materias, o
     breadcrumb, a legenda de tabela e, o pior, a .legenda que carrega o aviso de imagem
     ilustrativa. Agora da 5,04:1 no branco e 4,70:1 no soft.
     Ao mexer neste valor, CALCULE o contraste nos dois fundos antes. */
  --af-muted-2: #6e6e78;
  --af-line: #e7e7ec;
  --af-line-soft: #f0f0f4;
  --af-bg: #ffffff;
  --af-bg-soft: #f6f7f9;
  --af-bg-dark: #141418;
  --af-bg-dark-2: #1e1e24;

  /* ---- Tokens semanticos ---- */
  --color-background: var(--af-bg);
  --color-foreground: var(--af-ink);
  --color-card: #ffffff;
  --color-muted: var(--af-bg-soft);
  --color-muted-foreground: var(--af-muted);
  --color-border: var(--af-line);
  --color-primary: var(--af-red);          /* CTA apenas */
  --color-on-primary: #ffffff;
  --color-ring: var(--af-red);

  /* ---- Apoio ---- */
  --af-wa: #25d366;
  --af-wa-dark: #1eb257;
  --af-success: #1a9e5f;
  --af-star: #f5a623;

  /* ---- Tipografia (auto-hospedada, sem CDN externo) ---- */
  --af-font-head: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --af-font-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --af-fs-xs: .8125rem;
  --af-fs-sm: .9375rem;
  --af-fs-base: 1rem;
  --af-fs-lg: 1.125rem;
  --af-fs-xl: 1.375rem;
  --af-fs-2xl: clamp(1.5rem, 3vw, 1.875rem);
  --af-fs-3xl: clamp(1.875rem, 4vw, 2.5rem);
  --af-fs-4xl: clamp(2.25rem, 5.2vw, 3.5rem);

  --af-lh-tight: 1.15;
  --af-lh-snug: 1.35;
  --af-lh-body: 1.65;

  /* ---- Espacamento: escala "espacosa" (density 3/10) ---- */
  --af-sp-1: .25rem;
  --af-sp-2: .5rem;
  --af-sp-3: .75rem;
  --af-sp-4: 1rem;
  --af-sp-6: 1.5rem;
  --af-sp-8: 2rem;
  --af-sp-12: 3rem;
  --af-sp-16: 4rem;
  --af-sp-24: 6rem;
  --af-section: clamp(4rem, 9vw, 6.5rem);   /* respiro vertical entre secoes */

  /* ---- Formas ---- */
  --af-radius-sm: 10px;
  --af-radius: 14px;
  --af-radius-lg: 22px;
  --af-radius-pill: 999px;

  /* ---- Sombras (Soft UI Evolution: suaves, porem nitidas) ---- */
  --af-shadow-xs: 0 1px 2px rgba(20, 20, 30, .06);
  --af-shadow-sm: 0 2px 8px -3px rgba(20, 20, 30, .14);
  --af-shadow: 0 10px 30px -12px rgba(20, 20, 30, .18);
  --af-shadow-lg: 0 18px 50px -20px rgba(20, 20, 30, .26), 0 4px 14px -6px rgba(20, 20, 30, .10);
  --af-shadow-red: 0 12px 26px -12px rgba(230, 3, 21, .55);

  /* ---- Layout ---- */
  --af-container: 1160px;
  --af-container-narrow: 760px;
  --af-gutter: clamp(1.15rem, 4vw, 2rem);

  /* ---- Movimento (reveal sutil: 300-400ms, power1.out) ---- */
  --af-ease: cubic-bezier(.25, .46, .45, .94);
  --af-ease-out: cubic-bezier(.16, 1, .3, 1);
  --af-dur-fast: .18s;
  --af-dur: .28s;
  --af-dur-reveal: .38s;
  --af-reveal-y: 12px;
}