/* =========================================================
   VARIÁVEIS GLOBAIS — AXIS PILATES (v3.0)
   Estratégia: base clara e arejada com VERMELHO PROFUNDO como
   acento elegante. O dourado e o grafite mantêm a conexão com
   a logo. O vermelho pontua, nunca domina.
   ========================================================= */

:root {
  /* -----------------------------------------------------
     FUNDOS — bases claras
     ----------------------------------------------------- */
  --cor-fundo-principal: #FFFFFF;
  --cor-fundo-secundario: #FAF8F5;
  --cor-fundo-terciario: #F2EEE8;
  --cor-fundo-card: #FFFFFF;
  --cor-fundo-escuro: #1A1A1A;          /* footer + CTA escuro */

  /* -----------------------------------------------------
     VERMELHO — cor de acento principal
     ----------------------------------------------------- */
  --cor-vermelho: #B91C1C;
  --cor-vermelho-escuro: #8B1414;
  --cor-vermelho-claro: #E04848;
  --cor-vermelho-suave: rgba(185, 28, 28, 0.08);

  /* Aliases legados: várias regras em CSS antigos referenciam
     --cor-salvia*. Mapeamos para os tons de vermelho para
     preservar a aparência sem reescrever cada seletor. */
  --cor-salvia-claro: #F4D4D4;
  --cor-salvia: var(--cor-vermelho);
  --cor-salvia-escuro: var(--cor-vermelho-escuro);
  --cor-salvia-profundo: #5A1010;

  /* -----------------------------------------------------
     DOURADO — papel de suporte (mantém conexão com a logo)
     ----------------------------------------------------- */
  --cor-dourado-claro: #D9BC8A;
  --cor-dourado: #C8A26A;
  --cor-dourado-escuro: #A67C45;

  /* -----------------------------------------------------
     GRAFITE / TEXTOS
     ----------------------------------------------------- */
  --cor-grafite: #1A1A1A;
  --cor-texto-principal: #2B2B2B;
  --cor-texto-secundario: #6B6B6B;
  --cor-texto-suave: #8A8A8A;
  --cor-texto-claro: #F5F3EF;          /* fundos escuros */

  /* -----------------------------------------------------
     FUNCIONAIS
     ----------------------------------------------------- */
  --cor-borda: #E5DED4;
  --cor-borda-salvia: #E5DED4;
  --cor-whatsapp: #25D366;

  /* -----------------------------------------------------
     TIPOGRAFIA
     ----------------------------------------------------- */
  --fonte-titulos: 'Cormorant Garamond', Georgia, serif;
  --fonte-corpo: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-base: 1.0625rem;                /* 17px */

  --tamanho-h1: clamp(2.4rem, 6vw, 4.5rem);
  --tamanho-h2: clamp(1.9rem, 4.5vw, 3rem);
  --tamanho-h3: clamp(1.5rem, 3vw, 1.9rem);
  --tamanho-corpo: clamp(1.0625rem, 1.15vw, 1.125rem);
  --tamanho-pequeno: 0.95rem;

  /* -----------------------------------------------------
     ESPAÇAMENTOS
     ----------------------------------------------------- */
  --espaco-xs: 0.5rem;
  --espaco-sm: 0.75rem;
  --espaco-md: 1.25rem;
  --espaco-lg: 2rem;
  --espaco-xl: 2.5rem;
  --espaco-2xl: 4rem;
  --espaco-3xl: 5rem;
  --espaco-xxl: var(--espaco-2xl);

  --padding-secao-x: clamp(1.25rem, 5vw, 4rem);
  --padding-secao-y: clamp(3rem, 6vw, 5rem);

  --largura-max: 1280px;
  --largura-max-leitura: 920px;

  /* -----------------------------------------------------
     SOMBRAS — suaves, sem dominar
     ----------------------------------------------------- */
  --sombra-sutil: 0 1px 3px rgba(26, 26, 26, 0.05);
  --sombra-card: 0 4px 20px rgba(26, 26, 26, 0.06);
  --sombra-card-profunda: 0 12px 36px rgba(26, 26, 26, 0.12);
  --sombra-vermelho: 0 8px 24px rgba(185, 28, 28, 0.22);
  --sombra-vermelho-glow: 0 10px 30px rgba(185, 28, 28, 0.28);
  --sombra-dourado: 0 6px 22px rgba(200, 162, 106, 0.22);
  --sombra-dourado-glow: 0 8px 28px rgba(200, 162, 106, 0.30);
  --sombra-header: 0 1px 16px rgba(26, 26, 26, 0.05);

  /* -----------------------------------------------------
     TRANSIÇÕES
     ----------------------------------------------------- */
  --transicao-rapida: 200ms ease;
  --transicao-padrao: 400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transicao-lenta: 600ms cubic-bezier(0.4, 0, 0.2, 1);

  /* -----------------------------------------------------
     BORDAS
     ----------------------------------------------------- */
  --raio-pequeno: 2px;
  --raio-botao: 4px;
  --raio-card: 6px;
  --borda-vermelha: 1px solid var(--cor-vermelho);
  --borda-dourada: 1px solid var(--cor-dourado);
  --borda-salvia: 1px solid var(--cor-borda);
  --borda-fina: 1px solid var(--cor-borda);

  /* -----------------------------------------------------
     Z-INDEX
     ----------------------------------------------------- */
  --z-header: 100;
  --z-menu-mobile: 9999;
  --z-whatsapp-flutuante: 90;
}