/* ------------------------------------------------------------------
   Tokens — tema escuro, alinhado ao sistema visual do addept.ai:
   verde floresta como superfície, preto e branco no resto. A escala de
   texto é acromática de propósito — tirar a tinta do texto é o que
   devolve peso ao verde.
   ------------------------------------------------------------------ */

:root {
  /* marca — nomes neutros: a próxima troca de paleta é um find/replace */
  --acc: #4CAF80;
  --acc-hi: #8EDCB4;
  --acc-deep: #1E7A4A;          /* só gradiente e sombra — nunca texto ou borda */
  --acc-ink: #04120B;           /* texto escuro em cima do acento */
  --acc-rgb: 76, 175, 128;      /* #4CAF80 em canais, para rgba(var(--acc-rgb), α) */
  /* verde floresta é bloco, nunca acento: sobre --bg-0 dá 1,52:1 e não
     serviria nem como borda visível. Branco em cima dele dá 12,45:1 */
  --forest: #1E3A2F;

  /* fundos — preto neutro do addept.ai (charcoal #111111). A paleta antiga
     carregava um desvio verde dentro do próprio preto, e era isso que
     tirava força da faixa verde: verde escuro sobre preto esverdeado não
     lê como troca de matéria. Preto neutro contra floresta, sim. */
  --bg-0: #111111;
  --bg-1: #171717;
  --bg-2: #1B1B1B;

  /* véu do modal — quase preto com um resto de verde, para o escurecimento
     não brigar com as faixas floresta. A versão chapada entra onde o
     backdrop-filter não aplica: sem o blur, 78% deixa a página legível
     por baixo do formulário */
  --overlay: rgba(5, 9, 7, 0.78);
  --overlay-solid: #050907;

  /* superfícies e bordas */
  --surface: rgba(255, 255, 255, 0.03);
  /* disco chapado do medalhão de curso: verde floresta chapado, sem
     translucidez, para não mudar de tom conforme a faixa embaixo */
  --surface-acc: #1E3A2F;
  --surface-hi: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.08);
  --border-hi: rgba(255, 255, 255, 0.15);
  --border-acc: rgba(var(--acc-rgb), 0.34);
  /* fundo de cartão: sólido sobre faixa preta, véu branco sobre faixa
     verde (ver o override em .band--forest) */
  --card: var(--bg-2);

  /* texto — cinza puro, a escala inteira passa AAA (7:1) sobre os três
     fundos. Contraste sobre --bg-0 / --bg-1 / --bg-2:
     ink-0 18,88 / 17,92 / 17,22 · ink-1 16,13 / 15,31 / 14,71
     ink-2 12,84 / 12,19 / 11,72 · ink-3  7,94 /  7,54 /  7,25 */
  --ink-0: #FFFFFF;
  --ink-1: #EDEDED;
  --ink-2: #C9C9C9;
  --ink-3: #A8A8A8;

  /* gradientes — o CTA vai de claro a mais claro de propósito: com a ponta
     em --acc-deep o rótulo escuro daria 3,59:1 e reprovaria. Assim dá
     7,07:1 na ponta escura e 11,90:1 na clara */
  --g-acc: linear-gradient(135deg, #4CAF80 0%, #8EDCB4 100%);
  --g-text: linear-gradient(135deg, #FFFFFF 0%, #9DD3B9 48%, #4CAF80 100%);
  --g-fade-acc: linear-gradient(135deg, rgba(var(--acc-rgb), 0.20), rgba(30, 122, 74, 0.05));
  --g-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  /* o gradiente do addept.ai, valor por valor: canto superior direito no
     charcoal, canto inferior esquerdo no floresta. É ele que veste toda
     faixa verde da página — hero, "para quem é", comunidade e rodapé */
  --g-forest: linear-gradient(to bottom left, #111111 0%, #1E3A2F 100%);

  /* grade suave das faixas pretas — fio de 1px a cada 72px. Fica aqui em
     vez de solta no base.css porque é fundo, e fundo mora nos tokens */
  --grid: linear-gradient(to right, rgba(255, 255, 255, 0.032) 1px, transparent 1px),
          linear-gradient(to bottom, rgba(255, 255, 255, 0.032) 1px, transparent 1px);

  /* grão de fundo — a opacidade vai embutida no SVG, não em opacity de
     elemento: é o que garante que nada além do fundo seja afetado.
     feColorMatrix dessatura, senão feTurbulence gera ruído colorido */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");

  /* o mesmo ruído com quase três vezes a presença, para as faixas verdes.
     O verde escuro engole grão: no preto 0.055 já se vê, sobre #1E3A2F
     some. Duas camadas se somam nas faixas verdes — esta, do elemento,
     mais a fixa do body — então o valor efetivo ali é maior do que o
     número sugere. Acima de ~0.18 o grão para de ser textura e começa a
     sujar as bordas do texto branco. */
  --grain-strong: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.145'/%3E%3C/svg%3E");

  /* sombras — o botão descansa sobre um halo difuso, sem bloco deslocado.
     Alphas mais altos que na paleta antiga: #4CAF80 é menos luminoso que o
     teal que veio antes, e o mesmo alpha renderia um halo mais fraco */
  --shadow-btn: 0 14px 30px -14px rgba(30, 122, 74, 0.75), 0 2px 6px -2px rgba(0, 0, 0, 0.55);
  --shadow-btn-hover: 0 20px 38px -14px rgba(30, 122, 74, 0.9), 0 3px 8px -2px rgba(0, 0, 0, 0.6);
  --shadow-btn-active: 0 6px 16px -10px rgba(30, 122, 74, 0.8);

  /* luz de contorno do CTA: um anel translúcido rente à borda mais um halo
     curto ao redor. Fica fora da sombra de elevação — a sombra ancora o
     botão no fundo, esta camada o acende. Raio curto (24px) de propósito:
     acima disso o halo deixa de ler como luz da borda e vira névoa */
  --glow-btn: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 0 24px -6px rgba(255, 255, 255, 0.4);
  --glow-btn-hover: 0 0 0 1px rgba(255, 255, 255, 0.38), 0 0 32px -4px rgba(255, 255, 255, 0.62);
  --glow-btn-active: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 0 16px -8px rgba(255, 255, 255, 0.3);
  --shadow-card: 0 30px 60px -32px rgba(0, 0, 0, 0.9);
  --glow-acc: 0 0 70px rgba(var(--acc-rgb), 0.22);

  /* pele do CTA primário — trocada em bloco dentro das faixas verdes */
  --btn-bg: var(--g-acc);
  --btn-ink: var(--acc-ink);

  /* tipografia */
  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --size-display: clamp(2.5rem, 5.8vw, 4.5rem);
  --size-h2: clamp(2rem, 4.6vw, 3.5rem);
  --size-h3: clamp(1.25rem, 2vw, 1.6rem);
  --size-body-lg: clamp(1.05rem, 1.4vw, 1.2rem);
  --size-body: 1rem;
  --size-small: 0.875rem;
  --size-mono: 0.6875rem;

  /* espaço */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 8.5rem;

  /* altura do header: o hero é puxado para debaixo dele por esta medida,
     senão a barra transparente revelaria o preto do body em vez do
     gradiente. O JS reescreve o valor com a altura medida; este é o
     fallback e o que vale enquanto o script não roda */
  --header-h: 4.25rem;

  --radius-pill: 999px;
  /* cantos do botão: retângulo de canto suave, longe da pílula */
  --radius-btn: 0.625rem;
  --radius-btn-sm: 0.5rem;
  --radius-btn-lg: 0.75rem;
  --radius-sm: 0.75rem;
  --radius-md: 1rem;
  --radius-lg: 1.375rem;
  --radius-xl: 1.75rem;

  --container-width: 1180px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}