/*
 * Aurora: soft bands of the brand color and two neighbouring hues drift slowly behind
 * calm, nearly solid cards. The motion lives on one fixed layer behind the page (html::before),
 * so nothing that holds content is transformed, and it stops for people who prefer less motion.
 */

:root {
    --brand-radius: 1.1rem;
    --aurora-card: color-mix(in oklab, white 80%, transparent);
    --aurora-edge: color-mix(in oklab, white 85%, transparent);
    --brand-shadow: 0 12px 36px -18px color-mix(in oklab, var(--primary-900) 35%, transparent);
    --brand-hairline: color-mix(in oklab, var(--primary-900) 8%, transparent);
    --aurora-a: color-mix(in oklab, var(--primary-400) 70%, transparent);
    --aurora-b: color-mix(in oklab, var(--primary-300) 70%, transparent);
    --aurora-c: color-mix(in oklab, var(--primary-500) 55%, transparent);
    --aurora-a: oklch(from var(--primary-400) l calc(c * 1.4) calc(h + 70) / 0.7);
    --aurora-b: oklch(from var(--primary-300) l calc(c * 1.4) calc(h - 60) / 0.75);
    --aurora-c: oklch(from var(--primary-500) l calc(c * 1.2) h / 0.55);
    --aurora-base: color-mix(in oklab, var(--gray-50) 80%, var(--primary-50));
}

.dark {
    --aurora-card: color-mix(in oklab, var(--gray-900) 72%, transparent);
    --aurora-edge: color-mix(in oklab, white 8%, transparent);
    --brand-shadow: 0 16px 40px -20px rgb(0 0 0 / 0.8);
    --brand-hairline: color-mix(in oklab, white 8%, transparent);
    --aurora-a: color-mix(in oklab, var(--primary-600) 55%, transparent);
    --aurora-b: color-mix(in oklab, var(--primary-700) 55%, transparent);
    --aurora-c: color-mix(in oklab, var(--primary-500) 35%, transparent);
    --aurora-a: oklch(from var(--primary-500) l calc(c * 1.3) calc(h + 70) / 0.5);
    --aurora-b: oklch(from var(--primary-600) l calc(c * 1.3) calc(h - 60) / 0.5);
    --aurora-c: oklch(from var(--primary-500) l c h / 0.35);
    --aurora-base: color-mix(in oklab, var(--gray-950) 94%, var(--primary-950));
}

/* ---------- The moving sky ---------- */

html {
    background-color: var(--aurora-base);
}

.fi-body,
.dark .fi-body {
    background: transparent;
}

html::before {
    content: '';
    position: fixed;
    inset: -25%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(40% 32% at 78% 18%, var(--aurora-a), transparent 70%),
        radial-gradient(38% 30% at 18% 62%, var(--aurora-b), transparent 70%),
        radial-gradient(46% 26% at 55% 88%, var(--aurora-c), transparent 70%),
        radial-gradient(30% 22% at 35% 22%, var(--aurora-c), transparent 70%);
    filter: blur(40px) saturate(1.15);
}

@media (prefers-reduced-motion: no-preference) {
    html::before {
        animation: aurora-drift 26s ease-in-out infinite alternate;
    }
}

@keyframes aurora-drift {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    }

    50% {
        transform: translate3d(-6%, 4%, 0) rotate(8deg) scale(1.08);
    }

    100% {
        transform: translate3d(5%, -3%, 0) rotate(-6deg) scale(1.04);
    }
}

/* ---------- Calm cards ---------- */

.fi-section:not(.fi-section-not-contained),
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-tabs,
.dark .fi-section:not(.fi-section-not-contained),
.dark .fi-ta-ctn,
.dark .fi-wi-stats-overview-stat,
.dark .fi-tabs {
    background-color: var(--aurora-card);
    box-shadow: var(--brand-shadow), inset 0 1px 0 var(--aurora-edge), 0 0 0 1px var(--brand-hairline);
}

.fi-section-header,
.fi-section-content-ctn,
.fi-ta-header,
.fi-ta-content,
.fi-ta-table,
.fi-ta-table > tbody,
.fi-ta-footer,
.fi-pagination {
    background-color: transparent;
}

.fi-ta-header-cell,
.fi-ta-actions-header-cell,
.dark .fi-ta-header-cell,
.dark .fi-ta-actions-header-cell {
    background-color: color-mix(in oklab, var(--primary-500) 6%, transparent);
}

.fi-wi-stats-overview-stat::before {
    height: 4px;
    background: linear-gradient(90deg, var(--aurora-a), var(--aurora-b), var(--aurora-c));
}

.fi-wi-stats-overview-stat::after {
    display: none;
}

.fi-modal-window,
.fi-dropdown-panel {
    background-color: color-mix(in oklab, white 96%, transparent);
}

.dark .fi-modal-window,
.dark .fi-dropdown-panel {
    background-color: color-mix(in oklab, var(--gray-900) 97%, transparent);
}

/* ---------- Top bar and sidebar float on the sky ---------- */

.fi-topbar {
    border-top-width: 0;
}

.fi-topbar::before {
    background-color: color-mix(in oklab, white 50%, transparent);
}

.dark .fi-topbar::before {
    background-color: color-mix(in oklab, var(--gray-950) 50%, transparent);
}

@media (min-width: 1024px) {
    .fi-sidebar,
    .dark .fi-sidebar {
        background: color-mix(in oklab, white 40%, transparent);
        border-inline-end: 1px solid var(--aurora-edge);
    }

    .dark .fi-sidebar {
        background: color-mix(in oklab, var(--gray-950) 45%, transparent);
    }
}

.fi-header-heading::after {
    background: linear-gradient(90deg, var(--aurora-a), var(--aurora-b));
}

/* ---------- Login ---------- */

.fi-simple-layout,
.dark .fi-simple-layout {
    background: transparent;
}

.fi-simple-main {
    border-top-width: 0;
    background-color: color-mix(in oklab, white 70%, transparent);
}

.dark .fi-simple-main {
    background-color: color-mix(in oklab, var(--gray-900) 70%, transparent);
}