/**
 * CSS crítico do boot loader — carrega antes do bundle (index.html).
 * Garante logo Sebrae azul (#0772b3) sem depender de tokens CSS ou currentColor.
 */

html,
body {
    height: 100%;
    margin: 0;
}

body {
    background-color: #f4f4f4;
}

#app {
    position: relative;
    min-height: 100%;
}

#portal-boot-loader.portal-morph-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f4f4f4;
}

#portal-boot-loader .portal-morph-loader__svg,
#portal-boot-loader .portal-morph-loader__fallback {
    width: 10.85rem;
    height: 5.25rem;
    display: block;
}

#portal-boot-loader .portal-morph-loader__path {
    fill: #0772b3;
}

#portal-boot-loader .portal-morph-loader__fallback {
    object-fit: contain;
    animation: portal-boot-loader-pulse 1.4s ease-in-out infinite;
}

@keyframes portal-boot-loader-pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/**
 * Tema escuro do loader.
 *
 * Excecao deliberada a regra de tokens: este arquivo carrega antes de qualquer CSS do
 * design system, entao nao pode ler var(--sebrae-*). Os valores abaixo duplicam
 * --sebrae-bg-page e --sebrae-text-heading do escuro. Fonte de verdade:
 */

@media (prefers-color-scheme: dark) {
    html[data-theme='system'] body,
    html[data-theme='system'] #portal-boot-loader.portal-morph-loader {
        background-color: #0f1115;
    }

    html[data-theme='system'] #portal-boot-loader .portal-morph-loader__path {
        fill: #a8cfe8;
    }

    /* O fallback e um SVG de cor fixa; clarear preserva a silhueta sem trocar de arquivo. */
    html[data-theme='system'] #portal-boot-loader .portal-morph-loader__fallback {
        filter: brightness(0) invert(85%) sepia(18%) saturate(480%) hue-rotate(174deg);
    }
}

html[data-theme='dark'] body,
html[data-theme='dark'] #portal-boot-loader.portal-morph-loader {
    background-color: #0f1115;
}

html[data-theme='dark'] #portal-boot-loader .portal-morph-loader__path {
    fill: #a8cfe8;
}

html[data-theme='dark'] #portal-boot-loader .portal-morph-loader__fallback {
    filter: brightness(0) invert(85%) sepia(18%) saturate(480%) hue-rotate(174deg);
}