@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&family=Source+Sans+3:wght@400;600;700&display=swap');
/* ============================================================
   Tema "Södra" — som om Jakttornsritaren vore ett medlemsverktyg
   från Södra Skogsägarna. Endast palett & typografi; inga
   logotyper, ingen koppling till varumärket påstås.
   Karaktär: klar, kylig, mättad grön på nästan vita ytor,
   generös luft, skarpa linjer, lugnt & premium.
   ============================================================ */

/* ---- Tokens ------------------------------------------------ */
html[data-theme="sodra"]{
  --bg:#EDF1F2;            /* Södras ljusa gråblå yta */
  --panel:#FFFFFF;         /* kritvita kort — mer vitt än basens papper */
  --ink:#0D171A;           /* Södras nästan-svarta bläck */
  --mut:#4B5456;           /* dämpad gråblå text (7.8:1 på vitt) */
  --line:#D4D9DA;          /* svala, tunna linjer */
  --ntr:#008739;           /* Södragrönt — primär accent */
  --ntrdark:#00602A;       /* mörkgrön hover/aktiv text (7.8:1 på vitt) */
  --regel:#E7F3EB;         /* virke: ljusaste gröntonen */
  --trall:#CFE7D8;         /* virke: trallens grönton */
  --regeledge:#4F7A60;     /* virkeskontur, grågrön */
  --warn:#B33F27;          /* fördjupad korall — varning, 5.7:1 på vitt */
  --zone:#F4D9CE;          /* kulfångszon: ljus lertoning av korallen */
  --save:#006F85;          /* besparingar: Södra-petrol, tydligt skild från grönt */
  --wood:#35493F;          /* tornets virke, djup skogsgrå */
  --woodlight:#7C9486;     /* sekundära streck i ritningarna */
  --donefill:#9FD0B1;      /* klara kap — mellangrön, läses "klart" */
  --mono:'Manrope','IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'Source Sans 3','Source Sans Pro',system-ui,-apple-system,sans-serif;
}

/* ---- Sida & rubriker: bort med rutpapperet, in med luft ---- */
html[data-theme="sodra"] body{background-image:none}
html[data-theme="sodra"] header .fam{
  font-weight:800;letter-spacing:0.14em;text-transform:uppercase;color:var(--ntr)}
html[data-theme="sodra"] header h1{
  font-weight:800;letter-spacing:-0.02em;color:var(--ink)}
html[data-theme="sodra"] h2{font-weight:800;letter-spacing:-0.01em}
html[data-theme="sodra"] h3{
  font-weight:700;text-transform:uppercase;letter-spacing:0.08em}
html[data-theme="sodra"] .seglabel,
html[data-theme="sodra"] .minor div label{font-weight:600}

/* ---- Stegnavigering (mobil bottenlist + desktop topplist) -- */
html[data-theme="sodra"] nav#steps{
  background:var(--panel);
  box-shadow:0 -6px 20px rgba(13,23,26,.06)}
html[data-theme="sodra"] nav#steps button{font-weight:600}
html[data-theme="sodra"] nav#steps button b{font-weight:800}
html[data-theme="sodra"] nav#steps button[aria-current=true]{font-weight:800}
@media (min-width:820px){
  html[data-theme="sodra"] nav#steps{
    box-shadow:0 6px 20px rgba(13,23,26,.05)}
}

/* ---- Kort: vita, mjukt rundade, svävar knappt märkbart ----- */
html[data-theme="sodra"] .card{
  border-radius:14px;border-color:var(--line);
  box-shadow:0 1px 2px rgba(13,23,26,.05),0 8px 24px rgba(13,23,26,.04)}

/* ---- Segment, fält, chips ---------------------------------- */
html[data-theme="sodra"] .seg{border-radius:10px;background:#fff}
html[data-theme="sodra"] .seg button{font-weight:600}
html[data-theme="sodra"] .seg button[aria-pressed=true]{
  background:var(--ntr);color:#fff;font-weight:700}
html[data-theme="sodra"] .minor input{
  border-radius:10px;font-family:var(--mono);font-weight:600}
html[data-theme="sodra"] .sliderrow output{font-weight:800}
html[data-theme="sodra"] .chip{
  border-radius:10px;box-shadow:0 1px 2px rgba(13,23,26,.04)}
html[data-theme="sodra"] .chip b{font-weight:700}
html[data-theme="sodra"] .stocks label{border-radius:999px;font-weight:600}
html[data-theme="sodra"] .stocks label.on{
  background:var(--ntr);border-color:var(--ntr);font-weight:700}

/* ---- Knappar: gröna piller, tydlig hierarki ---------------- */
html[data-theme="sodra"] button.apply{
  border-radius:999px;border-color:var(--ntr);background:var(--ntr);
  font-weight:700;letter-spacing:0.01em;
  box-shadow:0 2px 8px rgba(0,135,57,.25)}
html[data-theme="sodra"] button.apply:hover{
  background:var(--ntrdark);border-color:var(--ntrdark)}
html[data-theme="sodra"] button.ghost{
  border-radius:999px;font-weight:700;border-color:#B9C2C4}
html[data-theme="sodra"] button.ghost:hover{
  border-color:var(--ntr);color:var(--ntrdark)}

/* ---- Tabeller & stora tal ---------------------------------- */
html[data-theme="sodra"] table{font-variant-numeric:tabular-nums}
html[data-theme="sodra"] th{
  font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:0.06em}
html[data-theme="sodra"] tr.now td{font-weight:700}
html[data-theme="sodra"] .big b{font-weight:800;letter-spacing:-0.01em}
html[data-theme="sodra"] .grand b{font-weight:800}
html[data-theme="sodra"] .grand .save,
html[data-theme="sodra"] .sugg .kr{font-weight:700}

/* ---- Kapguide & kapschema ---------------------------------- */
html[data-theme="sodra"] .cutcard .cutprog{
  font-weight:700;text-transform:uppercase;letter-spacing:0.08em;font-size:12px}
html[data-theme="sodra"] .plank .cap{font-weight:500}
html[data-theme="sodra"] .item .meta b{font-weight:700}

/* ---- Notiser & varningar ----------------------------------- */
html[data-theme="sodra"] .notice{
  background:#FBEFEC;border-radius:10px;border-color:#E7B3A6;font-weight:600}
html[data-theme="sodra"] .warnrow{font-weight:600}

/* ---- Monteringschecklista ---------------------------------- */
html[data-theme="sodra"] .asm > ol > li::before{
  border-radius:6px;border-color:#9AA6A2;border-width:1.5px}
html[data-theme="sodra"] .asm > ol > li.done::before{
  background:var(--ntr);border-color:var(--ntr)}

/* ---- Fot & temaväljare ------------------------------------- */
html[data-theme="sodra"] .foot{border-top-color:var(--line)}
html[data-theme="sodra"] details summary{font-weight:600}
html[data-theme="sodra"] .themebar .seg{background:#fff;border-radius:999px}
html[data-theme="sodra"] .themebar .seg button:first-child{border-radius:999px 0 0 999px}
html[data-theme="sodra"] .themebar .seg button:last-child{border-radius:0 999px 999px 0}

/* ============================================================
   Palett (token → hex) och källor
   --bg #EDF1F2 · --panel #FFFFFF · --ink #0D171A · --mut #4B5456
   --line #D4D9DA · --ntr #008739 · --ntrdark #00602A
   --regel #E7F3EB · --trall #CFE7D8 · --regeledge #4F7A60
   --warn #B33F27 (fördjupad ur Södras korall #E4624A)
   --zone #F4D9CE · --save #006F85 (ur Södras petrol #007A93)
   --wood #35493F · --woodlight #7C9486 · --donefill #9FD0B1
   Typografi: Manrope (rubriker/etiketter), Source Sans 3 (brödtext)
   Källor: sodra.com produktions-CSS (aug 2026) — varumärkesgrönt
   #008739 i logotyp-SVG:er; text #0D171A; dämpat #4B5456; ytor
   #EDF1F2; linjer #D4D9DA; korall #E4624A; gröna toner #E7F3EB,
   #CFE7D8, #9FD0B1; petrol #007A93; typsnitt Manrope + Source
   Sans Pro enligt @font-face/font-family i samma CSS.
   Kontrast (WCAG AA): mut/vitt 7.8:1, mut/bg 6.8:1, vitt/ntr
   4.6:1, ntrdark/vitt 7.8:1, warn/vitt 5.7:1, warn/bg 5.1:1,
   save/vitt 5.8:1, save/bg 5.4:1, warn/notisbakgrund 5.1:1.
   ============================================================ */