/* 
 * Weightless™ - Custom Styles
 * A Community that helps lift the load
 * 
 * Colour Palette:
 * - Sky Pastel Blue: #5DADE2 (main), #3498DB (darker)
 * - Teal Pastel: #4DB6AC (main), #26A69A (darker), #009688 (darkest)
 * - Background: White with subtle gradients
 */

/* ============================================
   Base Styles
   ============================================ */

body {
    background-color: #ffffff;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Selection color */
::selection {
    background-color: rgba(93, 173, 226, 0.3);
    color: inherit;
}

/* ============================================
   Button Styles
   ============================================ */

.btn-primary {
    @apply inline-flex items-center justify-center px-6 py-3 
           bg-gradient-to-r from-sky-pastel-500 to-sky-pastel-600 
           text-white font-semibold rounded-full
           shadow-lg shadow-sky-pastel-500/25
           hover:shadow-xl hover:shadow-sky-pastel-500/30
           hover:from-sky-pastel-600 hover:to-sky-pastel-500
           transform hover:-translate-y-0.5
           transition-all duration-300 ease-out;
}

.btn-secondary {
    @apply inline-flex items-center justify-center px-6 py-3
           bg-white text-gray-700 font-semibold rounded-full
           border-2 border-gray-200
           hover:border-teal-pastel-400 hover:text-teal-pastel-500
           transform hover:-translate-y-0.5
           transition-all duration-300 ease-out;
}

.btn-teal {
    @apply inline-flex items-center justify-center px-6 py-3 
           bg-gradient-to-r from-teal-pastel-400 to-teal-pastel-500 
           text-white font-semibold rounded-full
           shadow-lg shadow-teal-pastel-400/25
           hover:shadow-xl hover:shadow-teal-pastel-400/30
           hover:from-teal-pastel-500 hover:to-teal-pastel-400
           transform hover:-translate-y-0.5
           transition-all duration-300 ease-out;
}

/* ============================================
   Card Styles
   ============================================ */

.feature-card {
    @apply bg-white p-8 rounded-2xl
           border border-gray-100
           shadow-sm hover:shadow-lg
           transform hover:-translate-y-1
           transition-all duration-300 ease-out;
}

.feature-icon {
    @apply w-14 h-14 rounded-xl flex items-center justify-center mb-5;
}

/* ============================================
   Typography Helpers
   ============================================ */

.text-gradient-sky {
    @apply bg-gradient-to-r from-sky-pastel-500 to-sky-pastel-600 
           bg-clip-text text-transparent;
}

.text-gradient-teal {
    @apply bg-gradient-to-r from-teal-pastel-400 to-teal-pastel-500 
           bg-clip-text text-transparent;
}

/* ============================================
   Decorative Elements
   ============================================ */

/* Subtle background patterns */
.bg-pattern-dots {
    background-image: radial-gradient(circle, rgba(93, 173, 226, 0.1) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* Glassmorphism effect */
.glass {
    @apply bg-white/70 backdrop-blur-lg border border-white/20;
}

/* ============================================
   Animation Classes
   ============================================ */

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

.animate-float {
    animation: float 3s ease-in-out infinite;
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* ============================================
   Form Styles
   ============================================ */

.input-field {
    @apply w-full px-4 py-3 rounded-xl
           border border-gray-200
           bg-white
           text-gray-800 placeholder-gray-400
           focus:outline-none focus:ring-2 focus:ring-sky-pastel-500/50 focus:border-sky-pastel-500
           transition-all duration-200;
}

.input-label {
    @apply block text-sm font-medium text-gray-700 mb-2;
}

/* ============================================
   Utility Classes
   ============================================ */

/* Elegant divider */
.divider {
    @apply h-px bg-gradient-to-r from-transparent via-gray-200 to-transparent;
}

/* Soft shadow */
.shadow-soft {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* Card hover glow effect */
.hover-glow:hover {
    box-shadow: 0 0 30px rgba(93, 173, 226, 0.15);
}