/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family-main);
    font-size: var(--font-size-md);
    background-color: var(--desktop-bg);
    min-height: 100vh;
    overflow: hidden;
    cursor: default;
    user-select: none;
}

/* Utility classes */
.border-raised {
    border: 2px solid;
    border-color: var(--border-raised);
}

.border-inset {
    border: 2px solid;
    border-color: var(--border-inset);
}

.hover-highlight:hover {
    background: var(--win-title);
    color: var(--color-white);
}

.hidden {
    display: none !important;
}

/* Common button styles */
.btn {
    min-width: 75px;
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--win-bg);
    border: 2px solid;
    border-color: var(--border-raised);
    font-size: var(--font-size-md);
    cursor: pointer;
    font-family: inherit;
}

.btn:active {
    border-color: var(--border-inset);
}

.btn:focus {
    outline: 1px dotted var(--color-black);
    outline-offset: -4px;
}

/* Common input styles */
.win-input,
.win-select {
    padding: 3px var(--spacing-sm);
    border: 2px solid;
    border-color: var(--border-inset);
    font-family: inherit;
    font-size: var(--font-size-md);
    background: var(--color-white);
}

.win-input:focus,
.win-select:focus {
    outline: none;
}

/* Animations */
@keyframes wave {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes boot-loading {
    0% { width: 0%; }
    100% { width: 100%; }
}

@keyframes minimize {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0.1) translateY(100vh);
        opacity: 0;
    }
}

@keyframes restore {
    0% {
        transform: scale(0.1) translateY(100vh);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes shutdownLoading {
    0% { width: 0%; }
    100% { width: 100%; }
}

@keyframes welcomeZoom {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes tooltipFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes clippyBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes glitch {
    0%, 100% { transform: translate(0); }
    25% { transform: translate(-2px, 1px); }
    50% { transform: translate(2px, -1px); }
    75% { transform: translate(-1px, -1px); }
}

@keyframes creditsScroll {
    0% { top: 100%; }
    100% { top: -200%; }
}

@keyframes crtFlicker {
    0% { opacity: 0.97; }
    50% { opacity: 1; }
    100% { opacity: 0.98; }
}

@keyframes cardCascade {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    100% {
        transform: translateY(150vh) rotate(720deg);
    }
}

@keyframes fireworkExplode {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0);
        opacity: 0;
    }
}