/* ==========================================================================
   CT Tarcísio Alves Jiu-Jitsu — Design Tokens (sistema compartilhado)
   Este arquivo é a base que a Página Institucional e as 6 landing pages
   futuras devem importar. Não redefinir cor/fonte/raio em outro lugar —
   qualquer ajuste de marca acontece aqui, uma vez só.
   Fonte da paleta/tipografia: branding book §10 (validado com o cliente).
   ========================================================================== */

:root {
  /* ---- Cor — base preto/branco ~80%, dourado accent ~15%, vermelho ~5% ---- */
  --cor-preto: #0b0b0a;          /* fundo escuro dominante (nunca #000 puro) */
  --cor-preto-alt: #17140f;      /* superfície de card sobre fundo escuro */
  --cor-branco: #f7f4ee;         /* fundo claro alternado (nunca #fff puro) */
  --cor-branco-alt: #efe9df;     /* superfície de card sobre fundo claro */
  --cor-texto-claro: #c9c4bb;    /* corpo de texto sobre fundo escuro */
  --cor-texto-escuro: #55504a;   /* corpo de texto sobre fundo claro */
  --cor-titulo-claro: #f7f4ee;   /* headline sobre fundo escuro */
  --cor-titulo-escuro: #171512;  /* headline sobre fundo claro */
  --cor-dourado: #c9962f;        /* accent principal — credencial, CTA */
  --cor-dourado-claro: #e4b857;  /* hover / variação clara do dourado */
  --cor-vermelho: #7a1f1f;       /* accent restrito — uso pontual, ~5% */
  --cor-borda-escura: rgba(247, 244, 238, 0.12);
  --cor-borda-clara: rgba(11, 11, 10, 0.12);

  /* ---- Tipografia — 1 família display, 1 família corpo (branding §10.3) ---- */
  --fonte-display: "Oswald", "Arial Narrow", sans-serif; /* headline + selo, mesma família */
  --fonte-corpo: "Barlow", system-ui, sans-serif;

  --texto-h1: clamp(2.25rem, 3.4vw + 1.6rem, 4.25rem);
  --texto-h2: clamp(1.75rem, 1.8vw + 1.3rem, 2.75rem);
  --texto-h3: clamp(1.25rem, 0.8vw + 1.05rem, 1.6rem);
  --texto-corpo-lg: clamp(1.05rem, 0.3vw + 1rem, 1.2rem);
  --texto-corpo: 1rem;
  --texto-eyebrow: 0.78rem;

  /* ---- Raio — sistema único: cards suaves, interativos em pílula ---- */
  --raio-card: 16px;
  --raio-pill: 999px;

  /* ---- Espaçamento fluido ---- */
  --espaco-secao: clamp(3.5rem, 6vw, 7rem);
  --espaco-inline: clamp(1.25rem, 5vw, 4rem);
  --largura-conteudo: 1180px;
  --largura-leitura: 62ch;

  /* ---- Sombra tintada (nunca preto puro) ---- */
  --sombra-suave: 0 1px 2px rgba(11, 11, 10, 0.14), 0 12px 28px rgba(11, 11, 10, 0.16);
  --sombra-dourada: 0 8px 24px rgba(201, 150, 47, 0.25);

  /* ---- Easing consistente pra toda transição/animação ---- */
  --ease-suave: cubic-bezier(0.16, 1, 0.3, 1);
}