@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Mulish:wght@400;600;700;800&display=swap');
/* ==========================================================================
   Tema "Byggmax" — bygg billigt-energi: signalgult, mörk marin, rött & boxigt.
   Endast palett & typografi som inspiration — inga logotyper, ingen koppling.
   Aktiveras enbart via html[data-theme="byggmax"].
   ========================================================================== */

html[data-theme="byggmax"]{
  /* Brandpalett (härledd ur byggmax.se, se källblock sist i filen) */
  --bm-yellow:#FFE632;      /* signalgul — vald/aktiv yta, alltid med mörk text */
  --bm-yellow-soft:#FFF6C8; /* blek gul — virke/zoner */
  --bm-red:#CC001B;         /* rött — varningar (AA på bg, panel och #fff) */
  --bm-dark:#11151D;        /* mörk marin — primäraccent, text, nav */
  --bm-pine:#2D2A25;        /* varmsvart — ritningens virke */
  --bm-green:#30814B;       /* grönt — besparingar/OK */
  --bm-head:'Archivo Black','Mulish',system-ui,sans-serif;

  /* Apptokens */
  --bg:#F1F1F1; --panel:#FFFFFF; --ink:#11151D; --mut:#52504E;
  --line:#E0E0E0; --ntr:#11151D; --ntrdark:#000000;
  --regel:#FFF6C8; --regeledge:#6E6C6A; --trall:#FFE98A;
  --warn:#CC001B; --zone:#FFEFAF; --save:#30814B;
  --wood:#2D2A25; --woodlight:#6E6C6A; --donefill:#E0E0E0;
  --sans:'Mulish',system-ui,-apple-system,sans-serif;
  --mono:'Mulish',system-ui,-apple-system,sans-serif;
}

/* Platt, ren butiksyta — bort med rutnätspapperet */
html[data-theme="byggmax"] body{background-image:none}

/* Sidhuvud: ropande kicker + rubrik på gul list */
html[data-theme="byggmax"] header .fam{color:var(--bm-red);font-weight:800;text-transform:uppercase;letter-spacing:1px}
html[data-theme="byggmax"] header h1{font-family:var(--bm-head);font-weight:400;text-transform:uppercase;
  letter-spacing:.5px;border-bottom:6px solid var(--bm-yellow);padding-bottom:3px}

/* Stegnavigering: mörk list, gult aktivt steg (mobil bottenlist) */
html[data-theme="byggmax"] nav#steps{background:var(--bm-dark);border-top-color:var(--bm-dark)}
html[data-theme="byggmax"] nav#steps button{color:#C9C9C6;text-transform:uppercase;letter-spacing:.4px}
html[data-theme="byggmax"] nav#steps button[aria-current=true]{color:var(--bm-yellow);border-top-color:var(--bm-yellow)}
/* …och desktopvarianten (klistrad topplist med underkantsmarkering) */
@media (min-width:820px){
  html[data-theme="byggmax"] nav#steps{border-bottom-color:var(--bm-dark)}
  html[data-theme="byggmax"] nav#steps button[aria-current=true]{border-bottom-color:var(--bm-yellow)}
}

/* Kort & paneler: boxigt, nästan orundat */
html[data-theme="byggmax"] .card{border-radius:3px;box-shadow:0 1px 0 rgba(17,21,29,.08)}
html[data-theme="byggmax"] .notice{border-radius:3px;border-width:2px;font-weight:700}

/* Rubriker: chunkigt och versalt */
html[data-theme="byggmax"] h2{font-family:var(--bm-head);font-weight:400;text-transform:uppercase;letter-spacing:.4px}
html[data-theme="byggmax"] h3{text-transform:uppercase;letter-spacing:.8px;font-weight:800}
html[data-theme="byggmax"] .seglabel,
html[data-theme="byggmax"] .minor div label{text-transform:uppercase;letter-spacing:.5px;font-weight:700}

/* Reglage & inmatning */
html[data-theme="byggmax"] input[type=range]{accent-color:var(--bm-red)}
html[data-theme="byggmax"] .sliderrow output{font-weight:800}
html[data-theme="byggmax"] .minor input{border-radius:3px}

/* Segmentknappar: vald = signalgul platta med MÖRK text (aldrig vit på gult) */
html[data-theme="byggmax"] .seg{border-radius:3px}
html[data-theme="byggmax"] .seg button[aria-pressed=true]{background:var(--bm-yellow);color:var(--bm-dark);font-weight:800}

/* Lagerlängder: valda längder som gula prislappar */
html[data-theme="byggmax"] .stocks label{border-radius:3px}
html[data-theme="byggmax"] .stocks label.on{background:var(--bm-yellow);border-color:var(--bm-dark);color:var(--bm-dark);font-weight:800}

/* Knappar: gul kampanjknapp med mörk text; inverterar vid hover */
html[data-theme="byggmax"] button.apply{background:var(--bm-yellow);border-color:var(--bm-dark);color:var(--bm-dark);
  border-radius:3px;font-weight:800;text-transform:uppercase;letter-spacing:.3px}
html[data-theme="byggmax"] button.apply:hover{background:var(--bm-dark);color:#fff}
html[data-theme="byggmax"] button.ghost{border-radius:3px;font-weight:700}

/* Chips: boxiga; OK-chip blir gröna (rött reserveras för varningar) */
html[data-theme="byggmax"] .chip{border-radius:3px}
html[data-theme="byggmax"] .chip.okon{border-color:var(--bm-green)}
html[data-theme="byggmax"] .chip.okon b{color:var(--bm-green)}

/* Hjältesiffran (krävd golvhöjd) som gul prisplansch */
html[data-theme="byggmax"] .big span{text-transform:uppercase;letter-spacing:.6px;font-weight:700}
html[data-theme="byggmax"] .big b{font-family:var(--bm-head);font-weight:400;background:var(--bm-yellow);padding:2px 12px}

/* Tabellen golvhöjd/avstånd: aktuell rad = gul markering, siffror i jämn bredd */
html[data-theme="byggmax"] table{font-variant-numeric:tabular-nums}
html[data-theme="byggmax"] th{text-transform:uppercase;letter-spacing:.5px}
html[data-theme="byggmax"] tr.now td{background:var(--bm-yellow);color:var(--bm-dark);font-weight:800;border-bottom-color:var(--bm-dark)}

/* Summan i inköpslistan: totalpris på gul lapp, besparing i grönt */
html[data-theme="byggmax"] .grand b{font-family:var(--bm-head);font-weight:400;background:var(--bm-yellow);padding:1px 8px}
html[data-theme="byggmax"] .grand .save{font-weight:800}
html[data-theme="byggmax"] .sugg .kr{font-weight:800}

/* Kapguiden */
html[data-theme="byggmax"] .cutcard .cutprog{text-transform:uppercase;letter-spacing:.5px;font-weight:700}

/* Monteringschecklistan: avbockat = gul ruta med mörk bock */
html[data-theme="byggmax"] .asm > ol > li::before{border-radius:2px;border-color:var(--bm-pine)}
html[data-theme="byggmax"] .asm > ol > li.done::before{background:var(--bm-yellow);border-color:var(--bm-dark);color:var(--bm-dark);font-weight:800}

/* Sidfot & temaväljare (ärver seg-stilen; aktivt tema blir gult automatiskt) */
html[data-theme="byggmax"] .foot{border-top:2px solid var(--bm-dark)}

/* ==========================================================================
   Vald palett (token → hex)
     --bg #F1F1F1 · --panel #FFFFFF · --ink #11151D · --mut #52504E
     --line #E0E0E0 · --ntr #11151D · --ntrdark #000000
     --regel #FFF6C8 · --trall #FFE98A · --regeledge #6E6C6A
     --warn #CC001B · --zone #FFEFAF · --save #30814B
     --wood #2D2A25 · --woodlight #6E6C6A · --donefill #E0E0E0
     Accent: signalgul #FFE632 — alltid med mörk text (#11151D), aldrig vit.
   Källor (aug 2026):
     byggmax.se produktions-CSS (frontend/Byggmax/hyva …/css/styles.css):
       bmx-yellow rgb(255,230,50)=#FFE632 · bmx-red rgb(204,0,27)=#CC001B
       (även #EB001E i kampanjytor) · bmx-dark rgb(17,21,29)=#11151D
       bmx-pine-tree rgb(45,42,37)=#2D2A25 · green-opal rgb(48,129,75)=#30814B
       gråskala #F1F1F1/#E0E0E0/#52504E · typsnitt: "Mikro" (eget, chunkigt)
       + Mulish (Google Fonts). Mikro ersätts här av Archivo Black.
   ========================================================================== */