/* ============================================================
   Supreme Fitness — Design Tokens (LP v5 — DEFINITIVA)
   Fonte da verdade: brand-kit.md (validado via getComputedStyle no site no ar)
   + site-atual/ANALISE-SITE-ATUAL.md
   Paleta REAL: alternância dark/claro + dourado #C8A857 (CTA único)
   Camadas: primitive -> semantic
   ============================================================ */

:root {
  /* ---------- Primitivos: cor (valores exatos do DOM real) ---------- */
  --c-dark:          #1D1D1B; /* rgb(29,29,27)  header/footer/segredos/bg-dark padrão */
  --c-dark-deep:     #141413; /* rgb(20,20,19)  seção do form (mais escuro) */
  --c-black:         #000000; /* consultoria (preto total) */
  --c-dark-grad-end: #3A3A3A; /* rgb(58,58,58)  fim do gradiente do hero */
  --c-light:         #EDEDED; /* rgb(237,237,237) equipamentos / conheça */
  --c-lighter:       #F7F7F7; /* rgb(247,247,247) estrutura */
  --c-white:         #FFFFFF;

  --c-gold:          #C8A857; /* rgb(200,168,87) — CTA único, sem exceção */
  --c-gold-hover:    #D4B868; /* tonalidade hover do dourado */
  --c-gold-deep:     #A98B3E; /* dourado sombra p/ bordas/detalhes sobre claro */
  --c-gold-text:     #7E6320; /* dourado p/ TEXTO sobre fundo claro (AA 4.8:1) */

  /* Vermelho = cor de PRODUTO (foto), nunca UI. Mantido só p/ detalhe de marca raríssimo. */
  --c-red:           #C8102E;

  /* Neutros de texto */
  --c-ink:           #1D1D1B; /* texto sobre fundos claros */
  --c-ink-2:         #4A4A47; /* texto secundário sobre claro */
  --c-paper:         #F2F2EE; /* texto sobre fundos escuros (off-white quente) */
  --c-paper-mut:     rgba(242, 242, 238, 0.66); /* secundário sobre escuro (>4.5:1) */

  /* ---------- Semânticos ---------- */
  /* Fundos */
  --bg-dark:         var(--c-dark);
  --bg-dark-deep:    var(--c-dark-deep);
  --bg-black:        var(--c-black);
  --bg-light:        var(--c-light);
  --bg-lighter:      var(--c-lighter);
  --hero-grad:       linear-gradient(81deg, #1D1D1B 0%, #3A3A3A 100%);

  /* Texto por contexto */
  --text-on-dark:        var(--c-paper);
  --text-on-dark-mut:    var(--c-paper-mut);
  --text-on-dark-strong: var(--c-white);
  --text-on-light:       var(--c-ink);
  --text-on-light-mut:   var(--c-ink-2);

  /* Bordas / superfícies */
  --line-on-dark:    rgba(255, 255, 255, 0.12);
  --line-on-light:   rgba(29, 29, 27, 0.12);
  --surface-dark:    #232321; /* card sobre fundo dark */
  --surface-light:   #FFFFFF; /* card sobre fundo claro */

  /* CTA dourado — texto PRETO (real: #000/#1D1D1B). Contraste ~7:1 (branco reprovaria) */
  --cta-bg:          var(--c-gold);
  --cta-bg-hover:    var(--c-gold-hover);
  --cta-text:        #1D1D1B;
  --gold:            var(--c-gold);

  /* ---------- Tipografia ----------
     Display = Orbitron (REAL, tech/sci-fi). Pesos 700/800. ALL CAPS nas linhas-assinatura.
     Corpo/UI/CTA = Montserrat (REAL). Pesos 400/600/700.
     Self-host woff2 (latin + latin-ext) — PT-BR coberto por U+0000-00FF. */
  --font-display: "Orbitron", "Orbitron Fallback", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Montserrat", "Montserrat Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* escala fluida — Orbitron é largo: tetos contidos p/ não estourar mobile */
  --fs-display:  clamp(2.1rem, 6.4vw, 4.2rem);  /* hero H1 (3 linhas) */
  --fs-h2:       clamp(1.7rem, 4.4vw, 3rem);    /* títulos de seção bipartidos */
  --fs-h3:       clamp(1.25rem, 2.6vw, 1.7rem); /* nomes de linha / sub */
  --fs-lead:     clamp(1.02rem, 1.6vw, 1.18rem);
  --fs-body:     1rem;
  --fs-sm:       0.875rem;
  --fs-xs:       0.75rem;
  --fs-eyebrow:  0.72rem;

  --lh-display:  1.06;
  --lh-tight:    1.12;
  --lh-body:     1.65;
  --track-display: 0.01em;   /* Orbitron já é espaçada; tracking mínimo */
  --track-label:   0.18em;

  /* ---------- Espaçamento / layout ---------- */
  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.5rem;  --space-6: 2rem;
  --space-8: 3rem;     --space-10: 4rem;   --space-12: 6rem;

  --container:      1200px;
  --container-text: 760px;
  --gutter:         clamp(1.1rem, 4vw, 2.5rem);
  --section-y:      clamp(3.5rem, 8vw, 6.5rem);

  --radius:    6px;     /* radius contido (o site real usa cantos retos/leves) */
  --radius-lg: 12px;
  --radius-pill: 999px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --header-h: 70px;
}