/* ======================================================================
   Surf Center Brasil — Marca compartilhada (mini brandbook oficial)
   Fonte: revista/pit.md secao 3 "Visual (INVIOLAVEL: mini brandbook manda)"
   + revista/site/assets/css/revista.css (design system ja implementado).

   Este arquivo define APENAS tokens (cores, tipografia, raio, sombra) e
   um punhado de primitivas de uso comum (pilula/badge translucido,
   botao preenchido/outline). Cada LP mapeia as PROPRIAS variaveis legadas
   (--verde-deep, --verde-breezer, --off-white etc, ja usadas em toda a
   folha de estilo local) para estes tokens no :root do seu styles.css —
   assim o reskin cascateia por toda a pagina sem reescrever cada seletor.

   Criado em 2026-08-25/26 durante o rebrand da LP São Paulo (referencia
   para replicar em cwb/, rp/ e sp-piloto-agenda/ nas proximas rodadas).
   ====================================================================== */

:root {
  /* paleta oficial do mini brandbook (pit.md secao 3) */
  --concha: #F0ECE2;   /* fundo dominante */
  --oliva: #494638;    /* titulos e texto principal */
  --areia: #D6C2AB;
  --aqua: #A6DAD9;
  --petroleo: #163648; /* blocos escuros pontuais + logo sobre fundo escuro */
  --laranja: #E1753A;  /* acento: bordas, hover, numeros grandes sobre petroleo */
  --laranja-cta: #E58957; /* CTA primario (2026-08-26): tom ajustado do laranja
    (mesmo H/S, +7 de luminosidade) para fechar >=4.5:1 real (WCAG) contra
    texto petroleo — medido 4,86:1 (laranja puro #E1753A contra petroleo
    mede so 4,11:1, abaixo do minimo AA). Uso: fundo de botao PRIMARIO com
    texto var(--petroleo); hover inverte pra fundo var(--petroleo) + texto
    var(--concha) (10,75:1). Ver sp/styles.css .btn-primary e
    _shared/lead-modal/lead-modal-brand.css .submit-button (replicar em cwb/rp). */

  --laranja-stat: #EAA078; /* Acerto final (2026-08-26): tom aclarado do laranja
    SO PARA .sc-stat-number (numeros grandes +1.000/+20/365 sobre o card
    translucido 6% branco do .sc-stats, fundo petroleo). Medicao anterior de
    4,11:1 estava ERRADA por nao compor a camada translucida do card
    (.sc-stat-card, rgba(255,255,255,.06)) — o valor REAL do laranja puro
    contra o card composito e so 3,44:1 (petroleo) / 2,58:1 (oliva, caso
    .sc-stats usasse --verde-deep). Contraste exige LUZ (nao escurecer): o
    fundo e escuro, entao so um laranja mais claro aumenta a distancia de
    luminancia. --laranja-stat mantem o mesmo H/S do --laranja base (so +14
    de luminosidade em HSL) e mede 4,95:1 contra o card composito sobre
    petroleo (fundo padronizado nas 4 LPs) — folga real acima do minimo
    4,5:1 pedido. NAO usar --laranja-stat em nenhum outro elemento; --laranja
    (puro) e --laranja-cta continuam intocados para os demais usos. */

  --oliva-60: rgba(73, 70, 56, 0.6);
  --oliva-20: rgba(73, 70, 56, 0.2);
  --oliva-10: rgba(73, 70, 56, 0.1);
  --concha-85: rgba(240, 236, 226, 0.85);
  --concha-70: rgba(240, 236, 226, 0.7);
  --petroleo-85: rgba(22, 54, 72, 0.85);

  --fonte-display: "Agatho", "Playfair Display", Georgia, serif;
  --fonte-ui: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --raio: 0px;          /* cantos retos — caracteristica central da marca */
  --raio-pilula: 999px; /* unica excecao a "sem arredondar": pilulas/badges */

  --sombra-cartao-suave: 0 1px 2px rgba(22, 54, 72, 0.05), 0 4px 14px -4px rgba(22, 54, 72, 0.12);
  --sombra-cartao-media: 0 1px 2px rgba(22, 54, 72, 0.06), 0 14px 32px -10px rgba(22, 54, 72, 0.18);
  --transicao-padrao: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Tipografia global: titulos em serifada display, corpo em Montserrat.
   Como quase todas as secoes das LPs nunca sobrescrevem font-family em
   h1-h6 (so cor), esta regra cascateia sem precisar tocar cada selecao. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--fonte-display);
  font-weight: 600;
}

body {
  font-family: var(--fonte-ui);
}

/* Pilula/badge translucido sobre foto ou video — unica forma arredondada
   permitida pelo brandbook. Usar sempre que uma LP precisar de um selo
   (eyebrow, tag, "Em construção", "Lançamento" etc) sobre imagem/video. */
.sc-brand-pilula {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 8px 20px;
  border-radius: var(--raio-pilula);
  background: var(--concha-85);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--petroleo);
  font-family: var(--fonte-ui);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Botao preenchido PRIMARIO (CTA de conversao) — ATUALIZADO 2026-08-26
   (decisao Alisson, ver sp/styles.css/context.md "hierarquia de botoes"):
   laranja de acento (--laranja-cta, tom ajustado) com texto ESCURO
   (petroleo), nao mais oliva solido — oliva-solido-com-texto-claro e
   tecnicamente legivel (8:1) mas "some" na pagina por ser a MESMA familia
   de cor de titulos/texto/secoes, sem nenhum destaque visual. Laranja PURO
   (--laranja, #E1753A) continua proibido como fundo de botao com texto
   PEQUENO claro (falha AA, ~2.4-3.3:1 contra concha/oliva) — mas laranja
   ajustado + texto ESCURO passa com folga (--laranja-cta/petroleo: 4,86:1,
   medido). Hover inverte pro petroleo solido + texto concha (10,75:1).
   Replicar esta receita tal-qual em cwb/rp quando migradas (ver
   sp/styles.css .btn-primary e _shared/lead-modal/lead-modal-brand.css). */
.sc-brand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 35px;
  font-family: var(--fonte-ui);
  font-weight: 600;
  font-size: 16px;
  border: none;
  border-radius: var(--raio);
  cursor: pointer;
  transition: var(--transicao-padrao);
  background: var(--laranja-cta);
  color: var(--petroleo);
}
.sc-brand-btn:hover {
  background: var(--petroleo);
  color: var(--concha);
  transform: translateY(-2px);
}

/* Secundario SOBRIO sobre fundo CLARO (concha/areia): contorno petroleo. */
.sc-brand-btn--secondary {
  background: transparent;
  border: 2px solid var(--petroleo);
  color: var(--petroleo);
}
.sc-brand-btn--secondary:hover {
  background: var(--petroleo);
  color: var(--concha);
}

/* Secundario SOBRIO sobre fundo ESCURO (petroleo/oliva): contorno concha.
   Mantido com o nome antigo (--outline) por compatibilidade — usar em
   cards/secoes com bg escuro (ex: .sc-brand-secao--petroleo, .btn-club). */
.sc-brand-btn--outline {
  background: transparent;
  border: 2px solid var(--concha);
  color: var(--concha);
}
.sc-brand-btn--outline:hover {
  background: var(--concha);
  color: var(--petroleo);
}

/* Bloco escuro pontual (footer, faixa de numeros, CTA final) */
.sc-brand-secao--petroleo {
  background: var(--petroleo);
  color: var(--concha);
}
.sc-brand-secao--petroleo h1,
.sc-brand-secao--petroleo h2,
.sc-brand-secao--petroleo h3,
.sc-brand-secao--petroleo h4 {
  color: var(--concha);
}