@tailwind base;
@tailwind components;
@tailwind utilities;

/* Global Font Settings */
*, body {
    font-family: 'SecondaryFont', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.main {
    font-family: 'MainFont', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.secondary {
    font-family: 'SecondaryFont', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Scrollbar Styling */
* {
    scrollbar-width: thin;
    scroll-behavior: smooth;
}

p, h1, h2, h3, h4, h5, h6, a, button, input, textarea, select, option, label, span, div {
    font-family: 'SecondaryFont', system-ui, -apple-system, Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}


/* Fallback for browsers that don't support custom fonts */
.no-custom-fonts body,
.no-custom-fonts .main {
    font-family: 'SecondaryFont', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Font loading error handling */
.font-loading-error {
    font-family: 'SecondaryFont', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Hide spin buttons in Firefox */
input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.tippy-box[data-theme~='success'] {
    background-color: #10B981;
    color: white;
}

.tippy-box[data-theme~='warning'] {
    background-color: #F59E0B;
    color: white;
}

.tippy-box[data-theme~='error'] {
    background-color: #EF4444;
    color: white;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0px);
    }
}

form {
    min-height: 70px;
    margin-bottom: 1rem;
}

@keyframes fade-in-up {
    0% {
        opacity: 0;
        transform: translateY(20px) translateX(-50%);
    }
    100% {
        opacity: 1;
        transform: translateY(0) translateX(-50%);
    }
}

@keyframes fade-in-left {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-fade-in-up {
    animation: fade-in-up 0.5s ease-out;
}

@media (min-width: 640px) {
    .animate-fade-in-up {
        animation: fade-in-left 0.5s ease-out;
    }
}