/* Base styles and variables */
:root {
    --brand-color: #38BDFF;
    --brand-light: #5eccff;
    --brand-dark: #2099d9;
}

/* Common styles */
body {
    font-family: 'Montserrat', sans-serif;
}

/* Utilities */
.focus-brand {
    @apply focus:outline-none focus:ring-2 focus:ring-[#38BDFF] focus:border-transparent;
}

.hover-brand {
    @apply hover:bg-[#38BDFF]/5;
}

/* Animations */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Components */
.login-container {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(56, 189, 255, 0.1);
}

.gradient-bg {
    background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 100%);
}

.gradient-button {
    background: linear-gradient(135deg, var(--brand-color), var(--brand-light));
    transition: all 0.3s ease;
}

.gradient-button:hover {
    background: linear-gradient(135deg, var(--brand-dark), var(--brand-color));
    transform: translateY(-1px);
}

/* Button States */
.button-loading {
    position: relative;
    cursor: not-allowed;
    opacity: 0.8;
}

.button-loading:hover {
    transform: none !important;
}

/* Form Elements */
input[type="checkbox"] {
    @apply text-[#38BDFF] border-gray-300 rounded focus:ring-[#38BDFF];
}

/* Text Colors */
.text-brand {
    color: var(--brand-color);
}

.text-brand-dark {
    color: var(--brand-dark);
}

/* Border Colors */
.border-brand {
    border-color: var(--brand-color);
}

/* Background Colors */
.bg-brand {
    background-color: var(--brand-color);
}

.bg-brand-light {
    background-color: var(--brand-light);
}

.bg-brand-dark {
    background-color: var(--brand-dark);
}