/* ========================================================================
   Tokens: as cores, fontes, espaços e raios do site inteiro.
   Nenhum outro arquivo escreve cor ou tamanho solto: tudo sai daqui.
   ======================================================================== */

:root {
  color-scheme: dark;

  /* ----- Fundo e superfícies ----- */
  --fundo: #07090d;
  --fundo-2: #0b0f15;
  --superficie: #0f141b;
  --superficie-2: #141a23;
  --superficie-3: #1a222d;

  /* ----- Bordas ----- */
  --borda: rgba(148, 178, 204, 0.12);
  --borda-forte: rgba(148, 178, 204, 0.22);

  /* ----- Texto ----- */
  --texto: #e6edf3;
  --texto-2: #b3c0cc;
  --texto-3: #7d8b99;
  --texto-4: #56626e;

  /* ----- Marca (ciano do Necromante96Official) ----- */
  --marca: #22d3ee;
  --marca-forte: #06b6d4;
  --marca-escura: #0891b2;
  --marca-clara: #a5f3fc;
  --marca-fundo: rgba(34, 211, 238, 0.08);
  --marca-borda: rgba(34, 211, 238, 0.28);
  --marca-brilho: rgba(34, 211, 238, 0.35);

  /* ----- Estados ----- */
  --ok: #34d399;
  --aviso: #fbbf24;
  --erro: #f87171;
  --roxo: #a78bfa;

  /* ----- Categorias (cada área tem sua cor de apoio) ----- */
  --cat-web: #38bdf8;
  --cat-game: #f472b6;
  --cat-tool: #a78bfa;
  --cat-translation: #fbbf24;
  --cat-institucional: #34d399;

  /* ----- Fontes ----- */
  --fonte-titulo: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --fonte-texto: "Inter", "Segoe UI", system-ui, sans-serif;
  --fonte-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  /* ----- Escala de texto ----- */
  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-md: 1rem;
  --t-lg: 1.125rem;
  --t-xl: 1.375rem;
  --t-2xl: clamp(1.6rem, 2.6vw, 2.1rem);
  --t-3xl: clamp(2rem, 4vw, 2.9rem);
  --t-hero: clamp(2.6rem, 7vw, 5.2rem);

  /* ----- Espaços ----- */
  --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;

  /* ----- Raios e sombras ----- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-total: 999px;
  --sombra: 0 10px 30px rgba(0, 0, 0, 0.35);
  --sombra-forte: 0 24px 60px rgba(0, 0, 0, 0.5);

  /* ----- Layout ----- */
  --largura: 1180px;
  --largura-texto: 70ch;
  --altura-topo: 68px;
  --margem: 20px;

  /* ----- Movimento ----- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --rapido: 160ms;
  --medio: 320ms;
}

@media (max-width: 640px) {
  :root {
    --margem: 16px;
    --altura-topo: 60px;
  }
}