/* ============================================================
   SOFT THEME — backdrops
   Selected with <html data-backdrop="…"> (env BLOG_BACKDROP).
   A backdrop is one block of colour variables; base.css turns the
   --bd-glow-* values into the soft, flowing colour fields behind
   the page. All surfaces, accents and text colours derive from the
   same block, so switching a backdrop re-tints the whole blog.

   The look is light and matte: pastel colour fields on a warm base,
   translucent paper-like surfaces, deep but muted text and accents.

   Roles
     --bd-base / --bd-glow-1..5  the page background (glows are pale)
     --surface*                  cards, panels, inputs
     --text / --text-dim / -faint, --accent*, --tone-*, --danger …
                                 all >= 4.5:1 on --surface-solid (checked
                                 by the contrast script, see PR notes)
     --shadow-rgb / --overlay    shadow colour, modal dimming

   New backdrop:
     1. copy a block below and change the values
     2. add its id to `backdrops` of the soft theme in config/themes.js
     3. BLOG_BACKDROP=<id>
   ============================================================ */

/* ── Herbst (default): sunny autumn day — yellow leaves, golden light, sky still blue ──
   One palette for all herbst variants: [data-backdrop|="herbst"] matches "herbst" and "herbst-…".
   The variants only differ by their photo (see "Photo backdrops" at the end). */
:root,
[data-backdrop|="herbst"] {
    --bd-base: #fbf1d8;
    --bd-glow-1: #a9cdea;   /* sky blue, top left */
    --bd-glow-2: #f6d46f;   /* sunlit yellow leaves, top right */
    --bd-glow-3: #efae6e;   /* orange leaves, bottom right */
    --bd-glow-4: #e6a487;   /* terracotta / red maple, bottom left */
    --bd-glow-5: #f9e2a6;   /* pale gold light, centre */
    --bd-glow-strength: 0.8;

    --surface: rgba(255, 251, 241, 0.76);
    --surface-2: rgba(255, 246, 228, 0.88);
    --surface-solid: #fffaf0;
    --surface-sunken: #f7ecd6;
    --line: rgba(110, 72, 30, 0.13);
    --line-strong: rgba(110, 72, 30, 0.24);

    --text: #3a2a1d;
    --text-dim: #594836;
    --text-faint: #605545;

    --accent: #a4491b;        /* burnt orange */
    --accent-strong: #7f3510;
    --accent-ink: #fffaf0;

    --tone-1: #8e4021;        /* terra */
    --tone-2: #705200;        /* ochre */
    --tone-3: #475f24;        /* moss */
    --tone-4: #734876;        /* plum */

    --danger: #98322a;
    --success: #366125;
    --warning: #705200;
    --info: #255c80;

    --shadow-rgb: 120 78 30;
    --overlay: rgba(58, 42, 28, 0.38);
}

/* ── Winter: bright frost morning, ice blue, lavender haze ── */
[data-backdrop="winter"] {
    --bd-base: #eaf1f8;
    --bd-glow-1: #b5d0ea;
    --bd-glow-2: #d9def2;
    --bd-glow-3: #bfe0e6;
    --bd-glow-4: #ecd6e4;
    --bd-glow-5: #f5f8fc;
    --bd-glow-strength: 0.85;

    --surface: rgba(250, 252, 255, 0.76);
    --surface-2: rgba(243, 248, 253, 0.88);
    --surface-solid: #f9fbfe;
    --surface-sunken: #e6eef6;
    --line: rgba(40, 70, 105, 0.13);
    --line-strong: rgba(40, 70, 105, 0.24);

    --text: #1f2d3b;
    --text-dim: #46596a;
    --text-faint: #4d5964;

    --accent: #2c6491;
    --accent-strong: #1d4a70;
    --accent-ink: #f9fbfe;

    --tone-1: #255c83;
    --tone-2: #4f528e;
    --tone-3: #21615e;
    --tone-4: #7a4373;

    --danger: #963632;
    --success: #226246;
    --warning: #6d540a;
    --info: #255c83;

    --shadow-rgb: 40 70 110;
    --overlay: rgba(31, 45, 59, 0.38);
}

/* ── Nebel: light greige mist, silver sage, dusty lilac ── */
[data-backdrop="nebel"] {
    --bd-base: #ecebe6;
    --bd-glow-1: #c6d0d4;
    --bd-glow-2: #ddd7c9;
    --bd-glow-3: #cdd2df;
    --bd-glow-4: #d4ddcf;
    --bd-glow-5: #f1efea;
    --bd-glow-strength: 0.85;

    --surface: rgba(252, 251, 249, 0.76);
    --surface-2: rgba(247, 246, 242, 0.88);
    --surface-solid: #fcfbf9;
    --surface-sunken: #eceae4;
    --line: rgba(60, 64, 66, 0.13);
    --line-strong: rgba(60, 64, 66, 0.24);

    --text: #2b2e2f;
    --text-dim: #54595b;
    --text-faint: #565859;

    --accent: #3b5f5a;
    --accent-strong: #29443f;
    --accent-ink: #fcfbf9;

    --tone-1: #415d61;
    --tone-2: #61591f;
    --tone-3: #495e3c;
    --tone-4: #5f5370;

    --danger: #913c34;
    --success: #37613d;
    --warning: #6a550c;
    --info: #325d72;

    --shadow-rgb: 60 66 70;
    --overlay: rgba(43, 46, 47, 0.38);
}

/* ── Frühling: fresh morning, new leaves, blossom, pollen ── */
[data-backdrop="fruehling"] {
    --bd-base: #f2f5e2;
    --bd-glow-1: #c9e4a6;
    --bd-glow-2: #f5d3da;
    --bd-glow-3: #fbf0b4;
    --bd-glow-4: #b9ddd0;
    --bd-glow-5: #d8e9f3;
    --bd-glow-strength: 0.85;

    --surface: rgba(253, 255, 247, 0.76);
    --surface-2: rgba(248, 252, 238, 0.88);
    --surface-solid: #fdfff7;
    --surface-sunken: #ebf1d8;
    --line: rgba(60, 85, 40, 0.13);
    --line-strong: rgba(60, 85, 40, 0.24);

    --text: #26331f;
    --text-dim: #4c5d40;
    --text-faint: #525b45;

    --accent: #9a3c58;
    --accent-strong: #762a42;
    --accent-ink: #fdfff7;

    --tone-1: #923a55;
    --tone-2: #6c5800;
    --tone-3: #3d6221;
    --tone-4: #415a80;

    --danger: #983733;
    --success: #356424;
    --warning: #6c5800;
    --info: #325d81;

    --shadow-rgb: 70 95 50;
    --overlay: rgba(38, 51, 31, 0.38);
}

/* ── Sommer: bright day by the sea, sky, sun, coral, sea glass ── */
[data-backdrop="sommer"] {
    --bd-base: #f9f1dd;
    --bd-glow-1: #a8d3ec;
    --bd-glow-2: #f8da8c;
    --bd-glow-3: #f0b69c;
    --bd-glow-4: #a0d5c5;
    --bd-glow-5: #fbead0;
    --bd-glow-strength: 0.8;

    --surface: rgba(255, 252, 244, 0.76);
    --surface-2: rgba(255, 247, 232, 0.88);
    --surface-solid: #fffcf4;
    --surface-sunken: #f4ebd5;
    --line: rgba(60, 80, 90, 0.13);
    --line-strong: rgba(60, 80, 90, 0.24);

    --text: #2d2a24;
    --text-dim: #565449;
    --text-faint: #59574e;

    --accent: #17687f;
    --accent-strong: #0f4c5e;
    --accent-ink: #fffcf4;

    --tone-1: #903f21;
    --tone-2: #6e5500;
    --tone-3: #216259;
    --tone-4: #305b84;

    --danger: #9a332b;
    --success: #266257;
    --warning: #6e5500;
    --info: #295d7d;

    --shadow-rgb: 70 90 90;
    --overlay: rgba(45, 42, 36, 0.38);
}

/* ============================================================
   Photo backdrops (herbst variants)
   Photographs from Pexels (Pexels License: free to use, no attribution required);
   the credit shown in the footer lives in config/themes.js.
   The photo sits below the colour fields (see base.css); --bd-veil washes it with the base
   colour, lighter at the top and stronger towards the bottom where the text is, and
   --bd-glow-opacity lets the colour fields tint it gently.
   ============================================================ */

/* herbst: avenue in perspective (Frans van Heerden) */
[data-backdrop="herbst"] {
    --bd-photo-lg: url('/assets/backdrops/herbst/allee-lg.webp');
    --bd-photo-sm: url('/assets/backdrops/herbst/allee-sm.webp');
    --bd-photo-y: 50%;
    --bd-veil: linear-gradient(180deg, color-mix(in srgb, var(--bd-base) 34%, transparent) 0%, color-mix(in srgb, var(--bd-base) 52%, transparent) 50%, color-mix(in srgb, var(--bd-base) 70%, transparent) 100%);
    --bd-glow-opacity: 0.45;
}

/* herbst-himmel: road under a blue sky (Tim Gouw) */
[data-backdrop="herbst-himmel"] {
    --bd-photo-lg: url('/assets/backdrops/herbst-himmel/strasse-lg.webp');
    --bd-photo-sm: url('/assets/backdrops/herbst-himmel/strasse-sm.webp');
    --bd-photo-y: 55%;
    --bd-veil: linear-gradient(180deg, color-mix(in srgb, var(--bd-base) 10%, transparent) 0%, color-mix(in srgb, var(--bd-base) 36%, transparent) 50%, color-mix(in srgb, var(--bd-base) 62%, transparent) 100%);
    --bd-glow-opacity: 0.35;
}

/* herbst-wald: sunlit forest path (Artem Saranin) */
[data-backdrop="herbst-wald"] {
    --bd-photo-lg: url('/assets/backdrops/herbst-wald/waldweg-lg.webp');
    --bd-photo-sm: url('/assets/backdrops/herbst-wald/waldweg-sm.webp');
    --bd-photo-y: 50%;
    --bd-veil: linear-gradient(180deg, color-mix(in srgb, var(--bd-base) 14%, transparent) 0%, color-mix(in srgb, var(--bd-base) 38%, transparent) 50%, color-mix(in srgb, var(--bd-base) 62%, transparent) 100%);
    --bd-glow-opacity: 0.4;
}

/* herbst-baeume: yellow avenue of tall trees (Min An) */
[data-backdrop="herbst-baeume"] {
    --bd-photo-lg: url('/assets/backdrops/herbst-baeume/laubgang-lg.webp');
    --bd-photo-sm: url('/assets/backdrops/herbst-baeume/laubgang-sm.webp');
    --bd-photo-y: 50%;
    --bd-veil: linear-gradient(180deg, color-mix(in srgb, var(--bd-base) 16%, transparent) 0%, color-mix(in srgb, var(--bd-base) 38%, transparent) 50%, color-mix(in srgb, var(--bd-base) 62%, transparent) 100%);
    --bd-glow-opacity: 0.4;
}