/* Färgteman för schemat. Kunden väljer färg, valet sätts som data-hvtheme på sidan.
   Varje tema har sex nyanser från ljusast (--c-1) till mörkast (--c-6). Steg som används
   ofta är ljusa och steg som används sällan är mörka:
     schampo --c-1, balsam --c-2, leave-in --c-3 (ljusa, mörk text)
     hårbotten --c-4, hårolja --c-5, hårmask --c-6 (mörka, vit text) */
[data-hvtheme="bla"]   {--c-1:#d4e2ec;--c-2:#a9c6dc;--c-3:#7fa6c4;--c-4:#3f6f95;--c-5:#2e5170;--c-6:#16202d;--c-ink:#16202d}
[data-hvtheme="rosa"]  {--c-1:#f8e1eb;--c-2:#efc2d5;--c-3:#da92b2;--c-4:#984068;--c-5:#7a2c52;--c-6:#351224;--c-ink:#351224}
[data-hvtheme="orange"]{--c-1:#fbe3cf;--c-2:#f4c7a0;--c-3:#e39c66;--c-4:#9f511e;--c-5:#843f14;--c-6:#331908;--c-ink:#331908}
[data-hvtheme="rod"]   {--c-1:#f9dcd9;--c-2:#efb6b1;--c-3:#dd837c;--c-4:#922d2d;--c-5:#762020;--c-6:#300b0b;--c-ink:#300b0b}
[data-hvtheme="gron"]  {--c-1:#dcece0;--c-2:#b4d5bd;--c-3:#82b28f;--c-4:#3b704d;--c-5:#2b5838;--c-6:#0f2317;--c-ink:#0f2317}

/* Vilken nyans varje steg får räknas fram per schema (--x-* och --t-*, se hvFreqCss):
   det som förekommer flest gånger i veckan blir ljusast. Utan uträkning gäller ordningen ovan. */
[data-hvtheme] .ev-sch{background:var(--x-sch,var(--c-1))!important}
[data-hvtheme] .ev-sch .st-t,[data-hvtheme] .ev-sch .st-n,[data-hvtheme] .st-legend .ev-sch{color:var(--t-sch,var(--c-ink))!important;opacity:1}
[data-hvtheme] .ev-sch .st-p{color:var(--t-sch,var(--c-ink))!important;opacity:.85}
[data-hvtheme] .ev-sch .st-w{color:var(--t-sch,var(--c-ink))!important;opacity:.75}
[data-hvtheme] .ev-bal{background:var(--x-bal,var(--c-2))!important}
[data-hvtheme] .ev-bal .st-t,[data-hvtheme] .ev-bal .st-n,[data-hvtheme] .st-legend .ev-bal{color:var(--t-bal,var(--c-ink))!important;opacity:1}
[data-hvtheme] .ev-bal .st-p{color:var(--t-bal,var(--c-ink))!important;opacity:.85}
[data-hvtheme] .ev-bal .st-w{color:var(--t-bal,var(--c-ink))!important;opacity:.75}
[data-hvtheme] .ev-li{background:var(--x-li,var(--c-3))!important}
[data-hvtheme] .ev-li .st-t,[data-hvtheme] .ev-li .st-n,[data-hvtheme] .st-legend .ev-li{color:var(--t-li,var(--c-ink))!important;opacity:1}
[data-hvtheme] .ev-li .st-p{color:var(--t-li,var(--c-ink))!important;opacity:.85}
[data-hvtheme] .ev-li .st-w{color:var(--t-li,var(--c-ink))!important;opacity:.75}
[data-hvtheme] .ev-hb{background:var(--x-hb,var(--c-4))!important}
[data-hvtheme] .ev-hb .st-t,[data-hvtheme] .ev-hb .st-n,[data-hvtheme] .st-legend .ev-hb{color:var(--t-hb,#fff)!important;opacity:1}
[data-hvtheme] .ev-hb .st-p{color:var(--t-hb,#fff)!important;opacity:.85}
[data-hvtheme] .ev-hb .st-w{color:var(--t-hb,#fff)!important;opacity:.75}
[data-hvtheme] .ev-olja{background:var(--x-olja,var(--c-5))!important}
[data-hvtheme] .ev-olja .st-t,[data-hvtheme] .ev-olja .st-n,[data-hvtheme] .st-legend .ev-olja{color:var(--t-olja,#fff)!important;opacity:1}
[data-hvtheme] .ev-olja .st-p{color:var(--t-olja,#fff)!important;opacity:.85}
[data-hvtheme] .ev-olja .st-w{color:var(--t-olja,#fff)!important;opacity:.75}
[data-hvtheme] .ev-mask{background:var(--x-mask,var(--c-6))!important}
[data-hvtheme] .ev-mask .st-t,[data-hvtheme] .ev-mask .st-n,[data-hvtheme] .st-legend .ev-mask{color:var(--t-mask,#fff)!important;opacity:1}
[data-hvtheme] .ev-mask .st-p{color:var(--t-mask,#fff)!important;opacity:.85}
[data-hvtheme] .ev-mask .st-w{color:var(--t-mask,#fff)!important;opacity:.75}
[data-hvtheme] .st-prods .dot{box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
[data-hvtheme] .st-train{background:var(--c-2)!important;color:var(--c-ink)!important;border-color:transparent!important}

/* färgväljaren: varje knapp visar temats mellannyans som en enda färg */
.hv-themes{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin:0 0 18px}
.hv-themes-l{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6);font-weight:600;margin-right:4px}
.hv-sw{width:30px;height:30px;border-radius:50%;border:2px solid transparent;padding:0;cursor:pointer;background:var(--c-3);outline-offset:2px;transition:transform .15s ease}
.hv-sw:hover{transform:scale(1.08)}
.hv-sw[aria-checked="true"]{border-color:#fff;box-shadow:0 0 0 2px #c9b98a}
.hv-sw:focus-visible{outline:2px solid #c9b98a}
@media(max-width:600px){.hv-sw{width:34px;height:34px}}