/* ═══════════════════════════════════════════════════════════════
   BRAZUWASH — tokens

   A paleta inteira sai daqui. Regra que vale para o site todo:
   o PRETO é o protagonista, o roxo é identidade e energia (nunca
   preenchimento), e o prata/cromado é o que traz sofisticação.

   Se o roxo aparecer em mais de ~10% da tela, ele deixa de ser
   destaque e o site vira "site de lava-jato roxo".
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── pretos ── */
  --vazio:   #050406;   /* fundo principal, quase puro */
  --tinta:   #0A0810;   /* seções alternadas, um respiro acima do vazio */
  --carbono: #12101A;   /* cards */
  --carbono2:#181521;   /* cards em hover / bordas internas */

  /* ── roxo ── */
  --roxo:     #7B3FE4;  /* o roxo premium, cor de destaque */
  --roxo-fun: #5B2BB0;  /* fundo de gradiente, mais profundo */
  --eletrico: #C084FC;  /* roxo elétrico: SÓ em detalhes pequenos */
  --roxo-12:  rgba(123, 63, 228, .12);
  --roxo-24:  rgba(123, 63, 228, .24);
  --roxo-40:  rgba(123, 63, 228, .40);
  --roxo-luz: rgba(168, 85, 247, .55);

  /* ── prata / cromado ── */
  --prata:    #C8CDD6;
  --prata-60: rgba(200, 205, 214, .62);
  --prata-40: rgba(200, 205, 214, .40);
  --prata-20: rgba(200, 205, 214, .20);

  /* ── texto ── */
  --branco:  #F5F6F8;
  --texto:   rgba(245, 246, 248, .72);
  --texto-f: rgba(245, 246, 248, .46);   /* fraco: legendas, notas */

  /* ── filetes ── */
  --linha:   rgba(200, 205, 214, .12);
  --linha-f: rgba(200, 205, 214, .07);

  /* Cromado de verdade é REFLEXO, não cinza: a leitura vem das
     faixas claras e escuras alternadas, não de uma cor só. */
  --cromo: linear-gradient(135deg,
            #6E7480 0%,  #E8EBF0 18%, #9BA3B2 32%,
            #F7F9FC 48%, #7C8494 62%, #DFE4EC 78%, #5F6673 100%);

  --grad-roxo: linear-gradient(135deg, var(--roxo) 0%, var(--roxo-fun) 100%);

  /* ── tipografia ── */
  --display: "Sora", "Inter", system-ui, -apple-system, sans-serif;
  --corpo:   "Manrope", "Inter", system-ui, -apple-system, sans-serif;

  /* ── medidas ── */
  --lado:  clamp(1.25rem, 5vw, 5.5rem);
  --secao: clamp(4.5rem, 9vw, 9rem);
  --raio:  18px;
  --raio-g: 26px;

  /* uma curva só no site inteiro: é o que faz tudo parecer da
     mesma peça, mesmo com animações diferentes */
  --suave: cubic-bezier(.16, 1, .3, 1);
  --rapido: cubic-bezier(.4, 0, .2, 1);

  /* altura da barra fixa do mobile — o padding do rodapé depende
     dela, então mora aqui e não solta no meio do CSS */
  --barra-h: 0px;
}

@media (max-width: 760px) {
  :root { --barra-h: calc(64px + env(safe-area-inset-bottom, 0px)); }
}