/**
 * NEXUS Property OS - Luxury Gradient System
 * Premium Gold, Teal, and Navy Color Schemes
 */

/* ============================================
   CSS CUSTOM PROPERTIES
   ============================================ */
:root {
    /* Gold Spectrum */
    --gradient-gold-start: #D4AF37;
    --gradient-gold-mid: #F4E4B5;
    --gradient-gold-end: #B8941F;
    --gradient-gold-dark: #8B7355;
    --gradient-rose-gold: #B76E79;

    /* Teal Spectrum */
    --gradient-teal-start: #00D4AA;
    --gradient-teal-mid: #00F5C4;
    --gradient-teal-end: #00A88A;
    --gradient-teal-dark: #007A64;

    /* Navy Spectrum */
    --gradient-navy-start: #0A1628;
    --gradient-navy-mid: #1a2942;
    --gradient-navy-end: #2d3e5f;
    --gradient-navy-light: #3d5075;

    /* Premium Accents */
    --gradient-pearl: #FAFAF9;
    --gradient-champagne: #F7E7CE;
    --gradient-platinum: #E5E4E2;
}

/* ============================================
   GOLD GRADIENTS
   ============================================ */

/* Classic Gold */
.gradient-gold {
    background: linear-gradient(135deg, var(--gradient-gold-start), var(--gradient-gold-end));
}

/* Gold Shine */
.gradient-gold-shine {
    background: linear-gradient(135deg,
        var(--gradient-gold-start) 0%,
        var(--gradient-gold-mid) 50%,
        var(--gradient-gold-start) 100%);
}

/* Gold to Rose Gold */
.gradient-gold-rose {
    background: linear-gradient(135deg,
        var(--gradient-gold-start) 0%,
        var(--gradient-rose-gold) 100%);
}

/* Metallic Gold */
.gradient-gold-metallic {
    background: linear-gradient(180deg,
        var(--gradient-gold-mid) 0%,
        var(--gradient-gold-start) 25%,
        var(--gradient-gold-dark) 50%,
        var(--gradient-gold-start) 75%,
        var(--gradient-gold-mid) 100%);
}

/* Gold Radial */
.gradient-gold-radial {
    background: radial-gradient(ellipse at center,
        var(--gradient-gold-mid) 0%,
        var(--gradient-gold-start) 50%,
        var(--gradient-gold-end) 100%);
}

/* Gold Glow Effect */
.gradient-gold-glow {
    background: linear-gradient(135deg, var(--gradient-gold-start), var(--gradient-gold-end));
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.4),
                0 0 80px rgba(212, 175, 55, 0.2);
}

/* ============================================
   TEAL GRADIENTS
   ============================================ */

/* Classic Teal */
.gradient-teal {
    background: linear-gradient(135deg, var(--gradient-teal-start), var(--gradient-teal-end));
}

/* Teal Shine */
.gradient-teal-shine {
    background: linear-gradient(135deg,
        var(--gradient-teal-end) 0%,
        var(--gradient-teal-mid) 50%,
        var(--gradient-teal-start) 100%);
}

/* Teal Radial */
.gradient-teal-radial {
    background: radial-gradient(ellipse at center,
        var(--gradient-teal-mid) 0%,
        var(--gradient-teal-start) 50%,
        var(--gradient-teal-dark) 100%);
}

/* Teal Glow Effect */
.gradient-teal-glow {
    background: linear-gradient(135deg, var(--gradient-teal-start), var(--gradient-teal-end));
    box-shadow: 0 10px 40px rgba(0, 212, 170, 0.4),
                0 0 80px rgba(0, 212, 170, 0.2);
}

/* ============================================
   NAVY GRADIENTS
   ============================================ */

/* Classic Navy */
.gradient-navy {
    background: linear-gradient(135deg, var(--gradient-navy-start), var(--gradient-navy-end));
}

/* Navy Deep */
.gradient-navy-deep {
    background: linear-gradient(180deg,
        var(--gradient-navy-start) 0%,
        var(--gradient-navy-mid) 50%,
        var(--gradient-navy-start) 100%);
}

/* Navy to Light */
.gradient-navy-light {
    background: linear-gradient(135deg,
        var(--gradient-navy-mid) 0%,
        var(--gradient-navy-light) 100%);
}

/* Navy Radial Spotlight */
.gradient-navy-spotlight {
    background: radial-gradient(ellipse at 50% 0%,
        var(--gradient-navy-light) 0%,
        var(--gradient-navy-mid) 40%,
        var(--gradient-navy-start) 100%);
}

/* ============================================
   MIXED LUXURY GRADIENTS
   ============================================ */

/* Gold to Teal */
.gradient-gold-teal {
    background: linear-gradient(135deg,
        var(--gradient-gold-start) 0%,
        var(--gradient-teal-start) 100%);
}

/* Teal to Gold */
.gradient-teal-gold {
    background: linear-gradient(135deg,
        var(--gradient-teal-start) 0%,
        var(--gradient-gold-start) 100%);
}

/* Premium Tricolor */
.gradient-premium {
    background: linear-gradient(135deg,
        var(--gradient-gold-start) 0%,
        var(--gradient-rose-gold) 50%,
        var(--gradient-teal-start) 100%);
}

/* Dubai Sunset */
.gradient-dubai-sunset {
    background: linear-gradient(180deg,
        #0A1628 0%,
        #1a2942 20%,
        #D4AF37 50%,
        #B76E79 70%,
        #00D4AA 100%);
}

/* Luxury Mesh */
.gradient-luxury-mesh {
    background:
        linear-gradient(135deg, rgba(212, 175, 55, 0.3) 0%, transparent 50%),
        linear-gradient(225deg, rgba(0, 212, 170, 0.3) 0%, transparent 50%),
        linear-gradient(45deg, rgba(183, 110, 121, 0.3) 0%, transparent 50%),
        var(--gradient-navy-start);
}

/* ============================================
   TEXT GRADIENTS
   ============================================ */

.text-gradient-gold {
    background: linear-gradient(135deg, var(--gradient-gold-mid), var(--gradient-gold-start), var(--gradient-gold-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-teal {
    background: linear-gradient(135deg, var(--gradient-teal-mid), var(--gradient-teal-start), var(--gradient-teal-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-premium {
    background: linear-gradient(135deg, var(--gradient-gold-start), var(--gradient-teal-start));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-white-gold {
    background: linear-gradient(135deg, #ffffff 0%, var(--gradient-gold-mid) 50%, var(--gradient-gold-start) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   BORDER GRADIENTS
   ============================================ */

.border-gradient-gold {
    border: 2px solid transparent;
    background: linear-gradient(var(--gradient-navy-start), var(--gradient-navy-start)) padding-box,
                linear-gradient(135deg, var(--gradient-gold-start), var(--gradient-gold-end)) border-box;
}

.border-gradient-teal {
    border: 2px solid transparent;
    background: linear-gradient(var(--gradient-navy-start), var(--gradient-navy-start)) padding-box,
                linear-gradient(135deg, var(--gradient-teal-start), var(--gradient-teal-end)) border-box;
}

.border-gradient-premium {
    border: 2px solid transparent;
    background: linear-gradient(var(--gradient-navy-start), var(--gradient-navy-start)) padding-box,
                linear-gradient(135deg, var(--gradient-gold-start), var(--gradient-teal-start)) border-box;
}

/* ============================================
   ANIMATED GRADIENTS
   ============================================ */

/* Animated Gold Shimmer */
.gradient-shimmer-gold {
    background: linear-gradient(90deg,
        var(--gradient-gold-start) 0%,
        var(--gradient-gold-mid) 25%,
        var(--gradient-gold-start) 50%,
        var(--gradient-gold-mid) 75%,
        var(--gradient-gold-start) 100%);
    background-size: 200% 100%;
    animation: shimmerGold 3s ease-in-out infinite;
}

@keyframes shimmerGold {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Animated Teal Wave */
.gradient-wave-teal {
    background: linear-gradient(90deg,
        var(--gradient-teal-start) 0%,
        var(--gradient-teal-mid) 25%,
        var(--gradient-teal-start) 50%,
        var(--gradient-teal-mid) 75%,
        var(--gradient-teal-start) 100%);
    background-size: 200% 100%;
    animation: waveTeal 4s ease-in-out infinite;
}

@keyframes waveTeal {
    0% { background-position: 0% 0; }
    50% { background-position: 100% 0; }
    100% { background-position: 0% 0; }
}

/* Rotating Gradient */
.gradient-rotate {
    background: conic-gradient(from 0deg,
        var(--gradient-gold-start),
        var(--gradient-teal-start),
        var(--gradient-rose-gold),
        var(--gradient-gold-start));
    animation: rotateGradient 10s linear infinite;
}

@keyframes rotateGradient {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

/* Pulsing Glow */
.gradient-pulse-glow {
    background: linear-gradient(135deg, var(--gradient-gold-start), var(--gradient-teal-start));
    animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
    }
    50% {
        box-shadow: 0 0 40px rgba(212, 175, 55, 0.6), 0 0 60px rgba(0, 212, 170, 0.3);
    }
}

/* ============================================
   BUTTON GRADIENT STYLES
   ============================================ */

.btn-gradient-gold {
    background: linear-gradient(135deg, var(--gradient-gold-start), var(--gradient-gold-end));
    color: var(--gradient-navy-start);
    border: none;
    transition: all 0.3s ease;
}

.btn-gradient-gold:hover {
    background: linear-gradient(135deg, var(--gradient-gold-mid), var(--gradient-gold-start));
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.4);
}

.btn-gradient-teal {
    background: linear-gradient(135deg, var(--gradient-teal-start), var(--gradient-teal-end));
    color: var(--gradient-navy-start);
    border: none;
    transition: all 0.3s ease;
}

.btn-gradient-teal:hover {
    background: linear-gradient(135deg, var(--gradient-teal-mid), var(--gradient-teal-start));
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 212, 170, 0.4);
}

.btn-gradient-premium {
    background: linear-gradient(135deg, var(--gradient-gold-start) 0%, var(--gradient-teal-start) 100%);
    color: var(--gradient-navy-start);
    border: none;
    transition: all 0.3s ease;
}

.btn-gradient-premium:hover {
    background: linear-gradient(135deg, var(--gradient-teal-start) 0%, var(--gradient-gold-start) 100%);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3), 0 10px 30px rgba(0, 212, 170, 0.3);
}

/* ============================================
   CARD GRADIENT BACKGROUNDS
   ============================================ */

.card-gradient-glass {
    background: linear-gradient(135deg,
        rgba(26, 41, 66, 0.8) 0%,
        rgba(10, 22, 40, 0.9) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.card-gradient-gold-accent {
    background: linear-gradient(135deg,
        rgba(212, 175, 55, 0.1) 0%,
        rgba(26, 41, 66, 0.8) 30%,
        rgba(10, 22, 40, 0.9) 100%);
}

.card-gradient-teal-accent {
    background: linear-gradient(135deg,
        rgba(0, 212, 170, 0.1) 0%,
        rgba(26, 41, 66, 0.8) 30%,
        rgba(10, 22, 40, 0.9) 100%);
}

.card-gradient-premium-glow {
    background: linear-gradient(135deg,
        rgba(26, 41, 66, 0.9) 0%,
        rgba(10, 22, 40, 0.95) 100%);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(212, 175, 55, 0.1),
        inset 0 -1px 0 rgba(0, 212, 170, 0.1);
}

/* ============================================
   SECTION BACKGROUNDS
   ============================================ */

.section-gradient-navy {
    background: linear-gradient(180deg,
        var(--gradient-navy-start) 0%,
        var(--gradient-navy-mid) 50%,
        var(--gradient-navy-start) 100%);
}

.section-gradient-spotlight {
    background:
        radial-gradient(ellipse at 20% 20%, rgba(212, 175, 55, 0.15) 0%, transparent 40%),
        radial-gradient(ellipse at 80% 80%, rgba(0, 212, 170, 0.1) 0%, transparent 40%),
        linear-gradient(180deg, var(--gradient-navy-start), var(--gradient-navy-mid));
}

.section-gradient-premium {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(212, 175, 55, 0.2) 0%, transparent 50%),
        linear-gradient(180deg, var(--gradient-navy-start), var(--gradient-navy-mid), var(--gradient-navy-start));
}

/* ============================================
   OVERLAY GRADIENTS
   ============================================ */

.overlay-gradient-dark {
    background: linear-gradient(180deg,
        rgba(10, 22, 40, 0) 0%,
        rgba(10, 22, 40, 0.8) 100%);
}

.overlay-gradient-gold {
    background: linear-gradient(180deg,
        rgba(212, 175, 55, 0) 0%,
        rgba(212, 175, 55, 0.2) 100%);
}

.overlay-gradient-fade {
    background: linear-gradient(180deg,
        transparent 0%,
        var(--gradient-navy-start) 100%);
}

/* ============================================
   ACCESSIBILITY - REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .gradient-shimmer-gold,
    .gradient-wave-teal,
    .gradient-rotate,
    .gradient-pulse-glow {
        animation: none;
    }
}

/* ============================================
   HIGH CONTRAST MODE
   ============================================ */

@media (prefers-contrast: high) {
    .text-gradient-gold,
    .text-gradient-teal,
    .text-gradient-premium,
    .text-gradient-white-gold {
        -webkit-text-fill-color: currentColor;
        background: none;
    }
}