/* =====================================================================
   TOKENS DE IDENTIDADE — Circuito Agro de Tênis
   Site v0.2 · Manual de Identidade Visual v1.0 (PARA APROVAÇÃO, 17/set/2026)
   ---------------------------------------------------------------------
   ÚNICO arquivo com cores, fontes, tamanhos, espaçamentos, larguras,
   botões, bordas, cabeçalho e dimensões da marca. Os demais CSS usam
   apenas estas variáveis. Cores: 04_Cores_e_Tipografia/Paleta do manual
   (nomes --cat-* idênticos ao arquivo CircuitoAgroTenis_paleta_variaveis.css).
   Fontes: Poppins 4.004 do pacote do manual, convertida para WOFF2.
   ===================================================================== */

/* ---------- Fontes (Poppins 4.004, arquivos locais, licença OFL) ---------- */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/poppins-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/poppins-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/poppins-latin-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/poppins-latin-ext-400-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/poppins-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/poppins-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/poppins-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/poppins-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* ---------- Paleta do manual v1.0 ---------- */
  --cat-verde: #1F3D2E;          /* Verde Marca · principal · marca */
  --cat-amarelo: #E8E034;        /* Amarelo Bola · principal · só marca e detalhes esportivos (nunca texto) */
  --cat-laranja: #E25A2A;        /* Laranja Acento · principal · só marca (nunca texto) */
  --cat-creme: #F2EBD8;          /* Creme · principal · marca e fundos */
  --cat-verde-fundo: #1A3C2A;    /* Verde Fundo · secundária · fundos */
  --cat-verde-card: #234C36;     /* Verde Painel · apoio */
  --cat-verde-profundo: #0E2318; /* Verde Profundo · apoio */
  --cat-verde-sombra: #081209;   /* Verde Sombra · apoio · sobreposições */
  --cat-tinta: #10241A;          /* Tinta · apoio · texto */
  --cat-dourado: #C7A11C;        /* Dourado · apoio · filetes (não usar em texto sobre creme) */
  --cat-dourado-claro: #E2C044;  /* Dourado Claro · apoio · destaque sobre escuro */
  --cat-dourado-escuro: #8F7414; /* Dourado Escuro · apoio · texto ≥ 24 px sobre claro */
  --cat-cinza-verde: #5E6E62;    /* Cinza-verde · apoio · texto */
  --cat-creme-suave: #CBBFA4;    /* Creme Suave · apoio · texto sobre escuro */
  --cat-verde-borda: #3A6B50;    /* borda do Card Verde Painel (manual §14) */
  --cat-branco: #FFFFFF;         /* cards sobre creme (manual §9) */

  /* ---------- Papéis no site ---------- */
  --cor-verde: var(--cat-verde-fundo);
  --cor-verde-marca: var(--cat-verde);
  --cor-verde-2: var(--cat-verde-card);
  --cor-verde-borda: var(--cat-verde-borda);
  --cor-verde-profundo: var(--cat-verde-profundo);
  --cor-verde-preto: var(--cat-verde-sombra);
  --cor-creme: var(--cat-creme);
  --cor-creme-suave: var(--cat-creme-suave);
  --cor-branco: var(--cat-branco);
  --cor-tinta: var(--cat-tinta);
  --cor-cinza-verde: var(--cat-cinza-verde);
  --cor-dourado: var(--cat-dourado);
  --cor-dourado-claro: var(--cat-dourado-claro);
  --cor-dourado-escuro: var(--cat-dourado-escuro);
  --cor-amarelo-bola: var(--cat-amarelo);
  --cor-texto-destaque-claro: var(--cat-verde);   /* etiquetas pequenas sobre claro (ver docs_internos/03) */
  /* Cores funcionais do formulário — não pertencem à identidade */
  --cor-erro: #9E2A1F;
  --cor-erro-fundo: #F7E3DE;
  --cor-sucesso: #1F5E3A;
  --cor-sucesso-fundo: #E3EFE6;

  /* Sobreposição sobre fotografia: Verde Sombra 35–60 % ou degradê lateral (manual §11 e §14) */
  --overlay-foto: linear-gradient(90deg, rgba(8, 18, 9, .60) 0%, rgba(8, 18, 9, .52) 50%, rgba(8, 18, 9, .35) 100%);
  --overlay-foto-movel: linear-gradient(180deg, rgba(8, 18, 9, .60) 0%, rgba(8, 18, 9, .60) 100%);

  /* ---------- Tipografia (manual §10) ---------- */
  --fonte-base: "Poppins", Arial, Helvetica, sans-serif;
  --fonte-titulo: var(--fonte-base);
  --peso-regular: 400;
  --peso-semibold: 600;
  --peso-bold: 700;
  --peso-titulo: 700;
  --peso-titulo-secao: 600;

  /* Tamanhos (celular → computador, fluidos entre 360 px e 1440 px) */
  --fs-h1: clamp(2rem, 1.6rem + 1.8vw, 2.75rem);          /* 32 → 44 px */
  --fs-h2: clamp(1.5625rem, 1.43rem + .6vw, 1.875rem);    /* 25 → 30 px */
  --fs-h3: 1.25rem;                                         /* 20 px · título de cartão */
  --fs-texto: clamp(1rem, .98rem + .09vw, 1.0625rem);      /* 16 → 17 px */
  --fs-lead: clamp(1.0625rem, 1rem + .3vw, 1.25rem);        /* 17 → 20 px */
  --fs-pequeno: .875rem;                                    /* 14 px · notas, legendas (itálico) */
  --fs-kicker: .8125rem;                                    /* 13 px · kicker, caixa alta */
  --fs-nav: .8125rem;                                       /* 13 px · menu em caixa alta (modelo de cabeçalho) */
  --fs-botao: 1rem;                                         /* 16 px */
  --fs-numero: clamp(2rem, 1.7rem + 1.3vw, 2.75rem);
  --lh-titulo: 1.12;                                        /* manual: 1,05–1,15 */
  --lh-texto: 1.6;
  --tracking-kicker: .16em;                                 /* manual: +150 a +200 */
  --tracking-nav: .15em;

  /* ---------- Espaçamentos ---------- */
  --esp-1: .25rem;
  --esp-2: .5rem;
  --esp-3: .75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;
  --esp-8: 4rem;
  --secao-padding: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  --margem-lateral: 24px;
  --margem-lateral-tablet: 32px;
  --margem-lateral-desktop: 48px;
  --grade-gap: clamp(1rem, .7rem + 1.2vw, 2rem);

  /* ---------- Larguras ---------- */
  --largura-conteudo: 1440px;
  --largura-leitura: 66ch;       /* manual: linhas de até 70 caracteres */
  --largura-titulo: 26ch;

  /* ---------- Botões ---------- */
  --botao-altura: 48px;
  --botao-padding-x: 1.5rem;
  --botao-raio: 4px;
  --botao-peso: 600;
  --botao-primario-fundo: var(--cat-verde);
  --botao-primario-texto: var(--cat-creme);
  --botao-primario-fundo-hover: var(--cat-verde-card);
  --botao-primario-escuro-fundo: var(--cat-dourado-claro);
  --botao-primario-escuro-texto: var(--cat-tinta);
  --botao-primario-escuro-fundo-hover: var(--cat-dourado);

  /* ---------- Bordas, raios, foco ---------- */
  --raio-card: 6px;              /* "cantos levemente arredondados" (manual §14) */
  --raio-campo: 4px;
  --borda-fina: 1px solid rgba(16, 36, 26, .16);
  --borda-fina-escura: 1px solid var(--cat-verde-borda);
  --filete: 2px;                 /* filete dourado 1–2 px */
  --bola-contorno: inset 0 0 0 1px rgba(16, 36, 26, .25);
  --foco-cor: var(--cat-dourado-claro);
  --foco-cor-claro: var(--cat-verde);
  --foco-largura: 3px;

  /* ---------- Cabeçalho (modelo 05_Modelos_Digitais/02_Site, altura ajustada ao comando do site) ---------- */
  --header-altura: 78px;          /* celular (72–80); proteção 2x da marca de 120 px = 10,8 px */
  --header-altura-desktop: 96px;  /* computador (88–96) */
  --header-fundo: var(--cat-verde-fundo);

  /* ---------- Marca e selo (manual §6–§8) ---------- */
  --marca-proporcao: 847.432 / 381.940;   /* 2,22 : 1 — nunca alterar */
  --marca-largura-header: 120px;          /* celular: mínimo de tela; proteção 2x = 10,8 px */
  --marca-largura-header-desktop: 150px;  /* proteção 2x = 13,5 px cabe na altura de 96 px */
  --marca-largura-hero: clamp(180px, 20vw + 100px, 400px);
  --marca-largura-rodape: 160px;          /* recomendado para leitura confortável */
  --marca-protecao: calc(var(--marca-largura-header) * .09);  /* 2x, x = 4,5 % da largura */
  --selo-minimo: 80px;
}

@media (min-width: 768px) {
  :root { --margem-lateral: var(--margem-lateral-tablet); }
}
@media (min-width: 1100px) {
  :root {
    --margem-lateral: var(--margem-lateral-desktop);
    --header-altura: var(--header-altura-desktop);
    --marca-largura-header: var(--marca-largura-header-desktop);
  }
}