/* Need a Site — marketing-site themes.
 * <html data-tone="dark|light" data-season="black-friday|christmas|easter"> is set by includes/themes.php
 * (Admin → Settings → General → Public site style). Colours live in variables; app.css/public.css read them. */

/* ---------- Light ---------- */
html[data-tone="light"]{
  color-scheme:light;
  --bg:#f5f7fb;--bg-2:#eceff6;--surface:#ffffff;--card:#ffffff;--card-2:#f2f4f9;
  --line:rgba(15,23,42,.09);--line-2:rgba(15,23,42,.16);
  --fg:#101624;--fg-2:#344054;--muted:#5f6b7e;--fg-strong:#05070c;--ink:#0f172a;
  --accent:#00876a;--accent-2:#7c3aed;--accent-3:#0ea5e9;--on-accent:#ffffff;--glow:rgba(0,135,106,.32);
}
html[data-tone="light"] .kind-public .card,html[data-tone="light"] .glass{box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 24px 50px -34px rgba(15,23,42,.28)}
html[data-tone="light"] .hero-search,html[data-tone="light"] .float-card,html[data-tone="light"] .auth-card{box-shadow:0 30px 70px -40px rgba(15,23,42,.35)}
html[data-tone="light"] .mock,html[data-tone="light"] .tpl .mock{box-shadow:0 40px 80px -46px rgba(15,23,42,.45),0 0 0 1px rgba(15,23,42,.08)}
html[data-tone="light"] .consent-bar,html[data-tone="light"] .toast,html[data-tone="light"] .chat-box{box-shadow:0 20px 50px -24px rgba(15,23,42,.35)}
html[data-tone="light"] .buy-bar{box-shadow:0 -16px 40px -24px rgba(15,23,42,.3)}
html[data-tone="light"] .grain{opacity:.03;mix-blend-mode:multiply}
html[data-tone="light"] .flash-ok,html[data-tone="light"] .flash-success{color:#047857}
html[data-tone="light"] .flash-error{color:#be123c}
html[data-tone="light"] .buy-code .is-bad{color:#be123c}
html[data-tone="light"] .tip-bubble{background:#fff;color:var(--fg-2);box-shadow:0 18px 40px -18px rgba(15,23,42,.35)}
html[data-tone="light"] body[class*="kind-"] input[type=date],html[data-tone="light"] body[class*="kind-"] input[type=datetime-local],html[data-tone="light"] body[class*="kind-"] input[type=time]{color-scheme:light}
html[data-tone="light"] input::placeholder,html[data-tone="light"] textarea::placeholder{color:#8a94a6}
html[data-tone="light"] ::selection{color:var(--fg-strong)}

/* ---------- Seasonal moods (after the tones, so they win) ---------- */
html[data-season="black-friday"]{
  --bg:#000000;--bg-2:#0a0a0a;--surface:#101010;--card:#131313;--card-2:#1a1a1a;
  --line:rgba(255,255,255,.09);--line-2:rgba(255,255,255,.16);
  --fg:#f5f5f5;--fg-2:#d4d4d4;--muted:#a3a3a3;--fg-strong:#ffffff;--ink:#ffffff;
  --accent:#ffd400;--accent-2:#ff2e63;--accent-3:#fff2a8;--on-accent:#111111;--glow:rgba(255,212,0,.35);
}
html[data-season="christmas"]{
  --bg:#06100c;--bg-2:#0a1712;--surface:#0e1d17;--card:#10221b;--card-2:#152b22;
  --line:rgba(236,253,245,.09);--line-2:rgba(236,253,245,.15);
  --fg:#f3f7f4;--fg-2:#d3ded7;--muted:#9fb3a7;--fg-strong:#ffffff;--ink:#ffffff;
  --accent:#ff5a67;--accent-2:#2fbf71;--accent-3:#ffd166;--on-accent:#2b0508;--glow:rgba(255,90,103,.38);
}
html[data-season="easter"]{
  --bg:#fffaf1;--bg-2:#fff2df;--surface:#ffffff;--card:#fffdf8;--card-2:#fff5e8;
  --line:rgba(43,34,56,.1);--line-2:rgba(43,34,56,.17);
  --fg:#2b2238;--fg-2:#4b405e;--muted:#76698a;--fg-strong:#1d1629;--ink:#2b2238;
  --accent:#b8336f;--accent-2:#6f9a1c;--accent-3:#e7a500;--on-accent:#ffffff;--glow:rgba(184,51,111,.3);
}
html[data-season="black-friday"] .step:nth-child(4) .step-num{background:linear-gradient(135deg,#ff2e63,#ff8fab);color:#2a0010}

/* ---------- Seasonal effects layer ---------- */
.season-fx{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;display:none}
.season-fx::before,.season-fx::after{content:"";position:absolute;left:0;right:0;bottom:0;will-change:transform}
html[data-season="christmas"] .season-fx,html[data-season="easter"] .season-fx{display:block}
/* Snow: two tiles falling at different speeds. Each layer moves exactly one tile height, so the loop is seamless. */
html[data-season="christmas"] .season-fx::before{top:-220px;opacity:.6;background-size:220px 220px;animation:fx-fall-220 16s linear infinite;
  background-image:radial-gradient(1.6px 1.6px at 20px 30px,#fff 50%,transparent),radial-gradient(1.2px 1.2px at 130px 80px,#fff 50%,transparent),radial-gradient(2px 2px at 70px 150px,#fff 50%,transparent),radial-gradient(1.3px 1.3px at 185px 190px,#fff 50%,transparent),radial-gradient(1px 1px at 160px 20px,#fff 50%,transparent)}
html[data-season="christmas"] .season-fx::after{top:-360px;opacity:.45;background-size:360px 360px;animation:fx-fall-360 34s linear infinite;
  background-image:radial-gradient(2.6px 2.6px at 60px 70px,#fff 50%,transparent),radial-gradient(3px 3px at 250px 200px,#fff 50%,transparent),radial-gradient(2.2px 2.2px at 160px 310px,#fff 50%,transparent)}
/* Easter: slow pastel eggs and petals */
html[data-season="easter"] .season-fx::before{top:-260px;opacity:.55;background-size:260px 260px;animation:fx-fall-260 30s linear infinite;
  background-image:radial-gradient(5px 7px at 30px 40px,#f9a8d4 60%,transparent),radial-gradient(4px 6px at 170px 110px,#fde68a 60%,transparent),radial-gradient(5px 7px at 90px 200px,#c4b5fd 60%,transparent),radial-gradient(4px 6px at 220px 230px,#a7f3d0 60%,transparent)}
html[data-season="easter"] .season-fx::after{top:-400px;opacity:.4;background-size:400px 400px;animation:fx-fall-400 46s linear infinite;
  background-image:radial-gradient(7px 9px at 80px 90px,#fbcfe8 60%,transparent),radial-gradient(6px 8px at 300px 250px,#fef3c7 60%,transparent),radial-gradient(6px 8px at 200px 360px,#ddd6fe 60%,transparent)}
@keyframes fx-fall-220{to{transform:translate3d(0,220px,0)}}
@keyframes fx-fall-260{to{transform:translate3d(0,260px,0)}}
@keyframes fx-fall-360{to{transform:translate3d(0,360px,0)}}
@keyframes fx-fall-400{to{transform:translate3d(0,400px,0)}}
.reduce-motion .season-fx::before,.reduce-motion .season-fx::after{animation:none}

/* ---------- Seasonal banner (top of the header) ---------- */
.season-bar{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;gap:.6rem;margin:-1rem 0 .8rem;padding:.5rem 2.8rem;
  font-size:.86rem;font-weight:700;line-height:1.35;text-align:center;background:var(--accent);color:var(--on-accent)}
.season-bar[hidden]{display:none}
.season-bar a{color:inherit;text-underline-offset:3px}
.season-bar-x{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);width:2rem;height:2rem;border:0;border-radius:8px;background:transparent;color:inherit;font:inherit;font-size:1.25rem;line-height:1;cursor:pointer;opacity:.75}
.season-bar-x:hover{opacity:1;background:rgba(0,0,0,.1)}
html[data-season="black-friday"] .season-bar{background:repeating-linear-gradient(-45deg,#ffd400 0 16px,#ffc400 16px 32px);color:#111;letter-spacing:.02em;text-transform:uppercase;font-size:.8rem}
html[data-season="christmas"] .season-bar{background:linear-gradient(90deg,#9f101c,#e23a48 50%,#9f101c);color:#fff}
html[data-season="easter"] .season-bar{background:linear-gradient(90deg,#fbcfe8,#fde68a 50%,#ddd6fe);color:#3b1d33}
@media(max-width:520px){.season-bar{font-size:.78rem;padding:.45rem 2.5rem .45rem .8rem}}