/* UTILFOGE Utility Frontend CSS */

/* --- Base Typography --- */
body {
    background-color: var(--utilfoge-bg-base);
    color: var(--utilfoge-text-base);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* --- Utilities --- */

/* Text Gradient */
.utilfoge-text-gradient,
.text-gradient {
    background-image: linear-gradient(var(--grad-angle, 90deg), var(--utilfoge-grad-1), var(--utilfoge-grad-2));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* Animated Text Gradient */
@keyframes utilfoge-gradient-spin {
    0% {
        --grad-angle: 0deg;
    }
    100% {
        --grad-angle: 360deg;
    }
}

.utilfoge-text-gradient.animated,
.text-gradient.animated {
    animation: utilfoge-gradient-spin 4s linear infinite;
}

/* Border Gradient */
.utilfoge-border-gradient,
.border-gradient {
    border: 4px solid transparent;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: 
        linear-gradient(var(--utilfoge-bg-base), var(--utilfoge-bg-base)),
        linear-gradient(var(--grad-angle, 90deg), var(--utilfoge-grad-1), var(--utilfoge-grad-2));
}

.utilfoge-border-gradient.animated,
.border-gradient.animated {
    animation: utilfoge-gradient-spin 4s linear infinite;
}

/* --- Dark Mode Toggle Button Styles --- */
.utilfoge-dark-mode-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--utilfoge-text-base);
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    padding: 0.5rem;
    transition: background-color 0.2s x ease;
}

.utilfoge-dark-mode-toggle:hover {
    background-color: var(--utilfoge-bg-surface);
}

.utilfoge-dark-mode-toggle svg {
    width: 1.5rem;
    height: 1.5rem;
}

html.dark .utilfoge-icon-sun {
    display: none;
}

html.dark .utilfoge-icon-moon {
    display: block !important;
}

html:not(.dark) .utilfoge-icon-moon {
    display: none;
}

html:not(.dark) .utilfoge-icon-sun {
    display: block !important;
}