/* CSS Variables for Themes */

:root {
    /* Light Theme */
    --bg-color: #ffffff;
    --text-color: #1a1a1a;
    --text-secondary: #666666;
    --primary-color: #3b82f6;
    --primary-hover: #2563eb;
    --navbar-bg: rgba(255, 255, 255, 0.95);
    --card-bg: #ffffff;
    --section-bg: #f8fafc;
    --hero-bg: #f1f5f9;
    --footer-bg: #1e293b;
    --footer-text: #94a3b8;
    --border-color: #e2e8f0;
    --hover-bg: #f1f5f9;
}

/* Dark Theme */
body.theme-dark {
    --bg-color: #0f172a;
    --text-color: #f1f5f9;
    --text-secondary: #94a3b8;
    --primary-color: #60a5fa;
    --primary-hover: #3b82f6;
    --navbar-bg: rgba(15, 23, 42, 0.95);
    --card-bg: #1e293b;
    --section-bg: #1e293b;
    --hero-bg: #0f172a;
    --footer-bg: #020617;
    --footer-text: #64748b;
    --border-color: #334155;
    --hover-bg: #334155;
}

/* Brown Theme */
body.theme-brown {
    --bg-color: #fef3c7;
    --text-color: #78350f;
    --text-secondary: #92400e;
    --primary-color: #b45309;
    --primary-hover: #92400e;
    --navbar-bg: rgba(254, 243, 199, 0.95);
    --card-bg: #fef3c7;
    --section-bg: #fed7aa;
    --hero-bg: #ffedd5;
    --footer-bg: #451a03;
    --footer-text: #d97706;
    --border-color: #f59e0b;
    --hover-bg: #fed7aa;
}

/* Purple Theme */
body.theme-purple {
    --bg-color: #faf5ff;
    --text-color: #2e1065;
    --text-secondary: #581c87;
    --primary-color: #7c3aed;
    --primary-hover: #6d28d9;
    --navbar-bg: rgba(250, 245, 255, 0.95);
    --card-bg: #faf5ff;
    --section-bg: #f3e8ff;
    --hero-bg: #e9d5ff;
    --footer-bg: #2e1065;
    --footer-text: #a78bfa;
    --border-color: #8b5cf6;
    --hover-bg: #f3e8ff;
}

/* Light Brown Theme */
body.theme-light-brown {
    --bg-color: #fef7ed;
    --text-color: #7c2d12;
    --text-secondary: #9a3412;
    --primary-color: #ea580c;
    --primary-hover: #c2410c;
    --navbar-bg: rgba(254, 247, 237, 0.95);
    --card-bg: #fef7ed;
    --section-bg: #fed7aa;
    --hero-bg: #ffedd5;
    --footer-bg: #431407;
    --footer-text: #fb923c;
    --border-color: #f97316;
    --hover-bg: #fed7aa;
}

/* Light Purple Theme */
body.theme-light-purple {
    --bg-color: #faf5ff;
    --text-color: #581c87;
    --text-secondary: #6b21a8;
    --primary-color: #a855f7;
    --primary-hover: #9333ea;
    --navbar-bg: rgba(250, 245, 255, 0.95);
    --card-bg: #faf5ff;
    --section-bg: #f3e8ff;
    --hero-bg: #e9d5ff;
    --footer-bg: #3b0764;
    --footer-text: #c084fc;
    --border-color: #d8b4fe;
    --hover-bg: #f3e8ff;
}

/* Light Red Theme */
body.theme-light-red {
    --bg-color: #fef2f2;
    --text-color: #7f1d1d;
    --text-secondary: #991b1b;
    --primary-color: #ef4444;
    --primary-hover: #dc2626;
    --navbar-bg: rgba(254, 242, 242, 0.95);
    --card-bg: #fef2f2;
    --section-bg: #fee2e2;
    --hero-bg: #fecaca;
    --footer-bg: #450a0a;
    --footer-text: #f87171;
    --border-color: #fca5a5;
    --hover-bg: #fee2e2;
}

/* Light Pink Theme */
body.theme-light-pink {
    --bg-color: #fdf2f8;
    --text-color: #831843;
    --text-secondary: #9f1239;
    --primary-color: #ec4899;
    --primary-hover: #db2777;
    --navbar-bg: rgba(253, 242, 248, 0.95);
    --card-bg: #fdf2f8;
    --section-bg: #fce7f3;
    --hero-bg: #fbcfe8;
    --footer-bg: #500724;
    --footer-text: #f9a8d4;
    --border-color: #f9a8d4;
    --hover-bg: #fce7f3;
}

/* Navy Blue Theme */
body.theme-navy-blue {
    --bg-color: #1e293b;
    --text-color: #f1f5f9;
    --text-secondary: #cbd5e1;
    --primary-color: #38bdf8;
    --primary-hover: #0ea5e9;
    --navbar-bg: rgba(30, 41, 59, 0.95);
    --card-bg: #334155;
    --section-bg: #334155;
    --hero-bg: #0f172a;
    --footer-bg: #020617;
    --footer-text: #64748b;
    --border-color: #475569;
    --hover-bg: #475569;
}

/* Light Blue Theme */
body.theme-light-blue {
    --bg-color: #f0f9ff;
    --text-color: #0c4a6e;
    --text-secondary: #075985;
    --primary-color: #0ea5e9;
    --primary-hover: #0284c7;
    --navbar-bg: rgba(240, 249, 255, 0.95);
    --card-bg: #f0f9ff;
    --section-bg: #e0f2fe;
    --hero-bg: #bae6fd;
    --footer-bg: #083344;
    --footer-text: #7dd3fc;
    --border-color: #38bdf8;
    --hover-bg: #e0f2fe;
}