/* tokens.css — todos os valores vêm de specs/design.md. Nenhuma cor fora daqui.
   Paleta preto + verde neon, aprovada em 09/09/2026 (substitui a paleta azul). */

:root {
  /* Fundos — neutros, sem tonalidade. O neon é a única cor da página. */
  --preto:      #060606;  /* fundo base, seção padrão */
  --grafite:    #0E0E0E;  /* seção alternada, respiro */
  --superficie: #151515;  /* cards, blocos elevados */
  --linha:      #272727;  /* bordas, divisores, molduras */

  /* Destaque — cor única (design.md §17: nunca mais de uma) */
  --neon:        #DAFD55;  /* CTA, links, ícones, brilho, divisória */
  --neon-escuro: #C2E63D;  /* estado ativo/pressionado */

  /* Texto */
  --branco:      #F2F2F2;  /* headlines */
  --cinza-texto: #A3A3A3;  /* corpo, subheads — 8:1 sobre --preto */
  --cinza-fraco: #808080;  /* legendas, metadados — 5.1:1 sobre --preto */

  /* Utilitários */
  --borda-sutil: rgba(255, 255, 255, 0.08);
  --overlay-hero: rgba(6, 6, 6, 0.55);
  --neon-40:     rgba(218, 253, 85, 0.4);
  --neon-glow:   rgba(218, 253, 85, 0.45);

  /* Papéis de cor por lâmina. Cada .lamina--* sobrescreve estes.
     Componentes NUNCA usam a paleta crua — sempre estes papéis. */
  --fundo:       var(--preto);
  --texto-forte: var(--branco);
  --texto:       var(--cinza-texto);
  --texto-fraco: var(--cinza-fraco);
  --acento:      var(--neon);
  --borda:       var(--borda-sutil);
  --borda-forte: var(--linha);

  /* Lâminas claras */
  --branco-lamina: #F5F5F5;
  /* O neon puro sobre o branco dá 1.06:1 — invisível. Este é o mesmo verde
     escurecido até 5.11:1, com a matiz a 1.8° do neon da marca. */
  --verde-escuro:  #5C7000;
  --preto-texto:   #060606;
  --cinza-escuro:  #3D3D3D;
  --cinza-medio:   #6B6B6B;

  /* Lâmina neon */
  --neon-texto:  #1A1F08;
  --neon-fraco:  #3D4A12;

  /* Tira em movimento */
  --tira-angulo: -3deg;

  /* Lâminas: recorte arredondado */
  --lamina-raio: 40px;
  --lamina-recuo: 16px;

  /* Tipografia — famílias em fallback de sistema até aprovação (design.md §6) */
  --fonte-display: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --fonte-corpo:   "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-mono:    "JetBrains Mono", "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  /* Escala tipográfica (design.md §7) */
  --txt-xs:   clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);
  --txt-sm:   clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --txt-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --txt-lg:   clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --txt-xl:   clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --txt-2xl:  clamp(2rem, 1.6rem + 2vw, 3rem);
  --txt-3xl:  clamp(2.5rem, 1.8rem + 3.5vw, 4.5rem);

  /* Espaçamentos (design.md §8) */
  --e-1: 4px;   --e-2: 8px;   --e-3: 12px;  --e-4: 16px;
  --e-5: 24px;  --e-6: 32px;  --e-7: 48px;  --e-8: 64px;
  --e-9: 96px;  --e-10: 128px; --e-11: 160px;

  /* Raios (design.md §9) */
  --raio-sm: 6px;
  --raio-md: 12px;
  --raio-lg: 16px;
  --raio-xl: 24px;

  /* Elevação: borda + brilho, nunca sombra escura (design.md §9) */
  --elevacao: 0 0 0 1px var(--borda-sutil), 0 0 40px -12px var(--neon-glow);

  /* Movimento (design.md §15) */
  --curva-revelar: cubic-bezier(0.16, 1, 0.3, 1);
  --t-botao: 150ms;
  --t-card: 200ms;
  --t-revelar: 400ms;

  /* Layout */
  --conteiner: 1280px;
  --pad-lateral: 20px;
  --topbar-altura: 64px;
}

@media (min-width: 1024px) {
  :root { --pad-lateral: 48px; }
}