/* Tokens da LP Black Friday Zero7.
   Valores tirados do CSS de _referencia/canvas/Main.dc.html. Não reinvente: mude aqui. */

:root {
  /* Cores: o preto domina, o branco conduz, o laranja só onde há ação ou dinheiro */
  --cor-base: #050404;
  --cor-ceu: #080606;
  --cor-planeta: #030202;
  --cor-superficie-1: #0a0807;
  --cor-superficie-2: #0c0908;
  --cor-superficie-3: #0f0c0b;

  --cor-texto: #fff;
  --cor-texto-2: rgba(255, 255, 255, .66);
  --cor-texto-3: rgba(255, 255, 255, .55);
  --cor-texto-4: rgba(255, 255, 255, .5); /* era .45 no protótipo (4,46:1); .5 dá 5,33:1 sobre a base */
  --cor-tinta: #0a0706; /* texto escuro sobre laranja */

  --cor-laranja: #FF6A1A;
  --cor-laranja-claro: #FF8A4C;
  --cor-vermelho: #E52B24; /* só no fim de degradês */
  --cor-luz: #FFC83D; /* só luz: foco e pontos de luz */

  /* Degradê da marca (como no brand kit: ingresso, etiqueta, cofre, %): de laranja para vermelho, com a luz vindo de
     cima à esquerda. É o preenchimento de todo laranja cheio. O brilho é o reflexo de "vidro" no alto, como nos 3D,
     e a sombra interna é a do material.
     Variante D, aprovada pelo cliente: o pedido era #FF8A3D → #FF6A1A → #F2441F → #E52B24 com o reflexo até 52%,
     mas o texto branco do .fbtn (no lado esquerdo, o mais claro) caía para 2,2:1. Aqui o laranja começa um pouco
     mais escuro e o reflexo fica acima do rótulo: >= 3:1 em toda a área do rótulo (CLAUDE.md, regra 9). */
  --grad-marca: linear-gradient(120deg, #F6661E 0%, #EF4C1A 36%, #E8381F 70%, #DA2522 100%);
  --grad-marca-horizontal: linear-gradient(90deg, #F6661E 0%, #EF4C1A 36%, #E8381F 70%, #DA2522 100%);
  --grad-marca-brilho: linear-gradient(180deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, 0) 30%);
  --sombra-material: inset 0 1px 1px rgba(255, 255, 255, .5), inset 0 -3px 8px rgba(120, 20, 10, .35);

  --cor-linha: rgba(255, 255, 255, .07);
  --cor-linha-forte: rgba(255, 255, 255, .14);

  /* Raios: o raio diagonal da Zero7 */
  --raio-assinatura: 16px 0;
  --raio-card: 24px 24px 24px 0;
  --raio-gota: 999px 0 999px 999px;
  --raio-palco: 40px 0 40px 0;
  --raio-chip: 8px;
  --raio-sm: 12px 0;

  /* Espaço em múltiplos de 4 */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 20px;
  --esp-6: 24px;
  --esp-8: 32px;
  --esp-10: 40px;
  --esp-12: 48px;
  --esp-16: 64px;
  --esp-20: 80px;
  --esp-24: 96px;
  --esp-32: 128px;
  --esp-40: 160px;

  --container: 1240px;
  --gutter: clamp(16px, 4vw, 48px);

  /* Tipografia */
  --fonte-impacto: 'Plus Jakarta Sans', Inter, system-ui, sans-serif; /* 800: H1 da hero e frase do fechamento */
  --fonte-display: 'Barlow Condensed', Impact, sans-serif; /* 700–900, caixa alta: títulos, planos, rótulos, números */
  --fonte-texto: Inter, system-ui, sans-serif; /* 400–600: corpo */

  --tracking-impacto: -.045em;
  --tracking-rotulo: .18em;

  /* Escala usada no protótipo */
  --fs-h1: clamp(50px, 7.6vw, 116px);
  --fs-fechamento: clamp(52px, 6.6vw, 104px);
  --fs-h2: clamp(44px, 5.2vw, 76px);
  --fs-h2-planos: clamp(42px, 5vw, 72px);
  --fs-h2-comunidade: clamp(36px, 4vw, 58px);
  --fs-titulo-secao: clamp(38px, 4.6vw, 64px); /* h2 das seções, em Jakarta 800 (ajuste do cliente) */
  --fs-card-destaque: clamp(34px, 3vw, 44px); /* cards largos (benefícios 01, 04 e 08) */
  --fs-card: clamp(26px, 2.1vw, 30px);
  --fs-lead: clamp(16px, 1.4vw, 19px);
  --fs-corpo: 16px;
  --fs-15: 15px;
  --fs-14: 14px;
  --fs-13: 13px;
  --fs-12: 12px;
  --fs-11: 11px;
  --fs-10: 10px;

  /* Movimento */
  --curva: cubic-bezier(.2, 0, 0, 1);
  --dur-1: 150ms;
  --dur-2: 200ms;
  --dur-3: 300ms;
  --dur-4: 600ms;

  /* Botão escuro (.fbtn--escuro na hero e os CTAs dos planos): um só desenho para os dois */
  --escuro-fundo: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .012) 60%), #0d0a09;
  --escuro-borda: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .04));
  --escuro-borda-acesa: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .1));
  /* luz que percorre a borda: arco curto e fino. Só as paradas de cor; o conic-gradient(from var(--ang), ...)
     fica na regra do botão, porque o --ang gira no próprio botão */
  --escuro-luz-arco: transparent 0 74%, rgba(255, 106, 26, .85) 81%, #FFC83D 83%, transparent 87%;
  --escuro-luz-volta: 5s;
  /* filete de neon na base */
  --escuro-sombra:
    inset 0 -1px 0 rgba(255, 106, 26, .55),
    inset 0 -14px 24px -14px rgba(255, 106, 26, .35),
    0 16px 36px -18px rgba(0, 0, 0, .9);
  --escuro-sombra-acesa:
    inset 0 -1px 0 rgba(255, 106, 26, .9),
    inset 0 -16px 26px -12px rgba(255, 106, 26, .55),
    0 18px 40px -16px rgba(255, 106, 26, .35);
  /* gota no degradê da marca com o reflexo de vidro; a seta é preta (--cor-tinta, traço de 2,4 px) */
  --escuro-gota: var(--grad-marca-brilho), var(--grad-marca);
  --escuro-gota-sombra: var(--sombra-material), 0 6px 16px -4px rgba(255, 106, 26, .6);
}