/**
 * MY-TASTE - Theme Stylesheet
 * 
 * Alle beschikbare thema's met hun kleurenschema's
 */

/* =====================================================
   LIGHT THEME (Default)
   ===================================================== */
[data-theme="light"], :root {
    /* Primary Colors */
    --primary: #FF6B35;
    --primary-hover: #E55A2B;
    --primary-light: #FFF0EB;
    --secondary: #2D3436;
    --accent: #F7C59F;
    
    /* Background Colors */
    --bg-primary: #FFFBF7;
    --bg-secondary: #FFF5EB;
    --bg-card: #FFFFFF;
    --bg-hover: #FFF0E6;
    
    /* Text Colors */
    --text-primary: #2D3436;
    --text-secondary: #636E72;
    --text-muted: #A89783;
    --text-light: #FFFFFF;
    
    /* UI Colors */
    --border: #E8D9C8;
    --border-light: #F5EDE3;
    --shadow: rgba(45, 52, 54, 0.08);
    --shadow-lg: rgba(45, 52, 54, 0.15);
    
    /* Status Colors */
    --success: #00B894;
    --warning: #FDCB6E;
    --danger: #E17055;
    --info: #74B9FF;
    
    /* Gradient */
    --gradient: linear-gradient(135deg, #FF6B35, #F7C59F);
}

/* =====================================================
   DARK THEME
   ===================================================== */
[data-theme="dark"] {
    --primary: #FF7B4A;
    --primary-hover: #FF9166;
    --primary-light: #3D2A24;
    --secondary: #E8E8E8;
    --accent: #FFB088;
    
    --bg-primary: #1A1A2E;
    --bg-secondary: #16213E;
    --bg-card: #202040;
    --bg-hover: #2A2A4E;
    
    --text-primary: #EAEAEA;
    --text-secondary: #B0B0B0;
    --text-muted: #7A7A8A;
    --text-light: #FFFFFF;
    
    --border: #3A3A5E;
    --border-light: #2A2A4E;
    --shadow: rgba(0, 0, 0, 0.3);
    --shadow-lg: rgba(0, 0, 0, 0.5);
    
    --success: #00D9A5;
    --warning: #FFD93D;
    --danger: #FF6B6B;
    --info: #6BBAFF;
    
    --gradient: linear-gradient(135deg, #FF7B4A, #FFB088);
}

/* =====================================================
   WARM KITCHEN THEME
   ===================================================== */
[data-theme="warm-kitchen"] {
    --primary: #C1440E;
    --primary-hover: #A33A0C;
    --primary-light: #FDF2EB;
    --secondary: #4A3728;
    --accent: #E8985E;
    
    --bg-primary: #FAF3E3;
    --bg-secondary: #F5E6D0;
    --bg-card: #FFFDF8;
    --bg-hover: #F0E4CE;
    
    --text-primary: #3E2723;
    --text-secondary: #5D4037;
    --text-muted: #8D6E63;
    --text-light: #FFFFFF;
    
    --border: #D7C4A7;
    --border-light: #E8DCC8;
    --shadow: rgba(62, 39, 35, 0.1);
    --shadow-lg: rgba(62, 39, 35, 0.2);
    
    --success: #689F38;
    --warning: #FFA726;
    --danger: #D84315;
    --info: #42A5F5;
    
    --gradient: linear-gradient(135deg, #C1440E, #E8985E);
}

/* =====================================================
   OLIVE GREEN THEME
   ===================================================== */
[data-theme="olive"] {
    --primary: #6B7B3C;
    --primary-hover: #5A6932;
    --primary-light: #F5F7ED;
    --secondary: #3D4A2D;
    --accent: #A4B06B;
    
    --bg-primary: #FAFBF5;
    --bg-secondary: #F0F3E3;
    --bg-card: #FFFFFF;
    --bg-hover: #E8EDD8;
    
    --text-primary: #2C3318;
    --text-secondary: #4A5532;
    --text-muted: #7A8660;
    --text-light: #FFFFFF;
    
    --border: #D4DDB8;
    --border-light: #E4EAD0;
    --shadow: rgba(44, 51, 24, 0.08);
    --shadow-lg: rgba(44, 51, 24, 0.15);
    
    --success: #558B2F;
    --warning: #F9A825;
    --danger: #C62828;
    --info: #0288D1;
    
    --gradient: linear-gradient(135deg, #6B7B3C, #A4B06B);
}

/* =====================================================
   OCEAN BLUE THEME
   ===================================================== */
[data-theme="ocean"] {
    --primary: #0077B6;
    --primary-hover: #006499;
    --primary-light: #E8F4F8;
    --secondary: #023E8A;
    --accent: #48CAE4;
    
    --bg-primary: #F5FBFF;
    --bg-secondary: #E6F4FA;
    --bg-card: #FFFFFF;
    --bg-hover: #D6EEF8;
    
    --text-primary: #03045E;
    --text-secondary: #1A5276;
    --text-muted: #5D8AA8;
    --text-light: #FFFFFF;
    
    --border: #B8D8E8;
    --border-light: #D0E8F4;
    --shadow: rgba(3, 4, 94, 0.08);
    --shadow-lg: rgba(3, 4, 94, 0.15);
    
    --success: #20C997;
    --warning: #FFB703;
    --danger: #E63946;
    --info: #00B4D8;
    
    --gradient: linear-gradient(135deg, #0077B6, #48CAE4);
}

/* =====================================================
   BERRY PURPLE THEME
   ===================================================== */
[data-theme="berry"] {
    --primary: #7B2D8E;
    --primary-hover: #672579;
    --primary-light: #F8F0FA;
    --secondary: #4A1259;
    --accent: #C77DFF;
    
    --bg-primary: #FBF7FC;
    --bg-secondary: #F3E8F5;
    --bg-card: #FFFFFF;
    --bg-hover: #EBD8F0;
    
    --text-primary: #2E0A3D;
    --text-secondary: #5A2568;
    --text-muted: #8B5A9C;
    --text-light: #FFFFFF;
    
    --border: #D8B8E8;
    --border-light: #E8D0F0;
    --shadow: rgba(46, 10, 61, 0.08);
    --shadow-lg: rgba(46, 10, 61, 0.15);
    
    --success: #38B000;
    --warning: #FFB627;
    --danger: #D90429;
    --info: #4CC9F0;
    
    --gradient: linear-gradient(135deg, #7B2D8E, #C77DFF);
}

/* =====================================================
   SUNSET THEME
   ===================================================== */
[data-theme="sunset"] {
    --primary: #E85D04;
    --primary-hover: #D45003;
    --primary-light: #FFF3EB;
    --secondary: #9D0208;
    --accent: #FFBA08;
    
    --bg-primary: #FFFAF5;
    --bg-secondary: #FFF0E5;
    --bg-card: #FFFFFF;
    --bg-hover: #FFE6D5;
    
    --text-primary: #370617;
    --text-secondary: #6A040F;
    --text-muted: #9D4A30;
    --text-light: #FFFFFF;
    
    --border: #F5C8A8;
    --border-light: #FAD8C0;
    --shadow: rgba(55, 6, 23, 0.08);
    --shadow-lg: rgba(55, 6, 23, 0.15);
    
    --success: #52B788;
    --warning: #F4A261;
    --danger: #DC2F02;
    --info: #00A8E8;
    
    --gradient: linear-gradient(135deg, #E85D04, #FFBA08);
}

/* =====================================================
   FOREST THEME
   ===================================================== */
[data-theme="forest"] {
    --primary: #2D6A4F;
    --primary-hover: #245840;
    --primary-light: #EBF5F0;
    --secondary: #1B4332;
    --accent: #74C69D;
    
    --bg-primary: #F6FBF9;
    --bg-secondary: #E8F5EE;
    --bg-card: #FFFFFF;
    --bg-hover: #D8EFE3;
    
    --text-primary: #081C15;
    --text-secondary: #1B4332;
    --text-muted: #52796F;
    --text-light: #FFFFFF;
    
    --border: #B7D4C5;
    --border-light: #D0E8DA;
    --shadow: rgba(8, 28, 21, 0.08);
    --shadow-lg: rgba(8, 28, 21, 0.15);
    
    --success: #40916C;
    --warning: #E9C46A;
    --danger: #BC4749;
    --info: #4895EF;
    
    --gradient: linear-gradient(135deg, #2D6A4F, #74C69D);
}

/* =====================================================
   MIDNIGHT THEME
   ===================================================== */
[data-theme="midnight"] {
    --primary: #5E60CE;
    --primary-hover: #4E50B8;
    --primary-light: #2A2B5A;
    --secondary: #9D4EDD;
    --accent: #7B2CBF;
    
    --bg-primary: #0F0F23;
    --bg-secondary: #1A1A36;
    --bg-card: #232348;
    --bg-hover: #2D2D5A;
    
    --text-primary: #E6E6FA;
    --text-secondary: #B8B8D0;
    --text-muted: #8888A0;
    --text-light: #FFFFFF;
    
    --border: #3D3D6E;
    --border-light: #4A4A80;
    --shadow: rgba(0, 0, 0, 0.4);
    --shadow-lg: rgba(0, 0, 0, 0.6);
    
    --success: #06D6A0;
    --warning: #FFD166;
    --danger: #EF476F;
    --info: #26C6DA;
    
    --gradient: linear-gradient(135deg, #5E60CE, #9D4EDD);
}

/* =====================================================
   CYBERPUNK THEME
   ===================================================== */
[data-theme="cyberpunk"] {
    --primary: #FF00FF;
    --primary-hover: #CC00CC;
    --primary-light: #2A0A2A;
    --secondary: #00FFFF;
    --accent: #FFFF00;
    
    --bg-primary: #0D0D0D;
    --bg-secondary: #1A0A1A;
    --bg-card: #1F0F1F;
    --bg-hover: #2A1A2A;
    
    --text-primary: #FFFFFF;
    --text-secondary: #FF00FF;
    --text-muted: #888888;
    --text-light: #FFFFFF;
    
    --border: #FF00FF40;
    --border-light: #00FFFF40;
    --shadow: rgba(255, 0, 255, 0.2);
    --shadow-lg: rgba(255, 0, 255, 0.4);
    
    --success: #00FF00;
    --warning: #FFFF00;
    --danger: #FF0000;
    --info: #00FFFF;
    
    --gradient: linear-gradient(135deg, #FF00FF, #00FFFF);
}

/* Cyberpunk special effects */
[data-theme="cyberpunk"] .card {
    border: 1px solid var(--primary);
    box-shadow: 0 0 10px var(--shadow);
}

[data-theme="cyberpunk"] .btn-primary {
    box-shadow: 0 0 15px var(--primary);
}

[data-theme="cyberpunk"] .navbar {
    border-bottom: 2px solid var(--primary);
}

/* =====================================================
   PASTEL THEME
   ===================================================== */
[data-theme="pastel"] {
    --primary: #B8A9C9;
    --primary-hover: #A394B8;
    --primary-light: #F5F0FA;
    --secondary: #8DA7BE;
    --accent: #F0C9C9;
    
    --bg-primary: #FEFEFE;
    --bg-secondary: #F8F5FC;
    --bg-card: #FFFFFF;
    --bg-hover: #F0EBF8;
    
    --text-primary: #4A4458;
    --text-secondary: #6B6078;
    --text-muted: #9A90A8;
    --text-light: #FFFFFF;
    
    --border: #E0D8EB;
    --border-light: #EDE8F5;
    --shadow: rgba(74, 68, 88, 0.06);
    --shadow-lg: rgba(74, 68, 88, 0.12);
    
    --success: #A8D5BA;
    --warning: #F5D6A8;
    --danger: #E8A8A8;
    --info: #A8C5E8;
    
    --gradient: linear-gradient(135deg, #B8A9C9, #F0C9C9);
}

/* =====================================================
   MOCHA THEME
   ===================================================== */
[data-theme="mocha"] {
    --primary: #8B5A2B;
    --primary-hover: #754D24;
    --primary-light: #F8F3ED;
    --secondary: #5C4033;
    --accent: #D4A574;
    
    --bg-primary: #FBF8F3;
    --bg-secondary: #F3EBE0;
    --bg-card: #FFFFFF;
    --bg-hover: #EBE0D0;
    
    --text-primary: #3C2415;
    --text-secondary: #5C4033;
    --text-muted: #8B7355;
    --text-light: #FFFFFF;
    
    --border: #D4C4B0;
    --border-light: #E5D9C8;
    --shadow: rgba(60, 36, 21, 0.08);
    --shadow-lg: rgba(60, 36, 21, 0.15);
    
    --success: #7CB342;
    --warning: #FFA000;
    --danger: #C62828;
    --info: #1976D2;
    
    --gradient: linear-gradient(135deg, #8B5A2B, #D4A574);
}

/* =====================================================
   ROSE GOLD THEME
   ===================================================== */
[data-theme="rose-gold"] {
    --primary: #B76E79;
    --primary-hover: #A35D68;
    --primary-light: #FDF5F6;
    --secondary: #8E4A52;
    --accent: #E8B4B8;
    
    --bg-primary: #FFFBFB;
    --bg-secondary: #FFF0F1;
    --bg-card: #FFFFFF;
    --bg-hover: #FFE6E8;
    
    --text-primary: #4A2C32;
    --text-secondary: #6E4248;
    --text-muted: #A87880;
    --text-light: #FFFFFF;
    
    --border: #E8C8CC;
    --border-light: #F0D8DC;
    --shadow: rgba(74, 44, 50, 0.08);
    --shadow-lg: rgba(74, 44, 50, 0.15);
    
    --success: #4CAF50;
    --warning: #FFB74D;
    --danger: #E57373;
    --info: #64B5F6;
    
    --gradient: linear-gradient(135deg, #B76E79, #E8B4B8);
}

/* =====================================================
   THEME PREVIEW COLORS FOR DROPDOWN
   ===================================================== */
.theme-preview-light { background: linear-gradient(135deg, #FFFBF7, #FF6B35); }
.theme-preview-dark { background: linear-gradient(135deg, #1A1A2E, #FF7B4A); }
.theme-preview-warm-kitchen { background: linear-gradient(135deg, #FAF3E3, #C1440E); }
.theme-preview-olive { background: linear-gradient(135deg, #FAFBF5, #6B7B3C); }
.theme-preview-ocean { background: linear-gradient(135deg, #F5FBFF, #0077B6); }
.theme-preview-berry { background: linear-gradient(135deg, #FBF7FC, #7B2D8E); }
.theme-preview-sunset { background: linear-gradient(135deg, #FFFAF5, #E85D04); }
.theme-preview-forest { background: linear-gradient(135deg, #F6FBF9, #2D6A4F); }
.theme-preview-midnight { background: linear-gradient(135deg, #0F0F23, #5E60CE); }
.theme-preview-cyberpunk { background: linear-gradient(135deg, #0D0D0D, #FF00FF); }
.theme-preview-pastel { background: linear-gradient(135deg, #FEFEFE, #B8A9C9); }
.theme-preview-mocha { background: linear-gradient(135deg, #FBF8F3, #8B5A2B); }
.theme-preview-rose-gold { background: linear-gradient(135deg, #FFFBFB, #B76E79); }