/* =========================================================
   TEMA DA LOJA: elitta

   Cores tiradas da logo (Dados/logo/IMG_1700.PNG), por decisão do David em
   17/09/2026: o site não segue a linha do Instagram (Rota B, blocos com a
   cor de cada peça), segue a logo.
     - preto #181818, o das letras da logo, em toda a tipografia;
     - rosa da logo em três tons: #FDA7C3 (borda), #FDBFD1 e #FCD6E2 (centro);
     - off-white #FAF6F3 de fundo.
   O rosa entra em bloco, faixa e realce. Nunca em texto sobre fundo claro:
   ali ele some.

   A tipografia continua a mesma: título em Archivo Black, caixa baixa;
   corpo em Inter; preço e código em fonte monoespaçada.

   Este arquivo só troca variáveis. O desenho das páginas está em
   assets/css/estilo.css e é o mesmo para todas as lojas.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=IBM+Plex+Mono:wght@500&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* as cores da logo, para usar abaixo e no config.js (var(--rosa)) */
  --rosa: #FDA7C3;
  --rosa-medio: #FDBFD1;
  --rosa-claro: #FCD6E2;
  --rosa-fantasma: #FEEFF4;
  --off: #FAF6F3;

  /* texto e estrutura */
  --preto: #181818;
  --tinta: #181818;
  --grafite: #2E2A2A;
  --cinza: #5E5654;
  --cinza-medio: #8A807D;
  --cinza-claro: #BDB3AF;
  --linha: #ECE2DE;
  --linha-forte: #DDCFCA;

  /* fundos */
  --fundo: var(--off);
  --fundo-alt: #F4ECE8;
  --branco: #FFFFFF;

  /* Acento de interface (foco, sublinhado, ícones pequenos). Preto: rosa
     claro em detalhe pequeno sobre off-white não se lê. */
  --acento: #181818;
  --acento-escuro: #181818;

  /* Avisos suaves (conta, pagamento pendente, excursão escolhida). */
  --acento-suave: var(--rosa-claro);
  --acento-fantasma: var(--rosa-fantasma);

  /* Topo das páginas internas: bloco rosa com texto preto, como a logo. */
  --topo-fundo: var(--rosa);
  --topo-texto: #181818;
  --topo-texto-suave: rgba(24, 24, 24, .74);
  --topo-rotulo: #181818;

  /* Seções escuras, rodapé e loja pausada. O nome da loja sai em rosa. */
  --escuro-fundo: #181818;
  --escuro-texto: var(--off);
  --escuro-marca: var(--rosa);

  /* Faixa que corre no topo. */
  --aviso-fundo: #181818;
  --aviso-texto: var(--rosa-claro);
  --aviso-marca: var(--rosa);

  /* Botão preto enche de rosa ao passar o mouse. */
  --botao-realce: var(--rosa);

  --selecao-fundo: var(--rosa);
  --selecao-texto: #181818;

  /* tipografia */
  --fonte-titulo: 'Archivo Black', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
  --fonte-texto: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --fonte-numero: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;

  --titulo-peso: 400;           /* a Archivo Black só tem um peso */
  --titulo-caixa: lowercase;
  --titulo-espaco: -0.01em;
  --titulo-altura: 1.02;

  /* nome da peça: como está cadastrado no painel */
  --nome-peca-caixa: none;
  --nome-peca-peso: 600;

  --raio: 0px;
}