/* =========================
   VARIÁVEIS DE CORES DO PROJETO
   Arquivo: variaveis.css
   Descrição: Define cores principais do tema para uso em todo o site
   Uso: Este arquivo deve ser importado antes dos outros CSS
========================== */

:root {
  /* =========================
     CORES DO TEMA
     Cores principais do site
   ========================= */
   
  /* Fundo gradiente */
  --cor-fundo-gradiente-topo: #f47ca0;      /* Topo do gradiente (rosa claro) */
  --cor-fundo-gradiente-meio: #ea5f87;      /* Meio do gradiente (rosa médio) */
  --cor-fundo-gradiente-baixo: #e04873;     /* Baixo do gradiente (rosa escuro) */
   
  /* Cores básicas */
  --cor-branco: #ffffff;
  --cor-preto: #111111;
  --cor-cinza-claro: #f5f5f5;
  --cor-cinza-medio: #333333;
   
  /* Card normal */
  --cor-card-fundo: rgba(246, 230, 235, 0.82);  /* Fundo rosa translúcido do card */
  --cor-card-borda: rgba(255, 255, 255, 0.28);  /* Borda branca semi-transparente */
  --cor-card-hover: rgba(246, 230, 235, 0.95); /* Fundo ao passar mouse/clicar */
  --cor-card-texto: #111;                     /* Cor do texto do card */
   
  /* Card DM Dev */
  --cor-dmdev-fundo-inicio: #000000;         /* Início do gradiente (preto) */
  --cor-dmdev-fundo-fim: #3d1268;           /* Fim do gradiente (roxo) */
  --cor-dmdev-texto: #ffffff;                /* Texto branco */
  --cor-dmdev-subtitulo: rgba(255, 255, 255, 0.85); /* Subtítulo com opacidade */
   
  /* Botão voltar */
  --cor-voltar-fundo: rgba(246, 230, 235, 0.6);  /* Fundo translúcido */
  --cor-voltar-fundo-hover: rgba(246, 230, 235, 0.9); /* Fundo no hover */
   
  /* Texto e títulos */
  --cor-texto-principal: #23161a;            /* Cor marrom escuro principal */
  --cor-texto-secundario: #3c2b31;           /* Cor marrom escuro para subtítulos */
  --cor-texto-rodape: #2a171d;               /* Cor do rodapé */
   
  /* Preço */
  --cor-preco: #e04873;                      /* Cor rosa do preço */
   
  /* Card Destaque Lojinha */
  --cor-destaque-gradiente-inicio: #f47ca0;      /* Rosa claro */
  --cor-destaque-gradiente-fim: #e04873;            /* Rosa escuro */
  --cor-destaque-borda: rgba(224, 72, 115, 0.5);   /* Borda rosa */
  --cor-destaque-sombra: rgba(224, 72, 115, 0.25); /* Sombra rosa */
  --cor-destaque-fundo: rgba(244, 124, 160, 0.2);    /* Fundo rosa translúcido */
  --cor-destaque-hover: rgba(224, 72, 115, 0.3);    /* Hover rosa */
   
  /* Card Lojinha (produto) */
  --cor-lojinha-card-fundo: rgba(255, 255, 255, 0.95);     /* Fundo branco */
  --cor-lojinha-card-borda: rgba(224, 72, 115, 0.3);      /* Borda rosa */
  --cor-lojinha-card-sombra: rgba(224, 72, 115, 0.2);        /* Sombra rosa */
  --cor-lojinha-card-titulo: #2d142c;                       /* Título marrom escuro */
   
  /* Botão Shopee */
  --cor-botao-shopee-inicio: #f47ca0;            /* Rosa claro */
  --cor-botao-shopee-fim: #e04873;                  /* Rosa escuro */
  --cor-botao-shopee-hover: #c23a5c;              /* Rosa mais escuro */
   
  /* Modal */
  --cor-modal-fundo: #000000;
  --cor-modal-texto: #ffffff;
  
  /* Dot do carrossel */
  --cor-dot-normal: rgba(255, 255, 255, 0.5);
  --cor-dot-video: #ff6b6b;
  --cor-dot-video-ativo: #ff0000;
   
  /* Sombra e efeitos */
  --cor-sombra-fraca: rgba(0, 0, 0, 0.10);  /* Sombra suave */
  --cor-sombra-forte: rgba(0, 0, 0, 0.16);   /* Sombra intensa */
   
  /* Scrollbar */
  --cor-scrollbar-track: #f47ca0;           /* Trilho do scroll */
  --cor-scrollbar-thumb: #e04873;            /* Botão do scroll */
}