/* Tokens de design da Broccoli: a única fonte de cores, tipos, medidas, sombras, camadas e tempos do site.
   Cores e fontes da marca enviadas pela Broccoli (14/10/2026). Nenhum outro CSS deve ter cor escrita à mão:
   use estes nomes, e para transparência os canais RGB: rgb(var(--roxo-rgb) / .2).
   ferramentas/gerar_logo.py e ferramentas/montar.py leem as cores daqui. */

:root {
  /* ---------- Marca ---------- */
  --roxo: #4c39db;
  --verde: #77e6a7;
  --branco: #ffffff;

  /* ---------- Apoio (não são cores da marca) ---------- */
  --noite: #1b1446;        /* fundo de seções de vídeo/foto, rodapé */
  --noite-funda: #120e33;  /* fundo dentro de fundo noite (linha do tempo) */
  --tinta: #14112b;        /* texto principal em fundo claro */
  --nevoa: #f3f1fe;        /* fundo claro alternativo, puxado do roxo */
  --nevoa-clara: #faf9ff;  /* linha em destaque sobre branco */
  --lavanda: #e9e5ff;      /* hover e seleção em fundo claro */
  --desligado: #cfcae8;    /* trilho de chave desligada */
  --roxo-escuro: #3a2ab8;  /* hover de botões roxos */
  --preto: #000000;        /* só para máscaras com mix-blend (vídeo dentro das letras) */

  /* Texto em fundo claro, do mais forte ao mais fraco. Todos passam no AA (4,5) sobre branco e névoa. */
  --texto-1: #2e2a4a;      /* leitura longa (posts, política) */
  --texto-2: #4b4670;      /* parágrafos de apoio */
  --texto-3: #6a6590;      /* legendas, datas, notas */

  /* Estados */
  --aviso: #8a5a00;        --aviso-fundo: #fff4dc;    /* aguardando */
  --erro: #a3261e;         --erro-fundo: #ffe3e0;     /* ajustes pedidos, erros de formulário */
  --sucesso: #1f7a4c;      --sucesso-fundo: #e5fbef;  /* data livre, linha nova */
  --vivo: #ff4d5e;         --vivo-claro: #ff8792;     /* ao vivo, gravando */

  /* Canais RGB, para transparências */
  --roxo-rgb: 76 57 219;
  --verde-rgb: 119 230 167;
  --branco-rgb: 255 255 255;
  --noite-rgb: 27 20 70;
  --tinta-rgb: 20 17 43;
  --preto-rgb: 0 0 0;
  --vivo-rgb: 255 77 94;
  --veu-rgb: 14 11 34;
  --veu: rgb(var(--veu-rgb) / .7);  /* fundo atrás de modal e gaveta */

  /* Foco do teclado: roxo em fundo claro; as seções escuras trocam para verde (site.css) */
  --foco: var(--roxo);

  /* Contraste (WCAG): branco/roxo 7,2, verde/roxo 4,7, verde/noite 11, VERDE SOBRE BRANCO 1,5 = nunca para texto */

  /* ---------- Tipografia ---------- */
  --f-titulo: "Unbounded", system-ui, sans-serif;
  --f-texto: "Urbanist", system-ui, sans-serif;

  /* Escala fluida, do celular ao desktop */
  --t-mega: clamp(3rem, 1.2rem + 8vw, 9rem);
  --t-1: clamp(2.2rem, 1.4rem + 3.6vw, 5rem);
  --t-2: clamp(1.6rem, 1.2rem + 1.8vw, 2.8rem);
  --t-3: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  --t-corpo: clamp(1.05rem, 1rem + 0.25vw, 1.2rem);
  /* Escala pequena (fixa): nada de texto abaixo de 12px */
  --t-legenda: .92rem;     /* legendas, notas, metadados */
  --t-mini: .85rem;        /* botões pequenos, etiquetas em minúscula */
  --t-rotulo: .75rem;      /* rótulos em CAIXA ALTA (kicker, tags, cabeçalhos de tabela) */
  --espaco-rotulo: .1em;   /* espaçamento de letras dos rótulos */

  /* ---------- Medidas ---------- */
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 3rem);
  --secao: clamp(4.5rem, 3rem + 7vw, 10rem);
  --max: 1360px;

  --raio: 28px;
  --raio-p: 14px;
  --pilula: 999px;

  /* Pontos de quebra (CSS não aceita variável dentro de @media; estes são os únicos valores usados):
     400 telas mínimas, 560 celular, 640 celular largo, 900 tablet, 1100 desktop pequeno */

  /* ---------- Sombras ---------- */
  --sombra-foco: 0 0 0 4px rgb(var(--roxo-rgb) / .35);       /* campo em foco */
  --sombra-linha: 0 1px 0 rgb(var(--roxo-rgb) / .08);        /* cartão chapado */
  --sombra-cartao: 0 16px 40px rgb(var(--noite-rgb) / .14);  /* cartão que sobe no hover, formulário */
  --sombra-flutua: 0 24px 60px rgb(var(--noite-rgb) / .28);  /* submenu, aviso de cookies, menus */
  --sombra-foto: 0 30px 70px rgb(var(--preto-rgb) / .32);    /* fotos e vídeos em destaque */
  --sombra-roxa: 0 12px 30px rgb(var(--roxo-rgb) / .3);      /* opção escolhida, cartão roxo */
  --sombra-pino: 0 1px 3px rgb(var(--preto-rgb) / .25);      /* bolinha da chave */

  /* ---------- Camadas (z-index) ---------- */
  --z-barra: 30;      /* barra fixa da galeria */
  --z-zap: 40;        /* botão do WhatsApp */
  --z-trilho: 45;     /* trilho lateral dos serviços */
  --z-menu: 48;       /* menu do celular (fica abaixo do topo) */
  --z-topo: 50;
  --z-flutua: 60;     /* barra de leitura, seletor do protótipo */
  --z-festa: 70;      /* confete da aprovação */
  --z-modal: 80;      /* modal, gaveta, tela cheia */
  --z-cookies: 85;
  --z-aviso: 90;      /* aviso curto (toast) */

  /* ---------- Movimento ---------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);   /* saída suave, equivale ao "expo.out" do GSAP */
  --dur-rapida: .25s;   /* cor, borda, opacidade */
  --dur: .35s;          /* hover de botões e links */
  --dur-lenta: .5s;     /* cartões, deslizes */
  --dur-cena: .8s;      /* zoom de imagem */
}