:root {
    --color-primary: #345db4;
    --color-primary-light: #35bded;
    --color-primary-hover: #1565a1;
    --color-accent: #79d8f4;

    --color-background: #121212;
    --color-surface: #1e1e1e;
    --color-text-primary: #ffffff;
    --color-text-secondary: #b3b3b3;
    --color-border: #333333;

    --header-height: 70px;
    --nav-width: 70px;
    --nav-width-expanded: 250px;
    --border-radius-sm: 0.25rem;
    --border-radius: 0.5rem;
    --border-radius-lg: 1rem;

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05);

    --transition-fast: 0.15s ease;
    --transition: 0.3s ease;
    --transition-slow: 0.5s ease;
}

[data-theme="light"] {
    --color-background: #f5f5f5;
    --color-surface: #e6e6e6;
    --color-text-primary: #1a1a1a;
    --color-text-secondary: #333333;
    --color-border: #b3b3b3;

    --color-primary: #345db4;
    --color-primary-light: #35bded;
    --color-primary-hover: #1565a1;
    --color-accent: #79d8f4;
}

/* *,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
} */

.loader {
    width: 50px;
    aspect-ratio: 1;
    border-radius: 50%;
    position: fixed;
    top: 50%;
    left: 50%;
    border: 8px solid var(--color-text-primary);
    animation: l20-1 0.8s infinite linear alternate, l20-2 1.6s infinite linear;
}
#loader {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: var(--color-background);
    z-index: 9999;
    transition: opacity 0.5s ease, visibility 0.5s ease, filter 0.5s ease;
}
@keyframes l20-1 {
    0% {
        clip-path: polygon(
            50% 50%,
            0 0,
            50% 0%,
            50% 0%,
            50% 0%,
            50% 0%,
            50% 0%
        );
    }
    12.5% {
        clip-path: polygon(
            50% 50%,
            0 0,
            50% 0%,
            100% 0%,
            100% 0%,
            100% 0%,
            100% 0%
        );
    }
    25% {
        clip-path: polygon(
            50% 50%,
            0 0,
            50% 0%,
            100% 0%,
            100% 100%,
            100% 100%,
            100% 100%
        );
    }
    50% {
        clip-path: polygon(
            50% 50%,
            0 0,
            50% 0%,
            100% 0%,
            100% 100%,
            50% 100%,
            0% 100%
        );
    }
    62.5% {
        clip-path: polygon(
            50% 50%,
            100% 0,
            100% 0%,
            100% 0%,
            100% 100%,
            50% 100%,
            0% 100%
        );
    }
    75% {
        clip-path: polygon(
            50% 50%,
            100% 100%,
            100% 100%,
            100% 100%,
            100% 100%,
            50% 100%,
            0% 100%
        );
    }
    100% {
        clip-path: polygon(
            50% 50%,
            50% 100%,
            50% 100%,
            50% 100%,
            50% 100%,
            50% 100%,
            0% 100%
        );
    }
}
@keyframes l20-2 {
    0% {
        transform: scaleY(1) rotate(0deg);
    }
    49.99% {
        transform: scaleY(1) rotate(135deg);
    }
    50% {
        transform: scaleY(-1) rotate(0deg);
    }
    100% {
        transform: scaleY(-1) rotate(-135deg);
    }
}
#loader.fade-out {
    opacity: 0;
    visibility: hidden;
    filter: blur(10px);
}
#loader.fade-in {
    opacity: 1;
    visibility: visible;
    filter: blur(0px);
}