:root {
    --cauce-background: #F2F8F8;
    --cauce-surface-variant: #EAF5F5;
    --cauce-primary: #1C6B6B;
}

@media (prefers-color-scheme: dark) {
    :root {
        --cauce-background: #0F1C1C;
        --cauce-surface-variant: #1A2828;
        --cauce-primary: #C4E4E4;
    }
}

html, body {
    height: 100%;
    margin: 0px;
    padding: 0px;
    background-color: var(--cauce-background);
}

canvas {
  width: 100vw;
  height: 100vh;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
}

/* Loading overlay — visible immediately, hidden by Application.kt */
#loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    background-color: var(--cauce-background);
    transition: opacity 0.3s ease-out;
}

#loading-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.loading-logo {
    width: 80px;
    height: 80px;
    border-radius: 16px;
}

.loading-bar-track {
    width: 200px;
    height: 4px;
    background-color: var(--cauce-surface-variant);
    border-radius: 2px;
    overflow: hidden;
}

.loading-bar-fill {
    width: 40%;
    height: 100%;
    background-color: var(--cauce-primary);
    border-radius: 2px;
    animation: loading-progress 1.5s ease-in-out infinite;
}

@keyframes loading-progress {
    0% {
        transform: translateX(-100%);
    }
    50% {
        transform: translateX(150%);
    }
    100% {
        transform: translateX(400%);
    }
}