/* BettaPRO — cor. Tríade fechada: preto, branco, vermelho.
   Os cinzas são acromáticos (mistura preto/branco) e existem só para separar
   superfícies de interface. Não são cores novas da marca. */
:root{
  /* núcleo */
  --bp-black:#000000;
  --bp-white:#FFFFFF;
  --bp-red:#FF0000;

  /* rampa acromática — do fundo à tipografia */
  --bp-neutral-950:#000000;
  --bp-neutral-900:#0A0A0A;
  --bp-neutral-850:#121212;
  --bp-neutral-800:#1A1A1A;
  --bp-neutral-700:#262626;
  --bp-neutral-600:#3D3D3D;
  --bp-neutral-500:#5C5C5C;
  --bp-neutral-400:#8A8A8A;
  --bp-neutral-300:#B3B3B3;
  --bp-neutral-200:#D6D6D6;
  --bp-neutral-100:#EDEDED;
  --bp-neutral-000:#FFFFFF;

  /* estados do vermelho — só interação, nunca cor de peça */
  --bp-red-hover:#FF2B2B;
  --bp-red-press:#CC0000;
  --bp-red-disabled:#5C0000;

  /* vermelho translúcido — curva de apoio e ambientação sobre foto */
  --bp-red-veil-90:rgba(255,0,0,.90);
  --bp-red-veil-70:rgba(255,0,0,.70);
  --bp-red-veil-45:rgba(255,0,0,.45);
  --bp-red-veil-18:rgba(255,0,0,.18);
  --bp-red-veil-08:rgba(255,0,0,.08);

  /* gradientes internos do símbolo — USO EXCLUSIVO do ícone do logotipo.
     Nunca aplicar em nenhum outro elemento. */
  --bp-symbol-grad-1:linear-gradient(90deg,#8C0000 0%,#F30502 100%); /* @kind other */
  --bp-symbol-grad-2:linear-gradient(90deg,#8C0000 0%,#FA0403 100%); /* @kind other */
  --bp-symbol-grad-3:linear-gradient(90deg,#7A0101 0%,#F70207 100%); /* @kind other */
  --bp-symbol-grad-4:linear-gradient(90deg,#8C0000 0%,#F60201 36%,#C80200 100%); /* @kind other */

  /* semânticos */
  --bp-bg:var(--bp-black);
  --bp-bg-elevated:var(--bp-neutral-900);
  --bp-surface:var(--bp-neutral-850);
  --bp-surface-hover:var(--bp-neutral-800);
  --bp-border:var(--bp-neutral-700);
  --bp-border-strong:var(--bp-neutral-600);
  --bp-border-accent:var(--bp-red);
  --bp-text:var(--bp-white);
  --bp-text-muted:var(--bp-neutral-300);
  --bp-text-subtle:var(--bp-neutral-400);
  --bp-text-disabled:var(--bp-neutral-500);
  --bp-text-on-red:var(--bp-white);
  --bp-accent:var(--bp-red);
  --bp-focus-ring:var(--bp-red);

  /* inversão — só quando o fundo for comprovadamente claro */
  --bp-bg-inverse:var(--bp-white);
  --bp-text-inverse:var(--bp-black);
  --bp-border-inverse:var(--bp-neutral-200);
}