:root {
    --bg-body: #D9DED1;
    --text-main: #0E1513;
    --text-muted: #4C574D;
    --card-bg: #FFFFFF;
    --card-border: #C6CEBD;
    --input-bg: #FFFFFF;
    --tab-bg: #CCD3C4;
    --tab-btn-active: #FFFFFF;
    --pill-bg: #EEF1EA;
    --pill-text: #0E1513;
    --accent-glow: rgba(7, 16, 19, 0.12);
    --groepstotaal-bg: rgba(7, 16, 19, 0.05);
    --groepstotaal-text: #3f4a10;
    --koploper-bg: #fefce8;
    --koploper-text: #713f12;
    --blob-1: rgba(164, 186, 183, 0.10);
    --blob-2: rgba(37, 4, 8, 0.04);
    /* Turf accent — licht thema: inkt-vulling met crème tekst; accent-tekst = donkere olijf */
    --accent: #071013;
    --accent-ink: #EFF2C0;
    --accent-text: #3f4a10;
    --accent-soft: rgba(7, 16, 19, 0.06);
    --accent-border: rgba(7, 16, 19, 0.18);
    --accent-ring: #071013;

    /* Datakleuren — licht thema: donkere varianten voor contrast op crème */
    --data-1: #5F6B1E;
    --data-2: #7C8A3A;
    --data-3: #46705C;
    --data-4: #2F6E74;
    --data-5: #3A6494;
    --data-6: #6E4F8C;
    --data-7: #A65A38;
    --data-8: #6B6152;
}

.dark {
    /* Inkt-ramp afgeleid van het merk-inkt #071013 — zelfde familie als splash & onboarding */
    --bg-body: #071013;
    --text-main: #F3F6F2;
    --text-muted: #849691;
    --card-bg: #101E21;
    --card-border: rgba(239, 242, 192, 0.10);
    --input-bg: #16262A;
    --tab-bg: #101E21;
    --tab-btn-active: #22383B;
    --pill-bg: rgba(239, 242, 192, 0.07);
    --pill-text: #F3F6F2;
    --accent-glow: rgba(239, 242, 192, 0.20);
    --groepstotaal-bg: rgba(239, 242, 192, 0.10);
    --groepstotaal-text: #EFF2C0;
    --koploper-bg: rgba(251, 191, 36, 0.1);
    --koploper-text: #fde68a;
    --blob-1: rgba(164, 186, 183, 0.08);
    --blob-2: rgba(37, 4, 8, 0.12);
    /* Turf accent — donker thema (primair): crème-vulling met inkt-tekst */
    --accent: #EFF2C0;
    --accent-ink: #071013;
    --accent-text: #EFF2C0;
    --accent-soft: rgba(239, 242, 192, 0.14);
    --accent-border: rgba(239, 242, 192, 0.40);
    --accent-ring: #EFF2C0;

    /* Datakleuren — donker thema: één ingetogen band, allemaal leesbaar op inkt */
    --data-1: #EFF2C0;
    --data-2: #C7CE86;
    --data-3: #9DBFA4;
    --data-4: #7FB3B8;
    --data-5: #8AA8D0;
    --data-6: #B79ECF;
    --data-7: #D99A7A;
    --data-8: #A99C82;
}

/* ===== Vormtaal: één radius-schaal voor de hele app ===== */
:root {
    --r-sm: 10px;   /* pillen, kleine chips */
    --r-md: 14px;   /* invoervelden, rijen */
    --r-lg: 20px;   /* kaarten */
    --r-xl: 26px;   /* panelen, modals */
}

/* Avatar-kleuren uit dezelfde datafamilie i.p.v. felle Tailwind-tinten */
.av-1 { background-color: var(--data-2); color: #071013; }
.av-2 { background-color: var(--data-3); color: #071013; }
.av-3 { background-color: var(--data-4); color: #071013; }
.av-4 { background-color: var(--data-5); color: #071013; }
.av-5 { background-color: var(--data-6); color: #071013; }
.av-6 { background-color: var(--data-7); color: #071013; }
.av-7 { background-color: var(--data-8); color: #071013; }

body { 
    font-family: 'DM Sans', sans-serif; 
    font-weight: 400;
    background-color: var(--bg-body); 
    color: var(--text-main);
    transition: background-color 0.25s ease, color 0.25s ease; 
}

.theme-card { 
    background-color: var(--card-bg); 
    border-color: var(--card-border); 
    color: var(--text-main); 
    transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease; 
}

.theme-input { 
    background-color: var(--input-bg); 
    border-color: var(--card-border); 
    color: var(--text-main); 
}

.font-syne, .font-heading { font-family: 'DM Sans', sans-serif; font-weight: 800; }

.card-active {
    border-color: var(--accent-ring) !important;
    box-shadow: 0 0 25px var(--accent-glow) !important;
}

/* ===== Turf accent-helpers ===== */
.btn-accent { background-color: var(--accent); color: var(--accent-ink); transition: filter 0.15s ease, transform 0.1s ease; }
.btn-accent:hover { filter: brightness(1.06); }
.dark .btn-accent:hover { filter: brightness(0.94); }
.accent-text { color: var(--accent-text) !important; }
.accent-soft-bg { background-color: var(--accent-soft) !important; }
.accent-bd { border-color: var(--accent-border) !important; }
.text-strong { color: var(--text-main) !important; }
.dot-live { background-color: var(--accent-ring); }
.seg-active { background-color: var(--tab-btn-active); color: var(--text-main); box-shadow: 0 1px 3px rgba(0,0,0,0.10); }
.dark .seg-active { box-shadow: 0 1px 3px rgba(0,0,0,0.35); }

.admin-only { display: none; }
body.is-admin .admin-only { display: flex; }

.modal { display: none; }
.modal.active { display: flex; }

.tab-pane { opacity: 0; transform: translateY(6px); transition: opacity 0.2s ease-out, transform 0.2s ease-out; }
.tab-pane.active-pane { display: block !important; opacity: 1; transform: translateY(0px); }

/* Drankjes-knoppen: elk zijn eigen datakleur, maar allemaal uit dezelfde familie.
   Eén recept — zachte vulling, tekst in de kleur zelf, rand van dezelfde tint. */
.drink-btn { border: 1px solid; }
.btn-drink-bier     { background-color: color-mix(in srgb, var(--data-2) 14%, transparent); color: var(--data-2); border-color: color-mix(in srgb, var(--data-2) 30%, transparent); }
.btn-drink-wijn     { background-color: color-mix(in srgb, var(--data-6) 14%, transparent); color: var(--data-6); border-color: color-mix(in srgb, var(--data-6) 30%, transparent); }
.btn-drink-champ    { background-color: color-mix(in srgb, var(--data-1) 14%, transparent); color: var(--data-1); border-color: color-mix(in srgb, var(--data-1) 30%, transparent); }
.btn-drink-cocktail { background-color: color-mix(in srgb, var(--data-4) 14%, transparent); color: var(--data-4); border-color: color-mix(in srgb, var(--data-4) 30%, transparent); }
.btn-drink-sterk    { background-color: color-mix(in srgb, var(--data-7) 14%, transparent); color: var(--data-7); border-color: color-mix(in srgb, var(--data-7) 30%, transparent); }
.btn-drink-guinness { background-color: color-mix(in srgb, var(--data-3) 14%, transparent); color: var(--data-3); border-color: color-mix(in srgb, var(--data-3) 30%, transparent); }
.btn-drink-speciaal { background-color: color-mix(in srgb, var(--data-8) 14%, transparent); color: var(--data-8); border-color: color-mix(in srgb, var(--data-8) 30%, transparent); }

.toast-animate { animation: slideUp 0.3s ease-out forwards; }
@keyframes slideUp { from { transform: translateY(100px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Prestatie-badges op de deelnemerskaarten: één recept in plaats van per badge
   een eigen Tailwind-kleur (indigo, sky, amber, rose door elkaar). */
.badge-turf {
    background-color: var(--accent-soft);
    color: var(--accent-text);
    border: 1px solid var(--accent-border);
}

/* ===== Vakantie-wrapped: voortgangsstreepjes (stories-stijl) ===== */
.v-progress-streepje {
    flex: 1 1 0;
    height: 3px;
    border-radius: 999px;
    background-color: rgba(239, 242, 192, 0.18);
    transition: background-color 0.3s ease;
}
.v-progress-streepje.is-gezien { background-color: #EFF2C0; }

/* ===== Splash ===== */
#splash { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: #071013; }
html.no-splash #splash { display: none; }
#splash.hide { opacity: 0; pointer-events: none; transition: opacity 0.55s ease; }
#splash svg { width: 130px; height: auto; overflow: visible; }
.splash-letters { opacity: 0; transform-box: fill-box; transform-origin: center; animation: splashLetters 0.7s ease 0.28s forwards; }
.splash-bottle { opacity: 0; transform-box: fill-box; transform-origin: center bottom; animation: splashBottle 0.9s cubic-bezier(0.2, 0.85, 0.25, 1.05) 0.05s forwards; }
@keyframes splashLetters { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes splashBottle { 0% { opacity: 0; transform: translateY(120px); } 55% { opacity: 1; } 100% { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .splash-letters, .splash-bottle { animation-duration: 0.01ms; opacity: 1; transform: none; } }

/* ===== Onboarding intro (fles) ===== */
#ob-intro.ob-fade { opacity: 0; transition: opacity 0.55s ease; pointer-events: none; }
#ob-intro-bottle { opacity: 0; animation: obBottleIn 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards, obBottleFloat 3.2s ease-in-out 1.1s infinite; }
@keyframes obBottleIn { 0% { opacity: 0; transform: translateY(26px) scale(0.9); } 45% { opacity: 1; } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes obBottleFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (prefers-reduced-motion: reduce) { #ob-intro-bottle { animation: none; opacity: 1; } }