/* =====================================================================
   CENTRAL DE AJUSTES · Página de captura da Black da Gabi · v1
   Mude aqui cores, fontes, tamanhos e espaços. Nada fora deste arquivo
   tem valor fixo: tudo puxa destas variáveis.
   Origem: design-system/design-system-v1.html (mesmas variáveis).

   CONTRASTE MEDIDO (WCAG, razão) dos pares usados na página:
     creme   #EDE1D1 sobre preto        #000000  16,29  AA/AAA
     creme   #EDE1D1 sobre preto quente #0E0B09  15,22  AA/AAA
     dourado #DAC4A7 sobre preto        #000000  12,44  AA/AAA
     dourado #DAC4A7 sobre preto quente #0E0B09  11,62  AA/AAA
     preto   #000000 sobre branco       #FFFFFF  21,00  AA/AAA  (texto do botão, v2)
     preto   #000000 sobre laranja vivo #FC7413   7,65  AA/AAA  (ícone do botão no hover)
     branco  #FFFFFF sobre laranja vivo #FC7413   2,75  REPROVADO: não usar
     laranja vivo #FC7413 sobre preto   #000000   7,65  AA      (ícones, erro)
     laranja #CA6219 sobre preto        #000000   5,27  AA      (detalhes)
     preto   #000000 sobre creme        #EDE1D1  16,29  AA/AAA  (seções claras)
     marrom  #69310A sobre creme        #EDE1D1   7,97  AA/AAA
     creme   #EDE1D1 sobre marrom       #69310A   7,97  AA/AAA  (cartão de presentes)
     dourado #DAC4A7 sobre marrom       #69310A   6,08  AA
     laranja vivo #FC7413 sobre marrom  #69310A   3,74  só ícone (mín. 3,0)
     laranja #CA6219 sobre creme        #EDE1D1   3,09  só traço/ícone, nunca texto
   Proibido: vermelho, branco puro em texto sobre laranja.
   ===================================================================== */

@font-face { font-family: "Montserrat"; src: url("/fonts/montserrat-700.woff2?v=20261028b") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/fonts/montserrat-800.woff2?v=20261028b") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Signatura Monoline"; src: url("/fonts/signatura-monoline.woff2?v=20261028b") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/fonts/figtree-400.woff2?v=20261028a") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/fonts/figtree-500.woff2?v=20261028a") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/fonts/figtree-600.woff2?v=20261028a") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/fonts/figtree-700.woff2?v=20261028a") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* ---------- CORES (só estas; não inventar outras) ---------- */
  --preto:          #000000;   /* fundo dominante */
  --preto-quente:   #0E0B09;   /* cartões, camadas, fundo do topo */
  --dourado:        #DAC4A7;   /* títulos de destaque, fio */
  --creme:          #EDE1D1;   /* texto sobre preto, fundo das seções claras */
  --marrom:         #69310A;   /* cartão de presentes, contorno do fio */
  --laranja:        #CA6219;   /* laranja queimado: detalhes (v2: sem luz no fundo) */
  --laranja-vivo:   #FC7413;   /* arremate do fio, ícone do botão no hover, erro */
  --branco:         #FFFFFF;   /* v2: só no botão principal (pedido do Matheus, padrão da referência) */

  /* derivados (misturas das cores acima, nunca cor nova) */
  --creme-apagado:  color-mix(in srgb, var(--creme) 62%, var(--preto));  /* texto de apoio */
  --creme-fio:      color-mix(in srgb, var(--creme) 22%, transparent);   /* bordas finas no escuro */
  --marrom-fio:     color-mix(in srgb, var(--marrom) 22%, transparent);  /* bordas finas no claro */

  /* ---------- FONTES ---------- */
  --fonte-titulo: "Montserrat", "Helvetica Neue", Arial, sans-serif; /* SÓ títulos grandes (parente livre da Gotham do site dela) */
  --peso-titulo: 800;
  --fonte-mao: "Signatura Monoline", cursive;                     /* manuscrita: só em palavras soltas (classe .mao; hoje em "compra" e "sozinha") */
  --mao-escala: 2.2;                                              /* tamanho da palavra manuscrita em relação ao título */
  --mao-traco: .022em;                                            /* engrossa o traço fino da manuscrita */
  --fonte-texto:  "Figtree", "Helvetica Neue", Arial, sans-serif; /* todo o resto */

  /* ---------- TAMANHOS DE TEXTO ---------- */
  --t-h1:      clamp(1.4rem, 1rem + 2.1vw, 2.75rem);
  --t-h2:      clamp(1.7rem, 1.2rem + 2.4vw, 3.1rem);
  --t-frase:   clamp(1.45rem, 1.05rem + 1.9vw, 2.6rem);  /* frases de impacto na fonte de título */
  --t-h3:      clamp(1.05rem, .95rem + .45vw, 1.3rem);
  --t-lead:    clamp(1rem, .93rem + .35vw, 1.2rem);
  --t-texto:   clamp(.98rem, .94rem + .2vw, 1.08rem);
  --t-rotulo:  clamp(.8rem, .76rem + .2vw, .9rem);
  --t-botao:   clamp(.9rem, .85rem + .25vw, 1rem);
  --t-selo:    clamp(.66rem, .6rem + .25vw, .78rem);

  /* ---------- ESPAÇOS (base 8) ---------- */
  --e-1: .5rem;  --e-2: 1rem;  --e-3: 1.5rem;  --e-4: 2rem;  --e-5: 3rem;  --e-6: 4rem;
  --lateral:       clamp(1.1rem, .6rem + 2.5vw, 2.5rem);   /* respiro das bordas */
  --largura:       1240px;                                   /* largura máxima */
  --secao-y:       clamp(3.5rem, 2rem + 5vw, 6rem);         /* respiro vertical das seções */

  /* ---------- FORMA ---------- */
  --raio:          14px;     /* botão e campo (referência: 14) */
  --raio-foto:     28px;     /* v3: moldura das fotos (topo e fim) */
  --raio-secao:    clamp(40px, 4.5vw, 56px);   /* v3: cantos do bloco creme que sobe sobre o topo */
  --curva-alt:     clamp(44px, 7vw, 110px);    /* v3: altura da curva no pé da Dobra 2 */
  --atravessa:     clamp(7rem, 14vw, 11rem);   /* v3: quanto do painel da foto do fim entra no creme */
  --raio-cartao:   22px;     /* cartões, balões, formulário, ingresso (referência: 22) */
  --hairline:      inset 0 0 0 1px color-mix(in srgb, var(--creme) 12%, transparent); /* contorno interno dos cartões escuros */
  --sombra-botao:  0 10px 24px -14px color-mix(in srgb, var(--creme) 55%, transparent);
  --sombra-botao-claro: 0 10px 22px -14px color-mix(in srgb, var(--preto) 60%, transparent);
  --borda-escuro:  1px solid var(--creme-fio);
  --borda-claro:   1px solid var(--marrom-fio);
  --sombra-1:      0 6px 18px -12px color-mix(in srgb, var(--preto) 55%, transparent); /* única sombra, curta */

  /* ---------- LUZ ---------- */
  /* v2: sem luz laranja no fundo (fundo limpo, como na referência) */
  --veu-foto:  linear-gradient(to bottom, #000 58%, transparent 98%);   /* máscara: foto some no fundo */

  /* ---------- FIO DE CROCHÊ (correntinha) ---------- */
  --fio-cor:       var(--dourado);   /* corpo do fio */
  --fio-contorno:  var(--marrom);    /* contorno: lê no preto e no creme */
  --arremate:      var(--laranja-vivo);

  /* ---------- HERO ---------- */
  --logo-hero:       clamp(12rem, 8rem + 12vw, 15rem);   /* largura da logo no topo (logo nova com "EXCLUSIVA PARA ALUNAS": abaixo de 13,5rem a frase fica ilegível) */
  --foto-topo:       clamp(6.4rem, 4rem + 9vw, 8rem);     /* v3: onde a foto começa no celular (logo acima dela) */
  --foto-hero-alt:   clamp(14rem, 40svh, 30rem);           /* altura da moldura da foto no celular (v3: menor em telas baixas para o 1º campo caber) */

  /* ---------- MOVIMENTO ---------- */
  --curva:  cubic-bezier(.22, .8, .24, 1);
  --curva-saida: cubic-bezier(.16, 1, .3, 1);   /* referência: botões e entradas */
  --rapido: .22s;
  --medio:  .55s;
  --lento:  1s;
}