/* Natural Shine: sezonska tema (seasonal theme)
   Use these tokens in the site's own styles, e.g.
     body        { background: var(--ns-bg); color: var(--ns-ink); }
     h1 em, .btn { color: var(--ns-accent); }
     .card       { background: var(--ns-soft); }
   The script sets html[data-season] from today's date. */

/* Registered so the colours fade smoothly when the season changes */
@property --ns-bg     { syntax: '<color>'; inherits: true; initial-value: #fafaf7; }
@property --ns-ink    { syntax: '<color>'; inherits: true; initial-value: #2b2b26; }
@property --ns-muted  { syntax: '<color>'; inherits: true; initial-value: #454c43; }
@property --ns-accent { syntax: '<color>'; inherits: true; initial-value: #5b6d39; }
@property --ns-soft   { syntax: '<color>'; inherits: true; initial-value: #f0f0ea; }
@property --ns-sky1   { syntax: '<color>'; inherits: true; initial-value: #f4f1e8; }
@property --ns-sky2   { syntax: '<color>'; inherits: true; initial-value: #dfe3d2; }
@property --ns-hill1  { syntax: '<color>'; inherits: true; initial-value: #b8c29c; }
@property --ns-hill2  { syntax: '<color>'; inherits: true; initial-value: #8b9970; }
@property --ns-sun    { syntax: '<color>'; inherits: true; initial-value: #f2e2c2; }

:root {
  --ns-bg: #fafaf7; --ns-ink: #2b2b26; --ns-muted: #454c43; --ns-accent: #5b6d39; --ns-soft: #f0f0ea;
  --ns-sky1: #f4f1e8; --ns-sky2: #dfe3d2; --ns-hill1: #b8c29c; --ns-hill2: #8b9970; --ns-sun: #f2e2c2;
  transition: --ns-bg 1.4s ease, --ns-ink 1.4s ease, --ns-muted 1.4s ease, --ns-accent 1.4s ease,
              --ns-soft 1.4s ease, --ns-sky1 1.4s ease, --ns-sky2 1.4s ease, --ns-hill1 1.4s ease,
              --ns-hill2 1.4s ease, --ns-sun 1.4s ease;
}

/* Proljeće: fresh green, blossom pink */
html[data-season="proljece"] {
  --ns-bg: #f3f9f0; --ns-ink: #283222; --ns-muted: #43523d; --ns-accent: #844562; --ns-soft: #e6f3de;
  --ns-sky1: #fdf2ef; --ns-sky2: #e1edd5; --ns-hill1: #a9c38c; --ns-hill2: #789d5d; --ns-sun: #f7d3c6;
}
/* Ljeto: warm straw, honey */
html[data-season="ljeto"] {
  --ns-bg: #f7f9ed; --ns-ink: #2f2a1b; --ns-muted: #514d35; --ns-accent: #72502e; --ns-soft: #ecf3dc;
  --ns-sky1: #fff3d4; --ns-sky2: #f4cf84; --ns-hill1: #b8b06a; --ns-hill2: #878745; --ns-sun: #ffe08f;
}
/* Jesen: warm paper, bark, muted plum */
html[data-season="jesen"] {
  --ns-bg: #f5f9f2; --ns-ink: #2c302a; --ns-muted: #425047; --ns-accent: #70445f; --ns-soft: #e9f2e3;
  --ns-sky1: #f7e8df; --ns-sky2: #dfd0bd; --ns-hill1: #b69b7c; --ns-hill2: #766556; --ns-sun: #f4dfb6;
}
/* Zima: frost, slate blue */
html[data-season="zima"] {
  --ns-bg: #f1f7f5; --ns-ink: #1f2a33; --ns-muted: #3e535e; --ns-accent: #41647a; --ns-soft: #e3efea;
  --ns-sky1: #e4ebef; --ns-sky2: #9db0be; --ns-hill1: #f4f7f8; --ns-hill2: #c7d3db; --ns-sun: #f6f8f9;
}

/* Particle layer: sits on top, never blocks clicks */
[data-ns-sky] { position: relative; }
.ns-sky {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 2;
}

/* Seasonal label */
.ns-season-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 10px; border-radius: 999px;
  background: var(--ns-soft); color: var(--ns-ink);
  font-size: .85rem; font-weight: 500;
}
.ns-season-chip::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ns-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ns-accent) 22%, transparent);
  animation: ns-pulse 3.2s ease-in-out infinite;
}
@keyframes ns-pulse { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--ns-accent) 8%, transparent); } }

/* Seasonal atmosphere stays in the background of the actual Site. */
:root {
  --paper: var(--ns-bg);
  --ink: var(--ns-ink);
  --muted: var(--ns-muted);
  --sage: var(--ns-soft);
  --line: color-mix(in srgb, var(--ns-ink) 12%, var(--ns-bg));
  --plum: color-mix(in srgb, #654564 75%, var(--ns-accent));
  --plum-dark: color-mix(in srgb, #503550 80%, var(--ns-accent));
}
body { background: var(--ns-bg); color: var(--ns-ink); transition: background-color 1.4s ease, color 1.4s ease; }
.site-header { background: color-mix(in srgb, var(--ns-bg) 84%, transparent); }
.hero { background: linear-gradient(100deg, color-mix(in srgb, var(--ns-bg) 91%, #ffffff), color-mix(in srgb, var(--ns-bg) 86%, #e2f1dc)); }
.hero::before { display: none; }
.hero-season-line { max-width: 500px; margin: -8px 0 27px !important; color: var(--ns-accent) !important; font: italic 25px/1.22 'Instrument Serif', Georgia, serif !important; }
.hero > .ns-sky { z-index: 2; opacity: .58; }
.hero-shape { background: linear-gradient(color-mix(in srgb,var(--ns-soft) 80%,transparent), color-mix(in srgb,var(--ns-soft) 80%,transparent)),url('assets/majka-pattern-tile.jpg') center / 300px repeat; }
.ways { background: radial-gradient(ellipse 42% 36% at 8% 94%, color-mix(in srgb, var(--ns-soft) 40%, transparent), transparent 85%); }
.offer-education { background: var(--ns-soft); }
.offer-advice { background: linear-gradient(140deg,rgba(255,255,255,.82),color-mix(in srgb,var(--ns-soft) 67%,transparent)); }
.offer-guide { background: linear-gradient(130deg,rgba(255,255,255,.63),var(--ns-soft)); }
.offer-community { background: linear-gradient(110deg,color-mix(in srgb,var(--ns-soft) 65%,#f5e8f1),color-mix(in srgb,var(--ns-soft) 68%,#e6f1e8)); }
.program-decision { background: linear-gradient(115deg,var(--ns-soft),color-mix(in srgb,var(--ns-soft) 82%,#edf5ed)); }
.about { background: radial-gradient(ellipse 52% 66% at 5% 90%,rgba(255,255,255,.55),transparent 82%),color-mix(in srgb,var(--ns-soft) 70%,#e7f3e8); }
.about-garden { border-color: color-mix(in srgb,var(--ns-soft) 70%,#e7f3e8); }
.journal { background: radial-gradient(ellipse 42% 62% at 86% 58%,color-mix(in srgb,var(--ns-soft) 53%,transparent),transparent 85%); }
.season-note { background: color-mix(in srgb, var(--ns-soft) 74%, #ffffff); }
html[data-season="jesen"] .season-note { background: #f1ebdf; }
html[data-season="ljeto"] .season-note { background: #f2f1d9; }
html[data-season="zima"] .season-note { background: #eaf1f2; }
@media (max-width: 600px) {
  .hero-season-line { font-size: 22px !important; }
  .hero > .ns-sky { opacity: .42; }
}

@media (prefers-reduced-motion: reduce) {
  :root { transition: none; }
  body { transition: none; }
  .ns-season-chip::before { animation: none; }
}