/* Theme "dalli" — same site, dalli-inspired palette: sky-blue hero, navy type, red calls to action,
   warm light-grey page with white cards, the closing action block under the same sky. Loaded after site.css, unlayered so it overrides. */
:root {
  --sky-top: #a3d4f3;
  --sky-mid: #74bbe8;
  --sky-bottom: #4fa2dc;
  --ink: #0f2a5f;            /* navy for type on sky blue: 4.8:1 even at the darkest end of the gradient */
  --cta: #d81f24;            /* red action colour, white text 5:1 */

  --navy-950: #164a95;       /* dark sections: strong dalli blue */
  --navy-900: #1a56a8;
  --navy-700: #13306c;
  --ice: #a8d8f7;
  --red: #e3262a;

  --bg:          light-dark(#f0efeb, #164a95);
  --bg-alt:      light-dark(#ffffff, #1a56a8);
  --surface:     light-dark(#ffffff, #1f5fb5);
  --text:        light-dark(#13306c, #ffffff);
  --text-dim:    light-dark(#4c5d7a, #d5e5f6);
  --hairline:    light-dark(#dcdad3, #3a72bd);
  --accent-text: light-dark(#c81e22, #a8d8f7);
  --btn-bg:      light-dark(#d81f24, #ffffff);
  --btn-hover:   light-dark(#b8181d, #e6f2fc);
  --btn-text:    light-dark(#ffffff, #13306c);
  --logo-color:  light-dark(#e3262a, #ffffff);
}

/* Sky sections (home hero + subpage heroes) */
.is-sky {
  color-scheme: light; color: var(--ink);
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 48%, var(--sky-bottom) 100%);
  --text: var(--ink); --text-dim: var(--ink); --accent-text: var(--ink); --hairline: rgb(15 42 95 / .2);
}
.is-sky .hero__glow, .is-sky .page-hero__glow { background: radial-gradient(closest-side, rgb(255 255 255 / .6), rgb(255 255 255 / .16) 55%, transparent); }
.is-sky .hero__title em, .is-sky h1 em { color: var(--ink); }
.is-sky .eyebrow { color: var(--ink); font-weight: 700; }
.is-sky .chips li { background: rgb(255 255 255 / .6); color: var(--ink); box-shadow: inset 0 0 0 1px rgb(15 42 95 / .14); }
.is-sky .hero__meta::before { box-shadow: 0 0 0 4px rgb(227 38 42 / .25); }
.is-sky .btn:not(.btn--ghost) { background: var(--cta); color: #fff; }
.is-sky .btn:not(.btn--ghost):hover { background: #b8181d; }
.hero.is-sky:not(.hero--live) .hero__product img { filter: drop-shadow(0 30px 34px rgb(15 42 95 / .35)); }
.is-sky .hero__product::after { background: radial-gradient(closest-side, rgb(15 42 95 / .35), transparent); }
.is-sky .hero__product figcaption { background: rgb(255 255 255 / .65); color: var(--ink); box-shadow: inset 0 0 0 1px rgb(15 42 95 / .12); }
.is-sky .values-stack span { color: rgb(15 42 95 / .3); }
.is-sky .values-stack span:first-child, .is-sky .grain-art { color: var(--ink); }
@keyframes value-lit-sky { 0%, 17% { color: #0f2a5f; } 23%, 100% { color: rgb(15 42 95 / .3); } }
@media (prefers-reduced-motion: no-preference) {
  .is-sky .values-stack span { animation-name: value-lit-sky; }
  .is-sky .values-stack span:first-child { color: rgb(15 42 95 / .3); }
}
.is-sky .page-hero__media img { filter: drop-shadow(0 30px 34px rgb(15 42 95 / .3)); }
.nav:not(.is-over-dark) { --text-dim: var(--ink); }

/* Four packs in the hero (WaschGold Color, milwa Color, milwa compact, Fleckensalz) – big, the product is the hero */
.hero__product { width: min(94vw, 560px); }
@media (width >= 60rem) {
  .hero__grid { grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); gap: clamp(1.5rem, 2.5vw, 3rem); }
  .hero__product { width: min(55vw, 1000px); justify-self: start; }   /* copy keeps a fixed column; the packs take the rest and may run past it to the right */
  .hero__title { font-size: calc(var(--step-7) * .74); }
}
@media (width < 60rem) { .hero__product { width: min(94vw, 62svh, 560px); } }

/* Pinned hero: the sky deepens into the story blue, then fades away to reveal the story beneath */
.hero.is-sky.hero--pin { background: none; }
.hero.is-sky.hero--pin .hero__stage { background: linear-gradient(180deg,
  color-mix(in oklab, color-mix(in oklab, var(--sky-top), var(--navy-950) clamp(0%, (var(--p, 0) - .5) * 200%, 100%)) var(--hero-a), transparent) 0%,
  color-mix(in oklab, color-mix(in oklab, var(--sky-bottom), var(--navy-950) clamp(0%, (var(--p, 0) - .5) * 200%, 100%)) var(--hero-a), transparent) 100%); }

/* White product cards on the warm grey page, with a whisper of sky in the studio light */
.lineup__tile, .brand__media { background: radial-gradient(75% 55% at 50% 72%, #ffffff 0%, #f6fafd 55%, #e6f1fa 100%); box-shadow: 0 1px 2px rgb(19 48 108 / .06); }
.tile--dark { background: radial-gradient(90% 120% at 85% 0%, #2a6cc0, #164a95 70%); }
.timeline::after { background: linear-gradient(var(--red), #4fa2dc); }
.chart__bar { background: linear-gradient(90deg, #13306c, #4fa2dc); }
::selection { background: rgb(79 162 220 / .35); }

/* The closing action block repeats the hero sky (build.py swaps .cta-band.is-dark → .is-sky), so every page
   opens and closes under the same sky; red stays only on the action button. Nav needs no override: it reads it as light. */
.cta-band.is-sky h2 em { color: var(--ink); }
.cta-band.is-sky .btn--ghost { color: var(--ink); box-shadow: inset 0 0 0 1.5px rgb(15 42 95 / .55); }
.cta-band.is-sky .btn--ghost:hover { background: rgb(255 255 255 / .35); }
.card .chip-note { color: #a8161b; }

/* Historie: the postcard hero joins the sky family */
.page-hero.is-sky .page-hero__photo img { filter: grayscale(1) sepia(.35) contrast(1.05); mix-blend-mode: multiply; opacity: .32; }
.page-hero.is-sky .page-hero__photo::after { background: linear-gradient(180deg, rgb(163 212 243 / .35) 0%, rgb(116 187 232 / .6) 60%, var(--sky-bottom) 100%); }
/* Stimmen on the white alt band: cards and rating pill take the warm page colour */
.voices.is-alt .voices__grid .voice, .voices.is-alt .voices__rating { background: var(--bg); }