:root {
    /* 🧱 BACKGROUNDS (Healthy Cream tones over pure white) */
    --bg-main: #e7e0cf;           /* Soft Cream - Essential for reducing eye strain */
    --bg-section: #FFFFFF; 
    --grand-green: #9ACD32;       /* Pure white only for content cards */
    
    /* 🌿 BRAND (Islamic Elegance) */
    --primary-brand: #9ACD32;       /* Rich Forest Green */
    --primary-light: #E8F5E9;     /* Soft Mint tint */
    --accent-gold: #D6B56D;        /* Dignified Gold */

    /* ✍️ TEXT (High contrast but not "Pure Black") */
    --text-main: #2B2B2B;         /* Soft Charcoal */
    --text-soft: #5F6368;         /* Gray for metadata */

    /* 🎒 GLASSMORPHISM (Child UI) */
    --glass-bg: rgba(255, 255, 255, 0.5);
    --glass-border: rgba(255, 255, 255, 0.3);
    --glass-blur: blur(12px);
    --glass-shadow: 0 2px 10px rgba(0, 0, 0, 0.200);
    /* Responsive sizing for Headings */
    --fs-h1: clamp(1.5rem, 2vw + 1rem, 1.5rem);
    /* Responsive sizing for Body Text */
    --fs-article: clamp(1rem, 1vw + 1rem, 1.2rem);
}
:root.dark-mode {
    /* 🌌 BACKGROUNDS (Avoiding pure black to reduce "ghosting" text) */
    --bg-main: #0B2124;           /* Deep Midnight Teal */
    --bg-section: #14353A;        /* Slightly lighter teal for cards */

    /* 🌿 BRAND (Muted for dark mode) */
    --primary-brand: #17452b;   /* Pastel Sage Green */
    --primary-light: #1A3E26;     /* Dark moss background */
    --accent-gold: #C9A24D; /* Antique Gold */

    /* ✍️ TEXT (Off-white to prevent "eye-vibration") */
    --text-main: #E0F2F1;         /* Very soft Mint-White */
    --text-soft: #94A9A7;         /* Muted Slate */

    /* 🎒 GLASSMORPHISM (Dark Variant) */
    --glass-bg: rgba(20, 53, 58, 0.6);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-blur: blur(15px);
    --glass-shadow: 0 2px 12px rgba(0, 0, 0, 0.200);
    /* 0 2px 10px rgba(0, 0, 0, 0.200) */
}