/* =====================
   THEME SYSTEM - CSS VARIABLES
   ===================== */

/* Base Theme - Sky Garden (Default) */
:root {
    --theme-name: "Sky Garden";
    --bg-primary: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    --bg-secondary: rgba(255, 255, 255, 0.75);
    --bg-card: white;
    --bg-glass: rgba(255, 255, 255, 0.75);
    --bg-glass-border: rgba(255, 255, 255, 0.4);
    --shadow-soft: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    --text-primary: #2D3436;
    --text-secondary: #636E72;
    --text-light: #ffffff;
    --primary: #6C5CE7;
    --primary-light: #A29BFE;
    --primary-dark: #5849C4;
    --accent: #FD79A8;
    --accent-light: #FFA6C9;
    --success: #00B894;
    --warning: #FDCB6E;
    --danger: #FF7675;
    --gold: #FFD700;
    --gold-dark: #B8860B;
    --silver: #C0C0C0;
    --bronze: #CD7F32;
    --xp-color: linear-gradient(90deg, #6C5CE7, #A29BFE);
    --level-bg: linear-gradient(135deg, #FFD700, #FFA500);
    --tile-default: linear-gradient(135deg, #6C5CE7, #A29BFE);
    --overlay-bg: rgba(0, 0, 0, 0.6);
    --particle-color: #FFD700;
    --btn-start-bg: linear-gradient(135deg, #00c853, #00e676);
    --btn-load-bg: linear-gradient(135deg, #ff9800, #ffc107);
    --transition-speed: 0.3s;
}

/* Theme: Desert Oasis */
body.theme-desert {
    --theme-name: "Desert Oasis";
    --bg-primary: linear-gradient(-45deg, #D35400, #E67E22, #F39C12, #F5CBA7);
    --bg-secondary: rgba(253, 245, 230, 0.85);
    --bg-card: #FDF5E6;
    --bg-glass: rgba(253, 245, 230, 0.85);
    --bg-glass-border: rgba(222, 184, 135, 0.4);
    --shadow-soft: 0 8px 32px 0 rgba(139, 69, 19, 0.2);
    --text-primary: #5D4037;
    --text-secondary: #795548;
    --primary: #D35400;
    --primary-light: #E67E22;
    --primary-dark: #A04000;
    --accent: #F39C12;
    --accent-light: #F5CBA7;
    --success: #27AE60;
    --warning: #F39C12;
    --danger: #C0392B;
    --gold: #F39C12;
    --gold-dark: #D68910;
    --xp-color: linear-gradient(90deg, #D35400, #E67E22);
    --level-bg: linear-gradient(135deg, #F39C12, #E67E22);
    --tile-default: linear-gradient(135deg, #D35400, #E67E22);
    --particle-color: #F39C12;
    --btn-start-bg: linear-gradient(135deg, #27AE60, #2ECC71);
    --btn-load-bg: linear-gradient(135deg, #D35400, #E67E22);
}

/* Theme: Cosmic Universe */
body.theme-cosmic {
    --theme-name: "Cosmic Universe";
    --bg-primary: linear-gradient(-45deg, #0f0c29, #302b63, #24243e, #1a1a2e);
    --bg-secondary: rgba(22, 33, 62, 0.85);
    --bg-card: #16213E;
    --bg-glass: rgba(22, 33, 62, 0.85);
    --bg-glass-border: rgba(233, 69, 96, 0.3);
    --shadow-soft: 0 8px 32px 0 rgba(233, 69, 96, 0.25);
    --text-primary: #E94560;
    --text-secondary: #A0AEC0;
    --text-light: #ffffff;
    --primary: #E94560;
    --primary-light: #FF6B8A;
    --primary-dark: #C73E54;
    --accent: #0FB9B1;
    --accent-light: #3EC1CD;
    --success: #00D2D3;
    --warning: #FECA57;
    --danger: #FF6B6B;
    --gold: #FECA57;
    --gold-dark: #F39C12;
    --silver: #A0AEC0;
    --bronze: #CD7F32;
    --xp-color: linear-gradient(90deg, #E94560, #FF6B8A);
    --level-bg: linear-gradient(135deg, #E94560, #FF6B8A);
    --tile-default: linear-gradient(135deg, #E94560, #FF6B8A);
    --overlay-bg: rgba(0, 0, 0, 0.8);
    --particle-color: #E94560;
    --btn-start-bg: linear-gradient(135deg, #00D2D3, #54a0ff);
    --btn-load-bg: linear-gradient(135deg, #5f27cd, #341f97);
}

/* Theme: Ocean Deep */
body.theme-ocean {
    --theme-name: "Ocean Deep";
    --bg-primary: linear-gradient(-45deg, #001F3F, #0074D9, #39CCCC, #3D9970);
    --bg-secondary: rgba(0, 31, 63, 0.85);
    --bg-card: #001F3F;
    --bg-glass: rgba(0, 31, 63, 0.85);
    --bg-glass-border: rgba(127, 219, 255, 0.3);
    --shadow-soft: 0 8px 32px 0 rgba(0, 49, 79, 0.35);
    --text-primary: #7FDBFF;
    --text-secondary: #A0C4FF;
    --text-light: #ffffff;
    --primary: #0074D9;
    --primary-light: #39CCCC;
    --primary-dark: #0056A4;
    --accent: #7FDBFF;
    --accent-light: #A0C4FF;
    --success: #2ECC71;
    --warning: #FFDC00;
    --danger: #FF4136;
    --gold: #FFDC00;
    --gold-dark: #C9A227;
    --silver: #AAAAAA;
    --bronze: #CD7F32;
    --xp-color: linear-gradient(90deg, #0074D9, #39CCCC);
    --level-bg: linear-gradient(135deg, #7FDBFF, #39CCCC);
    --tile-default: linear-gradient(135deg, #0074D9, #39CCCC);
    --overlay-bg: rgba(0, 31, 63, 0.9);
    --particle-color: #7FDBFF;
    --btn-start-bg: linear-gradient(135deg, #2ECC71, #00FF7F);
    --btn-load-bg: linear-gradient(135deg, #0074D9, #39CCCC);
}

/* Theme: Royal Palace */
body.theme-royal {
    --theme-name: "Royal Palace";
    --bg-primary: linear-gradient(-45deg, #311B92, #4527A0, #673AB7, #7E57C2);
    --bg-secondary: rgba(48, 20, 90, 0.9);
    --bg-card: #4527A0;
    --bg-glass: rgba(69, 39, 160, 0.85);
    --bg-glass-border: rgba(255, 215, 0, 0.4);
    --shadow-soft: 0 8px 32px 0 rgba(48, 20, 90, 0.4);
    --text-primary: #FFD700;
    --text-secondary: #E0B0FF;
    --text-light: #ffffff;
    --primary: #7E57C2;
    --primary-light: #B39DDB;
    --primary-dark: #512DA8;
    --accent: #FFD700;
    --accent-light: #FFE082;
    --success: #4CAF50;
    --warning: #FFC107;
    --danger: #E91E63;
    --gold: #FFD700;
    --gold-dark: #B8860B;
    --silver: #E0E0E0;
    --bronze: #CD7F32;
    --xp-color: linear-gradient(90deg, #7E57C2, #B39DDB);
    --level-bg: linear-gradient(135deg, #FFD700, #FFB300);
    --tile-default: linear-gradient(135deg, #7E57C2, #B39DDB);
    --overlay-bg: rgba(26, 10, 52, 0.9);
    --particle-color: #FFD700;
    --btn-start-bg: linear-gradient(135deg, #FFD700, #FFC107);
    --btn-load-bg: linear-gradient(135deg, #7E57C2, #B39DDB);
}

/* Category Colors */
.cat-Sirah { color: #FF6B8B; }
.cat-Quran { color: #FF9E6D; }
.cat-Tarikh { color: #FDCB6E; }
.cat-Asbab { color: #00B894; }
.cat-Kitab { color: #0984E3; }
.cat-Kisah { color: #6C5CE7; }
.cat-All { color: #667eea; }
.cat-Science { color: #00b894; }
.cat-History { color: #fdcb6e; }
.cat-Geography { color: #0984e3; }
.cat-Sports { color: #e17055; }
.cat-Art { color: #6c5ce7; }
.cat-Music { color: #e84393; }
.cat-Math { color: #00cec9; }
.cat-Language { color: #f39c12; }
.cat-General { color: #2d3436; }
.cat-Technology { color: #0984e3; }
.cat-Biology { color: #27ae60; }
.cat-Chemistry { color: #9b59b6; }
.cat-Physics { color: #34495e; }
.cat-Economics { color: #16a085; }
.cat-Political { color: #c0392b; }
.cat-Literature { color: #8e44ad; }
.cat-Religion { color: #d35400; }
.cat-Culture { color: #1abc9c; }
.cat-Entertainment { color: #e74c3c; }