:root {
  --brand-red: #c8102e;
  --brand-blue: #0052a3;
  --cor-primaria: var(--brand-red);
  --cor-secundaria: var(--brand-blue);
  --nivel-opacidade: 0.9;
  --font-principal: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
  --font-secundaria: 'Poppins', 'Segoe UI', Roboto, Arial, sans-serif;

  --brand-blue-rgb: 0, 82, 163;
  --brand-red-rgb: 200, 16, 46;
  --brand-opacity-alpha: calc(var(--nivel-opacidade) * 0.01);

  --gradiente-primario: linear-gradient(135deg, var(--cor-primaria) 0%, var(--cor-secundaria) 100%);
}

@supports (color: color-mix(in srgb, black, white)) {
  :root {
    --cor-azul-escuro: color-mix(in srgb, var(--brand-blue) 85%, black 15%);
    --cor-vermelho-escuro: color-mix(in srgb, var(--brand-red) 85%, black 15%);
  }
}

:root {
  --cor-azul-escuro: #003b73;
  --cor-vermelho-escuro: #a60d26;
}

.bg-primary-translucent { background-color: rgba(var(--brand-blue-rgb), var(--brand-opacity-alpha)); }
.bg-accent-translucent { background-color: rgba(var(--brand-red-rgb), var(--brand-opacity-alpha)); }