/* =========================================================
   TEMAS
   Cada tema é um conjunto de variáveis: cores, fontes, formas e ritmo
   das animações. Para trocar o tema do site inteiro, mude só o atributo
   no <html>:  <html lang="pt-BR" data-tema="sakura">  ou  data-tema="noir"
   As variáveis usam os MESMOS nomes do kit, então os componentes da
   biblioteca (componentes-site) também acompanham o tema.
   Para ajustar ao gosto da cliente, altere os valores dentro do tema
   (ex.: um rosa mais forte em --cor-primaria) ou crie um tema novo
   copiando um bloco inteiro e trocando o nome.
   ========================================================= */

/* ---------- Fontes (arquivos locais, licença OFL) ---------- */
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/dm-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/dm-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/dm-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Syne"; src: url("../fonts/syne-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Syne"; src: url("../fonts/syne-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Dancing Script"; src: url("../fonts/dancing-script-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Dancing Script"; src: url("../fonts/dancing-script-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Dancing Script"; src: url("../fonts/dancing-script-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Great Vibes"; src: url("../fonts/great-vibes-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("../fonts/dm-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }


/* === TEMA: sakura (padrão) — delicado, pastel, movimentos lentos === */
:root,
[data-tema="sakura"] {
  --cor-primaria: #b04f6e;        /* botões, destaques */
  --cor-primaria-escura: #8f3c57;
  --cor-acento: #e8a7b9;          /* detalhes, pétalas, aquarela */
  --cor-fundo: #fdf8f5;           /* fundo principal (creme) */
  --cor-fundo-claro: #f8ebe9;     /* seções alternadas (rosado) */
  --cor-texto: #3d2b31;
  --cor-texto-suave: #6e5a60;
  --cor-borda: #ecd9d7;
  --cor-sobre-primaria: #ffffff;  /* texto em cima de botões */
  --cor-whatsapp: #1fa855;

  /* Fontes: cursiva só em títulos grandes e no nome; o resto em fontes fáceis de ler */
  --fonte-titulo: "Dancing Script", "Brush Script MT", cursive;   /* h1, h2 */
  --fonte-marca: "Dancing Script", "Brush Script MT", cursive;    /* nome do estúdio (opção: "Great Vibes") */
  --fonte-subtitulo: "Cormorant Garamond", Georgia, serif;        /* h3, nomes de serviços, legendas */
  --fonte-numeros: "Cormorant Garamond", Georgia, serif;          /* cronômetro e números grandes */
  --fonte-texto: "DM Sans", system-ui, sans-serif;
  --fonte-detalhe: "DM Sans", system-ui, sans-serif;            /* rótulos pequenos (a mesma do texto) */
  --peso-titulo: 600;
  --peso-subtitulo: 600;
  --caixa-titulo: none;          /* none = como escrito; uppercase = maiúsculas (nunca use com cursiva) */
  --espaco-letras-titulo: 0;
  --escala-titulo: 1.12;          /* tamanho relativo dos títulos (cursiva pede um pouco maior) */

  --raio: 18px;
  --largura-max: 1100px;
  --espaco: 1rem;

  --mov-duracao: 1.1s;            /* quanto dura cada animação */
  --mov-distancia: 28px;          /* quanto o elemento "viaja" ao surgir */
  --mov-curva: cubic-bezier(.22, .61, .36, 1); /* suave, desacelerando */
  --mov-atraso: 110ms;            /* intervalo entre itens em sequência */
  --mov-intensidade: .5;          /* paralaxe: 0 = parado, 1 = forte */
  --petalas: 1;                   /* 1 = mostra pétalas na abertura, 0 = esconde */
  --opacidade-fundo: .55;         /* força da foto de fundo da abertura */
}

/* Sakura: detalhes pequenos delicados (o noir fica como está) */
[data-tema="sakura"] .detalhe {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .18em;
}
/* Tempos do processo em DM Mono: a DM Sans instalada não tem algarismos de mesma largura */
[data-tema="sakura"] .processo__etapas .processo__t { font-family: "DM Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }

/* === TEMA: noir — escuro, letras fortes, movimentos secos === */
[data-tema="noir"] {
  --cor-primaria: #e0507a;
  --cor-primaria-escura: #ea6b8f;   /* botão ao passar o mouse */
  --cor-acento: #8e1b3c;
  --cor-fundo: #0f0c0d;
  --cor-fundo-claro: #1a1517;
  --cor-texto: #f3ece8;
  --cor-texto-suave: #b3a7a3;
  --cor-borda: #34292c;
  --cor-sobre-primaria: #0f0c0d;  /* texto escuro no botão rosa: contraste */
  --cor-whatsapp: #1fa855;

  --fonte-titulo: "Syne", "Arial Black", sans-serif;
  --fonte-marca: "Syne", "Arial Black", sans-serif;
  --fonte-subtitulo: "Syne", "Arial Black", sans-serif;
  --fonte-numeros: "Syne", "Arial Black", sans-serif;
  --fonte-texto: "DM Sans", system-ui, sans-serif;
  --fonte-detalhe: "DM Mono", ui-monospace, monospace;
  --peso-titulo: 800;
  --peso-subtitulo: 700;
  --caixa-titulo: uppercase;
  --espaco-letras-titulo: -.01em;
  --escala-titulo: .82;

  --raio: 4px;
  --largura-max: 1100px;
  --espaco: 1rem;

  --mov-duracao: .7s;
  --mov-distancia: 44px;
  --mov-curva: cubic-bezier(.7, 0, .2, 1);
  --mov-atraso: 70ms;
  --mov-intensidade: .9;
  --petalas: 0;
  --opacidade-fundo: .12;
}
/* === FIM DOS TEMAS === */