/* Colour themes. Pick one in Beheer -> Kleurenthema (or add your own block below: copy one, change the values).
 *
 * Every theme sets the same variables:
 *   --bg --card --field --ink --muted --line --link --topbar-bg      page, cards, inputs, text, borders, links, top bar
 *   --p0..--p6                                                      one colour per stop on the trip (then repeating)
 *   --grad-brand --grad-cta --grad-sunset --auth-grad               buttons, the + button, trip header, sign-in page
 *   --blob1..--blob3                                                faint colour washes in the page background
 * The dark-mode block of a theme only needs to change the surface/text colours.
 * The ".theme-card" selector lets the theme picker show each theme's real colours.
 */

/* ===== Oceaan: blue with coral (default) ===== */
:root, :root[data-theme="oceaan"], .theme-card[data-theme="oceaan"] {
    --bg: #e8eef4; --card: #f7fafc; --field: #ebf0f5; --ink: #162a3a; --muted: #5a6e80; --line: #d5dfe8; --link: #1d5f9e;
    --topbar-bg: rgba(242, 247, 251, .9);
    --p0: #d8694f; --p1: #1f6fa8; --p2: #2f8f83; --p3: #c9953a; --p4: #5a7fb3; --p5: #b7607e; --p6: #4b6a8a;
    --grad-brand: linear-gradient(135deg, #1c5f94, #2b82b3);
    --grad-cta: linear-gradient(135deg, #dc735a, #c4607a);
    --grad-sunset: linear-gradient(135deg, #0d2f4f 0%, #14507e 45%, #2a7fa8 78%, #6fb0c4 100%);
    --auth-grad: linear-gradient(180deg, #0f2a44 0%, #1b4f7a 40%, #4f8fb0 72%, #d9a98a 100%);
    --blob1: rgba(31, 111, 168, .08); --blob2: rgba(216, 105, 79, .06); --blob3: rgba(47, 143, 131, .07);
}
@media (prefers-color-scheme: dark) {
    :root, :root[data-theme="oceaan"], .theme-card[data-theme="oceaan"] {
        --bg: #0e1722; --card: #172331; --field: #111c28; --ink: #e4ecf3; --muted: #8fa3b5; --line: #25374a; --link: #8fc0ea;
        --topbar-bg: rgba(16, 26, 38, .88);
    }
}

/* ===== Woestijn: clay, ochre and olive ===== */
:root[data-theme="woestijn"], .theme-card[data-theme="woestijn"] {
    --bg: #efe9e1; --card: #faf7f2; --field: #f0eae1; --ink: #33261f; --muted: #7a6a5e; --line: #e0d6c9; --link: #9c4a2b;
    --topbar-bg: rgba(247, 243, 237, .92);
    --p0: #b5543a; --p1: #9a6b3f; --p2: #6f7f45; --p3: #cf9a3c; --p4: #5f86a0; --p5: #a8576b; --p6: #7d6a8f;
    --grad-brand: linear-gradient(135deg, #8c4a2f, #b0653d);
    --grad-cta: linear-gradient(135deg, #c9703f, #a8576b);
    --grad-sunset: linear-gradient(135deg, #3b2a22 0%, #6e4430 40%, #b0653d 75%, #d9a45f 100%);
    --auth-grad: linear-gradient(180deg, #2e2230 0%, #6b4047 38%, #b8714b 70%, #e2b57a 100%);
    --blob1: rgba(181, 84, 58, .07); --blob2: rgba(207, 154, 60, .08); --blob3: rgba(95, 134, 160, .06);
}
@media (prefers-color-scheme: dark) {
    :root[data-theme="woestijn"], .theme-card[data-theme="woestijn"] {
        --bg: #17120f; --card: #221b16; --field: #1b1511; --ink: #efe5da; --muted: #a89887; --line: #3a2f27; --link: #e0a27e;
        --topbar-bg: rgba(26, 20, 16, .9);
    }
}

/* ===== Bos: pine, moss and amber ===== */
:root[data-theme="bos"], .theme-card[data-theme="bos"] {
    --bg: #e9ede7; --card: #f8faf6; --field: #ecf0ea; --ink: #1f2e25; --muted: #5f7165; --line: #d6dfd3; --link: #2f6b45;
    --topbar-bg: rgba(243, 246, 241, .92);
    --p0: #c0633f; --p1: #2f6b45; --p2: #6a8f3e; --p3: #c49a3a; --p4: #4f7f8c; --p5: #9a5a6e; --p6: #6f5f8a;
    --grad-brand: linear-gradient(135deg, #2a5f3e, #3f7c55);
    --grad-cta: linear-gradient(135deg, #c9703f, #a85a4a);
    --grad-sunset: linear-gradient(135deg, #12261b 0%, #22503a 45%, #4a7d4f 78%, #a3a86a 100%);
    --auth-grad: linear-gradient(180deg, #14261f 0%, #27543f 40%, #5c8a5c 72%, #d1b27a 100%);
    --blob1: rgba(47, 107, 69, .08); --blob2: rgba(196, 154, 58, .07); --blob3: rgba(79, 127, 140, .06);
}
@media (prefers-color-scheme: dark) {
    :root[data-theme="bos"], .theme-card[data-theme="bos"] {
        --bg: #0f1612; --card: #17211b; --field: #121a15; --ink: #e3ece5; --muted: #8fa396; --line: #24352a; --link: #8fcba0;
        --topbar-bg: rgba(16, 24, 19, .9);
    }
}

/* ===== Grafiet: calm greys with one blue accent ===== */
:root[data-theme="grafiet"], .theme-card[data-theme="grafiet"] {
    --bg: #ececee; --card: #f9f9fa; --field: #eeeef0; --ink: #1f2127; --muted: #686c76; --line: #dadbe0; --link: #2f5fd0;
    --topbar-bg: rgba(245, 245, 247, .92);
    --p0: #2f5fd0; --p1: #4a6a9a; --p2: #5c7f7a; --p3: #8a7a5a; --p4: #6b6f80; --p5: #8a5f78; --p6: #55627a;
    --grad-brand: linear-gradient(135deg, #2a2e3a, #454b5c);
    --grad-cta: linear-gradient(135deg, #2f5fd0, #4a7be0);
    --grad-sunset: linear-gradient(135deg, #16181f 0%, #262b38 50%, #3a4152 85%, #566078 100%);
    --auth-grad: linear-gradient(180deg, #14161c 0%, #272b38 45%, #4a5063 80%, #8a8f9e 100%);
    --blob1: rgba(47, 95, 208, .05); --blob2: rgba(0, 0, 0, .03); --blob3: rgba(104, 108, 118, .05);
}
@media (prefers-color-scheme: dark) {
    :root[data-theme="grafiet"], .theme-card[data-theme="grafiet"] {
        --bg: #101115; --card: #191b21; --field: #14161b; --ink: #e8e9ee; --muted: #9a9eab; --line: #2a2d36; --link: #8fb0f5;
        --topbar-bg: rgba(20, 21, 26, .9);
    }
}

/* ===== Wijnrood: burgundy with gold ===== */
:root[data-theme="wijnrood"], .theme-card[data-theme="wijnrood"] {
    --bg: #efe8e6; --card: #fbf7f5; --field: #f1eae7; --ink: #2c1d22; --muted: #7a6469; --line: #e3d6d3; --link: #8b2d46;
    --topbar-bg: rgba(248, 243, 241, .92);
    --p0: #8b2d46; --p1: #b8863b; --p2: #4d7a6a; --p3: #c26a4a; --p4: #5a6f94; --p5: #a14f7a; --p6: #7a6a4f;
    --grad-brand: linear-gradient(135deg, #7a2740, #9e3a58);
    --grad-cta: linear-gradient(135deg, #b8863b, #c26a4a);
    --grad-sunset: linear-gradient(135deg, #2a1020 0%, #5a1f36 42%, #8b3550 74%, #c98a5a 100%);
    --auth-grad: linear-gradient(180deg, #25121c 0%, #52203a 40%, #8c3c52 72%, #d49a6c 100%);
    --blob1: rgba(139, 45, 70, .07); --blob2: rgba(184, 134, 59, .08); --blob3: rgba(90, 111, 148, .05);
}
@media (prefers-color-scheme: dark) {
    :root[data-theme="wijnrood"], .theme-card[data-theme="wijnrood"] {
        --bg: #170f13; --card: #22171c; --field: #1b1217; --ink: #f0e6e8; --muted: #aa959a; --line: #3a2830; --link: #e19aae;
        --topbar-bg: rgba(26, 17, 21, .9);
    }
}

/* ===== Schemer: muted indigo and terracotta ===== */
:root[data-theme="schemer"], .theme-card[data-theme="schemer"] {
    --bg: #eaebf0; --card: #f8f8fb; --field: #eceef4; --ink: #232640; --muted: #666a86; --line: #dcdee9; --link: #4b50a0;
    --topbar-bg: rgba(244, 245, 249, .9);
    --p0: #d4684f; --p1: #5b63b7; --p2: #3f9482; --p3: #c8913a; --p4: #4a8fb8; --p5: #b8607f; --p6: #7e68b0;
    --grad-brand: linear-gradient(135deg, #4b50a0, #685aa3);
    --grad-cta: linear-gradient(135deg, #d27a56, #b8607f);
    --grad-sunset: linear-gradient(135deg, #2b2e62 0%, #46448a 42%, #84587f 76%, #c0805f 100%);
    --auth-grad: linear-gradient(180deg, #25274f 0%, #3f3d7c 34%, #7b5489 66%, #c58b6c 100%);
    --blob1: rgba(126, 104, 176, .09); --blob2: rgba(212, 104, 79, .07); --blob3: rgba(74, 143, 184, .08);
}
@media (prefers-color-scheme: dark) {
    :root[data-theme="schemer"], .theme-card[data-theme="schemer"] {
        --bg: #11131f; --card: #1a1d2e; --field: #141726; --ink: #e6e8f2; --muted: #959bb8; --line: #292d44; --link: #a3a7e0;
        --topbar-bg: rgba(20, 22, 36, .88);
    }
}