/*
  PORQUE EXISTE: tokens + atmosfera “hacker neon” — só com data-tema=neon.
  O padrão da app é o tema pro (sólido, alto contraste).
*/
@import url("https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Oxanium:wght@600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");

html[data-tema="neon"] {
  --neon: #00f6ff;
  --neon-2: #39ff14;
  --neon-3: #7aa2ff;
  --neon-glow: rgba(0, 246, 255, 0.55);
  --neon-glow-soft: rgba(0, 246, 255, 0.18);
  --glass: rgba(6, 14, 22, 0.52);
  --glass-forte: rgba(4, 10, 18, 0.72);
  --glass-borda: rgba(0, 246, 255, 0.28);
  --glass-borda-fraca: rgba(0, 246, 255, 0.12);
  --fundo-app: #02060c;
  --fundo-painel: transparent;
  --fundo-editor: transparent;
  --fundo-caixa: rgba(8, 18, 28, 0.65);
  --fundo-hover: rgba(0, 246, 255, 0.1);
  --fundo-selecao: rgba(57, 255, 20, 0.14);
  --borda: var(--glass-borda-fraca);
  --borda-forte: var(--glass-borda);
  --texto: #e8fbff;
  --texto-fraco: rgba(200, 240, 255, 0.78);
  --texto-apagado: rgba(160, 210, 230, 0.5);
  --destaque: var(--neon);
  --destaque-2: var(--neon-2);
  --azul-link: #7adfff;
  --ok: #39ff14;
  --aviso: #ffe566;
  --erro: #ff4d6d;
  --fonte-ui: "Chakra Petch", "Segoe UI", sans-serif;
  --fonte-marca: "Oxanium", "Chakra Petch", sans-serif;
  --fonte-mono: "JetBrains Mono", Consolas, monospace;
  --raio: 14px;
  --raio-sm: 9px;
}

html[data-tema="neon"] body {
  font-family: var(--fonte-ui);
  color: var(--texto);
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(0, 246, 255, 0.16), transparent 55%),
    linear-gradient(180deg, #02060c 0%, #041018 50%, #02080f 100%);
  letter-spacing: 0.02em;
}

html[data-tema="neon"] body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  opacity: 0.45;
  background-image:
    linear-gradient(rgba(0, 246, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 246, 255, 0.045) 1px, transparent 1px);
  background-size: 48px 48px;
}

html[data-tema="neon"] body::after {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  opacity: 0.07;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.35) 3px
  );
}

html[data-tema="neon"] ::selection {
  background: rgba(0, 246, 255, 0.35);
  color: #001014;
}

html[data-tema="neon"] *::-webkit-scrollbar-thumb {
  background: rgba(0, 246, 255, 0.28);
  border-radius: 8px;
}

html[data-tema="neon"] .btn-primario {
  background: linear-gradient(135deg, var(--destaque), #008a80);
  color: #021018;
  font-weight: 700;
}