/* =========================================================
   TEMA DA LOJA: Rayo Fitness

   Cores medidas nas artes da marca (logo + informações, 19/10/2026):
     - vinho #5D0115, o fundo de todas as artes, é a cor da marca;
     - creme #FEFFF1, o das letras da logo;
     - amarelo #FFF384, o realce das frases ("RECOMPENSA", "CONSTÂNCIA");
     - vinho #6A1527, o R de marca d'água atrás das frases;
     - vinho bem escuro #440000, o canto das artes.
   O vinho entra em bloco, faixa, botão e texto de destaque. O amarelo só
   sobre o vinho: no fundo claro ele some.

   Tipografia das artes: títulos em Open Sans ExtraBold, em caixa alta
   ("NOSSA MISSÃO", "O QUE ESTÁ POR VIR?"); texto em Montserrat, a mesma do
   "FITNESS" da logo; preço em fonte monoespaçada, como nas outras lojas.

   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=Open+Sans:wght@700;800&family=IBM+Plex+Mono:wght@500&family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
  /* as cores da marca, para usar abaixo e no config.js (var(--vinho)) */
  --vinho: #5D0115;
  --vinho-claro: #7A1A30;
  --vinho-agua: #6A1527;
  --vinho-escuro: #440000;
  --vinho-noite: #33000B;
  --creme: #FEFFF1;
  --creme-escuro: #F6F1E2;
  --amarelo: #FFF384;
  --off: #FCFBF5;

  /* texto e estrutura: quase preto puxado pro vinho */
  --preto: #1F0A0F;
  --tinta: #1F0A0F;
  --grafite: #3A2228;
  --cinza: #65555A;
  --cinza-medio: #918287;
  --cinza-claro: #C7BBBE;
  --linha: #EEE7DF;
  --linha-forte: #DFD3CA;

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

  /* Acento de interface (foco, sublinhado, ícones pequenos, avisos). */
  --acento: var(--vinho);
  --acento-escuro: var(--vinho-escuro);

  /* Avisos suaves (conta, pagamento pendente, regras da peça). */
  --acento-suave: #F1DDE1;
  --acento-fantasma: #FAF1F2;

  /* Topo das páginas internas: bloco vinho com letra creme, como as artes,
     e o rótulo no amarelo do realce. */
  --topo-fundo: var(--vinho);
  --topo-texto: var(--creme);
  --topo-texto-suave: rgba(254, 255, 241, .85);
  --topo-rotulo: var(--amarelo);

  /* Seções escuras, rodapé e loja pausada: o vinho mais fechado. */
  --escuro-fundo: var(--vinho-noite);
  --escuro-texto: var(--creme);
  --escuro-marca: var(--amarelo);

  /* Faixa que corre no topo. */
  --aviso-fundo: var(--vinho);
  --aviso-texto: var(--creme);
  --aviso-marca: var(--amarelo);

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

  --selecao-fundo: var(--amarelo);
  --selecao-texto: #1F0A0F;

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

  --titulo-peso: 800;
  --titulo-caixa: uppercase;
  --titulo-espaco: 0;
  --titulo-altura: 1.05;

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

  /* cantos quase retos: as artes são de linha firme */
  --raio: 4px;
}