/* Fundo compartilhado entre a autenticação e a área autenticada. */
.login-body,
.app-body {
    --mavaj-page-background:
        radial-gradient(ellipse at top right,
            rgba(var(--bs-primary-rgb), 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at bottom left,
            rgba(var(--mavaj-accent-rgb), 0.05) 0%, transparent 50%),
        linear-gradient(135deg, var(--bs-body-bg) 0%, var(--bs-secondary-bg) 100%);
    --mavaj-page-grid-color: rgba(83, 130, 161, 0.03);
    --mavaj-page-texture:
        linear-gradient(var(--mavaj-page-grid-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--mavaj-page-grid-color) 1px, transparent 1px);
    background: var(--mavaj-page-background);
    background-attachment: fixed;
}

/* A textura é pintada atrás do conteúdo, sem criar camadas sobre os componentes.
   A repetição cobre páginas longas, sem depender da altura de um pseudo-elemento. */
.app-body {
    background-image: var(--mavaj-page-texture), var(--mavaj-page-background);
    background-size: 40px 40px, 40px 40px, auto, auto, auto;
}

@scope ([data-bs-theme="light"]) to ([data-bs-theme]) {
    :is(:scope, :scope *):is(.login-body, .app-body) {
        --mavaj-page-background:
            radial-gradient(ellipse at bottom left,
                rgba(var(--mavaj-accent-rgb), 0.025), transparent 55%),
            linear-gradient(135deg, var(--bs-body-bg), var(--bs-secondary-bg));
        --mavaj-page-grid-color: rgba(var(--bs-body-color-rgb), 0.015);
    }
}

@scope ([data-bs-theme="dark"]) to ([data-bs-theme]) {
    :is(:scope, :scope *):is(.login-body, .app-body) {
        --mavaj-page-background:
            linear-gradient(135deg, var(--bs-body-bg), var(--bs-secondary-bg));
        --mavaj-page-grid-color: rgba(var(--bs-body-color-rgb), 0.015);
    }
}