/* ============================================================
   Season colours and the banner art (src/views/scene.ts).
   Loaded after site.css on the public site, and on admin → Look & themes
   for the preview cards. Any element with data-season="..." gets that
   season's colours; event themes override --hill2 / --accent inline.
   ============================================================ */

/* --sun / --sun-line: colour of the ball of yarn in the sky and its strands. */
:root, [data-season="autumn"] {
  --accent: #b5561f;
  --accent-soft: #f6e1d2;
  --sky1: #f7e7cf;
  --sky2: #fbf3e4;
  --hill1: #c98a4b;
  --hill2: #8a6a3a;
  --sun: #e9a35b;
  --sun-line: #b8743a;
  --hero-ink: #2a2116;
}
[data-season="christmas"] {
  --accent: #b23a3a;
  --accent-soft: #f7dede;
  --sky1: #16323a;
  --sky2: #24505a;
  --hill1: #e9efe9;
  --hill2: #dfe8e4;
  --sun: #c8463a;
  --sun-line: #7e231c;
  --hero-ink: #fff8ec;
}
[data-season="winter"] {
  --accent: #3f7aa6;
  --accent-soft: #dfeaf3;
  --sky1: #dce8f1;
  --sky2: #f2f6f9;
  --hill1: #c4d6e4;
  --hill2: #e6eef4;
  --sun: #dce9f3;
  --sun-line: #5f87a6;
  --hero-ink: #1d2c38;
}
[data-season="spring"] {
  --accent: #c2577a;
  --accent-soft: #f8e1e9;
  --sky1: #e6f1e1;
  --sky2: #fbf5f0;
  --hill1: #a9cf8f;
  --hill2: #7fb26e;
  --sun: #f2a7b8;
  --sun-line: #b8577a;
  --hero-ink: #1f2a26;
}
[data-season="summer"] {
  --accent: #c88a12;
  --accent-soft: #fbefcf;
  --sky1: #d5ecef;
  --sky2: #fff7e3;
  --hill1: #9ccc7a;
  --hill2: #5f9f5a;
  --sun: #ffc93c;
  --sun-line: #b97a0a;
  --hero-ink: #1f2a26;
}

.scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.scene svg { position: absolute; display: block; }
.scene .sc-hills { inset: 0; width: 100%; height: 100%; }
.scene .sc-garland { left: 0; top: 0; width: 100%; height: var(--garland-h, 60px); }
.scene .sc-sunbox { right: 5%; top: calc(var(--garland-h, 60px) + 14px); width: var(--sun-size, 110px); height: var(--sun-size, 110px); }
.scene .sc-hill1 { fill: var(--hill1); }
.scene .sc-hill2 { fill: var(--hill2); }
.scene .sc-sun { fill: var(--sun); }
.scene .sc-sunline { stroke: var(--sun-line); }
.scene .sc-hook { fill: var(--sun-line); stroke: var(--sun-line); }
.scene .sc-snow { stroke: #fff; stroke-opacity: 0.92; }
.scene .sc-stitch-light { stroke: #fff; stroke-opacity: 0.35; }
.scene .sc-stitch-dark { stroke: #000; stroke-opacity: 0.12; }
.scene-sky { background: linear-gradient(180deg, var(--sky1), var(--sky2)); }
/* On phones the yarn ball would sit behind the heading. */
@media (max-width: 899px) { .scene-hero .sc-sunbox { display: none; } }