/* ==========================================================================
   XD Turbo Gaming — identidade Nebulosa
   Fonte da verdade: o protótipo e a megaordem de 21/09/2026.
   Gerado pelo integrador (Claude Code) para o Codex partir daqui.

   Os nomes `--xd-*` são os que o site já usa: o Codex não precisa renomear
   nada. O que muda é o VALOR, que passa a ser o do app.

   Duas colorações, como no app:
     :root                      → ELÉTRICO (padrão, igual ao app)
     [data-cor="mono"]          → MONO (preto, detalhe branco, azul só na opção)

   O que é fixo: cor, fonte, escala de tamanho, raio, duração e curva.
   O que é do Codex: composição, hierarquia, ritmo da página, ilustração.
   ========================================================================== */

/* --- Fontes -------------------------------------------------------------
   Sora no título, Manrope no corpo, JetBrains Mono no número e no rótulo.
   Sora e Manrope são as do app (`app/src/XDTurbo.App/Assets/Fonts`).
   JetBrains Mono variável local, licença OFL junto. Nenhuma instalação no SO.
   Quatro arquivos WOFF2 declarados: Sora, Manrope 400/600 e JetBrains Mono.
   O navegador carrega apenas as faces usadas; subconjunto latino ainda pendente.
   Todos já estavam no projeto, com OFL junto. Sem ferramenta de conversão nova.
   Só existe Sora 600: o app não embarca o 700, e pedir 700 faria o navegador
   engrossar a 600 por conta própria, que é o que deixa título borrado.
   ----------------------------------------------------------------------- */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Sora-600.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Manrope-400.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Manrope-600.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  src: url("../fonts/JetBrainsMono-Variable.woff2") format("woff2");
  font-weight: 100 800;
}

:root {
  /* Compatibilidade dos consumidores: aliases, sem outra paleta ou duracao. */
  --xd-dur-hover: var(--xd-dur);
  --xd-dur-press: var(--xd-dur);
  --xd-dur-ripple: var(--xd-dur);
  --xd-ease-out: var(--xd-ease);
  --xd-scale-hover: 1;
  --xd-marca-max: 256px;
  --xd-fs-26: var(--xd-fs-tela);
  --xd-overlay: color-mix(in srgb, var(--xd-bg-0) 72%, transparent);

  /* --- ELÉTRICO: preto, azul saturado. É a coloração padrão do app. ------ */
  --xd-bg-0: #020409;
  --xd-bg-1: #05080F;
  --xd-surface: #080D18;
  --xd-surface-2: #0C1322;
  --xd-line: #161E2E;
  --xd-line-forte: #243044;

  --xd-blue: #0A84FF;
  --xd-blue-hi: #58AEFF;
  --xd-blue-deep: #0A2559;
  --xd-blue-rgb: 10, 132, 255;
  --xd-blue-hi-rgb: 88, 174, 255;
  --xd-blue-fundo: rgba(var(--xd-blue-rgb), 0.12);
  --xd-glow: rgba(var(--xd-blue-rgb), 0.30);

  --xd-text: #F5F8FF;
  --xd-text-dim: #98A6C0;
  /* #6C7A99 sobre #080D18 dá 4,6:1 — acima do mínimo AA de 4,5:1.
     Este valor foi corrigido em 20/09 depois de 67 rótulos ficarem abaixo. */
  --xd-text-3: #6C7A99;
  --xd-tint: #D6E8FF;
  --xd-tint-2: #7FC0FF;
  --xd-neutro: #46526B;

  --xd-good: #35D07F;
  --xd-good-fundo: rgba(53, 208, 127, 0.12);
  --xd-warn: #F5B301;
  --xd-warn-fundo: rgba(245, 179, 1, 0.12);
  --xd-bad: #FF4D4F;
  --xd-bad-fundo: rgba(255, 77, 79, 0.14);

  --xd-poco: #04070D;
  --xd-trilho: #121A2B;

  /* A nebulosa do fundo: dois clarões azuis muito fracos, um em cada canto.
     É o que dá nome ao visual. No Mono ela não existe. */
  --xd-neb:
    radial-gradient(62% 56% at 10% 0%, rgba(var(--xd-blue-rgb), 0.12), transparent 70%),
    radial-gradient(70% 60% at 100% 100%, rgba(var(--xd-blue-rgb), 0.07), transparent 72%);

  --xd-heroi-borda: rgba(var(--xd-blue-hi-rgb), 0.20);
  --xd-heroi-bg: linear-gradient(115deg,
      rgba(var(--xd-blue-rgb), 0.22),
      rgba(8, 13, 24, 0.94) 58%,
      rgba(3, 5, 11, 0.96));

  /* --- A marca XD ------------------------------------------------------
     O X sai num degradê de três paradas; o D é claro e chapado.
     Nunca escrever estas cores à mão dentro do SVG: use as variáveis, senão
     a marca não acompanha a troca de coloração. Foi assim que a logo ficou
     errada no Mono em 20/09. */
  --xd-logo-a: #2FE0F5;
  --xd-logo-b: #1391FF;
  --xd-logo-c: #0A57F0;
  --xd-logo-d: #FFFFFF;
  --xd-logo-d2: #C9D8F0;

  /* --- Tipografia ------------------------------------------------------ */
  --xd-font-display: "Sora", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --xd-font-body: "Manrope", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --xd-font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --xd-fs-tela: 26px;
  --xd-fs-cartao: 13px;
  --xd-fs-corpo: 12px;
  --xd-fs-legenda: 11.5px;
  --xd-fs-etiqueta: 8.5px;
  --xd-fs-numero: 25px;
  --xd-fs-contador: 9.5px;

  --xd-fs-9: 9px;      /* rótulo em versalete, sempre mono e com letter-spacing */
  --xd-fs-10: 10.5px;
  --xd-fs-12: 12px;    /* corpo do app */
  --xd-fs-14: 14px;
  --xd-fs-16: 16px;    /* corpo do site: o site lê de longe, o app de perto */
  --xd-fs-20: 20px;
  --xd-fs-24: 24px;
  --xd-fs-32: 32px;
  --xd-fs-48: 48px;

  --xd-ls-versalete: 0.14em;  /* etiqueta do protótipo */
  --xd-ls-titulo: -0.02em;

  /* --- Forma ----------------------------------------------------------- */
  --xd-radius: 14px;        /* cartão */
  --xd-radius-lg: 16px;     /* moldura grande, janela */
  --xd-radius-sm: 10px;     /* botão, campo */
  --xd-radius-pill: 99px;   /* pílula, selo */
  --xd-radius-nav: 8px;
  --xd-gap-blocos: 10px;
  --xd-pad-cartao: 12px 14px;

  --xd-space-1: 8px;
  --xd-space-2: 16px;
  --xd-space-3: 24px;
  --xd-space-4: 32px;
  --xd-space-5: 40px;
  --xd-space-6: 48px;
  --xd-space-8: 64px;
  --xd-space-grid: 8px;     /* tudo cai na grade de 8 */
  --xd-page-pad: 16px;      /* margem lateral mínima no celular */

  --xd-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  --xd-shadow-focus: 0 0 0 3px var(--xd-glow);

  /* --- Movimento -------------------------------------------------------
     Uma duração e uma curva para tudo. Transição mais longa que 220ms no
     site passa de elegante a lenta. */
  --xd-dur: 180ms;
  --xd-dur-lenta: 320ms;
  --xd-ease: cubic-bezier(0.22, 0.8, 0.26, 1);
  --xd-scale-press: 0.975;
}

/* ==========================================================================
   MONO — preto, detalhe branco, azul só na opção.
   Pedido do dono: "algo mais preto, detalhes brancos e opções azuis".
   ========================================================================== */
:root[data-cor="mono"] {
  --xd-bg-0: #000000;
  --xd-bg-1: #070708;
  --xd-surface: #0D0D0F;
  --xd-surface-2: #141416;
  --xd-line: #242428;
  --xd-line-forte: #33333A;

  --xd-blue: #2E7BFF;
  --xd-blue-hi: #4F9CFF;
  --xd-blue-deep: #0E2450;
  --xd-blue-rgb: 46, 123, 255;
  --xd-blue-hi-rgb: 79, 156, 255;

  --xd-text: #FFFFFF;
  --xd-text-dim: #8E8E96;
  /* #7A7A86 sobre #0D0D0F dá 4,8:1. */
  --xd-text-3: #7A7A86;
  --xd-tint: #FFFFFF;
  --xd-tint-2: #FFFFFF;
  --xd-neutro: #45454D;

  --xd-poco: #08080A;
  --xd-trilho: #1E1E22;

  --xd-neb: none;
  --xd-heroi-borda: #2A2A2F;
  --xd-heroi-bg: linear-gradient(115deg, #141417, #0C0C0E 60%, #070708);

  /* Sem ciano no Mono: a marca usa o mesmo azul das opções. */
  --xd-logo-a: #8CC0FF;
  --xd-logo-b: #2E7BFF;
  --xd-logo-c: #1A4FB8;
  --xd-logo-d: #FFFFFF;
  --xd-logo-d2: #BFC6D4;
}

/* O brilho que corre pela borda do cartão e do herói muda de cor junto:
   no Elétrico é azul, no Mono é branco. */
:root[data-cor="mono"] .cartao::after,
:root[data-cor="mono"] .heroi::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
}

/* Quem pediu menos movimento recebe menos movimento. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --xd-dur: 1ms;
    --xd-dur-lenta: 1ms;
  }
}