/* ============================================================
   CotaFácil — Design Tokens oficiais
   Fonte da verdade de cor, tipografia, raio e sombra.
   Espelha os tokens vivos de design-system.html.
   Tema CLARO. HTML/CSS puro — sem frameworks.
   ============================================================ */

:root{

  /* ---------- CORES DA MARCA ---------- */
  --azul:#003945;        /* Cor primária — autoridade, fundos escuros, títulos */
  --azul2:#00303b;       /* Azul mais profundo — gradientes, rodapé, hero */
  --azul-lt:#1f515b;     /* Azul claro — realces sobre fundo escuro, gradientes */
  --laranja:#f08226;--laranja-claro:#f49725;     /* CTA principal, destaques, kicker, ações */
  --laranja-h:#f49725;   /* CTA :hover */
  --laranja-a:#d9741f;   /* CTA :active (pressionado) */
  --laranja-dk:#f08226;  /* Laranja escuro — gradientes, hover de links (alias usado em index/brandbook) */
  --amarelo:#fbbb21;     /* Acento secundário — números, badges, energia */
  --verde:#4d9944;       /* Acento — sucesso de marca, status "no ar", crescimento */

  /* ---------- CORES SEMÂNTICAS (feedback) ---------- */
  --ok:#4d9944;          /* Sucesso — confirmações, validação OK */
  --ok-bg:#eaf4e8;       /* Fundo de mensagem de sucesso */
  --err:#c0392b;         /* Erro — validação, falhas */
  --err-bg:#fdecea;      /* Fundo de mensagem de erro */
  --warn:#b4621c;        /* Alerta — avisos, atenção */
  --warn-bg:#fdf1e3;     /* Fundo de mensagem de alerta */
  --info:#1f515b;        /* Informação — dicas, neutro informativo */
  --info-bg:#e6ebec;     /* Fundo de mensagem informativa */

  /* ---------- NEUTRAS (escala de cinza) ---------- */
  --n900:#0F172A;        /* Texto mais escuro, títulos sobre claro */
  --n700:#334155;        /* Corpo de texto padrão */
  --n500:#64748B;        /* Texto secundário, legendas, placeholders */
  --n400:#94A3B8;        /* Texto desabilitado, specs, hints */
  --n200:#E2E8F0;        /* Bordas, divisores, linhas */
  --n50:#F8FAFC;         /* Fundo off-white de seções alternadas */
  --branco:#fff;         /* Fundo base, superfícies de cartão */

  /* ---------- TIPOGRAFIA — FAMÍLIAS ---------- */
  --ff-t:'Outfit',system-ui,sans-serif;   /* Títulos, h1-h4, kicker, números */
  --ff-b:'Inter',system-ui,sans-serif;    /* Corpo de texto, parágrafos, UI */

  /* ---------- TIPOGRAFIA — ESCALA ---------- */
  --fs-h1:clamp(2rem,4vw,3rem);    /* H1 — fluida, peso 700/800 em Outfit */
  --fs-h2:clamp(1.9rem,5vw,3.2rem);/* H2 — título de seção, peso 800 */
  --fs-h3:1.5rem;                  /* H3 — subtítulo, peso 600 */
  --fs-h4:1.125rem;                /* H4 — rótulo de bloco, peso 600 */
  --fs-body:1.125rem;              /* Corpo de leitura confortável */
  --fs-base:1rem;                  /* Texto base de UI (16px) */
  --fs-small:.875rem;              /* Texto pequeno, legendas, notas */
  --lh-tight:1.1;                  /* Entrelinha de títulos */
  --lh-body:1.6;                   /* Entrelinha de corpo */

  /* ---------- RAIO (border-radius) ---------- */
  --r-sm:4px;            /* Raio pequeno — tags, code, inputs compactos */
  --r-md:8px;            /* Raio médio — botões, campos de formulário */
  --r-lg:16px;           /* Raio grande — cartões, swatches, painéis */

  /* ---------- SOMBRAS (elevação) ---------- */
  --shadow-sm:0 1px 3px rgba(1,55,69,.08);    /* Elevação sutil — inputs, divisores */
  --shadow-md:0 6px 20px rgba(1,55,69,.10);   /* Elevação média — cartões em repouso */
  --shadow-lg:0 18px 48px rgba(1,55,69,.16);  /* Elevação alta — hover, modais, destaque */
}