/* themes.css – Ruime kleurspreiding */

/* ===== LICHT GROEN (met gele accenten) ===== */
:root {
    --bg-body: #e8f5e9;
    --text-color: #1a3a1a;
    --primary: #2e7d32;        /* donkergroen (was #66bb6a) */
    --primary-light: #66bb6a;  /* de oude primaire kleur voor accenten */
    --secondary: #2e7d32;       /* donkergroen */
    --accent1: #ffee58;         /* felgeel */
    --accent2: #ffd54f;         /* goudgeel */
    --accent3: #ffb300;         /* amber */
    --card-bg: #ffffff;
    --card-shadow: 0 10px 30px rgba(102,187,106,0.1);
    --header-bg: #ffffff;
    --footer-bg: #c8e6c9;
    --btn-bg: #66bb6a;
    --btn-hover: #2e7d32;
    --btn-text: #ffffff;
    --border-color: #a5d6a5;
    --overlay: rgba(102,187,106,0.1);
}

/* ===== DONKER GROEN (met gele accenten) ===== */
.dark-theme {
    --bg-body: #0a1f0a;
    --text-color: #e0ffe0;
    --primary: #ffd54f;        /* geel */
    --primary-light: #ffe082;
    --secondary: #ffb300;       /* amber */
    --accent1: #ffee58;         /* felgeel */
    --accent2: #ffc107;         /* goud */
    --accent3: #ff8f00;         /* oranje-amber */
    --card-bg: #1a3a1a;
    --card-shadow: 0 10px 30px rgba(255,213,79,0.2);
    --header-bg: #0f2a0f;
    --footer-bg: #0a1f0a;
    --btn-bg: #ffd54f;
    --btn-hover: #ffb300;
    --btn-text: #000000;        /* zwart op geel */
    --border-color: #4a7a4a;
    --overlay: rgba(255,213,79,0.2);
}

/* ===== LICHT BLAUW (met violet/purple accenten) ===== */
.color-blue {
    --bg-body: #e6f0ff;
    --text-color: #1a1a3a;
    --primary: #5a4fcf;        /* paars-blauw */
    --primary-light: #8b7fff;
    --secondary: #3a3f99;       /* donkerder blauw */
    --accent1: #b39ddb;         /* lichtpaars */
    --accent2: #9575cd;         /* medium paars */
    --accent3: #7e57c2;         /* diep paars */
    --card-bg: #ffffff;
    --card-shadow: 0 10px 30px rgba(90,79,207,0.1);
    --header-bg: #ffffff;
    --footer-bg: #d0d9ff;
    --btn-bg: #5a4fcf;
    --btn-hover: #3a3f99;
    --btn-text: #ffffff;
    --border-color: #b4b9ff;
    --overlay: rgba(90,79,207,0.1);
}

/* ===== DONKER BLAUW (met violet/purple accenten) ===== */
.dark-theme.color-blue {
    --bg-body: #0a0a1f;
    --text-color: #e0e0ff;
    --primary: #b39ddb;        /* lichtpaars */
    --primary-light: #d1c4e9;
    --secondary: #7e57c2;       /* diep paars */
    --accent1: #5e35b1;         /* donkerpaars */
    --accent2: #512da8;         /* nog donkerder */
    --accent3: #4527a0;         /* bijna zwartpaars */
    --card-bg: #1a1a3a;
    --card-shadow: 0 10px 30px rgba(179,157,219,0.2);
    --header-bg: #0f0f2a;
    --footer-bg: #0a0a1f;
    --btn-bg: #b39ddb;
    --btn-hover: #7e57c2;
    --btn-text: #000000;        /* zwart voor contrast op lichte knop */
    --border-color: #4a4a7a;
    --overlay: rgba(179,157,219,0.2);
}

/* ===== LICHT AARDS (bruin-rood) ===== */
.color-terra {
    --bg-body: #f7f0e6;
    --text-color: #3e2c1b;
    --primary: #8b5a2b;        /* lederkleur (was #b85c3a) */
    --primary-light: #b85c3a;  /* de oude primaire kleur */
    --secondary: #8b5a2b;       /* lederkleur */
    --accent1: #e3a57e;         /* zacht oranje */
    --accent2: #c46b3e;         /* roodbruin */
    --accent3: #9b4e2d;         /* diep bruin */
    --card-bg: #ffffff;
    --card-shadow: 0 10px 30px rgba(184,92,58,0.1);
    --header-bg: #ffffff;
    --footer-bg: #e6d5c0;
    --btn-bg: #b85c3a;
    --btn-hover: #8b5a2b;
    --btn-text: #ffffff;
    --border-color: #d4b59e;
    --overlay: rgba(184,92,58,0.1);
}

/* ===== DONKER AARDS (bruin-rood) ===== */
.dark-theme.color-terra {
    --bg-body: #2b1e12;
    --text-color: #f0e0d0;
    --primary: #d99c7a;        /* lichter terracotta */
    --primary-light: #e3b9a0;
    --secondary: #b85c3a;       /* terracotta */
    --accent1: #e3a57e;         /* zacht oranje */
    --accent2: #c46b3e;         /* roodbruin */
    --accent3: #9b4e2d;         /* diep bruin */
    --card-bg: #3e2c1b;
    --card-shadow: 0 10px 30px rgba(184,92,58,0.2);
    --header-bg: #22170e;
    --footer-bg: #1a120b;
    --btn-bg: #d99c7a;
    --btn-hover: #b85c3a;
    --btn-text: #000000;        /* zwart voor contrast op lichte knop */
    --border-color: #6b4f3a;
    --overlay: rgba(184,92,58,0.2);
}

/* ===== SEPIA ===== */
.sepia {
    --bg-body: #f4e6d2;
    --text-color: #5b4a3a;
    --primary: #8b6f4c;        /* donkerder bruin (was #b68b6d) */
    --primary-light: #b68b6d;
    --secondary: #8b6f4c;
    --accent1: #c7a07b;
    --accent2: #a67c5b;
    --accent3: #8b5e3c;
    --card-bg: #fcf3e6;
    --card-shadow: 0 10px 30px rgba(139,90,60,0.2);
    --header-bg: #fcf3e6;
    --footer-bg: #e6d6c0;
    --btn-bg: #b68b6d;
    --btn-hover: #8b6f4c;
    --btn-text: #ffffff;
    --border-color: #c7a07b;
    --overlay: rgba(182,139,109,0.2);
}

.sepia.dark-theme {
    --bg-body: #3a2e26;
    --text-color: #e6d6c0;
    --primary: #c7a07b;
    --primary-light: #e6d6c0;
    --secondary: #a67c5b;
    --accent1: #b68b6d;
    --accent2: #8b6f4c;
    --accent3: #5b4a3a;
    --card-bg: #5b4a3a;
    --card-shadow: 0 10px 30px rgba(0,0,0,0.5);
    --header-bg: #3a2e26;
    --footer-bg: #2e241e;
    --btn-bg: #c7a07b;
    --btn-hover: #a67c5b;
    --btn-text: #000000;
    --border-color: #8b6f4c;
    --overlay: rgba(199,160,123,0.2);
}