/* ============================================
   MOOD PRICING - DESIGN SYSTEM
   Sistema de Design Moderno e Premium
   ============================================ */

/* ===== CSS VARIABLES - DESIGN TOKENS ===== */
:root {
    /* === PALETA DE CORES EXPANDIDA === */
    
    /* Brand Colors - Modern Mood */
    --brand-orange: #EC7014;
    --brand-orange-50: #FFF4ED;
    --brand-orange-100: #FFE5D6;
    --brand-orange-200: #FFC7A3;
    --brand-orange-300: #FFA970;
    --brand-orange-400: #FF8C3A;
    --brand-orange-500: #EC7014;
    --brand-orange-600: #D96310;
    --brand-orange-700: #B35210;
    --brand-orange-800: #8C3F0D;
    --brand-orange-900: #662D0A;
    
    --brand-pink: #F1B3C2;
    --brand-pink-50: #FFF5F7;
    --brand-pink-100: #FFE9EE;
    --brand-pink-200: #FFD6E0;
    --brand-pink-300: #F1B3C2;
    --brand-pink-400: #E999AC;
    --brand-pink-500: #E17F96;
    --brand-pink-600: #D96680;
    --brand-pink-700: #C24D6A;
    --brand-pink-800: #993D54;
    --brand-pink-900: #6B2B3B;
    
    --brand-lime: #E0F431;
    --brand-lime-50: #FDFFF0;
    --brand-lime-100: #F9FFD1;
    --brand-lime-200: #F3FFA3;
    --brand-lime-300: #EDFF75;
    --brand-lime-400: #E7FF47;
    --brand-lime-500: #E0F431;
    --brand-lime-600: #C8DC1E;
    --brand-lime-700: #A8B818;
    --brand-lime-800: #889413;
    --brand-lime-900: #68700E;
    
    --brand-off-white: #F8F3EB;
    --brand-black: #141414;
    
    /* === GRADIENTES === */
    --gradient-primary: linear-gradient(135deg, #EC7014 0%, #FF8C3A 100%);
    --gradient-secondary: linear-gradient(135deg, #F1B3C2 0%, #FFD6E0 100%);
    --gradient-accent: linear-gradient(135deg, #E0F431 0%, #F3FFA3 100%);
    --gradient-dark: linear-gradient(135deg, #141414 0%, #2D2D2D 100%);
    --gradient-premium: linear-gradient(135deg, #EC7014 0%, #F1B3C2 50%, #E0F431 100%);
    --gradient-hero: linear-gradient(135deg, rgba(236, 112, 20, 0.1) 0%, rgba(241, 179, 194, 0.1) 50%, rgba(224, 244, 49, 0.1) 100%);
    
    /* === CORES NEUTRAS === */
    --neutral-50: #FAFAFA;
    --neutral-100: #F5F5F5;
    --neutral-200: #E5E5E5;
    --neutral-300: #D4D4D4;
    --neutral-400: #A3A3A3;
    --neutral-500: #737373;
    --neutral-600: #525252;
    --neutral-700: #404040;
    --neutral-800: #262626;
    --neutral-900: #171717;
    
    /* === CORES SEMÂNTICAS === */
    --success-50: #F0FDF4;
    --success-500: #22C55E;
    --success-600: #16A34A;
    --success-700: #15803D;
    
    --warning-50: #FFFBEB;
    --warning-500: #F59E0B;
    --warning-600: #D97706;
    --warning-700: #B45309;
    
    --error-50: #FEF2F2;
    --error-500: #EF4444;
    --error-600: #DC2626;
    --error-700: #B91C1C;
    
    --info-50: #EFF6FF;
    --info-500: #3B82F6;
    --info-600: #2563EB;
    --info-700: #1D4ED8;
    
    /* === BACKGROUNDS === */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F8F3EB;
    --bg-tertiary: #F3EEE6;
    --bg-card: #FFFFFF;
    --bg-elevated: #FFFFFF;
    --bg-hover: rgba(236, 112, 20, 0.05);
    --bg-active: rgba(236, 112, 20, 0.1);
    --bg-disabled: rgba(0, 0, 0, 0.03);
    
    /* Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.3);
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    
    /* === TEXT COLORS === */
    --text-primary: #141414;
    --text-secondary: #525252;
    --text-tertiary: #737373;
    --text-disabled: #A3A3A3;
    --text-inverse: #FFFFFF;
    --text-on-brand: #141414;
    
    /* === BORDAS === */
    --border-color: #E5E5E5;
    --border-color-subtle: #F5F5F5;
    --border-color-strong: #D4D4D4;
    
    /* === SOMBRAS === */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    
    /* Shadow Colors */
    --shadow-primary: 0 10px 30px -5px rgba(236, 112, 20, 0.3);
    --shadow-secondary: 0 10px 30px -5px rgba(241, 179, 194, 0.3);
    --shadow-accent: 0 10px 30px -5px rgba(224, 244, 49, 0.3);
    
    /* === BORDER RADIUS === */
    --radius-none: 0;
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;
    
    /* === SPACING === */
    --space-0: 0;
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    --space-20: 5rem;     /* 80px */
    --space-24: 6rem;     /* 96px */
    
    /* === TYPOGRAPHY === */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'Fira Code', 'Courier New', monospace;
    --font-display: 'Anton', 'Inter', sans-serif;
    
    /* Font Sizes */
    --text-xs: 0.75rem;      /* 12px */
    --text-sm: 0.875rem;     /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-lg: 1.125rem;     /* 18px */
    --text-xl: 1.25rem;      /* 20px */
    --text-2xl: 1.5rem;      /* 24px */
    --text-3xl: 1.875rem;    /* 30px */
    --text-4xl: 2.25rem;     /* 36px */
    --text-5xl: 3rem;        /* 48px */
    --text-6xl: 3.75rem;     /* 60px */
    --text-7xl: 4.5rem;      /* 72px */
    
    /* Line Heights */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;
    
    /* Font Weights */
    --font-thin: 100;
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --font-black: 900;
    
    /* === Z-INDEX === */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    
    /* === TRANSITIONS === */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Easing Functions */
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* === BLUR === */
    --blur-sm: 4px;
    --blur-md: 8px;
    --blur-lg: 16px;
    --blur-xl: 24px;
    --blur-2xl: 40px;
    
    /* === BREAKPOINTS === */
    --screen-sm: 640px;
    --screen-md: 768px;
    --screen-lg: 1024px;
    --screen-xl: 1280px;
    --screen-2xl: 1536px;
}

/* === DARK MODE === */
[data-theme="dark"] {
    /* Backgrounds */
    --bg-primary: #141414;
    --bg-secondary: #1A1A1A;
    --bg-tertiary: #262626;
    --bg-card: #1F1F1F;
    --bg-elevated: #262626;
    --bg-hover: rgba(236, 112, 20, 0.1);
    --bg-active: rgba(236, 112, 20, 0.15);
    --bg-disabled: rgba(255, 255, 255, 0.05);
    
    /* Glass */
    --glass-bg: rgba(31, 31, 31, 0.7);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    
    /* Text */
    --text-primary: #F5F5F5;
    --text-secondary: #D4D4D4;
    --text-tertiary: #A3A3A3;
    --text-disabled: #737373;
    --text-inverse: #141414;
    
    /* Borders */
    --border-color: #404040;
    --border-color-subtle: #262626;
    --border-color-strong: #525252;
}

/* === ANIMAÇÕES === */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

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

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

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

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(236, 112, 20, 0.3);
    }
    50% {
        box-shadow: 0 0 30px rgba(236, 112, 20, 0.6);
    }
}

/* === UTILITY CLASSES === */

/* Animations */
.animate-fade-in {
    animation: fadeIn var(--transition-base) var(--ease-out);
}

.animate-slide-in-right {
    animation: slideInRight var(--transition-base) var(--ease-out);
}

.animate-slide-in-left {
    animation: slideInLeft var(--transition-base) var(--ease-out);
}

.animate-slide-in-up {
    animation: slideInUp var(--transition-base) var(--ease-out);
}

.animate-scale-in {
    animation: scaleIn var(--transition-base) var(--ease-out);
}

.animate-pulse {
    animation: pulse 2s var(--ease-in-out) infinite;
}

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

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

/* Glass Effect */
.glass {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--blur-lg));
    backdrop-filter: blur(var(--blur-lg));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

/* Gradients */
.gradient-primary {
    background: var(--gradient-primary);
}

.gradient-secondary {
    background: var(--gradient-secondary);
}

.gradient-accent {
    background: var(--gradient-accent);
}

.gradient-premium {
    background: var(--gradient-premium);
}

.gradient-text {
    background: var(--gradient-premium);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Shadows */
.shadow-primary {
    box-shadow: var(--shadow-primary);
}

.shadow-secondary {
    box-shadow: var(--shadow-secondary);
}

.shadow-accent {
    box-shadow: var(--shadow-accent);
}

/* Hover Effects */
.hover-lift {
    transition: transform var(--transition-base) var(--ease-out),
                box-shadow var(--transition-base) var(--ease-out);
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.hover-glow {
    transition: box-shadow var(--transition-base) var(--ease-out);
}

.hover-glow:hover {
    animation: glow 2s ease-in-out infinite;
}

.hover-scale {
    transition: transform var(--transition-base) var(--ease-bounce);
}

.hover-scale:hover {
    transform: scale(1.05);
}

/* Typography */
.display-heading {
    font-family: var(--font-display);
    font-weight: var(--font-black);
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
}

.text-gradient {
    background: var(--gradient-premium);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Skeleton Loading */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--neutral-200) 0%,
        var(--neutral-100) 50%,
        var(--neutral-200) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-md);
}

[data-theme="dark"] .skeleton {
    background: linear-gradient(
        90deg,
        var(--neutral-800) 0%,
        var(--neutral-700) 50%,
        var(--neutral-800) 100%
    );
}