/* 
 * hoaBienHotel - Glassmorphism Global Styles 
 * Based on SYSTEM_LOGIC.md Design Rules
 */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap');

:root {
    /* Glassmorphism Core Variables */
    --glass-bg: rgba(255, 255, 255, 0.75);
    --glass-border: rgba(255, 255, 255, 0.4);
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.08);
    --glass-shadow-hover: 0 12px 40px 0 rgba(31, 38, 135, 0.18);
    --glass-blur: 12px;

    /* Brand Gradients */
    --sky-gradient: linear-gradient(135deg, #007bff 0%, #00d2ff 100%);
    --indigo-gradient: linear-gradient(135deg, #6610f2 0%, #6f42c1 100%);
    --sunset-gradient: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
}

/* Typography Rule */
.glass-font {
    font-family: 'Outfit', sans-serif !important;
}

/* Main Glass Card Component */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    box-shadow: var(--glass-shadow);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.glass-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--glass-shadow-hover);
}

/* Background Utilities */
.bg-glass-sky {
    background: var(--sky-gradient);
    min-height: 100vh;
}

.bg-glass-indigo {
    background: var(--indigo-gradient);
    min-height: 60vh;
}

/* Enhanced Controls per SYSTEM_LOGIC.md */
.glass-switch {
    transform: scale(1.3);
    margin-right: 0.75rem;
    cursor: pointer;
}

.glass-btn {
    border-radius: 12px;
    padding: 10px 25px;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    transition: all 0.2s ease;
}

.glass-btn-primary {
    background: var(--sky-gradient);
    color: white;
}

.glass-btn:hover {
    opacity: 0.9;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}