@charset "UTF-8";

/* =========================================================
   VARIÁVEIS GLOBAIS — Barbearia Conexões de Máfia
   Este é o ÚNICO lugar que deve ser editado para trocar
   a identidade visual do site (cores, fontes, raios e medidas).
   Identidade: preto, branco, cinza das silhuetas e o dourado da marca.
========================================================= */

:root {

  /* ---- CORES DE MARCA ----
     A cor da marca é o dourado (--cor-dourado). As demais apontam para ele:
     --cor-primaria: botões de ação (Agendar do topo e "Abrir agendamento")
     --cor-destaque: números dos passos, ícones e detalhes
     Para trocar a cor do site inteiro, mude só --cor-dourado e --cor-dourado-rgb.
     As versões "-rgb" (sem "#", separadas por vírgula) existem para permitir
     usar rgba(var(--cor-x-rgb), opacidade). Ao trocar uma cor, troque
     também a versão "-rgb" com o mesmo valor. */
  --cor-dourado: #d4af37;
  --cor-dourado-rgb: 212, 175, 55;

  --cor-primaria: var(--cor-dourado);
  --cor-primaria-rgb: var(--cor-dourado-rgb);
  --cor-texto-botao: #000000;            /* texto sobre o dourado */

  --cor-destaque: var(--cor-dourado);
  --cor-destaque-rgb: var(--cor-dourado-rgb);
  --cor-destaque-secundaria-rgb: 166, 124, 26;
  /* Dourado metálico do título "Nossa história": claro em cima, escuro
     embaixo, como metal sob luz (usado como "tinta" das letras). */
  --dourado-metalico: linear-gradient(180deg, #f7e7a1 0%, #e2c160 38%, #c9a032 62%, #9c7618 100%);

  /* números dos passos, ícones e estrelas da seção de confiança */
  --cor-icone: var(--cor-destaque);
  --cor-estrela: var(--cor-destaque);

  /* ---- CORES DE FUNDO ---- */
  --cor-fundo: #000000;                  /* fundo do footer */
  --cor-superficie: #121212;             /* cards da seção de confiança (sobre o preto) */
  --cor-header-vidro: rgba(0, 0, 0, 0.72);    /* header translúcido */
  --cor-header-vidro-aberto: rgba(0, 0, 0, 0.95); /* header com o menu mobile aberto */
  --cor-fundo-pagina: #000000;           /* fundo geral da página e do hero */
  --cor-fundo-agenda: #1a1407;           /* faixa do agendamento: bronze bem escuro, puxado do dourado da marca */
  --altura-transicao: 180px;             /* degradê nas emendas entre seções (preto <-> bronze) */
  --cor-fundo-confianca: #000000;        /* fundo da seção "Por que escolher a gente" */
  --cor-fundo-hover: #1c1c1c;
  --cor-foto-reserva: #262626;           /* bloco no lugar da foto do "Quem somos" enquanto não houver foto */
  --cor-midia-fundo: #000000;            /* fundo do vídeo e das imagens dos cards */

  /* ---- CORES DE TEXTO (sobre o preto e o bronze escuro) ---- */
  --cor-texto: #f2f2f2;
  --cor-texto-rgb: 242, 242, 242;
  --cor-texto-secundario: #a6a6a6;       /* subtítulos, descrições e rodapé */
  --cor-texto-suave: #cfcfcf;            /* texto corrido da história */
  --cor-texto-hover: #ffffff;

  /* ---- BORDAS E DIVISORES ---- */
  --cor-borda: rgba(255, 255, 255, 0.1); /* linhas finas sobre o preto */
  --cor-divisor: rgba(255, 255, 255, 0.2);
  --cor-divisor-titulo: rgba(255, 255, 255, 0.2);

  /* ---- SOMBRAS ---- */
  --cor-sombra-rgb: 0, 0, 0;

  /* ---- RAIOS DE BORDA ---- */
  --raio-botao: 8px;
  --raio-pilula: 8px;                    /* botões e selos */
  --raio-tile: 8px;                      /* cards da vitrine e da confiança */
  --raio-cartao: 8px;                    /* cartões dos carrosséis verticais */
  --raio-cartao-midia: 8px;              /* vídeo central */
  --raio-painel-vidro: 10px;             /* painéis com efeito liquid glass (css/glass.css) */

  /* ---- MEDIDAS DE LAYOUT ---- */
  --altura-header: 60px;
  --largura-max-header: 1200px;          /* largura do conteúdo do header, das seções e do rodapé */

  /* ---- MOVIMENTO ---- */
  --curva-suave: cubic-bezier(0.25, 0.8, 0.25, 1);

  /* ---- FONTES ----
     Lembre de atualizar também o <link> do Google Fonts no index.html. */
  --fonte-base: 'Work Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fonte-titulo: 'Bebas Neue', 'Arial Narrow', sans-serif;   /* títulos das seções, no clima de cartaz */
}