/* 
   Themes Definition for Noor Al-Hidayah
   Includes global light/dark mode and 5 premium hand-crafted accent themes.
*/

:root {
    /* Foundation Variables */
    --font-primary: 'Cairo', 'Tajawal', sans-serif;
    --font-quran: 'Amiri', serif; 
    --transition-speed: 0.35s;
    --border-radius: 24px;
    --border-radius-sm: 16px;
    --card-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.05);

    /* Default Light Mode Colors (Applied Globally) */
    --bg-primary: #FDFCF7; /* Warm Ivory/Beige base */
    --bg-secondary: #FFFFFF;
    --text-primary: #1b281f; /* Charcoal-olive tint */
    --text-secondary: #55685a; /* Soft muted olive */
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(45, 94, 53, 0.08);

    /* Fallback Accents if no theme selected */
    --accent-color: #2d5e35; /* Olive Zayti Green */
    --accent-glow: rgba(45, 94, 53, 0.15);
    --gold-color: #b8860b;
}

/* Global Dark Mode Overrides */
body.dark-mode {
    --bg-primary: #141d16; /* Deep Olive Forest dark base */
    --bg-secondary: #1c281e;
    --text-primary: #e8f5e9;
    --text-secondary: #a5d6a7;
    --glass-bg: rgba(28, 40, 30, 0.75);
    --glass-border: rgba(255, 255, 255, 0.06);
    
    /* Fallback Accents Dark */
    --accent-color: #81c784;
    --accent-glow: rgba(129, 199, 132, 0.3);
    --gold-color: #e5c158;
}

/* Theme 1: Emerald (Zayti Olive & Warm Ivory) */
body.theme-emerald {
    --accent-color: #2d5e35;
    --accent-glow: rgba(45, 94, 53, 0.15);
    --gold-color: #b8860b;
}
body.theme-emerald.dark-mode {
    --accent-color: #81c784;
    --accent-glow: rgba(129, 199, 132, 0.3);
    --gold-color: #e5c158;
}

/* Theme 2: Ocean (Deep Navy & Muted Gold) */
body.theme-ocean {
    --bg-primary: #f4f7f9;
    --bg-secondary: #ffffff;
    --text-primary: #0c1b33;
    --text-secondary: #475569;
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(27, 54, 93, 0.08);
    --accent-color: #1b365d;
    --accent-glow: rgba(27, 54, 93, 0.15);
    --gold-color: #c5a059;
}
body.theme-ocean.dark-mode {
    --bg-primary: #0b0f19;
    --bg-secondary: #121824;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --glass-bg: rgba(18, 24, 36, 0.75);
    --glass-border: rgba(255, 255, 255, 0.05);
    --accent-color: #e2c275;
    --accent-glow: rgba(226, 194, 117, 0.2);
    --gold-color: #e2c275;
}

/* Theme 3: Amethyst (Vintage Plum & Champagne) */
body.theme-amethyst {
    --bg-primary: #fbf6fb;
    --bg-secondary: #ffffff;
    --text-primary: #281429;
    --text-secondary: #6b586c;
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(93, 45, 94, 0.08);
    --accent-color: #5d2d5e;
    --accent-glow: rgba(93, 45, 94, 0.15);
    --gold-color: #cca443;
}
body.theme-amethyst.dark-mode {
    --bg-primary: #1b111c;
    --bg-secondary: #241726;
    --text-primary: #f8ebf9;
    --text-secondary: #c0a9c1;
    --glass-bg: rgba(36, 23, 38, 0.75);
    --glass-border: rgba(255, 255, 255, 0.05);
    --accent-color: #d8a4d9;
    --accent-glow: rgba(216, 164, 217, 0.3);
    --gold-color: #e8c674;
}

/* Theme 4: Rose (Terracotta Rose & Desert Sand) */
body.theme-rose {
    --bg-primary: #fbf8f5;
    --bg-secondary: #ffffff;
    --text-primary: #3e231b;
    --text-secondary: #786058;
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(157, 75, 56, 0.08);
    --accent-color: #9d4b38;
    --accent-glow: rgba(157, 75, 56, 0.15);
    --gold-color: #cf9a4a;
}
body.theme-rose.dark-mode {
    --bg-primary: #211411;
    --bg-secondary: #2a1b17;
    --text-primary: #fceee9;
    --text-secondary: #ceb7b0;
    --glass-bg: rgba(42, 27, 23, 0.75);
    --glass-border: rgba(255, 255, 255, 0.05);
    --accent-color: #e89f8b;
    --accent-glow: rgba(232, 159, 139, 0.3);
    --gold-color: #e8b074;
}

/* Theme 5: Golden (Antique Bronze & Muted Gold) */
body.theme-golden {
    --bg-primary: #faf8f4;
    --bg-secondary: #ffffff;
    --text-primary: #322714;
    --text-secondary: #706248;
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(142, 111, 59, 0.08);
    --accent-color: #8e6f3b;
    --accent-glow: rgba(142, 111, 59, 0.15);
    --gold-color: #bfa054;
}
body.theme-golden.dark-mode {
    --bg-primary: #1b1811;
    --bg-secondary: #242017;
    --text-primary: #fbf7eb;
    --text-secondary: #cabfa7;
    --glass-bg: rgba(36, 32, 23, 0.75);
    --glass-border: rgba(255, 255, 255, 0.05);
    --accent-color: #f2d184;
    --accent-glow: rgba(242, 209, 132, 0.3);
    --gold-color: #f2d184;
}