/*
 * assets/css/lightmode/wald-sand-tokens.css
 *
 * Lightmode "Wald & Sand" der Startseite – Farbtokens für light-skin.css.
 *
 * Idee: Der Einstieg (Navbar + Hero) ist tiefes Waldgrün, das Suchformular
 * liegt als helle Karte darauf. Darunter läuft die Seite in warmem Sand
 * weiter. Reduziert die Helligkeit genau dort, wo man zuerst hinschaut,
 * und bleibt trotzdem Lightmode.
 */
html:not(.dark) {
    --lm-hero-bg: linear-gradient(160deg, #0b2c20 0%, #113b2b 55%, #0f3628 100%);
    --lm-hero-text: #f6f3ec;
    --lm-hero-text-2: rgba(246, 243, 236, 0.78);
    --lm-hero-text-3: rgba(246, 243, 236, 0.6);
    --lm-hero-accent: #6ee7b7;

    --lm-bg: #e7e2d6;
    --lm-bg-alt: #eeeae0;
    --lm-surface: #f6f3ec;
    --lm-surface-elev: #fbf9f4;
    --lm-surface-sunken: #ece7dc;
    --lm-image-frame: #fbf9f4;

    --lm-border: #d2cab9;
    --lm-border-strong: #b9af9a;

    --lm-text: #1c1a15;
    --lm-text-2: #45413a;
    --lm-text-3: #6a655a;
    --lm-text-4: #8f897b;

    --lm-accent: #1f6b4e;
    --lm-accent-hover: #185a41;
    --lm-accent-text: #1a5c43;
    --lm-accent-soft: #dce7dd;
    --lm-accent-soft-hover: #cddccf;
    --lm-accent-soft-border: #b1cab8;

    --lm-grad-a: #2e8b64;
    --lm-grad-b: #1f6b4e;
    --lm-grad-a-hover: #35986f;
    --lm-grad-b-hover: #24795a;
    --lm-heading-grad-a: #6ee7b7;
    --lm-heading-grad-b: #a7f3d0;

    --lm-glow-a: rgba(52, 211, 153, 0.22);
    --lm-glow-b: rgba(20, 184, 166, 0.16);
    --lm-glow-c: rgba(167, 243, 208, 0.05);

    --lm-footer-bg: #0b2c20;
    --lm-footer-border: #1d4a38;
    --lm-footer-text: #a9c4b5;
    --lm-footer-text-muted: #7a9a89;
    --lm-footer-accent: #6ee7b7;

    --lm-warn-soft: #f0e6cf;
    --lm-warn-border: #d8c28f;
    --lm-warn-text: #78520f;

    --lm-shadow: rgba(52, 44, 28, 0.16);
    --lm-shadow-soft: rgba(52, 44, 28, 0.08);

    /* Ergebniskarten ("Waldrahmen"): Anzeigen-Block in Hero-Waldgrün, Karten in Sand */
    --lm-card: #f8f5ee;
    --lm-card-border: #d6cdba;
    --lm-card-divider: #e3ddcd;
    --lm-card-premium: #fbf9f3;
    --lm-chip: #ebe6d9;
    --lm-chip-text: #3f3b33;
    --lm-cta: #1f6b4e;
    --lm-cta-text: #f3f8f4;
    --lm-cta-mint: #6ee7b7;
    /* Premium-Block + Ergebnis-Chip "Waldmeister" (25.09.2026, vorher #0f3628 → #143f2e / Rand #1d4a38;
       Auswahl in design-previews/navbar-hell/) */
    --lm-ad-block-bg: linear-gradient(160deg, #1c5642 0%, #22634b 60%, #1f5d47 100%);
    --lm-ad-block-border: #307157;
    --lm-ad-block-text: #f6f3ec;
}

/* ---------------------------------------------------------------- Hero-Block */
html:not(.dark) body > section:first-of-type {
    background: var(--lm-hero-bg);
    color: var(--lm-hero-text);
}
html:not(.dark) body > section:first-of-type .mix-blend-multiply { mix-blend-mode: screen; opacity: 1; }
html:not(.dark) body > section:first-of-type h1.text-slate-800 { color: var(--lm-hero-text); }
html:not(.dark) body > section:first-of-type h1 .from-emerald-600 { --tw-gradient-from: var(--lm-heading-grad-a) var(--tw-gradient-from-position); }
html:not(.dark) body > section:first-of-type p.text-slate-600 { color: var(--lm-hero-text-2); }
html:not(.dark) body > section:first-of-type nav[aria-label="Breadcrumb"] { color: var(--lm-hero-text-3); }
html:not(.dark) body > section:first-of-type nav[aria-label="Breadcrumb"] .text-emerald-600 { color: var(--lm-hero-accent); }
html:not(.dark) body > section:first-of-type ul.text-gray-500 { color: var(--lm-hero-text-2); }
html:not(.dark) body > section:first-of-type ul.text-gray-500 .text-emerald-500\/80 { color: var(--lm-hero-accent); }

/* Formularkarte: helle Sand-Karte auf Waldgrün, ohne Transluzenz */
html:not(.dark) #searchForm {
    background-color: var(--lm-surface);
    border-color: rgba(246, 243, 236, 0.35);
    box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}

/* Bildrahmen und Schein auf Dunkel */
html:not(.dark) body > section:first-of-type .border-white { border-color: rgba(246, 243, 236, 0.9); }
html:not(.dark) body > section:first-of-type .shadow-slate-200\/50,
html:not(.dark) body > section:first-of-type .shadow-slate-300\/60 { --tw-shadow-color: rgba(0, 0, 0, 0.45); }
html:not(.dark) body > section:first-of-type .from-emerald-100 { --tw-gradient-from: rgba(52, 211, 153, 0.35) var(--tw-gradient-from-position); }
html:not(.dark) body > section:first-of-type .to-teal-50 { --tw-gradient-to: rgba(20, 184, 166, 0.12) var(--tw-gradient-to-position); }

/* Weicher Übergang vom Hero in den Sand-Body (Platz dafür: pb-[4.5rem] / lg:pb-[9.5rem] im Markup) */
html:not(.dark) body > section:first-of-type::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2.5rem;
    background: var(--lm-bg);
    border-radius: 2rem 2rem 0 0;
    z-index: 1;
}

/* Trust-Leiste ab lg: helle Pill auf der Sand-Kante (Position/Größe kommt aus dem Markup, gilt in beiden Themes) */
@media (min-width: 1024px) {
    html:not(.dark) body > section:first-of-type ul.text-gray-500 {
        background: var(--lm-surface-elev);
        border-color: var(--lm-border);
        color: var(--lm-text-2);
        box-shadow: 0 18px 40px -16px rgba(11, 44, 32, 0.45), 0 1px 0 rgba(255, 255, 255, 0.7) inset;
    }
    html:not(.dark) body > section:first-of-type ul.text-gray-500 .text-emerald-500\/80 {
        color: var(--lm-accent);
    }
}