/* ── Camada 1: primitivos da marca ────────────────────────────────
   Valores extraídos de docs/02-marca-e-motion.md e do mockup.
   Nunca consumir diretamente em componente.                        */
:root {
  /* Nebulosa */
  --fas-violeta-aurora: #7E4AFF;
  --fas-magenta-aurora: #D54EE0;
  --fas-rosa-horizonte: #FF40D0;
  --fas-lavanda:        #E9DDFF;
  --fas-glow-particula: #A970FF;
  --fas-sombra-profunda: #2E1C6B;

  /* Logo borboleta */
  --fas-ciano:          #79E2FF;
  --fas-verde-vivo:     #7CF2B0;
  --fas-azul:           #5D97F3;
  --fas-azul-claro:     #74B1DE;
  --fas-violeta:        #6D52D8;
  --fas-violeta-claro:  #8359E5;
  --fas-indigo:         #6443CD;
  --fas-brilho-borboleta: #D6A8FF;

  /* Profundidade */
  --fas-abismo:     #0A031A;
  --fas-fundo:      #120726;
  --fas-superficie: #1A0B3D;

  /* Texto */
  --fas-texto:       #E9DDFF;
  --fas-texto-suave: #C9B8F0;
  --fas-link:        #B9A6FF;
}

/* ── Camada 2: semânticos ─────────────────────────────────────────
   A única camada que componente pode usar.                         */
:root {
  --cor-fundo:           var(--fas-fundo);
  /* Quase-sólidas desde 10/08 (eram .6/.35): com 60% de opacidade as
     borboletas e a nebulosa atravessavam os cards e viravam ruído sobre o
     texto. A nebulosa ainda tinge de leve; o vidro fosco (backdrop-filter)
     fica reservado aos POUCOS blocos grandes — em dezenas de cards o blur
     recaptura o fundo animado a cada frame e derruba o FPS.

     O PADRÃO DE SUPERFÍCIES (10/08) — três níveis, sem exceção:
     1. --cor-superficie (.9, quase-sólida): toda CAIXA DE CONTEÚDO que toca
        a nebulosa direto — cards, linhas de data, aviso do rodapé, canais.
     2. --cor-superficie-alta (.5, translúcida): só ELEMENTO SOBRE CAIXA —
        chips e botões que já têm uma superfície quase-sólida por baixo.
        NUNCA direto sobre a nebulosa.
     3. --cor-overlay (.75): controle ou selo SOBRE MÍDIA (setas de carrossel,
        play, selo de data, chips do mural) — escuro o bastante pra ler,
        aberto o bastante pra foto respirar.
     Faixas do shell têm fundos próprios (.82 com blur ou .94+ sem). */
  --cor-superficie:      rgb(26 11 61 / .9);
  --cor-superficie-alta: rgb(46 28 107 / .5);
  --cor-overlay:         rgb(10 3 26 / .75);
  --cor-texto:           var(--fas-texto);
  --cor-texto-suave:     var(--fas-texto-suave);
  --cor-borda:           rgb(126 74 255 / .35);
  --cor-borda-ativa:     rgb(121 226 255 / .6);
  --cor-link:            var(--fas-link);
  --cor-link-hover:      var(--fas-ciano);
  --cor-selecao:         rgb(126 74 255 / .5);
  --cor-acento:          var(--fas-ciano);
  --cor-alerta:          var(--fas-rosa-horizonte);
  --cor-vivo:            var(--fas-verde-vivo);
  --cor-realce:          var(--fas-brilho-borboleta);

  /* Tons de seção — decisão de 10/08 (opção B da revisão visual): cada seção
     da Home carrega um acento próprio no rótulo, no link de saída e na linha
     de horizonte. Quatro tons, todos já primitivos da marca. */
  --tom-ciano:   var(--fas-ciano);
  --tom-lilas:   var(--fas-brilho-borboleta);
  --tom-magenta: var(--fas-magenta-aurora);
  --tom-rosa:    var(--fas-rosa-horizonte);
  /* Parada intermediária no violeta-claro: com só dois extremos, metade do
     botão lia como uma faixa rosa (apontado pelo dono do projeto em 10/08).
     Com a rampa passando pelo violeta, o magenta fica onde deve — na cauda. */
  --gradiente-acao:      linear-gradient(100deg, var(--fas-violeta-aurora), var(--fas-violeta-claro) 55%, var(--fas-magenta-aurora));
  --gradiente-marca:     linear-gradient(100deg, var(--fas-ciano), var(--fas-violeta-aurora), var(--fas-rosa-horizonte));

  /* Tipografia — a variável --fonte-poppins vem da API de fontes do Astro */
  --fonte: Poppins, system-ui, sans-serif;
  --peso-normal: 400;
  --peso-medio: 500;
  --peso-forte: 600;
  --peso-display: 700;
  /* Escala tipográfica (revisão de 06/09, apertada no celular): um papel, um token. Celular → desktop.
     rotulo 10 · legenda 11 · mini 13 · pequeno 14 · corpo 14→16 · lead 13→16 · titulo-3 16→21 · titulo-2 18→26 · titulo-1 22→36.
     Rótulos, chips, datas e barra de avisos ficam em 10px por decisão (caixa alta com tracking). */
  --texto-rotulo:   0.625rem;                                 /* 10px: rótulo, chip, data de card, barra de avisos */
  --texto-legenda:  0.6875rem;                                /* 11px: meta da notícia (data, leitura, autor), "Compartilhe", legenda de foto */
  --texto-mini:     0.8125rem;                                /* 13px: descrição de card, apoio, notas */
  --texto-pequeno:  0.875rem;                                 /* 14px: título de card, meta, links de ação */
  --texto-controle: var(--texto-pequeno);                     /* ações e rótulos de formulário */
  --texto-entrada:  1rem;                                    /* campos editáveis, inclusive no celular */
  --texto-corpo:    clamp(0.875rem, 0.83rem + 0.2vw, 1rem);      /* 14→16px: texto corrido */
  --texto-lead:     clamp(0.8125rem, 0.72rem + 0.4vw, 1rem);      /* 13→16px: resumo abaixo do título */
  --texto-titulo-3: clamp(1rem, 0.85rem + 0.6vw, 1.3125rem);      /* 16→21px: h3, nome da edição, valores */
  --texto-titulo-2: clamp(1.125rem, 0.9rem + 0.9vw, 1.625rem);    /* 18→26px: título de seção, h2 do texto */
  --texto-titulo-1: clamp(1.375rem, 1rem + 1.6vw, 2.25rem);       /* 22→36px: título de página (todas) */
  --altura-apertada: 1.25;
  --altura-corpo:    1.6;
  --tracking-titulo: -0.025em;
  --tracking-rotulo:  0.14em;

  /* Espaço — escala de 4px */
  --esp-1: 0.25rem;  --esp-2: 0.5rem;   --esp-3: 0.75rem;  --esp-4: 1rem;
  --esp-5: 1.25rem;  --esp-6: 1.5rem;   --esp-8: 2rem;     --esp-10: 2.5rem;
  --esp-12: 3rem;    --esp-16: 4rem;
  /* Conteúdo: controles confortáveis e recuos comuns a painéis e páginas. */
  --alvo-toque: 2.75rem;
  --alvo-toque-compacto: 2rem;
  --recuo-painel: clamp(var(--esp-3), 2vw, var(--esp-5));
  --esp-pagina: clamp(var(--esp-6), 3vw, var(--esp-10));
  /* Recuo lateral do conteúdo, pela METADE do que era (13/08: era
     clamp(1rem, 4vw, 2.5rem)). Cada pixel de recuo aqui sai da largura útil
     de todo o site, e no celular — onde está a maioria dos acessos — ele
     custava caro: 16px de cada lado numa tela de 320 é 10% da tela gasta em
     margem. Os três termos caíram junto, então a proporção continua a mesma
     em qualquer largura; acima de 71.25rem quem manda é --largura-conteudo e
     o recuo deixa de importar.
     Revisão de 21/09: o piso subiu de 8px para 16px (1rem), o recuo padrão
     das interfaces mobile (iOS e Material). Com 8px os cartões pareciam
     colados na borda do celular. Vale 16px até ~800px de largura; o teto de
     20px no desktop não mudou. */
  --gutter: clamp(1rem, 2vw, 1.25rem);
  --largura-conteudo: 71.25rem;

  /* Ritmo vertical padronizado (simetria exata e sem excessos no mobile e desk) */
  --esp-transicao-secao: clamp(1rem, 2vw, 1.75rem);   /* 16px no mobile a 28px no desk (aplicado igual acima e abaixo da linha) */
  --esp-bloco-interno:   clamp(1rem, 1.75vw, 1.5rem);  /* 16px no mobile a 24px no desk (cabeçalho/conteúdo e conteúdo/ver-todos) */
  --esp-rodape-corpo:    clamp(1.5rem, 3vw, 2.25rem);  /* 24px no mobile a 36px no desk */

  /* Alturas do topo fixo (barra de avisos + header). base.css soma as duas
     no padding-top do body; Secao.astro soma no scroll-margin das âncoras —
     sem os tokens, os três só coincidiriam por acaso. A topbar tem 2.75rem
     (44px): fina, mas ainda um alvo de toque inteiro para os ícones dela. */
  --altura-topbar: 2.75rem;
  --altura-header: 4.5rem;
  /* Recuo entre o header fixo e o primeiro conteúdo de toda página interna (notícia, guia, Lab, listagens, festival). */
  --recuo-pagina: var(--esp-2);

  /* Raio */
  --raio-1: 0.75rem;
  --raio-2: 1.25rem;
  --raio-pill: 999px;

  /* Sombra */
  --sombra-card: 0 18px 44px rgb(10 3 26 / .45);
  --sombra-glow: 0 0 10px rgb(150 96 255 / .5);

  /* Movimento — períodos de docs/02-marca-e-motion.md */
  --dur-rapida: 200ms;
  --dur-media: 550ms;
  --ease-padrao: cubic-bezier(.4, 0, .2, 1);
  /* Nebulosa — períodos independentes, conforme docs/02-marca-e-motion.md.
     Não alinhados de propósito: 24, 31 e 27 só voltam a coincidir depois de
     muito tempo, então o fundo nunca parece repetir. O mockup fundia tudo em
     34s; a receita do doc 02 é a fonte da verdade. */
  --dur-neb-translate-a: 24s;
  --dur-neb-translate-b: 31s;
  --dur-neb-scale: 27s;
  --dur-aurora-violeta-opacidade: 13s;
  --dur-aurora-violeta-drift: 19s;
  --dur-aurora-magenta-opacidade: 15s;
  --dur-aurora-magenta-drift: 21s;
  --dur-horizonte: 9s;
  --dur-cintilar-min: 2.2s;
  --dur-cintilar-max: 4.8s;
  --dur-travessia-min: 24s;
  --dur-travessia-max: 28s;
}