/* ===== DEZIPP - BEAUTIFUL BLUE COLOR SYSTEM ===== */
/* Light Sky Blue Inspired Color Palette & Design Tokens */

:root {
    /* ===== BEAUTIFUL BLUE PRIMARY PALETTE ===== */
    --primary-darkest: #962FBF;    /* Deep Purple - Headers, Strong Text, Outlines */
    --primary-dark: #D6249F;       /* Magenta Pink - Primary Dark */
    --primary-medium: #F58529;     /* Sunset Orange - Primary Fill, Medium Emphasis */
    --primary-light: #FEDA77;      /* Golden Yellow - Primary Brand Color */
    --primary-lightest: #FEDA77;   /* Light Golden - Main Background, Subtle */
    --accent-white: #FFFFFF;       /* Pure White - Cards, Content, Contrast */
    
    /* ===== SEMANTIC COLORS ===== */
    --success: #4CAF50;            /* Green for success states */
    --warning: #FF9800;            /* Orange for warnings */
    --error: #F44336;              /* Red for errors */
    --info: #2196F3;               /* Blue for information */
    
    /* ===== TEXT HIERARCHY ===== */
    --text-primary: #962FBF;       /* Deep Purple - headers, important content */
    --text-secondary: #D6249F;     /* Magenta Pink - body, descriptions */
    --text-tertiary: #F58529;      /* Sunset Orange - meta, subtle info */
    --text-inverse: #FFFFFF;       /* White text for dark backgrounds */
    
    /* ===== SPACING SYSTEM ===== */
    --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-7: 1.75rem;    /* 28px */
    --space-8: 2rem;       /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */
    --space-20: 5rem;      /* 80px */
    
    /* ===== BORDER RADIUS ===== */
    --radius-sm: 0.5rem;   /* 8px */
    --radius-md: 0.75rem;  /* 12px */
    --radius-lg: 1rem;     /* 16px */
    --radius-xl: 1.5rem;   /* 24px */
    --radius-2xl: 2rem;    /* 32px */
    --radius-full: 50%;    /* Circular */
    
    /* ===== TYPOGRAPHY ===== */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    --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 */
    
    /* ===== TRANSITIONS ===== */
    --transition-fast: 150ms;
    --transition-base: 200ms;
    --transition-slow: 300ms;
    --transition-ease: cubic-bezier(0.4, 0, 0.2, 1);
    
    /* ===== SHADOWS ===== */
    --shadow-sm: 0 1px 2px rgba(21, 101, 192, 0.05);
    --shadow-base: 0 4px 6px rgba(100, 181, 246, 0.1);
    --shadow-md: 0 4px 15px rgba(100, 181, 246, 0.15);
    --shadow-lg: 0 10px 25px rgba(25, 118, 210, 0.2);
    --shadow-xl: 0 20px 40px rgba(21, 101, 192, 0.15);
    
    /* ===== UNIVERSAL MOOD COLORS - 17 EMOTIONS ===== */
    --mood-happy: #FCD34D;          /* Warm Yellow */
    --mood-sad: #60A5FA;            /* Soft Blue */
    --mood-angry: #F87171;          /* Coral Red */
    --mood-love: #FB7185;           /* Pink */
    --mood-surprised: #A78BFA;      /* Purple */
    --mood-neutral: #9CA3AF;        /* Gray */
    --mood-excited: #FBBF24;        /* Bright Yellow */
    --mood-confused: #C084FC;       /* Light Purple */
    --mood-grateful: #34D399;       /* Green */
    --mood-anxious: #FDBA74;        /* Orange */
    --mood-proud: #38BDF8;          /* Sky Blue */
    --mood-disappointed: #A3E635;   /* Lime */
    --mood-curious: #22D3EE;        /* Cyan */
    --mood-relaxed: #6EE7B7;        /* Mint Green */
    --mood-frustrated: #EF4444;     /* Red */
    --mood-hopeful: #A855F7;        /* Violet */
    --mood-overwhelmed: #64748B;    /* Slate */
}

/* ===== BEAUTIFUL GRADIENT BACKGROUNDS ===== */

.bg-gradient-primary {
    background: linear-gradient(135deg, var(--primary-lightest) 0%, var(--primary-medium) 100%);
}

.bg-gradient-blue {
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-dark) 100%);
}

.bg-gradient-ocean {
    background: linear-gradient(135deg, var(--primary-lightest) 0%, var(--primary-light) 50%, var(--primary-medium) 100%);
}

.bg-gradient-serene {
    background: linear-gradient(135deg, var(--accent-white) 0%, var(--primary-lightest) 100%);
}

.bg-gradient-elegant {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-medium) 50%, var(--primary-light) 100%);
}

/* ===== HEADER GRADIENTS ===== */

.header-gradient {
    background: linear-gradient(135deg, var(--primary-medium) 0%, var(--primary-dark) 100%);
}

.sidebar-gradient {
    background: linear-gradient(180deg, var(--primary-light) 0%, var(--primary-medium) 50%, var(--primary-dark) 100%);
}

.card-gradient {
    background: linear-gradient(135deg, var(--accent-white) 0%, rgba(222, 242, 241, 0.3) 100%);
}

/* ===== TEXT COLOR UTILITIES ===== */

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-inverse { color: var(--text-inverse); }
.text-brand { color: var(--primary-medium); }
.text-brand-light { color: var(--primary-light); }
.text-brand-dark { color: var(--primary-dark); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-error { color: var(--error); }
.text-info { color: var(--info); }

/* ===== BACKGROUND COLOR UTILITIES ===== */

.bg-white { background-color: var(--accent-white); }
.bg-light { background-color: var(--primary-lightest); }
.bg-brand { background-color: var(--primary-medium); }
.bg-brand-light { background-color: var(--primary-light); }
.bg-brand-dark { background-color: var(--primary-dark); }
.bg-success { background-color: var(--success); }
.bg-warning { background-color: var(--warning); }
.bg-error { background-color: var(--error); }
.bg-info { background-color: var(--info); }

/* ===== BORDER COLOR UTILITIES ===== */

.border-light { border-color: var(--primary-lightest); }
.border-brand { border-color: var(--primary-light); }
.border-brand-medium { border-color: var(--primary-medium); }
.border-transparent { border-color: transparent; }

/* ===== MOOD COLOR UTILITIES ===== */

.mood-happy { 
    background-color: var(--mood-happy); 
    color: var(--text-primary);
}
.mood-sad { 
    background-color: var(--mood-sad); 
    color: var(--text-inverse);
}
.mood-angry { 
    background-color: var(--mood-angry); 
    color: var(--text-inverse);
}
.mood-love { 
    background-color: var(--mood-love); 
    color: var(--text-inverse);
}
.mood-surprised { 
    background-color: var(--mood-surprised); 
    color: var(--text-inverse);
}
.mood-neutral { 
    background-color: var(--mood-neutral); 
    color: var(--text-inverse);
}
.mood-excited { 
    background-color: var(--mood-excited); 
    color: var(--text-primary);
}
.mood-confused { 
    background-color: var(--mood-confused); 
    color: var(--text-inverse);
}
.mood-grateful { 
    background-color: var(--mood-grateful); 
    color: var(--text-inverse);
}
.mood-anxious { 
    background-color: var(--mood-anxious); 
    color: var(--text-primary);
}
.mood-proud { 
    background-color: var(--mood-proud); 
    color: var(--text-inverse);
}
.mood-disappointed { 
    background-color: var(--mood-disappointed); 
    color: var(--text-primary);
}
.mood-curious { 
    background-color: var(--mood-curious); 
    color: var(--text-primary);
}
.mood-relaxed { 
    background-color: var(--mood-relaxed); 
    color: var(--text-primary);
}
.mood-frustrated { 
    background-color: var(--mood-frustrated); 
    color: var(--text-inverse);
}
.mood-hopeful { 
    background-color: var(--mood-hopeful); 
    color: var(--text-inverse);
}
.mood-overwhelmed { 
    background-color: var(--mood-overwhelmed); 
    color: var(--text-inverse);
}

/* ===== INTERACTIVE STATES ===== */

.hover\:bg-light:hover { 
    background-color: var(--primary-lightest); 
}
.hover\:bg-brand:hover { 
    background-color: var(--primary-light); 
}
.hover\:text-brand:hover { 
    color: var(--primary-medium); 
}
.hover\:border-brand:hover { 
    border-color: var(--primary-light); 
}
.hover\:shadow-md:hover { 
    box-shadow: var(--shadow-md); 
}

/* ===== FOCUS STATES ===== */

.focus\:ring-brand:focus { 
    box-shadow: 0 0 0 3px rgba(58, 175, 169, 0.1); 
}
.focus\:border-brand:focus { 
    border-color: var(--primary-light); 
}
.focus\:outline-none:focus { 
    outline: none; 
}

/* ===== COMPONENT SPECIFIC STYLES ===== */

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

/* ===== ELEGANT ANIMATIONS ===== */

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

.animate-slide-up {
    animation: slideUp var(--transition-slow) var(--transition-ease);
}

.animate-bounce-subtle {
    animation: bounceSubtle var(--transition-base) var(--transition-ease);
}

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

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

@keyframes bounceSubtle {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}