/* fotomagneter.se — temavarianter (laddas endast på /v/N) */
/* Variablerna sätts på html via :has så de ärvs överallt inkl. html-bakgrunden */

/* 1 · Solvarm — Fraunces serif, terrakotta & grädde */
html:has(body[data-theme="1"]){
  --purple:#D96B43;--purple-deep:#C25832;--purple-tint:#F4DFCF;
  --ink:#33291F;--soft:#7A6E5F;--line:#EADBC8;
  --bg:#FAF3EA;--grad-top:#F5E2D0;--grad-mid:#F8ECDD;--footer-bg:#2A1F15;
  --nav-bg:rgba(250,243,234,.65);--pill-bg:rgba(250,243,234,.92);
  --fd:"Fraunces";--fb:"Nunito Sans";
}

/* 2 · Skog — Lora serif, djupgrönt & sand */
html:has(body[data-theme="2"]){
  --purple:#2F6B4F;--purple-deep:#275C43;--purple-tint:#DEEAE2;
  --ink:#1E3D2F;--soft:#5F7468;--line:#D9E3DA;
  --bg:#F4F2EA;--grad-top:#E2EBDE;--grad-mid:#EDF1E7;--footer-bg:#122B20;
  --nav-bg:rgba(244,242,234,.65);--pill-bg:rgba(244,242,234,.92);
  --fd:"Lora";--fb:"Inter";
}

/* 3 · Lekfull — Baloo 2 rundad, korall & rosa */
html:has(body[data-theme="3"]){
  --purple:#F4536E;--purple-deep:#DC3D58;--purple-tint:#FFD9E0;
  --ink:#33223A;--soft:#84687D;--line:#F4D7DD;
  --bg:#FFF4F6;--grad-top:#FFE0E6;--grad-mid:#FFECEF;--footer-bg:#3A1B2A;
  --nav-bg:rgba(255,244,246,.65);--pill-bg:rgba(255,244,246,.92);
  --fd:"Baloo 2";--fb:"Nunito";
}

/* 4 · Studio — Space Grotesk, svartvitt redaktionellt */
html:has(body[data-theme="4"]){
  --purple:#101010;--purple-deep:#000000;--purple-tint:#F0F0F0;
  --ink:#101010;--soft:#5A5A5A;--line:#E6E6E6;
  --bg:#FFFFFF;--grad-top:#F2F2F2;--grad-mid:#F9F9F9;--footer-bg:#0B0B0B;
  --nav-bg:rgba(255,255,255,.65);--pill-bg:rgba(255,255,255,.94);
  --fd:"Space Grotesk";--fb:"Inter";
}

/* 5 · Himmel — Outfit, mjuk blå & persika-detalj */
html:has(body[data-theme="5"]){
  --purple:#3563C9;--purple-deep:#2B52AC;--purple-tint:#DFE9FB;
  --ink:#1E2C4A;--soft:#5E6C8C;--line:#DCE4F4;
  --bg:#F6F9FE;--grad-top:#DCE7FB;--grad-mid:#EAF1FC;--footer-bg:#101D38;
  --nav-bg:rgba(246,249,254,.65);--pill-bg:rgba(246,249,254,.92);
  --fd:"Outfit";--fb:"Karla";
}

/* 6 · Retro — Young Serif, bränd orange & smör */
html:has(body[data-theme="6"]){
  --purple:#C75B23;--purple-deep:#B04E1C;--purple-tint:#EFDDB4;
  --ink:#3B2A18;--soft:#7E6A4F;--line:#E8D7B0;
  --bg:#F9F0DA;--grad-top:#F3E2BD;--grad-mid:#F6E9CC;--footer-bg:#2E2012;
  --nav-bg:rgba(249,240,218,.65);--pill-bg:rgba(249,240,218,.92);
  --fd:"Young Serif";--fb:"Work Sans";
}

/* 7 · Bär — Lora serif, plommon & rosa */
html:has(body[data-theme="7"]){
  --purple:#B42A63;--purple-deep:#9C2052;--purple-tint:#F4D8E4;
  --ink:#441531;--soft:#7E5469;--line:#EFD3DF;
  --bg:#FCF2F7;--grad-top:#F8DEEA;--grad-mid:#FAE8F0;--footer-bg:#320E22;
  --nav-bg:rgba(252,242,247,.65);--pill-bg:rgba(252,242,247,.92);
  --fd:"Lora";--fb:"Nunito Sans";
}

/* 8 · Lagun — Fraunces serif, djup teal & mint */
html:has(body[data-theme="8"]){
  --purple:#0F766E;--purple-deep:#0B5F58;--purple-tint:#D5EBE7;
  --ink:#143936;--soft:#54716D;--line:#D3E5E1;
  --bg:#F0F7F5;--grad-top:#D8ECE8;--grad-mid:#E4F1ED;--footer-bg:#0B2826;
  --nav-bg:rgba(240,247,245,.65);--pill-bg:rgba(240,247,245,.92);
  --fd:"Fraunces";--fb:"Inter";
}

/* 9 · Sand — Outfit, varm minimal greige */
html:has(body[data-theme="9"]){
  --purple:#8A6F4F;--purple-deep:#75603F;--purple-tint:#E9E2D6;
  --ink:#2B2926;--soft:#6E675C;--line:#E2DCD1;
  --bg:#F5F2ED;--grad-top:#ECE6DC;--grad-mid:#F1ECE4;--footer-bg:#211D18;
  --nav-bg:rgba(245,242,237,.65);--pill-bg:rgba(245,242,237,.92);
  --fd:"Outfit";--fb:"Work Sans";
}

/* 10 · Elektrisk — Space Grotesk, kylig indigo (modern tolkning av nuvarande) */
html:has(body[data-theme="10"]){
  --purple:#5A4BFF;--purple-deep:#4636E8;--purple-tint:#E3E1FC;
  --ink:#232946;--soft:#62688A;--line:#E0E2F0;
  --bg:#F5F6FA;--grad-top:#E2E4F7;--grad-mid:#EDEFF9;--footer-bg:#161A33;
  --nav-bg:rgba(245,246,250,.65);--pill-bg:rgba(245,246,250,.92);
  --fd:"Space Grotesk";--fb:"Karla";
}

/* Variantväljare — liten rad längst ner så ni kan hoppa mellan varianter */
body[data-theme]::after{content:"";display:block}
.theme-switch{position:fixed;left:50%;transform:translateX(-50%);bottom:10px;z-index:90;background:rgba(20,18,40,.82);backdrop-filter:blur(10px);border-radius:999px;padding:7px 11px;display:flex;gap:5px;box-shadow:0 8px 26px rgba(0,0,0,.3)}
.theme-switch a{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font:600 12.5px system-ui;text-decoration:none;opacity:.65}
.theme-switch a:hover{opacity:1}
.theme-switch{max-width:calc(100vw - 24px);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.theme-switch::-webkit-scrollbar{display:none}
.theme-switch a{flex:none}
.theme-switch a.on{background:#fff;color:#111;opacity:1}

/* 11 · Himmelrike — helblå sida, vit typografi rakt igenom (Auragate) */
html:has(body[data-theme="11"]){
  --purple:#1F74CC;--purple-deep:#175FA9;--purple-tint:rgba(255,255,255,.12);
  --ink:#FFFFFF;--soft:rgba(255,255,255,.84);--line:rgba(255,255,255,.32);
  --bg:#4FA8F2;--grad-top:#3796EC;--grad-mid:#46A1EF;--footer-bg:#0E2C52;
  --nav-bg:rgba(55,150,236,.45);--pill-bg:rgba(255,255,255,.95);--menu-bg:rgba(40,130,220,.97);
  --fd:"Manrope";--fb:"Manrope";
}

/* Vita ytor: om-scopa variablerna så texten där blir mörk igen */
body[data-theme="11"] .step,
body[data-theme="11"] .mslot,
body[data-theme="11"] .modal,
body[data-theme="11"] .modal-card,
body[data-theme="11"] .occ,
body[data-theme="11"] .faq-item,
body[data-theme="11"] .orderbar .inner{
  --ink:#15324F;--soft:#4F718F;--line:#E3EEF9;--bg:#F3F9FF;
  color:#15324F;
}
body[data-theme="11"] .step{border-color:#E3EEF9}
body[data-theme="11"] .step p{color:#4F718F}
/* Occasions + FAQ: vita kort i den blå zonen */
body[data-theme="11"] .occ,
body[data-theme="11"] .faq-item{border-color:#E3EEF9}
body[data-theme="11"] .occ h3{color:#15324F}
body[data-theme="11"] .occ p,
body[data-theme="11"] .faq-item .faq-a{color:#4F718F}
body[data-theme="11"] .occ-ic{background:#EAF4FF;color:#1F74CC}
body[data-theme="11"] .faq-item summary{color:#15324F}
body[data-theme="11"] .faq-item summary::after{border-color:#1F74CC}
body[data-theme="11"] .faq{background:transparent}
body[data-theme="11"] .occasions .eyebrow,
body[data-theme="11"] .faq .eyebrow{color:#fff;opacity:.92}
body[data-theme="11"] .occasions h2,
body[data-theme="11"] .faq h2{color:#fff}
body[data-theme="11"] .occasions .lede{color:rgba(255,255,255,.9)}
body[data-theme="11"] .occasions .price{color:rgba(255,255,255,.9)}
body[data-theme="11"] .occasions .price b{color:#fff}
body[data-theme="11"] .mslot .plus{color:#3C5A78}

/* Vit typografi i den blå zonen */
body[data-theme="11"] .logo .lt,
body[data-theme="11"] .logo .lt span{color:#fff}
body[data-theme="11"] .logo .mark{fill:#fff}
body[data-theme="11"] .nav-toggle span{background:#fff}
body[data-theme="11"] .nav-links a{color:#fff}
body[data-theme="11"] .eyebrow{color:#fff;opacity:.92}
body[data-theme="11"] .hero h1{color:#fff;text-shadow:0 2px 24px rgba(15,70,140,.28)}
body[data-theme="11"] .u svg path{stroke:#fff}
body[data-theme="11"] .hero .sub{color:#fff;opacity:.9}
body[data-theme="11"] .cfg-counter{color:rgba(255,255,255,.92)}
body[data-theme="11"] .cprice{color:#fff;text-shadow:0 2px 20px rgba(15,70,140,.3)}
body[data-theme="11"] .cprice .ff{color:#fff;opacity:.95}
body[data-theme="11"] .cdot{background:rgba(255,255,255,.45)}
body[data-theme="11"] .cdot.fill{background:rgba(255,255,255,.78)}
body[data-theme="11"] .cdot.cur{background:#fff}

/* Sektioner på blå botten */
body[data-theme="11"] section.tint{background:rgba(255,255,255,.1)}
body[data-theme="11"] .ui{background:rgba(255,255,255,.18);color:#fff}
body[data-theme="11"] .band .btn{background:#fff;color:#1F74CC}
body[data-theme="11"] .band .btn:hover{background:#EAF4FE}

/* Mjuka, diffusa moln (blurrad gradientmatta) */
body[data-theme="11"] .top-grad{position:relative}
body[data-theme="11"] .top-grad::before{
  content:"";position:absolute;inset:0;pointer-events:none;filter:blur(26px);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 72%,transparent 95%);
  mask-image:linear-gradient(180deg,#000 0%,#000 72%,transparent 95%);
  background:
    radial-gradient(420px 170px at 10% 12%, rgba(255,255,255,.85), transparent 70%),
    radial-gradient(520px 200px at 92% 8%, rgba(255,255,255,.75), transparent 72%),
    radial-gradient(380px 150px at 80% 38%, rgba(255,255,255,.55), transparent 72%),
    radial-gradient(460px 180px at 5% 52%, rgba(255,255,255,.5), transparent 74%),
    radial-gradient(560px 220px at 50% 88%, rgba(255,255,255,.65), transparent 75%);
}
body[data-theme="11"] .hero-wrap,
body[data-theme="11"] .cfg{position:relative;z-index:1}

/* Himmelska glödande kort */
body[data-theme="11"] .mslot{
  border-radius:26px;
  box-shadow:0 0 0 1px rgba(255,255,255,.55), 0 0 70px rgba(255,255,255,.5), 0 34px 90px rgba(15,70,140,.35);
}
body[data-theme="11"] .mslot.empty{background:rgba(255,255,255,.92)}
body[data-theme="11"] .mslot.center{background:#fff}
body[data-theme="11"] .mslot.empty::before{border-color:rgba(255,255,255,.85);inset:14px;border-radius:18px}


/* ============ MP156-paletten (Alex Cristache) ============ */

/* 12 · Persika — ljus gräddvit med carmine/persika */
html:has(body[data-theme="12"]){
  --purple:#7A5063;--purple-deep:#5E3C4D;--purple-tint:#F9E4D6;
  --ink:#4A2C3F;--soft:#8A6B79;--line:#EBDCD2;
  --bg:#FAEFE9;--grad-top:#F6E3D4;--grad-mid:#F9EAE0;--footer-bg:#4A2C3F;
  --nav-bg:rgba(250,239,233,.82);--pill-bg:rgba(255,255,255,.95);
  --fd:"Fraunces";--fb:"Inter";
}
body[data-theme="12"] .u svg path{stroke:#F4A384}
body[data-theme="12"] .btn{box-shadow:0 8px 20px rgba(122,80,99,.28)}
body[data-theme="12"] .step .n{background:#F4A384;color:#4A2C3F}
body[data-theme="12"] .cdot.fill{background:#F4A384}
body[data-theme="12"] .cdot.cur{background:#7A5063}

/* 13 · Plommon — mörk obsidian-plommon med persika-accent */
html:has(body[data-theme="13"]){
  --purple:#F4A384;--purple-deep:#E98F6C;--purple-tint:rgba(244,163,132,.14);
  --ink:#FAEFE9;--soft:rgba(250,239,233,.78);--line:rgba(250,239,233,.25);
  --bg:#4A2C3F;--grad-top:#3C2233;--grad-mid:#443039;--footer-bg:#2E1A27;
  --nav-bg:rgba(74,44,63,.72);--pill-bg:rgba(255,250,246,.96);--menu-bg:rgba(60,34,51,.97);
  --fd:"Fraunces";--fb:"Work Sans";
}
body[data-theme="13"] .step,
body[data-theme="13"] .mslot,
body[data-theme="13"] .modal,
body[data-theme="13"] .modal-card,
body[data-theme="13"] .orderbar .inner{
  --ink:#4A2C3F;--soft:#7A5063;--line:#F0E0DA;--bg:#FAF3EE;
  color:#4A2C3F;
}
body[data-theme="13"] .step{border-color:#F0E0DA}
body[data-theme="13"] .step p{color:#7A5063}
body[data-theme="13"] .mslot .plus{color:#7A5063}
body[data-theme="13"] .btn{color:#4A2C3F;box-shadow:0 8px 22px rgba(0,0,0,.3)}
body[data-theme="13"] .step .n{color:#4A2C3F}
body[data-theme="13"] section.tint{background:rgba(255,255,255,.06)}
body[data-theme="13"] .ui{background:rgba(244,163,132,.18);color:#F4A384}
body[data-theme="13"] .cdot{background:rgba(250,239,233,.3)}
body[data-theme="13"] .cdot.fill{background:rgba(244,163,132,.85)}
body[data-theme="13"] .cdot.cur{background:#F4A384}
body[data-theme="13"] .mslot{box-shadow:0 0 0 1px rgba(250,239,233,.18), 0 30px 70px rgba(0,0,0,.45)}

/* 14 · Skymning — onion white med blue loneliness */
html:has(body[data-theme="14"]){
  --purple:#486D83;--purple-deep:#38576A;--purple-tint:#F6E7DA;
  --ink:#2C3A45;--soft:#6B7B87;--line:#DCD2C2;
  --bg:#F2EBDD;--grad-top:#E2D5C2;--grad-mid:#ECE2D1;--footer-bg:#2C3A45;
  --nav-bg:rgba(242,235,221,.82);--pill-bg:rgba(255,255,255,.95);
  --fd:"Lora";--fb:"Work Sans";
}
body[data-theme="14"] .u svg path{stroke:#F4A384}
body[data-theme="14"] .btn{box-shadow:0 8px 20px rgba(72,109,131,.3)}
body[data-theme="14"] .step .n{background:#486D83}
body[data-theme="14"] .cdot.fill{background:#F4A384}
body[data-theme="14"] .cdot.cur{background:#486D83}
body[data-theme="14"] .ui{background:rgba(72,109,131,.12);color:#486D83}

/* ============ Kooauro-paletterna ============ */

/* 15 · Tomat — light cream + vivid orange red */
html:has(body[data-theme="15"]){
  --purple:#FF5B32;--purple-deep:#E04A24;--purple-tint:#FFE3D2;
  --ink:#3A2218;--soft:#8A6A58;--line:#F0DEC0;
  --bg:#FFF2CF;--grad-top:#FFE9B5;--grad-mid:#FFEEC4;--footer-bg:#3A2218;
  --nav-bg:rgba(255,242,207,.85);--pill-bg:rgba(255,255,255,.95);
  --fd:"Outfit";--fb:"Work Sans";
}
body[data-theme="15"] .cdot.fill{background:#FFB496}
body[data-theme="15"] .cdot.cur{background:#FF5B32}

/* 16 · Kunglig — deep royal purple + soft snow white (mörk) */
html:has(body[data-theme="16"]){
  --purple:#FFFBFF;--purple-deep:#EFE4F7;--purple-tint:rgba(255,251,255,.1);
  --ink:#FFFBFF;--soft:rgba(255,251,255,.78);--line:rgba(255,251,255,.24);
  --bg:#460B6A;--grad-top:#380856;--grad-mid:#400A62;--footer-bg:#2B0741;
  --nav-bg:rgba(70,11,106,.75);--pill-bg:rgba(255,251,255,.96);--menu-bg:rgba(56,8,86,.97);
  --fd:"Fraunces";--fb:"Inter";
}
body[data-theme="16"] .step,
body[data-theme="16"] .mslot,
body[data-theme="16"] .modal,
body[data-theme="16"] .modal-card,
body[data-theme="16"] .orderbar .inner{
  --ink:#3A1057;--soft:#7A5C99;--line:#EFE6F8;--bg:#FAF6FF;color:#3A1057;
}
body[data-theme="16"] .step{border-color:#EFE6F8}
body[data-theme="16"] .step p{color:#7A5C99}
body[data-theme="16"] .mslot .plus{color:#7A5C99}
body[data-theme="16"] .btn{color:#460B6A;box-shadow:0 8px 22px rgba(0,0,0,.35)}
body[data-theme="16"] .step .n{color:#460B6A}
body[data-theme="16"] section.tint{background:rgba(255,255,255,.06)}
body[data-theme="16"] .ui{background:rgba(255,251,255,.14);color:#FFFBFF}
body[data-theme="16"] .cdot{background:rgba(255,251,255,.3)}
body[data-theme="16"] .cdot.fill{background:rgba(255,251,255,.7)}
body[data-theme="16"] .cdot.cur{background:#FFFBFF}
body[data-theme="16"] .mslot{box-shadow:0 0 0 1px rgba(255,251,255,.18), 0 30px 70px rgba(0,0,0,.5)}

/* 17 · Lime — charcoal black + neon lime (mörk) */
html:has(body[data-theme="17"]){
  --purple:#AEFF46;--purple-deep:#94E62E;--purple-tint:rgba(174,255,70,.08);
  --ink:#F5F5F0;--soft:rgba(245,245,240,.72);--line:rgba(255,255,255,.16);
  --bg:#212121;--grad-top:#181818;--grad-mid:#1D1D1D;--footer-bg:#101010;
  --nav-bg:rgba(24,24,24,.78);--pill-bg:rgba(250,250,246,.97);--menu-bg:rgba(20,20,20,.97);
  --fd:"Space Grotesk";--fb:"Karla";
}
body[data-theme="17"] .step,
body[data-theme="17"] .mslot,
body[data-theme="17"] .modal,
body[data-theme="17"] .modal-card,
body[data-theme="17"] .orderbar .inner{
  --ink:#212121;--soft:#5A5A52;--line:#ECECE2;--bg:#FAFAF5;color:#212121;
}
body[data-theme="17"] .step{border-color:#ECECE2}
body[data-theme="17"] .step p{color:#5A5A52}
body[data-theme="17"] .mslot .plus{color:#5A5A52}
body[data-theme="17"] .btn{color:#212121;box-shadow:0 8px 24px rgba(174,255,70,.25)}
body[data-theme="17"] .step .n{color:#212121}
body[data-theme="17"] section.tint{background:rgba(174,255,70,.06)}
body[data-theme="17"] .ui{background:rgba(174,255,70,.14);color:#AEFF46}
body[data-theme="17"] .cdot{background:rgba(245,245,240,.25)}
body[data-theme="17"] .cdot.fill{background:rgba(174,255,70,.7)}
body[data-theme="17"] .cdot.cur{background:#AEFF46}
body[data-theme="17"] .mslot{box-shadow:0 0 0 1px rgba(174,255,70,.22), 0 30px 70px rgba(0,0,0,.6)}

/* 18 · Guldgul — golden yellow + deep burgundy brown */
html:has(body[data-theme="18"]){
  --purple:#571F1A;--purple-deep:#3F1512;--purple-tint:rgba(255,255,255,.26);
  --ink:#571F1A;--soft:#7A4038;--line:rgba(87,31,26,.22);
  --bg:#FFBE00;--grad-top:#F2B000;--grad-mid:#FFB900;--footer-bg:#571F1A;
  --nav-bg:rgba(255,190,0,.85);--pill-bg:rgba(255,255,255,.95);
  --fd:"Baloo 2";--fb:"Nunito";
}
body[data-theme="18"] .step,
body[data-theme="18"] .mslot,
body[data-theme="18"] .modal,
body[data-theme="18"] .modal-card,
body[data-theme="18"] .orderbar .inner{
  --line:#F0E4D2;--bg:#FFF8EA;
}
body[data-theme="18"] .ui{background:rgba(255,255,255,.32);color:#571F1A}
body[data-theme="18"] .cdot{background:rgba(87,31,26,.3)}
body[data-theme="18"] .cdot.fill{background:rgba(87,31,26,.6)}
body[data-theme="18"] .cdot.cur{background:#571F1A}
body[data-theme="18"] .mslot{box-shadow:0 0 0 1px rgba(87,31,26,.12), 0 26px 60px rgba(87,31,26,.3)}

/* 19 · Royalblå — royal blue + sky blue (mörk) */
html:has(body[data-theme="19"]){
  --purple:#9FE4FB;--purple-deep:#7FD6F5;--purple-tint:rgba(159,228,251,.12);
  --ink:#F4FAFF;--soft:rgba(244,250,255,.8);--line:rgba(255,255,255,.26);
  --bg:#1359B9;--grad-top:#0E4CA3;--grad-mid:#1153AF;--footer-bg:#0A3270;
  --nav-bg:rgba(14,76,163,.75);--pill-bg:rgba(255,255,255,.96);--menu-bg:rgba(13,72,155,.97);
  --fd:"Outfit";--fb:"Inter";
}
body[data-theme="19"] .step,
body[data-theme="19"] .mslot,
body[data-theme="19"] .modal,
body[data-theme="19"] .modal-card,
body[data-theme="19"] .orderbar .inner{
  --ink:#12366B;--soft:#4D6B95;--line:#E1ECF9;--bg:#F4F9FF;color:#12366B;
}
body[data-theme="19"] .step{border-color:#E1ECF9}
body[data-theme="19"] .step p{color:#4D6B95}
body[data-theme="19"] .mslot .plus{color:#4D6B95}
body[data-theme="19"] .btn{color:#0E4CA3;box-shadow:0 8px 22px rgba(0,0,0,.3)}
body[data-theme="19"] .step .n{color:#0E4CA3}
body[data-theme="19"] section.tint{background:rgba(255,255,255,.08)}
body[data-theme="19"] .ui{background:rgba(159,228,251,.18);color:#9FE4FB}
body[data-theme="19"] .cdot{background:rgba(244,250,255,.3)}
body[data-theme="19"] .cdot.fill{background:rgba(159,228,251,.75)}
body[data-theme="19"] .cdot.cur{background:#9FE4FB}
body[data-theme="19"] .mslot{box-shadow:0 0 0 1px rgba(159,228,251,.25), 0 30px 70px rgba(6,40,90,.55)}