/* music/css/base.css: Cores, Fontes e Fundo do Corpo da Página */

/* ------------------------------------------- */
/* VARIÁVEIS DE COR E FONTE */
/* ------------------------------------------- */
:root {
    /* Cores Principais */
    --cor-roxo-principal: #4B0082; /* Púrpura Profundo */
    --cor-verde-principal: #00CC66; /* Verde Neon */
    --cor-texto-principal: #111111; /* Quase Preto */
    --cor-texto-claro: #FFFFFF; /* Branco */

    /* Cores de Hover/Apoio */
    --cor-hover-roxo: #3D006A;
    --cor-hover-verde: #00A652;
    --cor-fundo-header: #111111; /* Fundo Preto/Quase Preto para o Header */

    /* Fontes */
    --fonte-principal: 'Inter', sans-serif;
    --fonte-destaque: 'Oswald', sans-serif;
    --fonte-subtitulo: 'Roboto Slab', serif;
}

/* ------------------------------------------- */
/* ESTILO DO CORPO DA PÁGINA (FUNDO BORRADO) */
/* ------------------------------------------- */
body {
    font-family: var(--fonte-principal);
    margin: 0;
    padding: 0;
    padding-top: 72px;
    background-color: var(--cor-texto-principal); 
    color: var(--cor-texto-principal);
    position: relative; /* MANTIDO: Essencial para que o ::before se posicione */
}

/* PSEUDO-ELEMENTO CORRIGIDO: Agora ele carrega a imagem E os filtros */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    
    /* 1. IMAGEM DE FUNDO MOVIDA PARA CÁ */
    background-image: url('../releases/res/capa-demasiadohumano.jpg'); 
    background-size: cover;
    background-attachment: fixed;
    background-position: center;

    /* 2. FILTROS APLICADOS DIRETAMENTE À IMAGEM DE FUNDO */
    filter: blur(15px); /* Aplica o desfoque à imagem */
}

h2 {
    font-family: var(--fonte-destaque);
    text-transform: uppercase;
    color: var(--cor-roxo-principal);
    text-align: center;
    margin-top: 30px;
}