/*
 * Tokens do design. Toda cor, espaço, raio e sombra do tema sai daqui —
 * nenhum arquivo abaixo deste deve escrever um valor cru.
 *
 * Identidade: amarelo da Casa do Médico no topo e nas ações, azul-marinho no
 * texto de destaque, verde só para "comprar". Estrutura e ritmo de espaçamento
 * seguem a referência (farmaciaindiana.com.br): cartão claro sobre fundo
 * cinza, respiro generoso, tipografia densa.
 */

:root {
	/* ---- marca ---- */
	/* O amarelo do cabeçalho. Era #fcc404 (o mesmo da produção); o cliente
	   pediu #f5be00, um tom abaixo, para melhorar a leitura do texto branco. */
	--cdm-amarelo:            #f5be00;
	--cdm-amarelo-escuro:     #e0ae00;
	--cdm-amarelo-claro:      #fff8e1;
	/* Filete quente que separa as faixas do rodapé. Cinza puro ali corta a
	   página; este bege segura a divisão sem endurecer. */
	--cdm-borda-quente:       #f2e7cf;
	/* Barra utilitária do topo: fundo mais claro que a faixa da marca, com
	   divisas verticais um tom acima. Referência enviada pelo cliente. */
	--cdm-amarelo-suave:      #fde497;
	--cdm-amarelo-divisa:     #fabc01;
	/*
	 * Par do carrossel de categorias: fundo do circulo em amarelo claro e
	 * circulo cheio ("Todas as categorias") no azul da marca.
	 *
	 * Houve uma rodada com o cheio em marrom (#5c4200), derivado do amarelo
	 * para manter a mesma familia de matiz. Foi revertido: o azul destaca mais
	 * o unico circulo que nao e produto, e amarra com o resto do cabecalho.
	 */
	--cdm-categoria-fundo:    #fde497;
	--cdm-categoria-cheio:    #e7f1fb;
	--cdm-laranja:            #f2a30d;   /* barra utilitária do topo */

	--cdm-azul:               #0a3d7c;   /* títulos e preços */
	--cdm-azul-escuro:        #062a56;
	/* Azul dos títulos de coluna do rodapé, escolhido pelo cliente em
	   30/08/2026. Mais fechado que o --cdm-azul da marca: no corpo do rodapé,
	   longe do amarelo, o azul de topo clareava demais. */
	--cdm-azul-titulo:        #002646;
	/* Azul vivo da faixa de vantagens: cor da referência, pedida pelo cliente
	   em 28/08/2026. Sobre branco: 9,4:1. */
	--cdm-azul-vivo:          #072bcc;
	--cdm-azul-claro:         #e7f1fb;

	--cdm-verde:              #2e8b3d;   /* comprar / em estoque */
	--cdm-whatsapp:           #25d366;
	/* Discos flutuantes do canto inferior direito (inc/flutuantes.php). Cores
	   escolhidas pelo cliente em 30/08/2026; são só desses dois botões, por
	   isso não entram na paleta geral.

	   Medido: ícone branco sobre o verde dá 2,44:1 e sobre o azul 3,46:1. O
	   mínimo do WCAG para elemento de interface é 3:1 — o azul passa, o verde
	   não. Fica registrado porque a cor foi decidida pelo cliente; um verde
	   #2FA33F resolveria sem mudar a leitura da marca. */
	--cdm-flutuante-whatsapp: #3ebd4e;
	--cdm-flutuante-cesta:    #168bf7;   /* verde oficial da marca */
	--cdm-verde-escuro:       #246f31;
	--cdm-verde-suave:        #e3f4e6;   /* fundo da pílula "3% off" */
	--cdm-vermelho:           #c62828;   /* erro / esgotado */

	/* Verde do botão "Comprar" na página de produto, definido pelo cliente. */
	--cdm-verde-comprar:      #37b937;
	--cdm-verde-comprar-fundo: #2ea22e;  /* mesmo tom, um passo abaixo (hover) */

	/* Azul institucional da página de produto: título, preço e parcelamento. */
	--cdm-azul-marca:         #004077;

	/* ---- neutros ---- */
	--cdm-preto:              #16181d;
	--cdm-cinza-900:          #2b2f38;
	--cdm-cinza-700:          #4f5665;
	--cdm-cinza-500:          #7c8492;
	--cdm-cinza-300:          #d6dae1;
	--cdm-cinza-200:          #e7eaef;
	--cdm-cinza-100:          #f2f4f7;
	--cdm-branco:             #ffffff;

	/* ---- papéis ---- */
	/* O fundo do site é branco puro, como a loja pede. Quando um bloco
	   precisar se destacar do fundo (faixa de benefícios, seção alternada),
	   use --cdm-fundo-alt, e não um cinza cru. */
	--cdm-fundo:              var(--cdm-branco);
	--cdm-fundo-alt:          var(--cdm-cinza-100);
	/* Exceção pontual: só a página do carrinho, pedido do cliente (31/08/2026)
	   pra separar visualmente os cartões (brancos) do fundo da página. */
	--cdm-fundo-carrinho:     #f5f5f5;

	/*
	 * Paleta do "Resumo do pedido" do carrinho. O cliente mandou o HTML/CSS
	 * exato da referência (01/09/2026) pedindo cópia fiel, e esses tons não
	 * batem com os da marca: o azul da aba ativa é mais vivo que o
	 * --cdm-azul, o verde do botão é um passo mais escuro que o
	 * --cdm-verde-comprar. Ficam isolados aqui, com prefixo `resumo`, pra não
	 * vazarem para o resto do site — se um dia o cliente quiser unificar com a
	 * marca, é só apontar cada um para o token equivalente.
	 */
	--cdm-resumo-azul-aba:    #0b2ed4;  /* fundo da aba ativa */
	--cdm-resumo-aba-fundo:   #f2f2f2;  /* fundo da aba inativa */
	--cdm-resumo-aba-texto:   #13518b;  /* texto da aba inativa */
	--cdm-resumo-azul:        #06477f;  /* endereço, TOTAL, "Continuar comprando" */
	--cdm-resumo-azul-botao:  #07549a;  /* contorno e texto de "Alterar"/"Adicionar" */
	--cdm-resumo-opcao-fundo: #f4f5f7;  /* caixa da opção de entrega */
	--cdm-resumo-texto:       #444444;  /* texto corrido do resumo */
	--cdm-resumo-texto-fraco: #666666;  /* prazo de entrega */
	--cdm-resumo-fio:         #d6d6d6;  /* divisores */
	--cdm-resumo-fio-claro:   #dddddd;  /* fio vertical antes do preço */
	--cdm-resumo-campo-fio:   #cfcfcf;  /* contorno do campo de cupom/CEP */
	--cdm-resumo-campo-vazio: #cccccc;  /* placeholder */
	--cdm-resumo-verde:       #2ebc39;  /* botão "Fechar pedido" */
	--cdm-superficie:         var(--cdm-branco);
	--cdm-borda:              var(--cdm-cinza-300);
	--cdm-texto:              var(--cdm-cinza-900);
	--cdm-texto-fraco:        var(--cdm-cinza-700);
	--cdm-texto-apagado:      var(--cdm-cinza-500);
	--cdm-link:               var(--cdm-azul);

	/* ---- tipografia ---- */
	--cdm-fonte:              "Poppins", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--cdm-fonte-titulo:       var(--cdm-fonte);

	--cdm-t-2xs:              0.625rem;   /* 10 — rótulo de selo, uso pontual */
	--cdm-t-xs:               0.75rem;    /* 12 */
	--cdm-t-sm:               0.8125rem;  /* 13 */
	--cdm-t-base:             0.875rem;   /* 14 */
	--cdm-t-md:               1rem;       /* 16 */
	--cdm-t-lg:               1.125rem;   /* 18 */
	--cdm-t-xl:               1.375rem;   /* 22 */
	--cdm-t-2xl:              1.75rem;    /* 28 */
	--cdm-t-3xl:              2.25rem;    /* 36 */

	--cdm-peso-normal:        400;
	--cdm-peso-medio:         500;
	--cdm-peso-semi:          600;
	--cdm-peso-forte:         700;

	--cdm-altura-apertada:    1.25;
	--cdm-altura-normal:      1.5;

	/* ---- espaçamento (escala de 4) ---- */
	--cdm-e-1:                0.25rem;
	--cdm-e-2:                0.5rem;
	--cdm-e-3:                0.75rem;
	--cdm-e-4:                1rem;
	--cdm-e-5:                1.25rem;
	--cdm-e-6:                1.5rem;
	--cdm-e-8:                2rem;
	--cdm-e-10:               2.5rem;
	--cdm-e-12:               3rem;
	--cdm-e-16:               4rem;

	/* ---- forma ---- */
	--cdm-raio-sm:            4px;
	--cdm-raio:               8px;
	--cdm-raio-lg:            12px;
	/* Banners da home: o cliente pediu a ponta mais redonda que o resto da
	   interface (30/08/2026). Só eles usam este raio. */
	--cdm-raio-banner:        24px;
	--cdm-raio-cheio:         999px;

	--cdm-sombra-sm:          0 1px 2px rgba(16, 24, 40, .06);
	--cdm-sombra:             0 2px 8px rgba(16, 24, 40, .08);
	--cdm-sombra-lg:          0 8px 24px rgba(16, 24, 40, .12);

	/* ---- layout ---- */
	--cdm-largura:            1400px;   /* container principal */
	--cdm-largura-texto:      760px;    /* leitura corrida */
	--cdm-largura-qr-pix:     18rem;
	--cdm-largura-modal-sm:   28rem;
	--cdm-gap-grade:          var(--cdm-e-4);

	/* Altura única de todo controle clicável ou campo de formulário: botão,
	   input, stepper. É o que mantém uma coluna de ações alinhada. */
	--cdm-altura-controle:    var(--cdm-e-12);

	/* Alvo mínimo de toque num link que não é botão (item de menu, ícone de
	   rede social). 44px é o piso das WCAG 2.5.5 / HIG. Só vale em telas de
	   toque; no desktop o link continua com a altura do texto. */
	--cdm-alvo-toque:         44px;

	/* Quebras do tema. Existem como token para o rodapé e o cabeçalho não
	   divergirem — media query não lê var(), então são referência de leitura
	   e o valor literal vai na @media. */
	--cdm-quebra-sm:          640px;
	--cdm-quebra-md:          900px;
	--cdm-quebra-lg:          1200px;

	/* ---- camadas ---- */
	--cdm-z-cabecalho:        100;
	--cdm-z-menu:             200;
	--cdm-z-overlay:          300;
	--cdm-z-modal:            400;
	--cdm-sobreposicao:       rgba(6, 42, 86, .48);

	--cdm-transicao:          .18s ease;
}