/* ═══════════════════════════════════════════════════════════════════════
   tokens.css — HELA programmets färgsättning på ETT ställe.

   Beslut F4 (2026-08-14): hela programmet ska kunna färgsättas om på ett
   ställe, inte per vy. Före den här filen fanns 0 css-filer i repot, 15 av 15
   HTML-vyer bar ett eget <style>-block, 13 av dem upprepade nästan samma
   :root, och ~1 055 hexvärden låg utspridda. Den här filen är därför den ENDA
   platsen där ett hexvärde får stå. Ett prov (tests/tokens.test.mjs) räknar
   hexvärdena utanför den och går rött om talet ÖKAR.

   FYRA LAGER — hoppa aldrig över ett:
     1. Primitiver   råa värden ur Thiinks palett
     2. Semantiska   namngivna efter SYFTE (--bg-surface, --status-positive)
     3. Tema         light/dark
     4. Produkttema  [data-produkt] — löses vid ROTEN, aldrig i komponent-css

   TYPSNITT, TEXTSKALA OCH AVSTÅND bor här sedan 2026-09-30 (blocket före
   lager 1). Komponentlagret ovanpå står i public/komponenter.css.

   Regel: semantiska tokens för färg och skugga (de är tema- och
   produktmedvetna), primitiver för spacing och radie.

   PRODUKTTEMAT ÄR EN AFFÄRSREGEL, INTE EN SMAKFRÅGA (Magnus 2026-08-14):
   allt kunden möter är Home AI och går i grön skala; allt företagsinternt går
   i Enterprise blå. Kartan står i ARVSSKIKTET längst ned, vy för vy.

   ARVSSKIKTET är TILLFÄLLIGT. De 13 :root-blocken bar namn som --forest,
   --page, --card och --border, och de namnen används fortfarande av ~500
   css-regler ute i vyerna. Skiktet ger dem EXAKT dagens värden, så att
   flytten hit inte ändrar en enda pixel. Färgbytet sker sedan vy för vy
   (migrationens steg 3), och när en vys sista arvsnamn är borta försvinner
   dess data-arv-attribut. När attributet är borta ur alla vyer stryks hela
   skiktet — och först då är programmet fött på system.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ TYPSNITT, TEXTSKALA OCH AVSTÅND (2026-09-30) ═══════════════════════
   Färgerna fick ett ställe 14 aug (F4). Textstorlekar, avstånd och
   komponenter fick det inte, och därför såg sidorna inte ut som designerna.
   Mätt 30 sept: 28 olika textstorlekar i px i vyerna, råa hörnradier 2–24 px
   trots att --radius-* fanns, och PP Neue Montreal angiven i vyerna men
   aldrig laddad. Samma teknik som F4: system här, ett prov som förbjuder
   försämring (tests/tokens.test.mjs, DEL 8), sedan flytt vy för vy.

   TYPSNITTEN VÄRDAS HÄR, INTE HOS GOOGLE. Varje hämtning från Google Fonts
   skickar besökarens IP-adress till Google — en fråga tyska domstolar har
   prövat, och den hör till samma GDPR-arbete som resten av portalen.

   PP NEUE MONTREAL SERVERAS HÄRIFRÅN (del 2 av resan, Magnus 5 okt 2026).
   Thiink har webblicens; noteringen ligger bredvid filerna i public/fonts/
   (LICENS-PPNeueMontreal.txt). Bara Book (400) och Medium (500) — de två
   vikter designsystemet använder. BOOK TÄCKER 100–449 OCH MEDIUM 450–900
   MED FLIT: portalens
   vyer ber om 600 och 700 (--fw-semibold, --fw-bold), och med bara 500
   deklarerad hade webbläsaren ritat ett påhittat fetstil. Nu blir all
   halvfet och fet text Medium, som i Claude Design. Filerna är desamma som
   fördjupningsbilagan bakar in (server/modules/nulage/fordjupning/fonts/).

   INTER ÄR DEN SJÄLVVÄRDA RESERVEN. Fri licens (SIL OFL 1.1, public/fonts/
   OFL-Inter.txt), variabel vikt 100–900, ur @fontsource-variable/inter 5.3.0.
   Bara latin och latin-ext — svenska, tyska och €-tecknet ryms i latin.
   Familjen heter 'Inter' med flit: 18 av 21 vyer hämtade den 30 sept från
   fonts.googleapis.com, och när länken ströks ur dem (samma dag, Magnus
   beslut) fick de samma typsnitt härifrån i stället — utan att någon vy
   bytte utseende. Webbläsaren hämtar filen först när en sida använder Inter.
   Kvar hos Google: dokumenten som servern bygger (nulage, varmeoffert,
   paneldesignerns dokument) och skärmdumpskriptet — ett eget pass.
   ═══════════════════════════════════════════════════════════════════════ */
@font-face{
  font-family:'PP Neue Montreal'; font-style:normal; font-display:swap; font-weight:100 449;
  src:url(/fonts/PPNeueMontreal-Book.woff2) format('woff2');
}
@font-face{
  font-family:'PP Neue Montreal'; font-style:normal; font-display:swap; font-weight:450 900;
  src:url(/fonts/PPNeueMontreal-Medium.woff2) format('woff2');
}
@font-face{
  font-family:'Inter'; font-style:normal; font-display:swap; font-weight:100 900;
  src:url(/fonts/inter-latin-wght.woff2) format('woff2-variations'), url(/fonts/inter-latin-wght.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter'; font-style:normal; font-display:swap; font-weight:100 900;
  src:url(/fonts/inter-latin-ext-wght.woff2) format('woff2-variations'), url(/fonts/inter-latin-ext-wght.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
:root{
  /* Kedjorna. Display och brödtext är samma kedja i dag (Thiinks regel:
     PP Neue Montreal överallt, Inter som reserv) men skilda namn, så att en
     rubrikfamilj kan läggas till utan att någon vy ändras. */
  --font-display:'PP Neue Montreal','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-body:'PP Neue Montreal','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;

  /* TEXTSKALAN — åtta steg ur de 28 storlekar vyerna bar 30 sept.
     Varje storlek i bruk avrundas till NÄRMASTE steg; vid lika avstånd
     avgör rollen (en rubrik går uppåt, en etikett nedåt). Tabellen över
     alla 28 och deras steg står i tests/tokens.test.mjs (AVRUNDNING), och
     provet vaktar att ingen storlek hamnar längre bort än närmaste steg.
       steg   px   täcker (antal förekomster 30 sept)
       fs-1   10   7,5–10       (244)  överrubriker, kolumnrubriker, små etiketter
       fs-2   11   10,5–11      (241)  hjälptext, fältetiketter, knappar i verktygsrad
       fs-3   12   11,5–12      (205)  sekundär text, tabeller
       fs-4   13   12,5–13,5    (173)  brödtext i portalen
       fs-5   14   14–15         (69)  ingress, fältets värde
       fs-6   16   16–18         (28)  H3
       fs-7   20   19–22         (25)  H2
       fs-8   28   24–34         (12)  H1, stora belopp
     Px och inte rem med flit: vyerna är täta arbetsytor mätta i px, och
     ett byte till rem hade ändrat varje sida för den som har större
     standardtext. Den frågan är värd ett eget beslut. */
  --fs-1:10px; --fs-2:11px; --fs-3:12px; --fs-4:13px;
  --fs-5:14px; --fs-6:16px; --fs-7:20px; --fs-8:28px;

  /* ROLLERNA — skriv helst dessa. Ett steg säger hur stort, en roll säger
     varför, och rollen är det som går att flytta utan att leta igenom vyerna. */
  --fs-label:var(--fs-1);   /* överrubrik, kolumnrubrik, etikett ovanför ett värde */
  --fs-body:var(--fs-4);    /* brödtext */
  --fs-lead:var(--fs-5);    /* ingress, värdet i ett fält */
  --fs-h3:var(--fs-6);
  --fs-h2:var(--fs-7);
  --fs-h1:var(--fs-8);
  --fs-data:var(--fs-3);    /* siffror i tabeller — alltid med --num-data */
  --num-data:tabular-nums;  /* font-variant-numeric för sifferkolumner */

  --lh-tight:1.15;          /* stora tal och rubriker */
  --lh-snug:1.3;
  --lh-normal:1.5;          /* brödtext */
  --lh-relaxed:1.6;         /* längre förklaringar, notiser */

  --fw-regular:400;         /* Thiink: Book */
  --fw-medium:500;          /* länkar, knappar i Thiinks DS */
  --fw-semibold:600;        /* rubriker, överrubriker */
  --fw-bold:700;            /* portalens betoning; används i dag på knappar */

  --ls-normal:0;
  --ls-overline:.08em;      /* versala överrubriker */
  --ls-wide:.1em;

  /* AVSTÅNDSSKALAN — 4-pixelsraster. Stegen 1–9 PEKAR på de spacing-namn
     som redan fanns (Thiinks DS-namn), så att det bara finns ett värde per
     avstånd. Steg 10 (64) saknades och läggs här. --spacing-xx-big (28)
     ligger utanför skalan med flit: tio steg räcker. */
  --space-0:0;
  --space-1:var(--spacing-xx-sm);   /*  4 */
  --space-2:var(--spacing-x-sm);    /*  8 */
  --space-3:var(--spacing-sm);      /* 12 */
  --space-4:var(--spacing-md);      /* 16 */
  --space-5:var(--spacing-big);     /* 20 */
  --space-6:var(--spacing-x-big);   /* 24 */
  --space-7:var(--spacing-xxx-big); /* 32 */
  --space-8:var(--spacing-lg);      /* 40 */
  --space-9:var(--spacing-x-lg);    /* 48 */
  --space-10:64px;

  /* RADIERNA räcker som de är (--radius-sm 4 · md 8 · lg 12 i lager 1).
     Vyernas råa värden förs dit så här: 2–5 → sm, 6–10 → md, 11–14 → lg,
     16 och uppåt → xl eller full. 10 ligger mitt emellan och går till md,
     eftersom de flesta tior sitter på små knappar där 12 ser pösigt ut. */

  /* Linjer och kontroller. Komponentlagret får inte skriva ett enda rått
     värde, så även en ram på 1 px behöver ett namn. */
  --border-width-thin:1px;
  --border-width-thick:2px;
  --border-width-accent:3px;   /* notisens vänsterkant */
  --focus-ring-width:2px;
  --focus-ring-offset:2px;
  --control-h-sm:32px;         /* Thiinks knappstorlekar 48/40/32/24 */
  --control-h-md:40px;
  --control-h-lg:48px;
  --touch-min:44px;            /* minsta träffyta på mobil */
  --measure:68ch;              /* längsta läsbara radlängd för löptext */
  /* Skalets mått ur Claude Designs ritlapp, koncept 1a (2026-09-30). Hifi och
     slutliga enligt ritlappen, därför egna namn och inte närmaste steg. */
  --skal-meny:232px;           /* menyn utfälld (designen, steg 1b 6 okt) */
  --skal-rad:36px;             /* menyns rader: Idag, grupperna, Senaste */
  --skal-verktyg:34px;         /* Sök och + Ny i menyn */
  --skal-meny-infalld:84px;    /* menyn infälld, förval under 1360 px */
  --skal-huvud:56px;           /* sidhuvudets höjd */
  --skal-sok:520px;            /* sökfältet med utfälld meny */
  --skal-sok-infalld:420px;    /* sökfältet med infälld meny */
  --skal-traffar:680px;        /* sökträffarnas rullgardin */
  --skal-kommando:640px;       /* ⌘K-rutan */
  --skal-kommando-topp:110px;  /* ⌘K-rutans avstånd från toppen */
  --skal-hojd:100vh;           /* menyn står kvar medan sidan rullar */
  --skal-lager-max:92vw;       /* rullgardin och ⌘K på en smal skärm */
  --skal-lista-max:60vh;       /* ⌘K-listans höjd */
  --lager-huvud:40;            /* staplingen: sidhuvudet över innehållet, */
  /* Idag, kundsidan och fasremsan (pass 2) — mått ur ritlappen */
  --tillstand-prick:7px;       /* tillståndsetikettens punkt */
  --k-prick:currentColor;      /* punktens färg; varje tillstånd i komponenter.css sätter sin egen */
  --k-bg:transparent;          /* projektsidans tillståndsbakgrund (k-ton--*) */
  --k-fg:currentColor;         /* …och dess text */
  --fasremsa-kant:3px;         /* kompakta fasremsans överkant */
  --fasremsa-kant-stor:4px;    /* kundsidans fasremsa */
  --idag-kol-tid:52px;         /* Idags rad: tid */
  --idag-kol-tillstand:200px;  /* …tillstånd och tid stilla */
  --idag-kol-atgard:170px;     /* …huvudåtgärden */
  --idag-tal-min:132px;        /* summeringens knapp */
  --kund-sidokolumn:320px;     /* kundsidans högerspalt */
  /* Knappen Ny, gruppsidorna och Styrningens ingång (pass 3) — ur ritytorna 2f, 2g och 2w */
  --skal-nymeny:320px;         /* Mer ▾ och kundväljaren */
  --skal-fraga:440px;          /* frågan om ett pågående möte */
  --grupp-ruta-min:180px;      /* gruppsidans ruta, fyra i bredd vid 1440 */
  /* Idag och grupptabellen (säljplattformen steg 4, designens mått). */
  --idag-halsning-min:240px;
  --idag-kolumn-min:280px;
  --gtabell-kolumner:minmax(160px, 2fr) minmax(120px, 1.4fr) minmax(160px, 2fr) minmax(100px, 1fr) 72px;
  /* Projektsidan (säljplattformen steg 5, designens mått). */
  --projekt-kort-min:320px;    /* Översiktens och Platsbesökets kort */
  --projekt-lista-kolumner:minmax(120px, 1.4fr) minmax(160px, 2fr) auto;
  --projekt-lista-max:1000px;  /* listflikarna */
  --projekt-yta-max:1280px;    /* Översikten */
  --projekt-bild-min:180px;    /* bilder och ritningar, 4:3 */
  --projekt-matt-nyckel:140px; /* Mått och förutsättningar */
  --projekt-tid:64px;          /* Senaste aktivitet: tid */
  --projekt-stangd-max:420px;  /* den stängda flikens text */
  --projekt-stangd-ikon:40px;
  --projekt-flik:36px;         /* flikraden */
  /* Montörens mobilvy (Pass 1, 8 okt) — designens mått, 04 - Montörsapp.md. */
  --mobil-bottennav:48px;      /* bottennavens höjd */
  --mobil-lager:20;            /* bottennaven ligger över innehållet */
  --mobil-primar:52px;         /* primärknappen på telefonen */
  --mobil-rad-min:56px;        /* raderna under Kommande */
  --mobil-nar:72px;            /* kolumnen I morgon / Tor (designens 48 rymmer inte "I morgon" i 13 px) */
  --mobil-bock:26px;           /* Pass 2: kryssrutan i Före start och Kontroll (designens 26) */
  --mobil-rad-bock:52px;       /* Pass 2: raden med en kryssruta (designens 52) */
  --mobil-framsteg:6px;        /* Pass 2: egenkontrollens framstegsstapel (designens 6) */
  --mobil-vy-max:40rem;        /* Pass 2: Jobb och Kontroll står i en spalt också på dator */
  --mobil-signatur:120px;      /* Pass 3: kundens signaturyta (designens 120) */
  --mobil-signatur-penna:2px;  /* Pass 3: fingrets linje i signaturytan (läses av projektvy.js) */
  --projekt-bricka:28px;       /* fasbrickan och Tillbaka */
  --projekt-chip:24px;         /* fasremsans chip */
  --projekt-linje-min:8px;     /* linjen mellan två chip */
  --projekt-prick:6px;         /* listradens statusprick */
  --styrning-kort-min:200px;   /* Styrningens kort, fyra i bredd vid 1440 */
  --lager-meny:50;             /* menyn över sidhuvudet: dess rullgardiner räcker ut över innehållet */
  --lager-rullgardin:60;       /* rullgardinen över sidhuvudet */
  --lager-kommando:90;         /* och ⌘K över allt */
}

/* ═══ LAGER 1 — PRIMITIVER ═══════════════════════════════════════════════
   Bara värden som är VERIFIERADE ur Thiinks designsystem står här. Skalstegen
   50–900 finns i @thiink-llc/design-system men är inte publicerade i det
   underlag vi har, och en påhittad skala hade sett auktoritativ ut medan den
   var gissad — samma disciplin som "ingen kontrollsiffra kodas" för E-nummer.
   De grå steg som behövs för de semantiska namnen är AVLÄSTA UR REPOT och
   märkta så. Öppen punkt: hämta den riktiga skalan ur designsystemet.        */
:root{
  /* Thiink — verifierade */
  --earth-500:#144128;          /* Home AI primär, Forest Green */
  --grass-500:#CBFF9E;          /* Home AI accent, Bright Green */
  --water-500:#1D319C;          /* Enterprise primär, Deep Blue */
  --wind-500:#D2DFF3;           /* Enterprise accent, Light Blue */
  --fire-500:#FD7247;           /* Uppmärksamhet / varning */
  --red-500:#FD474A;            /* ENBART fel */
  --sand-4:#FFEDCC;             /* följeslagare till Fire */
  --thiink-black:#0B0B0B;
  --thiink-snow:#F5F5F5;
  --thiink-white:#FFFFFF;
  --thiink-grey:#797979;

  /* Grå steg — AVLÄSTA UR REPOT, ej verifierade mot designsystemet */
  --neutral-100:#F2F2F7;
  --neutral-200:#D5D5DA;
  --neutral-400:#8A8A8E;
  --neutral-600:#3A3A3C;

  /* Spacing — 4px-skalan */
  --spacing-xx-sm:4px; --spacing-x-sm:8px; --spacing-sm:12px; --spacing-md:16px;
  --spacing-big:20px; --spacing-x-big:24px; --spacing-xx-big:28px;
  --spacing-xxx-big:32px; --spacing-lg:40px; --spacing-x-lg:48px;

  /* Radie */
  --radius-sm:4px; --radius-md:8px; --radius-lg:12px; --radius-xl:16px;
  --radius-xxl:20px; --radius-xxxl:24px; --radius-full:9999px;

  /* Opacitet */
  --opacity-02:0.02; --opacity-05:0.05; --opacity-10:0.10; --opacity-20:0.20;
  --opacity-30:0.30; --opacity-50:0.50; --opacity-75:0.75; --opacity-90:0.90;

  /* Rörelse */
  --duration-faster:150ms; --duration-fast:200ms; --duration-normal:400ms; --duration-slow:600ms;
  --easing-ios:cubic-bezier(0.33,1,0.68,1);
}

/* ═══ LAGER 2 — SEMANTISKA (Home AI, ljust läge = förval) ════════════════ */
:root{
  --bg-page:var(--thiink-white);
  --bg-secondary:var(--thiink-snow);
  --bg-surface:var(--thiink-white);
  --bg-positive:#EEF7F0;        /* ur repot */
  --bg-warning:#FFF7E0;         /* ur repot */
  --bg-destructive:#FDEDED;     /* ur repot */
  --bg-overlay:rgba(11,11,11,0.45);
  --bg-cta:var(--earth-500);

  --text-primary:var(--thiink-black);
  --text-secondary:var(--neutral-600);
  --text-tertiary:var(--thiink-grey);
  --text-on-cta:var(--thiink-white);
  /* Sekundär text ovanpå CTA-ytan (namnet i sidhuvudet). Vit hade tävlat med
     rubriken; accenten är läsbar och underordnad på samma gång. */
  --text-on-cta-secondary:var(--grass-500);
  --text-link:var(--earth-500);
  --text-link-hover:#2E6648;    /* ur repot */

  --border-primary:var(--neutral-200);
  --border-interactive:var(--earth-500);
  --border-positive:#B0C9B8;    /* ur repot */
  --border-warning:#E8C98A;     /* ur repot */
  --border-destructive:#E7B4B4; /* ur repot */

  --status-positive:var(--earth-500);
  --status-warning:var(--fire-500);
  --status-destructive:var(--red-500);
  /* Liten indikator: sandbaserad, för att undvika kollisionen orange-mot-rött
     i litet format. */
  --severity-warning-fg:#B7791F; /* ur repot */

  /* Interaktion och betoning. `--control-accent` finns för `accent-color`,
     som webbläsaren målar reglage och kryssrutor med — den kan inte ta en
     bakgrundstoken utan att bli fel i mörkt läge. */
  --bg-cta-hover:#0D3020;       /* ur repot */
  --control-accent:var(--earth-500);
  --text-emphasis:var(--earth-500);
  --bg-selected:#EEF7F0;        /* ur repot */
  --bg-accent-soft:#ECF2EE;     /* ur repot */
  --border-accent-soft:#B0C9B8; /* ur repot */

  /* Text PÅ en tonad yta. Statusfärgen räcker inte: `--status-positive` är
     gjord för en prick eller en ram, och samma gröna på en ljusgrön platta
     underkänns på kontrast. Därför en egen ton för texten. */
  --text-positive:#2E6648;      /* ur repot */
  --text-warning:#B7791F;       /* ur repot */
  --text-destructive:#B03030;   /* ur repot */

  /* Två roller till som vyerna redan bar utan namn:
     RÅD/AVSLÖJANDEPLIKT (sandbaserad, aldrig röd — den varnar inte, den
     upplyser) och GODKÄNNANDE (den enda lila i huset, för att ett fynd som
     väntar på en människa inte ska se ut som ett fel). */
  --bg-attention:#FFF3D6;       /* ur repot */
  --border-attention:#E8C98A;   /* ur repot */
  --text-attention:#7A5B00;     /* ur repot */
  --bg-approval:#F3F0FB;        /* ur repot */
  --border-approval:#6B4FBB;    /* ur repot */
  --text-approval:#6B4FBB;      /* ur repot */

  /* Neutral etikett — bäraren av "egen rad", alltså ingen status alls. */
  /* Hårfin avdelare INNE i en yta — svagare än --border-primary, som ramar in
     ytan utifrån. Vyerna hade fyra närapå identiska värden för samma jobb. */
  --border-subtle:#E4EDE7;      /* ur repot */
  --bg-disabled:#9BAFA2;        /* ur repot */
  --track:#C6CFC8;              /* reglagets bana */    /* ur repot */

  /* INFORMATION — den fjärde statusen. Ett lead eller ett pågående ärende är
     varken bra, dåligt eller väntande; att låna den gröna eller den gula
     hade gjort en neutral upplysning till ett omdöme. */
  --bg-info:#E6E9FB;            /* ur repot */
  --border-info:#C6D2E4;        /* ur repot */
  --text-info:#1E40AF;          /* ur repot */
  --border-approval-soft:#CFCBEA; /* ur repot */

  /* TILLSTÅNDEN (pass 2, 30 sept) — Claude Designs ramverk/data/states.json,
     sju tillstånd. FÄRG = TILLSTÅND, ALDRIG AVDELNING, och rött är inget
     tillstånd (det är bara för fel, --status-destructive). "Behöver dig" är
     designsystemets varning (sand, --status-warning-*): Magnus regel 6 okt
     att Fire aldrig är ett läge eller en status upphäver Fire-beslutet 30 sept,
     och designpaketet för säljplattformen säger samma sak. "Stoppad" står kvar
     mörk och är INTE röd — se AVVIKELSER.md, session 1.
     -bg ytan, -fg texten, -prick punkten eller ringen. */
  --tillstand-klar-bg:#F0F7F3;     --tillstand-klar-fg:#144128;     --tillstand-klar-prick:#6FAF8A;
  --tillstand-pagar-bg:#EEF1FA;    --tillstand-pagar-fg:#1D319C;    --tillstand-pagar-prick:#1D319C;
  --tillstand-vantar-bg:#F3F4F6;   --tillstand-vantar-fg:#374151;   --tillstand-vantar-prick:#6B7280;
  --tillstand-behover-bg:var(--status-warning-bg); --tillstand-behover-fg:var(--status-warning-text); --tillstand-behover-prick:var(--status-warning-solid);
  --tillstand-stoppad-bg:#434446;  --tillstand-stoppad-fg:#FFFFFF;  --tillstand-stoppad-prick:#FFFFFF;
  --tillstand-ejpaborjad-bg:transparent; --tillstand-ejpaborjad-fg:#6B7280; --tillstand-ejpaborjad-prick:#D1D5DB;
  --tillstand-stangd-bg:transparent; --tillstand-stangd-fg:#6B7280; --tillstand-stangd-prick:#6B7280;
  /* "Kunden ser" — det kunden själv ser märks grönt (ritlappens princip 9). */
  --kunden-ser-bg:var(--grass-500); --kunden-ser-fg:var(--earth-500);

  /* Hjältens toning. Två stopp, aldrig en ensam hex i en vy. */
  --gradient-hero-fran:#3E6B4E; /* ur repot */
  --gradient-hero-till:#16301F; /* ur repot */

  --bg-neutral-soft:#EEF0F2;    /* ur repot */
  --text-neutral-soft:#5A6068;  /* ur repot */

  --shadow-none:none;
  --shadow-default:0 1px 2px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-elevated:0 4px 16px rgba(0,0,0,0.10);

  /* Diagramfärger per tillgång — Thiink Color Language v2. Uppfinn ALDRIG en
     egen hex för ett energidiagram; mappa hit. */
  --chart-asset-solar:#F5A623;
  --chart-asset-solar-dark:#D97706;
  --chart-asset-battery:#2DA44E;
  --chart-asset-ev:#1E40AF;
  --chart-asset-heat-pump:#E36B4A;
  --chart-asset-ventilation:#5B34C4;
  --chart-asset-sold:#8B5CF6;
  --chart-grid:#6E7F8D;
  /* Köpt el, DS v0.6.4 (pass 2b, timvärdena i 2.0): skiffer. `solid` för data,
     `soft` för tystare serier, `subtle` bara som bakgrund. */
  --energy-grid-subtle:#DADFE5;
  --energy-grid-soft:#A2AFBD;
  --energy-grid-solid:#385371;
  /* Kategoriska serier — den staplade remsan inköp/arbete/bruttovinst är en
     visualisering och inte en knapp, så den har egna namn. */
  --chart-cat-1:#144128;        /* ur repot */
  --chart-cat-2:#2E6648;        /* ur repot */
  --chart-cat-3:#CBFF9E;        /* ur repot */
}

/* ═══ SKALETS FÄRGER (säljplattformen, session 1, Magnus 6 okt 2026) ═══
   Skalet — menyn, sökfältet, knappen Ny och profilen — läser designsystemets
   roller (DS v0.6.4) och följer därför sidans data-brand. Plattformens sidor
   bär data-brand="blue" och data-density="compact" på <html> (designpaketet
   design_handoff_saljplattform: "internt blått, kund grönt"). Det upphäver
   beslutet 1 okt om ett grönt skal på varje sida. Rollernas blå värden står
   i blocket [data-brand="blue"] längre ned, avskrivna exakt ur DS v0.6.4.   */
:root{
  --skal-cta:var(--accent-bg);
  --skal-cta-hover:var(--accent-bg-hover);
  --skal-on-cta:var(--accent-contrast);
  --skal-on-cta-accent:var(--accent-border);
  --skal-accent:var(--accent-text-strong);
  --skal-markering:var(--accent-subtle);
}

/* ═══ DS v0.6.4-NAMNEN FÖR SÄLJVERKTYG 2.0:S RESA (del 1, 5 okt 2026) ════
   Källa: design_handoff_saljverktyg_2/thiink-ds-0.6.4.css, data-brand="green",
   värdena avskrivna exakt därifrån. Magnus beslut 2 okt: designsystemets färger
   läggs HÄR och mappas — thiink-ds-0.6.4.css laddas inte som en andra källa.
   Namnen är designsystemets egna (--accent-*, --surface-*, --fire-10 …) så att
   handoffens README går att läsa rakt mot koden. De krockar inte med något
   befintligt namn. Där ett värde redan finns pekar namnet dit (accent-bg är
   Forest Green = --earth-500). Mörkt läge följer designsystemets green-brand:
   accenten vänder till Grass.                                                */
:root{
  /* Primitiver — skalorna i den mån resan använder dem */
  --earth-11:#2A754B; --earth-12:#113E26; --earth-a3:#009E3522; --earth-a7:#00943880;
  --fire-3:#FEE4DC; --fire-9:#FD7247; --fire-10:#F0663B; --fire-11:#C64211;
  --red-3:#FAE4E2; --red-10:#EE373E; --red-11:#CD0021;
  --neutral-2:#F2F3F7; --neutral-3:#E7EAF0; --neutral-4:#DEE2E9; --neutral-5:#D5DAE4;
  --neutral-9:#7E8698; --neutral-10:#747C8C; --neutral-11:#575E6B; --neutral-12:#1C202A;
  --neutral-a6:#001E5A33;

  /* Semantiska (green-brand, ljust) */
  --accent-bg:var(--earth-500);
  --accent-text:var(--earth-11);
  --accent-text-strong:var(--earth-12);
  --accent-subtle:var(--earth-a3);
  --accent-border:var(--earth-a7);
  --accent-contrast:var(--thiink-white);
  --accent-bg-hover:var(--earth-11);
  --focus-ring-ds:#327C52;            /* designsystemets --focus-ring (earth-8) */
  --surface-hover:#00206018;          /* neutral-a3 */
  --surface-page:#F9FAFB;
  --surface-raised:var(--thiink-white);
  --surface-subtle:var(--neutral-2);
  --border-default:var(--neutral-a6);
  --border-control:var(--neutral-10);   /* designsystemets --border-interactive; namnet är upptaget här */
  --text-ds-primary:var(--neutral-12);
  --text-ds-secondary:var(--neutral-11);
  --text-ds-tertiary:#676E7D;

  /* Energi */
  --energy-solar-solid:#C6B648; --energy-solar-soft:#E2DBAA;
  --energy-battery-solid:#009279; --energy-battery-soft:#89CBC0;

  /* Skuggorna, designsystemets egna */
  --shadow-ds-default:0 1px 2px rgba(17,24,39,.059), 0 4px 12px rgba(17,24,39,.039);
  --shadow-ds-popover:0 2px 4px rgba(17,24,39,.078), 0 8px 24px rgba(17,24,39,.122);
  --shadow-ds-elevated:0 1px 2px rgba(17,24,39,.059), 0 4px 12px rgba(17,24,39,.039), 0 8px 24px rgba(17,24,39,.059), inset 0 1px 0 rgba(11,11,11,.102);

  /* TEXTSKALAN FÖR 2.0 (del 2 av resan, steg A, 5 okt 2026). Designsystemets
     egen skala (t-heading-*, t-body-*, t-overline-*, t-data-*), med de storlekar
     prototypen faktiskt bär. EGEN SKALA MED FLIT: portalens --fs-1…8 är tät
     (10–28 px för arbetsytor med mus) och får inte byta värde — då byter varje
     annan sida utseende. Namnen heter --fs-ds-* och inte --text-ds-*, eftersom
     --text-* är färger här (tokens.test.mjs vaktar det). Bara sidor med
     omfångsklassen .k-ds (komponenter.css) läser dem.
       roll            px/radhöjd  designsystemet       används till
       rubrik-stor     32/44       t-heading-1          förslagens belopp, 2h:s rubrik
       rubrik          28/36       t-heading-2          stegets rubrik
       kortrubrik      20/28       t-heading-4          kortets och sidopanelens rubrik
       brod            16/24       t-body-medium        brödtext, knappar
       instruktion     15/22       (prototypens egen)   instruktionen på ritytan, val, rader
       liten           14/20       t-body-small         etiketter ovanför fält, notiser
       forklaring      13/18       (prototypens egen)   förklaringen på ritytan
       etikett         12/16       t-overline-small     överrubrik i versaler
       kalla           11/16       (prototypens egen)   källan i förklaringen, i mono */
  --fs-ds-rubrik-stor:32px;  --lh-ds-rubrik-stor:44px;
  --fs-ds-rubrik:28px;       --lh-ds-rubrik:36px;
  --fs-ds-kortrubrik:20px;   --lh-ds-kortrubrik:28px;
  --fs-ds-brod:16px;         --lh-ds-brod:24px;
  --fs-ds-instruktion:15px;  --lh-ds-instruktion:22px;
  --fs-ds-liten:14px;        --lh-ds-liten:20px;
  --fs-ds-forklaring:13px;   --lh-ds-forklaring:18px;
  --fs-ds-etikett:12px;      --lh-ds-etikett:16px;
  --fs-ds-kalla:11px;        --lh-ds-kalla:16px;
  --ls-ds-rubrik:-.02em;     /* designsystemets letter-spacing-tight */
  --ls-ds-etikett:.05em;     /* letter-spacing-wide */
  --fw-ds-book:400;          /* designsystemet har två vikter, inga fler */
  --fw-ds-medium:500;
  --font-ds-mono:var(--font-mono);   /* --font-family-mono: samma kedja */

  /* Måtten för pekskärm (README "Globalt skal"): primär och sekundär knapp 48,
     fält och verktyg 44 (minsta träffyta), val 40, växlaren 32, toppraden 64. */
  --control-h-ds-knapp:var(--control-h-lg);
  --control-h-ds-falt:var(--touch-min);
  --control-h-ds-val:var(--control-h-md);
  --control-h-ds-vaxel:var(--control-h-sm);
  --size-ds-topprad:64px;
  --space-ds-tat:6px;           /* arbetsytan: mellan verktygen, kortets inre kant */
  --space-ds-verktyg:10px;      /* verktygets och instruktionens sidokant */
  --space-ds-knapp:14px;        /* historikknapparnas och förklaringens kant */
  --size-ds-forklaring:180px;   /* arbetsytans förklaring (README: 180 bred) */
  --size-ds-sidopanel:380px;    /* panelen bredvid ritningen i 3a, 3g (prototypens 380) */
}
[data-theme="dark"]{
  --fire-3:#381F17; --fire-11:#FF9A77;
  --red-3:#431010; --red-11:#FF8F88;
  --neutral-2:#1E1F22; --neutral-3:#25272B; --neutral-4:#2B2D33; --neutral-5:#30343A;
  --neutral-9:#686F7D; --neutral-10:#757C8A; --neutral-11:#AEB4C0; --neutral-12:#EDEEF1;
  --neutral-a6:#D6E5FF43;
  --accent-bg:#CBFF9E; --accent-text:#A4E06B; --accent-text-strong:#C9FD9C;
  --accent-subtle:#A9FF572F; --accent-border:#94FF0068; --accent-contrast:#1B2611;
  --accent-bg-hover:#A4E06B; --focus-ring-ds:#77BB1E; --surface-hover:#DCE8FF2B;
  --surface-page:#17181B; --surface-raised:#25272B;
  --text-ds-tertiary:#8F95A2;
  --energy-solar-solid:#AD9326; --energy-solar-soft:#403D27;
  --energy-battery-solid:#007D65; --energy-battery-soft:#0C363A;
  --shadow-ds-default:0 1px 2px rgba(11,11,11,.18), 0 4px 12px rgba(11,11,11,.141);
  --shadow-ds-popover:0 2px 4px rgba(11,11,11,.451), 0 8px 24px rgba(11,11,11,.38);
  --shadow-ds-elevated:0 1px 2px rgba(11,11,11,.298), 0 4px 12px rgba(11,11,11,.239), 0 8px 24px rgba(11,11,11,.239), inset 0 1px 0 rgba(255,255,255,.102);
}

/* ═══ LAGER 3 — MÖRKT LÄGE ══════════════════════════════════════════════
   Home AI vänder positivt från earth till grass, eftersom mörk grön text på
   mörk bakgrund inte går att läsa.                                          */
[data-theme="dark"]{
  --bg-page:#111113;            /* ur repot */
  --bg-secondary:#1A1A1C;       /* ur repot */
  --bg-surface:#232326;         /* ur repot */
  --text-primary:#F5F5F7;       /* ur repot */
  --text-secondary:#D1D1D6;     /* ur repot */
  --text-tertiary:#8E8E93;      /* ur repot */
  --border-primary:#38383C;     /* ur repot */
  --status-positive:var(--grass-500);
  --text-link:var(--grass-500);
  --shadow-default:var(--shadow-none);
  --shadow-elevated:0 4px 20px rgba(0,0,0,0.5);
  /* Tillstånden i mörkt (states.json, "dark"). */
  --tillstand-klar-bg:rgba(203,255,158,0.10); --tillstand-klar-fg:#CBFF9E; --tillstand-klar-prick:#CBFF9E;
  --tillstand-pagar-bg:rgba(210,223,243,0.12); --tillstand-pagar-fg:#D2DFF3; --tillstand-pagar-prick:#D2DFF3;
  --tillstand-vantar-bg:#232A36;   --tillstand-vantar-fg:#CBD0D9;   --tillstand-vantar-prick:#8F98A8;
  --tillstand-stoppad-bg:#D1D5DB;  --tillstand-stoppad-fg:#111827;  --tillstand-stoppad-prick:#111827;
  --tillstand-ejpaborjad-fg:#8F98A8; --tillstand-ejpaborjad-prick:#3A4252;
  --tillstand-stangd-fg:#8F98A8;   --tillstand-stangd-prick:#8F98A8;
}

/* ═══ DS v0.6.4 BLÅTT OCH TÄTHETEN (säljplattformen, session 1, 6 okt 2026) ═
   Källa: design_handoff_saljplattform/design/thiink-ds-0.6.4.css,
   data-brand="blue" och data-density, värdena avskrivna exakt därifrån.
   Samma beslut som 2 okt: filen laddas inte som en andra källa, namnen läggs
   här. Blocken står EFTER det gröna mörka läget med flit — lika specifika
   regler avgörs av ordningen.                                              */
:root{
  --water-8:#7399FF; --water-9:#1D319C; --water-10:#2B45B1; --water-11:#3959E6; --water-12:#131E8A;
  --water-a3:#0055FF1E; --water-a7:#014DFF6A;
  --sand-9:#AB9262; --sand-12:#4C3602; --sand-a3:#E8950037;
  --red-9:#FD474A; --red-a3:#D412001D;
  --status-warning-bg:var(--sand-a3); --status-warning-text:var(--sand-12); --status-warning-solid:var(--sand-9);
  --status-destructive-bg:var(--red-a3); --status-destructive-text:var(--red-11); --status-destructive-solid:var(--red-9);
}
[data-theme="dark"]{
  --sand-9:#FFEDCC; --sand-11:#E2C796; --sand-a3:#FFC9682F;
  --red-9:#FD474A; --red-a3:#FF3D3D43;
  --status-warning-text:var(--sand-11);
}
[data-brand="blue"]{
  --accent-bg:var(--water-9); --accent-bg-hover:var(--water-10); --accent-border:var(--water-a7);
  --accent-contrast:#FFFFFF; --accent-subtle:var(--water-a3); --accent-text:var(--water-11);
  --accent-text-strong:var(--water-12); --focus-ring-ds:var(--water-8);
}
[data-brand="blue"][data-theme="dark"]{
  --water-7:#2B45BB; --water-8:#3251DD; --water-9:#3452FF; --water-11:#91B2FF; --water-12:#D0E1FF;
  --water-a3:#355BFF5D; --water-a7:#3B5EFFBB;
  --accent-bg:var(--water-9); --accent-bg-hover:var(--water-7); --accent-border:var(--water-a7);
  --accent-contrast:#FFFFFF; --accent-subtle:var(--water-a3); --accent-text:var(--water-11);
  --accent-text-strong:var(--water-12); --focus-ring-ds:var(--water-8);
}
:root, [data-density="comfortable"]{
  --density-control-height:48px; --density-control-height-sm:32px; --density-target-min:44px;
  --density-component-padding-x:24px; --density-component-padding-y:16px; --density-component-gap:16px;
  --density-section-gap:24px; --density-page-margin-mobile:24px; --density-page-margin-desktop:28px;
}
[data-density="compact"]{
  --density-control-height:40px; --density-control-height-sm:28px; --density-target-min:32px;
  --density-component-padding-x:20px; --density-component-padding-y:12px; --density-component-gap:12px;
  --density-section-gap:20px; --density-page-margin-mobile:20px; --density-page-margin-desktop:24px;
}

/* ═══ LAGER 4 — PRODUKTTEMA ═════════════════════════════════════════════
   Sätts på <html data-produkt="enterprise">. Får ALDRIG stå i komponent-css.
   Home AI (grönt) är förval och behöver inget attribut.                     */
[data-produkt="enterprise"]{
  --bg-page:#F3F5FA;            /* ur repot */
  /* --bg-secondary lämnas NEUTRAL (snow) med flit. Den blå tonen #EEF1FA är
     inte "andra ytan" utan MARKERINGEN, och den heter --bg-selected. Blandas
     de blir varje informationsruta i portalen blå — det syntes som en
     11,7-procentig skillnad i versionsvyn första gången jag körde steget. */
  --bg-cta:var(--water-500);
  --text-link:var(--water-500);
  --text-link-hover:#152470;    /* ur repot */
  --border-primary:#DCE2EF;     /* ur repot */
  --border-interactive:var(--water-500);
  --status-positive:#1B7A4B;    /* ur repot */
  --bg-positive:#E7F3EC;        /* ur repot */
  --bg-warning:#FFF1EC;         /* ur repot */
  --bg-destructive:#FFECEC;     /* ur repot */
  --border-positive:#BEDDCB;    /* ur repot */
  --border-warning:#F6CBBB;     /* ur repot */
  --border-destructive:#FBC9CA; /* ur repot */
  --bg-cta-hover:#152470;       /* ur repot */
  --control-accent:var(--water-500);
  --text-emphasis:#152470;      /* ur repot */
  --bg-selected:#EEF1FA;        /* ur repot */
  --bg-accent-soft:var(--wind-500);
  --text-on-cta-secondary:var(--wind-500);
  --border-accent-soft:#AEC3E6; /* ur repot */
  --text-positive:#1F5B38;      /* ur repot */
  --text-warning:#A8431F;       /* ur repot */
  --text-destructive:#A02020;   /* ur repot */
  --chart-cat-1:#152470;        /* ur repot */
  --chart-cat-2:var(--water-500);
  --chart-cat-3:var(--wind-500);
  --border-subtle:#E8ECF5;      /* ur repot */
  --bg-disabled:#AEB6C8;
  --track:#C9CFDC;
  --gradient-hero-fran:#2A3F8F;
  --gradient-hero-till:#101A4A;
}
[data-produkt="enterprise"][data-theme="dark"]{
  --bg-page:#111113;
  --bg-secondary:#1A1A1C;
  --text-link:var(--wind-500);
  /* Det valda (menyrad, markerad träff) i mörkt, ur ritlappens --sel-bg
     (30 sept). Utan raden ärvdes ljusets #EEF1FA, och en vald menyrad blev
     ljusblå text på ljusblått. */
  --bg-selected:rgba(210,223,243,0.12);
}

/* ═══════════════════════════════════════════════════════════════════════
   ARVSSKIKTET — TILLFÄLLIGT. Rör inte värdena.

   Varje rad här är ett hexvärde som stod i en vys egna :root. Värdena är
   OFÖRÄNDRADE med flit: flytten hit ska inte kunna ses. Två av namnen
   (--page och --border) betyder OLIKA saker i de två familjerna, och det är
   hela skälet till att skiktet är attributstyrt i stället för globalt.

   YTKARTAN — vilken familj en vy tillhör i dag, och vart den ska:
     KUNDMÖTANDE (Home AI, grönt — inget data-produkt)
       teaser.html · offer.html · offertrum.html · kundsida.html
     THIINKS DÖRR (Home AI, grönt — Magnus 1 okt 2026, provförsäljningen)
       login.html — Royal Blue gäller bara produktlinjen Enterprise
     FÖRETAGSINTERNT (Enterprise, blått — data-produkt="enterprise")
       admin · crm · rond · uppfoljning · utskick · kommunarende
       offertrader · offertstudio · versioner · app

   app.html bär attributet, men kalkylatorns egna färger bor fortfarande i
   app.jsx och är gröna tills THEMES/PALETTES flyttar till semantiska namn.
   Det är den sista kända avvikelsen mellan kartan och skärmen.
   ═══════════════════════════════════════════════════════════════════════ */

/* De två arvsfamiljerna STOD HÄR och är BORTA sedan 2026-08-14: när sista vyn
   bytt till semantiska namn hade blocken ingen läsare kvar, och ett skikt som
   kallar sig tillfälligt måste faktiskt gå att ta bort. Ytkartan ovan gäller
   fortfarande — den beskriver nu ett läge som är SANT och inte ett målläge.

   Kvar av skiktet är bara kalkylatorns egna namn nedan (--arv-app-*, --pal-*,
   --arv-wzc-*). De lever tills app.jsx flyttar sin temaväxel till
   [data-theme] på roten; först då kan ljus och mörker slås ihop. */

/* ─── Arv: kalkylatorn (frontend-src/app.jsx) ────────────────────────────
   THEMES och PALETTES var lager 3 och 4 utan lager 1 och 2 under sig. De
   läser nu de här namnen i stället för hex. Ljust och mörkt har SKILDA namn
   med flit: app.jsx växlar tema i JavaScript (`C = THEMES[theme]`), och hade
   båda pekat på samma namn hade växeln slutat fungera tyst. Namnen slås ihop
   till [data-theme] den dag app.jsx sätter attributet på roten.

   ALFAVARIANTERNA finns för att koden fogar ihop hexsträngar: "1px solid " +
   C.gn + "44". Det går inte att göra med var(), så de 25 ställena läser nu
   ett eget namn med alfat inbakat. Värdena är dagens, tecken för tecken.   */
:root{
  --arv-app-l-bg:#F2F2F7;  --arv-app-l-pn:#FFFFFF; --arv-app-l-cd:#F7F7F7; --arv-app-l-bd:#D5D5DA;
  --arv-app-l-tx:#0B0B0B;  --arv-app-l-tm:#3A3A3C; --arv-app-l-td:#8A8A8E;
  --arv-app-l-gn:#144128;  --arv-app-l-gd:rgba(20,65,40,0.05);
  --arv-app-l-yl:#F5B731;  --arv-app-l-yd:rgba(245,183,49,0.06);
  --arv-app-l-bu:#1A344A;  --arv-app-l-bud:rgba(26,52,74,0.05);
  --arv-app-l-or:#E8873C;  --arv-app-l-od:rgba(232,135,60,0.05);
  --arv-app-l-pu:#1D319C;  --arv-app-l-pd:rgba(29,49,156,0.04);
  --arv-app-l-rd:#D94545;
  --arv-app-l-pet:#1A344A; --arv-app-l-petd:rgba(26,52,74,0.05);
  --arv-app-l-gold:#F5B731; --arv-app-l-amber:#E8873C; --arv-app-l-coral:#EE5828;
  --arv-app-l-earth:#144128; --arv-app-l-grass:#CBFF9E; --arv-app-l-water:#1D319C;
  --arv-app-l-shadow:0 1px 2px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.06);
  --arv-app-l-shadowLg:0 4px 16px rgba(0,0,0,0.1);
  --arv-app-l-gn22:#14412822; --arv-app-l-gn33:#14412833; --arv-app-l-gn44:#14412844;
  --arv-app-l-gn55:#14412855; --arv-app-l-gn77:#14412877;
  --arv-app-l-bu44:#1A344A44; --arv-app-l-or44:#E8873C44; --arv-app-l-or55:#E8873C55;
  --arv-app-l-or66:#E8873C66; --arv-app-l-rd33:#D9454533; --arv-app-l-rd44:#D9454544;

  --arv-app-d-bg:#111113;  --arv-app-d-pn:#1A1A1C; --arv-app-d-cd:#232326; --arv-app-d-bd:#38383C;
  --arv-app-d-tx:#F5F5F7;  --arv-app-d-tm:#D1D1D6; --arv-app-d-td:#8E8E93;
  --arv-app-d-gn:#CBFF9E;  --arv-app-d-gd:rgba(203,255,158,0.07);
  --arv-app-d-yl:#F5B731;  --arv-app-d-yd:rgba(245,183,49,0.08);
  --arv-app-d-bu:#7EB8E0;  --arv-app-d-bud:rgba(126,184,224,0.08);
  --arv-app-d-or:#FF8A65;  --arv-app-d-od:rgba(255,138,101,0.08);
  --arv-app-d-pu:#A8B4E0;  --arv-app-d-pd:rgba(168,180,224,0.06);
  --arv-app-d-rd:#FF6B6B;
  --arv-app-d-pet:#6BA3C8; --arv-app-d-petd:rgba(107,163,200,0.08);
  --arv-app-d-gold:#F5B731; --arv-app-d-amber:#E8873C; --arv-app-d-coral:#EE5828;
  --arv-app-d-earth:#144128; --arv-app-d-grass:#CBFF9E; --arv-app-d-water:#1D319C;
  --arv-app-d-shadow:0 1px 3px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.25);
  --arv-app-d-shadowLg:0 4px 20px rgba(0,0,0,0.5);
  --arv-app-d-gn22:#CBFF9E22; --arv-app-d-gn33:#CBFF9E33; --arv-app-d-gn44:#CBFF9E44;
  --arv-app-d-gn55:#CBFF9E55; --arv-app-d-gn77:#CBFF9E77;
  --arv-app-d-bu44:#7EB8E044; --arv-app-d-or44:#FF8A6544; --arv-app-d-or55:#FF8A6555;
  --arv-app-d-or66:#FF8A6566; --arv-app-d-rd33:#FF6B6B33; --arv-app-d-rd44:#FF6B6B44;

  /* Palettväxeln. classic är den gamla, v2 är Thiink Color Language v2. */
  --pal-classic-solar:#F5B731; --pal-classic-solarDark:#E8873C; --pal-classic-panel:#1D319C;
  --pal-classic-grid:#797979;  --pal-classic-house:#144128; --pal-classic-batteryIcon:#144128;
  --pal-classic-sold:#6bc4e8;  --pal-classic-smart:#b794f6; --pal-classic-ev:#4bb5f5;
  --pal-classic-hvac:#f5a04b;
  --pal-v2-solar:#F5A623; --pal-v2-solarDark:#D97706; --pal-v2-panel:#F5A623;
  --pal-v2-grid:#6E7F8D;  --pal-v2-house:#E36B4A; --pal-v2-batteryIcon:#2DA44E;
  --pal-v2-battery:#2DA44E;
  --pal-v2-sold:#8B5CF6;  --pal-v2-smart:#5B34C4; --pal-v2-ev:#1E40AF; --pal-v2-hvac:#E36B4A;
  --pal-v2-ov-l-yl:#F5A623; --pal-v2-ov-l-yd:rgba(245,166,35,0.06); --pal-v2-ov-l-gold:#F5A623;
  --pal-v2-ov-d-yl:#F5A623; --pal-v2-ov-d-yd:rgba(245,166,35,0.08); --pal-v2-ov-d-gold:#F5A623;

  /* Hus-wizardens egen lilla palett (WZC i app.jsx) */
  --arv-wzc-page:#F5F7F5; --arv-wzc-card:#ECF2EE; --arv-wzc-white:#FFFFFF;
  --arv-wzc-text:#1A2E22; --arv-wzc-muted:#4E6A5A; --arv-wzc-accent:#2E6648;
  --arv-wzc-sage:#7FA98C; --arv-wzc-border:#B0C9B8; --arv-wzc-soft:rgba(46,102,72,.10);
  --arv-wzc-fel:#b00020;
}

/* ─── Illustrationen (public/js/house_scene.js) ──────────────────────────
   Modulen bygger en SVG-STRÄNG som monteras in i dokumentet, inte en canvas.
   Underlaget till F4 antog canvas och ~255 hexvärden och beställde därför en
   upplösare med getComputedStyle — den behövs inte: en inmonterad SVG ärver
   var() precis som vilken nod som helst, och filen bär 38 hexvärden på 23
   distinkta färger. Namnen nedan är roller, inte värden.                    */
:root{
  --hus-kontur:#2E6648;      /* linjer, dörrhandtag, bilkontur */
  --hus-detalj:#7FA98C;      /* fönsterspröjs, tunna linjer */
  --hus-glas:#ECF2EE;        /* fönster- och dörrfyllning */
  --hus-vit:#FFFFFF;         /* element, varmvattenberedare */
  --hus-sten:#9FB4A8;        /* bastuaggregatets stenar */
  --hus-varme:#F2C94C;       /* värme- och ångsymboler */
  --hus-vatten:#6FA8C0;      /* vattensymboler */
  --hus-ram:#B0C9B8;         /* trappkant, svaga ramar */
  --hus-tra:#7B5E4A;         /* bastuaggregatets stomme */
  --hus-kaross:#3C7A57;      /* bilens överdel */
  --hus-hjul:#1A2E22;        /* hjul, mörkaste detalj */
  --hus-text:#4E6A5A;        /* byggåret vid dörren */
  --hus-trappa-a:#E7EEE9;    /* trappsteg, varannat */
  --hus-trappa-b:#D7E0D9;
  --hus-yta-1:#EBF0EC;
  --hus-yta-2:#DCE7DF;
  --hus-yta-3:#CBD5CE;
  --hus-yta-4:#E3EBE5;
  --hus-kyla:#DCEBF0;
  --hus-kyla-stark:#9ED3E6;
  --hus-tegel:#C58B6F;
  --hus-tak:#1E3529;
  --hus-takmonster:#13261C;
}

/* ═══ MIGRERINGSORDNINGEN — textskalan, avstånden och komponentlagret ════
   En vy i taget, varje vy ett eget kort pass med samma recept som piloten:
     1. skärmdump före (ljust och mörkt, skrivbord och mobil)
     2. <link href="/komponenter.css"> direkt efter tokens.css, och
        class="k-sida" på <body>
     3. vyns stilblock till tokens (--fs-*, --space-*, --radius-*) och
        k-klasser; kvar i vyn blir bara layout som är unik för den
     4. sänk vyns rad i FRYST_SKALA (tests/tokens.test.mjs, DEL 8) i samma
        commit, stryk raden när alla tre talen är noll
     5. skärmdump efter, samma fyra lägen
   Provet kräver att varje vy står här exakt en gång. (tal 30 sept:
   textstorlek · avstånd · radie)

   Säljläget först — det är där designerna ur Claude Design ska synas:
     1.  saljverktyg2.html      PILOT, klar 30 sept (0 · 0 · 0)
     2.  offertstudio.html      (34 · 130 · 2)
     3.  utskick.html           (25 · 78 · 13)
     4.  crm.html               (89 · 251 · 31 — menyraden i skalet sedan 30 sept)
     5.  app.html               (0 · 0 · 5 — resten bor i app.jsx, camelCase)
   Sedan det kunden möter (Home AI, grönt), eftersom det syns utåt:
     6.  offertrum.html         (99 · 165 · 37)
     7.  offer.html             (17 · 42 · 5)
     8.  kundsida.html          (9 · 26 · 3)
     9.  teaser.html            (20 · 41 · 7)
     10. login.html             (10 · 23 · 4)
   Sedan det interna, minst först så att receptet slipas på små vyer:
     11. versioner.html         (19 · 68 · 0)
     12. produktbibliotek.html  (32 · 10 · 0)
     13. offertrader.html       (49 · 161 · 1)
     14. paneldesigner.html     (25 · 64 · 0)
     15. projektmaterial.html   (25 · 39 · 6)
     16. rond.html              (20 · 39 · 7)
     17. uppfoljning.html       (27 · 52 · 9)
     18. beredning.html         (44 · 82 · 14)
     19. natarende.html         (40 · 71 · 11)
     20. kommunarende.html      (37 · 72 · 12)
     21. admin.html             (333 · 463 · 33) — störst, sist, gärna i två pass
     22. vy.html                (0 · 0 · 0 — född på komponentlagret 30 sept)
     23. idag.html              (0 · 0 · 0 — född på komponentlagret 30 sept, pass 2)
     24. kund.html              (0 · 0 · 0 — född på komponentlagret 30 sept, pass 2)
     25. grupp.html             (0 · 0 · 0 — född på komponentlagret 30 sept, pass 3)
     26. projekt.html           (0 · 0 · 0 — född på komponentlagret 7 okt, projektsidan per projekt)
     27. projektlista.html      (0 · 0 · 0 — född på komponentlagret 7 okt, registret Projekt, steg 8)
     28. dialog.html            (0 · 0 · 0 — född på komponentlagret 8 okt, dialogen D4)
     29. bekrafta.html          (0 · 0 · 0 — född i DS v0.6.4 12 okt, inkorgen I3, kundens sida)
     30. uppladdning.html       (0 · 0 · 0 — född i DS v0.6.4 12 okt, inkorgen I3, kundens sida)
     31. oklarinkorg.html       (0 · 0 · 0 — född i DS v0.6.4 12 okt, inkorgen I5, den oklara inkorgen)
     32. paketlinjer.html       (0 · 0 · 0 — född i DS v0.6.4 22 okt, Systemklasser pass 1, plattformar och paket)
     33. granskning.html        (0 · 0 · 0 — född i DS v0.6.4 23 okt, Paketlinjer pass 10, granskningen av jämförelsen)
     34. kundlistor.html        (0 · 0 · 0 — född i DS v0.6.4 28 okt, CRM-kategorierna pass 5, admins kundlistor)
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ LAGER 5 — SEVEN 0.1.0 (11 nov 2026, Johan: "Seven är utseendet") ═══
   Seven-designsystemet (seven.thiink.io/designsystem, Thiink-LLC/intelligence-os
   design/system) ersätter Thiink DS v0.6.4 i HELA portalen. Lagret läggs SIST
   och vinner över lager 1–4 och arvsskiktet genom specificitet
   (html:root:root), så att inga vyer behöver röras för färgen. Det gröna och
   det blå finns kvar ovanför som historia tills lagren städas bort.
   Regler: etch-grått, en fylld åtgärd i bläck per vy, inga statusfärger
   (tillstånd bärs av text och prick), radie 0, en 1px hårlinje, en skugga
   bara för det som svävar. Koppar (--hers) är ENBART Sevens eget.          */
@font-face{font-family:"Martian Grotesk";src:url(/fonts/MartianGrotesk-VF.woff2) format("woff2");font-weight:100 1000;font-stretch:75% 200%;font-display:swap}
@font-face{font-family:"Martian Mono";src:url(/fonts/MartianMono-VF.woff2) format("woff2");font-weight:100 800;font-stretch:87.5%;font-display:swap}
html:root:root,html:root:root .ds064{
  --font-display:"Martian Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --font-mono:"Martian Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --font-family-base:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --font-family-mono:"Martian Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --radius-sm:0;
  --radius-md:0;
  --radius-lg:0;
  --radius-xl:0;
  --radius-xxl:0;
  --radius-xxxl:0;
  --radius-full:0;
  --radius-xs:0;
  --shadow-none:none;
  --shadow-default:none;
  --shadow-elevated:0 1px 2px #16161614, 0 8px 24px #1616161F;
  --shadow-ds-default:none;
  --shadow-ds-popover:0 1px 2px #16161614, 0 8px 24px #1616161F;
  --shadow-ds-elevated:0 1px 2px #16161614, 0 8px 24px #1616161F;
  --arv-app-l-shadow:none;
  --arv-app-d-shadow:none;
  --brand-shadow:none;
  --shadow-popover:0 1px 2px #16161614, 0 8px 24px #1616161F;
  --shadow-xsmall:none;
  --shadow-small:none;
  --shadow-medium:none;
  --shadow-large:none;
  --hers:#B87333; --copper:#B87333; --text-hers:#A3601C;
  --attr-kalla:#5E5E5E; /* kartleverantörens attribution, färgen den kräver */
  --seven-bg:#F7F6F2;
  --seven-bg2:#F4F2EE;
  --seven-e3:#ECEAE5;
  --seven-e4:#E5E3DD;
  --seven-e5:#DFDDD6;
  --seven-surface:#FFFFFF;
  --seven-float:#FFFFFF;
  --seven-bsub:#D8D5CE;
  --seven-bord:#CFCBC3;
  --seven-bstrong:#B7B4AC;
  --seven-e9:#7E7B75;
  --seven-e10:#706E68;
  --seven-text:#161616;
  --seven-text2:#4B4944;
  --seven-text3:#63605A;
  --seven-ink:#161616;
  --seven-inkh:#4B4944;
  --seven-onink:#F7F6F2;
  --seven-onink2:#B7B4AC;
  --seven-disbg:#ECEAE5;
  --seven-textdis:#B7B4AC;
  --seven-scrim:rgba(11,10,9,.6);
  --seven-focus:#161616;
  --seven-elemA:#1616160E;
  --seven-elemH:#16161616;
  --seven-elemS:#1616161D;
  --seven-hers:#B87333;
  --seven-texthers:#A3601C;
  --earth-500:#161616;
  --grass-500:#E5E3DD;
  --water-500:#161616;
  --wind-500:#E5E3DD;
  --fire-500:#161616;
  --red-500:#161616;
  --sand-4:#E5E3DD;
  --thiink-black:#161616;
  --thiink-snow:#F4F2EE;
  --thiink-white:#FFFFFF;
  --thiink-grey:#63605A;
  --neutral-100:#F4F2EE;
  --neutral-200:#D8D5CE;
  --neutral-400:#7E7B75;
  --neutral-600:#4B4944;
  --bg-page:#F7F6F2;
  --bg-secondary:#F4F2EE;
  --bg-surface:#FFFFFF;
  --bg-positive:#ECEAE5;
  --bg-warning:#ECEAE5;
  --bg-destructive:#ECEAE5;
  --bg-overlay:rgba(11,10,9,.6);
  --bg-cta:#161616;
  --text-primary:#161616;
  --text-secondary:#4B4944;
  --text-tertiary:#63605A;
  --text-on-cta:#F7F6F2;
  --text-on-cta-secondary:#B7B4AC;
  --text-link:#161616;
  --text-link-hover:#4B4944;
  --border-primary:#CFCBC3;
  --border-interactive:#B7B4AC;
  --border-positive:#CFCBC3;
  --border-warning:#CFCBC3;
  --border-destructive:#CFCBC3;
  --status-positive:#161616;
  --status-warning:#161616;
  --status-destructive:#161616;
  --severity-warning-fg:#161616;
  --bg-cta-hover:#4B4944;
  --control-accent:#161616;
  --text-emphasis:#161616;
  --bg-selected:#1616161D;
  --bg-accent-soft:#ECEAE5;
  --border-accent-soft:#CFCBC3;
  --text-positive:#161616;
  --text-warning:#161616;
  --text-destructive:#161616;
  --bg-attention:#ECEAE5;
  --border-attention:#CFCBC3;
  --text-attention:#161616;
  --bg-approval:#ECEAE5;
  --border-approval:#CFCBC3;
  --text-approval:#161616;
  --border-subtle:#D8D5CE;
  --bg-disabled:#ECEAE5;
  --track:#CFCBC3;
  --bg-info:#ECEAE5;
  --border-info:#CFCBC3;
  --text-info:#161616;
  --border-approval-soft:#CFCBC3;
  --tillstand-klar-bg:#ECEAE5;
  --tillstand-klar-fg:#161616;
  --tillstand-klar-prick:#161616;
  --tillstand-pagar-bg:#ECEAE5;
  --tillstand-pagar-fg:#161616;
  --tillstand-pagar-prick:#4B4944;
  --tillstand-vantar-bg:#ECEAE5;
  --tillstand-vantar-fg:#161616;
  --tillstand-vantar-prick:#7E7B75;
  --tillstand-behover-bg:#ECEAE5;
  --tillstand-behover-fg:#161616;
  --tillstand-behover-prick:#161616;
  --tillstand-stoppad-bg:#161616;
  --tillstand-stoppad-fg:#F7F6F2;
  --tillstand-stoppad-prick:#F7F6F2;
  --tillstand-ejpaborjad-fg:#4B4944;
  --tillstand-ejpaborjad-prick:#B7B4AC;
  --tillstand-stangd-fg:#4B4944;
  --tillstand-stangd-prick:#7E7B75;
  --kunden-ser-bg:#E5E3DD;
  --kunden-ser-fg:#161616;
  --gradient-hero-fran:#161616;
  --gradient-hero-till:#161616;
  --bg-neutral-soft:#F4F2EE;
  --text-neutral-soft:#4B4944;
  --chart-asset-solar:#4B4944;
  --chart-asset-solar-dark:#4B4944;
  --chart-asset-battery:#706E68;
  --chart-asset-ev:#7E7B75;
  --chart-asset-heat-pump:#B7B4AC;
  --chart-asset-ventilation:#7E7B75;
  --chart-asset-sold:#706E68;
  --chart-grid:#7E7B75;
  --energy-grid-subtle:#E5E3DD;
  --energy-grid-soft:#D8D5CE;
  --energy-grid-solid:#7E7B75;
  --chart-cat-1:#161616;
  --chart-cat-2:#4B4944;
  --chart-cat-3:#7E7B75;
  --skal-cta:#161616;
  --skal-cta-hover:#4B4944;
  --skal-on-cta:#F7F6F2;
  --skal-on-cta-accent:#B7B4AC;
  --skal-accent:#161616;
  --skal-markering:#1616161D;
  --earth-11:#4B4944;
  --earth-12:#161616;
  --earth-a3:#16161616;
  --earth-a7:#CFCBC3;
  --fire-3:#ECEAE5;
  --fire-9:#161616;
  --fire-10:#4B4944;
  --fire-11:#4B4944;
  --red-3:#ECEAE5;
  --red-10:#4B4944;
  --red-11:#4B4944;
  --neutral-2:#F4F2EE;
  --neutral-3:#ECEAE5;
  --neutral-4:#E5E3DD;
  --neutral-5:#DFDDD6;
  --neutral-9:#7E7B75;
  --neutral-10:#706E68;
  --neutral-11:#4B4944;
  --neutral-12:#161616;
  --neutral-a6:#CFCBC3;
  --accent-bg:#161616;
  --accent-text:#161616;
  --accent-text-strong:#161616;
  --accent-subtle:#1616161D;
  --accent-border:#CFCBC3;
  --accent-contrast:#F7F6F2;
  --accent-bg-hover:#4B4944;
  --focus-ring-ds:#161616;
  --surface-hover:#16161616;
  --surface-page:#F7F6F2;
  --surface-raised:#FFFFFF;
  --surface-subtle:#F4F2EE;
  --border-default:#CFCBC3;
  --border-control:#CFCBC3;
  --text-ds-primary:#161616;
  --text-ds-secondary:#4B4944;
  --text-ds-tertiary:#63605A;
  --energy-solar-solid:#4B4944;
  --energy-solar-soft:#D8D5CE;
  --energy-battery-solid:#706E68;
  --energy-battery-soft:#D8D5CE;
  --water-8:#B7B4AC;
  --water-9:#161616;
  --water-10:#4B4944;
  --water-11:#4B4944;
  --water-12:#161616;
  --water-a3:#16161616;
  --water-a7:#CFCBC3;
  --sand-9:#7E7B75;
  --sand-12:#161616;
  --sand-a3:#16161616;
  --red-9:#161616;
  --red-a3:#16161616;
  --status-warning-bg:#ECEAE5;
  --status-warning-text:#161616;
  --status-warning-solid:#161616;
  --status-destructive-bg:#ECEAE5;
  --status-destructive-text:#161616;
  --status-destructive-solid:#161616;
  --sand-11:#4B4944;
  --water-7:#CFCBC3;
  --arv-app-l-bg:#F7F6F2;
  --arv-app-l-pn:#FFFFFF;
  --arv-app-l-cd:#F4F2EE;
  --arv-app-l-bd:#CFCBC3;
  --arv-app-l-tx:#161616;
  --arv-app-l-tm:#4B4944;
  --arv-app-l-td:#63605A;
  --arv-app-l-gn:#161616;
  --arv-app-l-gd:#1616160E;
  --arv-app-l-yl:#4B4944;
  --arv-app-l-yd:#1616160E;
  --arv-app-l-bu:#161616;
  --arv-app-l-bud:#1616160E;
  --arv-app-l-or:#4B4944;
  --arv-app-l-od:#1616160E;
  --arv-app-l-pu:#161616;
  --arv-app-l-pd:#1616160E;
  --arv-app-l-rd:#161616;
  --arv-app-l-pet:#161616;
  --arv-app-l-petd:#1616160E;
  --arv-app-l-gold:#4B4944;
  --arv-app-l-amber:#4B4944;
  --arv-app-l-coral:#4B4944;
  --arv-app-l-earth:#161616;
  --arv-app-l-grass:#E5E3DD;
  --arv-app-l-water:#161616;
  --arv-app-l-gn22:#16161616;
  --arv-app-l-gn33:#16161616;
  --arv-app-l-gn44:#1616161D;
  --arv-app-l-gn55:#1616161D;
  --arv-app-l-gn77:#1616161D;
  --arv-app-l-bu44:#1616161D;
  --arv-app-l-or44:#1616161D;
  --arv-app-l-or55:#1616161D;
  --arv-app-l-or66:#1616161D;
  --arv-app-l-rd33:#16161616;
  --arv-app-l-rd44:#1616161D;
  --arv-app-d-bg:#151311;
  --arv-app-d-pn:#221F1C;
  --arv-app-d-cd:#1B1916;
  --arv-app-d-bd:#46423D;
  --arv-app-d-tx:#ECEAE4;
  --arv-app-d-tm:#B8B5AD;
  --arv-app-d-td:#A09C92;
  --arv-app-d-gn:#ECEAE4;
  --arv-app-d-gd:#ECEAE406;
  --arv-app-d-yl:#B8B5AD;
  --arv-app-d-yd:#ECEAE406;
  --arv-app-d-bu:#ECEAE4;
  --arv-app-d-bud:#ECEAE406;
  --arv-app-d-or:#B8B5AD;
  --arv-app-d-od:#ECEAE406;
  --arv-app-d-pu:#ECEAE4;
  --arv-app-d-pd:#ECEAE406;
  --arv-app-d-rd:#ECEAE4;
  --arv-app-d-pet:#ECEAE4;
  --arv-app-d-petd:#ECEAE406;
  --arv-app-d-gold:#B8B5AD;
  --arv-app-d-amber:#B8B5AD;
  --arv-app-d-coral:#B8B5AD;
  --arv-app-d-earth:#ECEAE4;
  --arv-app-d-grass:#292723;
  --arv-app-d-water:#ECEAE4;
  --arv-app-d-gn22:#ECEAE409;
  --arv-app-d-gn33:#ECEAE409;
  --arv-app-d-gn44:#ECEAE413;
  --arv-app-d-gn55:#ECEAE413;
  --arv-app-d-gn77:#ECEAE413;
  --arv-app-d-bu44:#ECEAE413;
  --arv-app-d-or44:#ECEAE413;
  --arv-app-d-or55:#ECEAE413;
  --arv-app-d-or66:#ECEAE413;
  --arv-app-d-rd33:#ECEAE409;
  --arv-app-d-rd44:#ECEAE413;
  --pal-classic-solar:#4B4944;
  --pal-classic-panel:#4B4944;
  --pal-classic-grid:#7E7B75;
  --pal-classic-house:#B7B4AC;
  --pal-classic-sold:#706E68;
  --pal-classic-smart:#161616;
  --pal-classic-ev:#7E7B75;
  --pal-classic-hvac:#B7B4AC;
  --pal-v2-solar:#4B4944;
  --pal-v2-panel:#4B4944;
  --pal-v2-grid:#7E7B75;
  --pal-v2-house:#B7B4AC;
  --pal-v2-battery:#706E68;
  --pal-v2-sold:#706E68;
  --pal-v2-smart:#161616;
  --pal-v2-ev:#7E7B75;
  --pal-v2-hvac:#B7B4AC;
  --pal-v2-ov-l-yl:#4B4944;
  --pal-v2-ov-l-yd:#1616160E;
  --pal-v2-ov-l-gold:#4B4944;
  --pal-v2-ov-d-yl:#4B4944;
  --pal-v2-ov-d-yd:#1616160E;
  --pal-v2-ov-d-gold:#4B4944;
  --arv-wzc-page:#F7F6F2;
  --arv-wzc-card:#F4F2EE;
  --arv-wzc-white:#FFFFFF;
  --arv-wzc-text:#161616;
  --arv-wzc-muted:#4B4944;
  --arv-wzc-accent:#161616;
  --arv-wzc-sage:#7E7B75;
  --arv-wzc-border:#CFCBC3;
  --arv-wzc-soft:#1616160E;
  --arv-wzc-fel:#161616;
  --hus-kontur:#161616;
  --hus-detalj:#7E7B75;
  --hus-glas:#ECEAE5;
  --hus-vit:#FFFFFF;
  --hus-sten:#B7B4AC;
  --hus-varme:#B7B4AC;
  --hus-vatten:#7E7B75;
  --hus-ram:#CFCBC3;
  --hus-tra:#706E68;
  --hus-kaross:#4B4944;
  --hus-hjul:#161616;
  --hus-text:#4B4944;
  --hus-trappa-a:#ECEAE5;
  --hus-trappa-b:#E5E3DD;
  --hus-yta-1:#ECEAE5;
  --hus-yta-2:#E5E3DD;
  --hus-yta-3:#DFDDD6;
  --hus-yta-4:#ECEAE5;
  --hus-kyla:#E5E3DD;
  --hus-kyla-stark:#7E7B75;
  --hus-tegel:#B7B4AC;
  --hus-tak:#161616;
  --hus-takmonster:#161616;
  --brand-black:#161616;
  --brand-earth:#161616;
  --brand-fire:#161616;
  --brand-grass:#E5E3DD;
  --brand-grey:#63605A;
  --brand-red:#161616;
  --brand-sand:#ECEAE5;
  --brand-snow:#F4F2EE;
  --brand-sun-yellow:#4B4944;
  --brand-water:#161616;
  --brand-white:#FFFFFF;
  --brand-wind:#E5E3DD;
  --background:#F7F6F2;
  --earth-1:#F7F6F2;
  --earth-2:#F4F2EE;
  --earth-3:#ECEAE5;
  --earth-4:#E5E3DD;
  --earth-5:#DFDDD6;
  --earth-6:#D8D5CE;
  --earth-7:#CFCBC3;
  --earth-8:#B7B4AC;
  --earth-9:#161616;
  --earth-10:#4B4944;
  --earth-a1:#1616160E;
  --earth-a2:#1616160E;
  --earth-a4:#16161616;
  --earth-a5:#1616161D;
  --earth-a6:#CFCBC3;
  --earth-a8:#CFCBC3;
  --earth-a9:#4B4944;
  --earth-a10:#4B4944;
  --earth-a11:#4B4944;
  --earth-a12:#161616;
  --earth-contrast:#F7F6F2;
  --energy-solar-subtle:#E5E3DD;
  --energy-battery-subtle:#E5E3DD;
  --energy-mobility-solid:#706E68;
  --energy-mobility-soft:#D8D5CE;
  --energy-mobility-subtle:#E5E3DD;
  --energy-ventilation-solid:#7E7B75;
  --energy-ventilation-soft:#D8D5CE;
  --energy-ventilation-subtle:#E5E3DD;
  --energy-district-heating-solid:#B7B4AC;
  --energy-district-heating-soft:#D8D5CE;
  --energy-district-heating-subtle:#E5E3DD;
  --energy-district-cooling-solid:#706E68;
  --energy-district-cooling-soft:#D8D5CE;
  --energy-district-cooling-subtle:#E5E3DD;
  --energy-heat-pump-solid:#B7B4AC;
  --energy-heat-pump-soft:#D8D5CE;
  --energy-heat-pump-subtle:#E5E3DD;
  --fire-1:#F7F6F2;
  --fire-2:#F4F2EE;
  --fire-4:#E5E3DD;
  --fire-5:#DFDDD6;
  --fire-6:#D8D5CE;
  --fire-7:#CFCBC3;
  --fire-8:#B7B4AC;
  --fire-12:#161616;
  --fire-a1:#1616160E;
  --fire-a2:#1616160E;
  --fire-a3:#16161616;
  --fire-a4:#16161616;
  --fire-a5:#1616161D;
  --fire-a6:#CFCBC3;
  --fire-a7:#CFCBC3;
  --fire-a8:#CFCBC3;
  --fire-a9:#4B4944;
  --fire-a10:#4B4944;
  --fire-a11:#4B4944;
  --fire-a12:#161616;
  --fire-contrast:#F7F6F2;
  --grass-1:#F7F6F2;
  --grass-2:#F4F2EE;
  --grass-3:#ECEAE5;
  --grass-4:#E5E3DD;
  --grass-5:#DFDDD6;
  --grass-6:#D8D5CE;
  --grass-7:#CFCBC3;
  --grass-8:#B7B4AC;
  --grass-9:#161616;
  --grass-10:#4B4944;
  --grass-11:#4B4944;
  --grass-12:#161616;
  --grass-a1:#1616160E;
  --grass-a2:#1616160E;
  --grass-a3:#16161616;
  --grass-a4:#16161616;
  --grass-a5:#1616161D;
  --grass-a6:#CFCBC3;
  --grass-a7:#CFCBC3;
  --grass-a8:#CFCBC3;
  --grass-a9:#4B4944;
  --grass-a10:#4B4944;
  --grass-a11:#4B4944;
  --grass-a12:#161616;
  --grass-contrast:#F7F6F2;
  --neutral-1:#F7F6F2;
  --neutral-6:#D8D5CE;
  --neutral-7:#CFCBC3;
  --neutral-8:#B7B4AC;
  --neutral-a1:#1616160E;
  --neutral-a2:#1616160E;
  --neutral-a3:#16161616;
  --neutral-a4:#16161616;
  --neutral-a5:#1616161D;
  --neutral-a7:#CFCBC3;
  --neutral-a8:#CFCBC3;
  --neutral-a9:#4B4944;
  --neutral-a10:#4B4944;
  --neutral-a11:#4B4944;
  --neutral-a12:#161616;
  --red-1:#F7F6F2;
  --red-2:#F4F2EE;
  --red-4:#E5E3DD;
  --red-5:#DFDDD6;
  --red-6:#D8D5CE;
  --red-7:#CFCBC3;
  --red-8:#B7B4AC;
  --red-12:#161616;
  --red-a1:#1616160E;
  --red-a2:#1616160E;
  --red-a4:#16161616;
  --red-a5:#1616161D;
  --red-a6:#CFCBC3;
  --red-a7:#CFCBC3;
  --red-a8:#CFCBC3;
  --red-a9:#4B4944;
  --red-a10:#4B4944;
  --red-a11:#4B4944;
  --red-a12:#161616;
  --red-contrast:#F7F6F2;
  --sand-1:#F7F6F2;
  --sand-2:#F4F2EE;
  --sand-3:#ECEAE5;
  --sand-5:#DFDDD6;
  --sand-6:#D8D5CE;
  --sand-7:#CFCBC3;
  --sand-8:#B7B4AC;
  --sand-10:#706E68;
  --sand-a1:#1616160E;
  --sand-a2:#1616160E;
  --sand-a4:#16161616;
  --sand-a5:#1616161D;
  --sand-a6:#CFCBC3;
  --sand-a7:#CFCBC3;
  --sand-a8:#CFCBC3;
  --sand-a9:#4B4944;
  --sand-a10:#4B4944;
  --sand-a11:#4B4944;
  --sand-a12:#161616;
  --sand-contrast:#F7F6F2;
  --water-1:#F7F6F2;
  --water-2:#F4F2EE;
  --water-3:#ECEAE5;
  --water-4:#E5E3DD;
  --water-5:#DFDDD6;
  --water-6:#D8D5CE;
  --water-a1:#1616160E;
  --water-a2:#1616160E;
  --water-a4:#16161616;
  --water-a5:#1616161D;
  --water-a6:#CFCBC3;
  --water-a8:#CFCBC3;
  --water-a9:#4B4944;
  --water-a10:#4B4944;
  --water-a11:#4B4944;
  --water-a12:#161616;
  --water-contrast:#F7F6F2;
  --wind-1:#F7F6F2;
  --wind-2:#F4F2EE;
  --wind-3:#ECEAE5;
  --wind-4:#E5E3DD;
  --wind-5:#DFDDD6;
  --wind-6:#D8D5CE;
  --wind-7:#CFCBC3;
  --wind-8:#B7B4AC;
  --wind-9:#161616;
  --wind-10:#4B4944;
  --wind-11:#4B4944;
  --wind-12:#161616;
  --wind-a1:#1616160E;
  --wind-a2:#1616160E;
  --wind-a3:#16161616;
  --wind-a4:#16161616;
  --wind-a5:#1616161D;
  --wind-a6:#CFCBC3;
  --wind-a7:#CFCBC3;
  --wind-a8:#CFCBC3;
  --wind-a9:#4B4944;
  --wind-a10:#4B4944;
  --wind-a11:#4B4944;
  --wind-a12:#161616;
  --wind-contrast:#F7F6F2;
  --focus-ring:#161616;
  --status-destructive-border:#CFCBC3;
  --status-destructive-on-solid:#161616;
  --status-destructive-solid-hover:#161616;
  --status-online:#161616;
  --status-warning-border:#CFCBC3;
  --status-warning-on-solid:#161616;
  --surface-floating:#ECEAE5;
  --surface-overlay:rgba(11,10,9,.6);
  --surface-selected:#1616161D;
  --text-inverse:#161616;
  --text-placeholder:#63605A;
}
html:root:root[data-theme="dark"],html:root:root[data-theme="dark"] .ds064{
  --shadow-elevated:0 12px 32px #00000080;
  --shadow-ds-popover:0 12px 32px #00000080;
  --shadow-ds-elevated:0 12px 32px #00000080;
  --shadow-popover:0 12px 32px #00000080;
  --hers:#D4915F; --copper:#D4915F; --text-hers:#D4915F;
  --attr-kalla:#FFFFFF;
  --seven-bg:#151311;
  --seven-bg2:#1B1916;
  --seven-e3:#221F1C;
  --seven-e4:#292723;
  --seven-e5:#302D29;
  --seven-surface:#221F1C;
  --seven-float:#302D29;
  --seven-bsub:#383531;
  --seven-bord:#46423D;
  --seven-bstrong:#605C56;
  --seven-e9:#6D6A63;
  --seven-e10:#7C7872;
  --seven-text:#ECEAE4;
  --seven-text2:#B8B5AD;
  --seven-text3:#A09C92;
  --seven-ink:#ECEAE4;
  --seven-inkh:#B8B5AD;
  --seven-onink:#151311;
  --seven-onink2:#4B4944;
  --seven-disbg:#221F1C;
  --seven-textdis:#605C56;
  --seven-scrim:rgba(11,10,9,.8);
  --seven-focus:#B8B5AD;
  --seven-elemA:#ECEAE406;
  --seven-elemH:#ECEAE409;
  --seven-elemS:#ECEAE413;
  --seven-hers:#D4915F;
  --seven-texthers:#D4915F;
  --earth-500:#ECEAE4;
  --grass-500:#292723;
  --water-500:#ECEAE4;
  --wind-500:#292723;
  --fire-500:#ECEAE4;
  --red-500:#ECEAE4;
  --sand-4:#292723;
  --thiink-black:#ECEAE4;
  --thiink-snow:#1B1916;
  --thiink-white:#221F1C;
  --thiink-grey:#A09C92;
  --neutral-100:#1B1916;
  --neutral-200:#383531;
  --neutral-400:#6D6A63;
  --neutral-600:#B8B5AD;
  --bg-page:#151311;
  --bg-secondary:#1B1916;
  --bg-surface:#221F1C;
  --bg-positive:#221F1C;
  --bg-warning:#221F1C;
  --bg-destructive:#221F1C;
  --bg-overlay:rgba(11,10,9,.8);
  --bg-cta:#ECEAE4;
  --text-primary:#ECEAE4;
  --text-secondary:#B8B5AD;
  --text-tertiary:#A09C92;
  --text-on-cta:#151311;
  --text-on-cta-secondary:#4B4944;
  --text-link:#ECEAE4;
  --text-link-hover:#B8B5AD;
  --border-primary:#46423D;
  --border-interactive:#605C56;
  --border-positive:#46423D;
  --border-warning:#46423D;
  --border-destructive:#46423D;
  --status-positive:#ECEAE4;
  --status-warning:#ECEAE4;
  --status-destructive:#ECEAE4;
  --severity-warning-fg:#ECEAE4;
  --bg-cta-hover:#B8B5AD;
  --control-accent:#ECEAE4;
  --text-emphasis:#ECEAE4;
  --bg-selected:#ECEAE413;
  --bg-accent-soft:#221F1C;
  --border-accent-soft:#46423D;
  --text-positive:#ECEAE4;
  --text-warning:#ECEAE4;
  --text-destructive:#ECEAE4;
  --bg-attention:#221F1C;
  --border-attention:#46423D;
  --text-attention:#ECEAE4;
  --bg-approval:#221F1C;
  --border-approval:#46423D;
  --text-approval:#ECEAE4;
  --border-subtle:#383531;
  --bg-disabled:#221F1C;
  --track:#46423D;
  --bg-info:#221F1C;
  --border-info:#46423D;
  --text-info:#ECEAE4;
  --border-approval-soft:#46423D;
  --tillstand-klar-bg:#221F1C;
  --tillstand-klar-fg:#ECEAE4;
  --tillstand-klar-prick:#ECEAE4;
  --tillstand-pagar-bg:#221F1C;
  --tillstand-pagar-fg:#ECEAE4;
  --tillstand-pagar-prick:#B8B5AD;
  --tillstand-vantar-bg:#221F1C;
  --tillstand-vantar-fg:#ECEAE4;
  --tillstand-vantar-prick:#6D6A63;
  --tillstand-behover-bg:#221F1C;
  --tillstand-behover-fg:#ECEAE4;
  --tillstand-behover-prick:#ECEAE4;
  --tillstand-stoppad-bg:#ECEAE4;
  --tillstand-stoppad-fg:#151311;
  --tillstand-stoppad-prick:#151311;
  --tillstand-ejpaborjad-fg:#B8B5AD;
  --tillstand-ejpaborjad-prick:#605C56;
  --tillstand-stangd-fg:#B8B5AD;
  --tillstand-stangd-prick:#6D6A63;
  --kunden-ser-bg:#292723;
  --kunden-ser-fg:#ECEAE4;
  --gradient-hero-fran:#ECEAE4;
  --gradient-hero-till:#ECEAE4;
  --bg-neutral-soft:#1B1916;
  --text-neutral-soft:#B8B5AD;
  --chart-asset-solar:#B8B5AD;
  --chart-asset-solar-dark:#B8B5AD;
  --chart-asset-battery:#7C7872;
  --chart-asset-ev:#6D6A63;
  --chart-asset-heat-pump:#605C56;
  --chart-asset-ventilation:#6D6A63;
  --chart-asset-sold:#7C7872;
  --chart-grid:#6D6A63;
  --energy-grid-subtle:#292723;
  --energy-grid-soft:#383531;
  --energy-grid-solid:#6D6A63;
  --chart-cat-1:#ECEAE4;
  --chart-cat-2:#B8B5AD;
  --chart-cat-3:#6D6A63;
  --skal-cta:#ECEAE4;
  --skal-cta-hover:#B8B5AD;
  --skal-on-cta:#151311;
  --skal-on-cta-accent:#4B4944;
  --skal-accent:#ECEAE4;
  --skal-markering:#ECEAE413;
  --earth-11:#B8B5AD;
  --earth-12:#ECEAE4;
  --earth-a3:#ECEAE409;
  --earth-a7:#46423D;
  --fire-3:#221F1C;
  --fire-9:#ECEAE4;
  --fire-10:#B8B5AD;
  --fire-11:#B8B5AD;
  --red-3:#221F1C;
  --red-10:#B8B5AD;
  --red-11:#B8B5AD;
  --neutral-2:#1B1916;
  --neutral-3:#221F1C;
  --neutral-4:#292723;
  --neutral-5:#302D29;
  --neutral-9:#6D6A63;
  --neutral-10:#7C7872;
  --neutral-11:#B8B5AD;
  --neutral-12:#ECEAE4;
  --neutral-a6:#46423D;
  --accent-bg:#ECEAE4;
  --accent-text:#ECEAE4;
  --accent-text-strong:#ECEAE4;
  --accent-subtle:#ECEAE413;
  --accent-border:#46423D;
  --accent-contrast:#151311;
  --accent-bg-hover:#B8B5AD;
  --focus-ring-ds:#B8B5AD;
  --surface-hover:#ECEAE409;
  --surface-page:#151311;
  --surface-raised:#221F1C;
  --surface-subtle:#1B1916;
  --border-default:#46423D;
  --border-control:#46423D;
  --text-ds-primary:#ECEAE4;
  --text-ds-secondary:#B8B5AD;
  --text-ds-tertiary:#A09C92;
  --energy-solar-solid:#B8B5AD;
  --energy-solar-soft:#383531;
  --energy-battery-solid:#7C7872;
  --energy-battery-soft:#383531;
  --water-8:#605C56;
  --water-9:#ECEAE4;
  --water-10:#B8B5AD;
  --water-11:#B8B5AD;
  --water-12:#ECEAE4;
  --water-a3:#ECEAE409;
  --water-a7:#46423D;
  --sand-9:#6D6A63;
  --sand-12:#ECEAE4;
  --sand-a3:#ECEAE409;
  --red-9:#ECEAE4;
  --red-a3:#ECEAE409;
  --status-warning-bg:#221F1C;
  --status-warning-text:#ECEAE4;
  --status-warning-solid:#ECEAE4;
  --status-destructive-bg:#221F1C;
  --status-destructive-text:#ECEAE4;
  --status-destructive-solid:#ECEAE4;
  --sand-11:#B8B5AD;
  --water-7:#46423D;
  --arv-app-l-bg:#F7F6F2;
  --arv-app-l-pn:#FFFFFF;
  --arv-app-l-cd:#F4F2EE;
  --arv-app-l-bd:#CFCBC3;
  --arv-app-l-tx:#161616;
  --arv-app-l-tm:#4B4944;
  --arv-app-l-td:#63605A;
  --arv-app-l-gn:#161616;
  --arv-app-l-gd:#1616160E;
  --arv-app-l-yl:#4B4944;
  --arv-app-l-yd:#1616160E;
  --arv-app-l-bu:#161616;
  --arv-app-l-bud:#1616160E;
  --arv-app-l-or:#4B4944;
  --arv-app-l-od:#1616160E;
  --arv-app-l-pu:#161616;
  --arv-app-l-pd:#1616160E;
  --arv-app-l-rd:#161616;
  --arv-app-l-pet:#161616;
  --arv-app-l-petd:#1616160E;
  --arv-app-l-gold:#4B4944;
  --arv-app-l-amber:#4B4944;
  --arv-app-l-coral:#4B4944;
  --arv-app-l-earth:#161616;
  --arv-app-l-grass:#E5E3DD;
  --arv-app-l-water:#161616;
  --arv-app-l-gn22:#16161616;
  --arv-app-l-gn33:#16161616;
  --arv-app-l-gn44:#1616161D;
  --arv-app-l-gn55:#1616161D;
  --arv-app-l-gn77:#1616161D;
  --arv-app-l-bu44:#1616161D;
  --arv-app-l-or44:#1616161D;
  --arv-app-l-or55:#1616161D;
  --arv-app-l-or66:#1616161D;
  --arv-app-l-rd33:#16161616;
  --arv-app-l-rd44:#1616161D;
  --arv-app-d-bg:#151311;
  --arv-app-d-pn:#221F1C;
  --arv-app-d-cd:#1B1916;
  --arv-app-d-bd:#46423D;
  --arv-app-d-tx:#ECEAE4;
  --arv-app-d-tm:#B8B5AD;
  --arv-app-d-td:#A09C92;
  --arv-app-d-gn:#ECEAE4;
  --arv-app-d-gd:#ECEAE406;
  --arv-app-d-yl:#B8B5AD;
  --arv-app-d-yd:#ECEAE406;
  --arv-app-d-bu:#ECEAE4;
  --arv-app-d-bud:#ECEAE406;
  --arv-app-d-or:#B8B5AD;
  --arv-app-d-od:#ECEAE406;
  --arv-app-d-pu:#ECEAE4;
  --arv-app-d-pd:#ECEAE406;
  --arv-app-d-rd:#ECEAE4;
  --arv-app-d-pet:#ECEAE4;
  --arv-app-d-petd:#ECEAE406;
  --arv-app-d-gold:#B8B5AD;
  --arv-app-d-amber:#B8B5AD;
  --arv-app-d-coral:#B8B5AD;
  --arv-app-d-earth:#ECEAE4;
  --arv-app-d-grass:#292723;
  --arv-app-d-water:#ECEAE4;
  --arv-app-d-gn22:#ECEAE409;
  --arv-app-d-gn33:#ECEAE409;
  --arv-app-d-gn44:#ECEAE413;
  --arv-app-d-gn55:#ECEAE413;
  --arv-app-d-gn77:#ECEAE413;
  --arv-app-d-bu44:#ECEAE413;
  --arv-app-d-or44:#ECEAE413;
  --arv-app-d-or55:#ECEAE413;
  --arv-app-d-or66:#ECEAE413;
  --arv-app-d-rd33:#ECEAE409;
  --arv-app-d-rd44:#ECEAE413;
  --pal-classic-solar:#B8B5AD;
  --pal-classic-panel:#B8B5AD;
  --pal-classic-grid:#6D6A63;
  --pal-classic-house:#605C56;
  --pal-classic-sold:#7C7872;
  --pal-classic-smart:#ECEAE4;
  --pal-classic-ev:#6D6A63;
  --pal-classic-hvac:#605C56;
  --pal-v2-solar:#B8B5AD;
  --pal-v2-panel:#B8B5AD;
  --pal-v2-grid:#6D6A63;
  --pal-v2-house:#605C56;
  --pal-v2-battery:#7C7872;
  --pal-v2-sold:#7C7872;
  --pal-v2-smart:#ECEAE4;
  --pal-v2-ev:#6D6A63;
  --pal-v2-hvac:#605C56;
  --pal-v2-ov-l-yl:#B8B5AD;
  --pal-v2-ov-l-yd:#ECEAE406;
  --pal-v2-ov-l-gold:#B8B5AD;
  --pal-v2-ov-d-yl:#B8B5AD;
  --pal-v2-ov-d-yd:#ECEAE406;
  --pal-v2-ov-d-gold:#B8B5AD;
  --arv-wzc-page:#151311;
  --arv-wzc-card:#1B1916;
  --arv-wzc-white:#221F1C;
  --arv-wzc-text:#ECEAE4;
  --arv-wzc-muted:#B8B5AD;
  --arv-wzc-accent:#ECEAE4;
  --arv-wzc-sage:#6D6A63;
  --arv-wzc-border:#46423D;
  --arv-wzc-soft:#ECEAE406;
  --arv-wzc-fel:#ECEAE4;
  --hus-kontur:#ECEAE4;
  --hus-detalj:#6D6A63;
  --hus-glas:#221F1C;
  --hus-vit:#221F1C;
  --hus-sten:#605C56;
  --hus-varme:#605C56;
  --hus-vatten:#6D6A63;
  --hus-ram:#46423D;
  --hus-tra:#7C7872;
  --hus-kaross:#B8B5AD;
  --hus-hjul:#ECEAE4;
  --hus-text:#B8B5AD;
  --hus-trappa-a:#221F1C;
  --hus-trappa-b:#292723;
  --hus-yta-1:#221F1C;
  --hus-yta-2:#292723;
  --hus-yta-3:#302D29;
  --hus-yta-4:#221F1C;
  --hus-kyla:#292723;
  --hus-kyla-stark:#6D6A63;
  --hus-tegel:#605C56;
  --hus-tak:#ECEAE4;
  --hus-takmonster:#ECEAE4;
  --brand-black:#ECEAE4;
  --brand-earth:#ECEAE4;
  --brand-fire:#ECEAE4;
  --brand-grass:#292723;
  --brand-grey:#A09C92;
  --brand-red:#ECEAE4;
  --brand-sand:#221F1C;
  --brand-snow:#1B1916;
  --brand-sun-yellow:#B8B5AD;
  --brand-water:#ECEAE4;
  --brand-white:#221F1C;
  --brand-wind:#292723;
  --background:#151311;
  --earth-1:#151311;
  --earth-2:#1B1916;
  --earth-3:#221F1C;
  --earth-4:#292723;
  --earth-5:#302D29;
  --earth-6:#383531;
  --earth-7:#46423D;
  --earth-8:#605C56;
  --earth-9:#ECEAE4;
  --earth-10:#B8B5AD;
  --earth-a1:#ECEAE406;
  --earth-a2:#ECEAE406;
  --earth-a4:#ECEAE409;
  --earth-a5:#ECEAE413;
  --earth-a6:#46423D;
  --earth-a8:#46423D;
  --earth-a9:#B8B5AD;
  --earth-a10:#B8B5AD;
  --earth-a11:#B8B5AD;
  --earth-a12:#ECEAE4;
  --earth-contrast:#151311;
  --energy-solar-subtle:#292723;
  --energy-battery-subtle:#292723;
  --energy-mobility-solid:#7C7872;
  --energy-mobility-soft:#383531;
  --energy-mobility-subtle:#292723;
  --energy-ventilation-solid:#6D6A63;
  --energy-ventilation-soft:#383531;
  --energy-ventilation-subtle:#292723;
  --energy-district-heating-solid:#605C56;
  --energy-district-heating-soft:#383531;
  --energy-district-heating-subtle:#292723;
  --energy-district-cooling-solid:#7C7872;
  --energy-district-cooling-soft:#383531;
  --energy-district-cooling-subtle:#292723;
  --energy-heat-pump-solid:#605C56;
  --energy-heat-pump-soft:#383531;
  --energy-heat-pump-subtle:#292723;
  --fire-1:#151311;
  --fire-2:#1B1916;
  --fire-4:#292723;
  --fire-5:#302D29;
  --fire-6:#383531;
  --fire-7:#46423D;
  --fire-8:#605C56;
  --fire-12:#ECEAE4;
  --fire-a1:#ECEAE406;
  --fire-a2:#ECEAE406;
  --fire-a3:#ECEAE409;
  --fire-a4:#ECEAE409;
  --fire-a5:#ECEAE413;
  --fire-a6:#46423D;
  --fire-a7:#46423D;
  --fire-a8:#46423D;
  --fire-a9:#B8B5AD;
  --fire-a10:#B8B5AD;
  --fire-a11:#B8B5AD;
  --fire-a12:#ECEAE4;
  --fire-contrast:#151311;
  --grass-1:#151311;
  --grass-2:#1B1916;
  --grass-3:#221F1C;
  --grass-4:#292723;
  --grass-5:#302D29;
  --grass-6:#383531;
  --grass-7:#46423D;
  --grass-8:#605C56;
  --grass-9:#ECEAE4;
  --grass-10:#B8B5AD;
  --grass-11:#B8B5AD;
  --grass-12:#ECEAE4;
  --grass-a1:#ECEAE406;
  --grass-a2:#ECEAE406;
  --grass-a3:#ECEAE409;
  --grass-a4:#ECEAE409;
  --grass-a5:#ECEAE413;
  --grass-a6:#46423D;
  --grass-a7:#46423D;
  --grass-a8:#46423D;
  --grass-a9:#B8B5AD;
  --grass-a10:#B8B5AD;
  --grass-a11:#B8B5AD;
  --grass-a12:#ECEAE4;
  --grass-contrast:#151311;
  --neutral-1:#151311;
  --neutral-6:#383531;
  --neutral-7:#46423D;
  --neutral-8:#605C56;
  --neutral-a1:#ECEAE406;
  --neutral-a2:#ECEAE406;
  --neutral-a3:#ECEAE409;
  --neutral-a4:#ECEAE409;
  --neutral-a5:#ECEAE413;
  --neutral-a7:#46423D;
  --neutral-a8:#46423D;
  --neutral-a9:#B8B5AD;
  --neutral-a10:#B8B5AD;
  --neutral-a11:#B8B5AD;
  --neutral-a12:#ECEAE4;
  --red-1:#151311;
  --red-2:#1B1916;
  --red-4:#292723;
  --red-5:#302D29;
  --red-6:#383531;
  --red-7:#46423D;
  --red-8:#605C56;
  --red-12:#ECEAE4;
  --red-a1:#ECEAE406;
  --red-a2:#ECEAE406;
  --red-a4:#ECEAE409;
  --red-a5:#ECEAE413;
  --red-a6:#46423D;
  --red-a7:#46423D;
  --red-a8:#46423D;
  --red-a9:#B8B5AD;
  --red-a10:#B8B5AD;
  --red-a11:#B8B5AD;
  --red-a12:#ECEAE4;
  --red-contrast:#151311;
  --sand-1:#151311;
  --sand-2:#1B1916;
  --sand-3:#221F1C;
  --sand-5:#302D29;
  --sand-6:#383531;
  --sand-7:#46423D;
  --sand-8:#605C56;
  --sand-10:#7C7872;
  --sand-a1:#ECEAE406;
  --sand-a2:#ECEAE406;
  --sand-a4:#ECEAE409;
  --sand-a5:#ECEAE413;
  --sand-a6:#46423D;
  --sand-a7:#46423D;
  --sand-a8:#46423D;
  --sand-a9:#B8B5AD;
  --sand-a10:#B8B5AD;
  --sand-a11:#B8B5AD;
  --sand-a12:#ECEAE4;
  --sand-contrast:#151311;
  --water-1:#151311;
  --water-2:#1B1916;
  --water-3:#221F1C;
  --water-4:#292723;
  --water-5:#302D29;
  --water-6:#383531;
  --water-a1:#ECEAE406;
  --water-a2:#ECEAE406;
  --water-a4:#ECEAE409;
  --water-a5:#ECEAE413;
  --water-a6:#46423D;
  --water-a8:#46423D;
  --water-a9:#B8B5AD;
  --water-a10:#B8B5AD;
  --water-a11:#B8B5AD;
  --water-a12:#ECEAE4;
  --water-contrast:#151311;
  --wind-1:#151311;
  --wind-2:#1B1916;
  --wind-3:#221F1C;
  --wind-4:#292723;
  --wind-5:#302D29;
  --wind-6:#383531;
  --wind-7:#46423D;
  --wind-8:#605C56;
  --wind-9:#ECEAE4;
  --wind-10:#B8B5AD;
  --wind-11:#B8B5AD;
  --wind-12:#ECEAE4;
  --wind-a1:#ECEAE406;
  --wind-a2:#ECEAE406;
  --wind-a3:#ECEAE409;
  --wind-a4:#ECEAE409;
  --wind-a5:#ECEAE413;
  --wind-a6:#46423D;
  --wind-a7:#46423D;
  --wind-a8:#46423D;
  --wind-a9:#B8B5AD;
  --wind-a10:#B8B5AD;
  --wind-a11:#B8B5AD;
  --wind-a12:#ECEAE4;
  --wind-contrast:#151311;
  --focus-ring:#B8B5AD;
  --status-destructive-border:#46423D;
  --status-destructive-on-solid:#ECEAE4;
  --status-destructive-solid-hover:#ECEAE4;
  --status-online:#ECEAE4;
  --status-warning-border:#46423D;
  --status-warning-on-solid:#ECEAE4;
  --surface-floating:#221F1C;
  --surface-overlay:rgba(11,10,9,.8);
  --surface-selected:#ECEAE413;
  --text-inverse:#ECEAE4;
  --text-placeholder:#A09C92;
}
/* Seven har EN radie: ingen. Vyerna bär fortfarande råa px-radier i sina egna
   regler; denna rad tar dem alla tills de städas vy för vy. */
html:root:root *,html:root:root *::before,html:root:root *::after{border-radius:0!important}
html:root:root body{font-family:var(--font-body);background:var(--bg-page);color:var(--text-primary)}
html:root:root h1,html:root:root h2,html:root:root .type-display{font-family:var(--font-display);font-weight:500;letter-spacing:-.015em}
html:root:root ::selection{background:var(--seven-bord)}

/* TESTMILJÖ (lib/testmiljo) */
body::after{content:"Testmiljö · ingen riktig data, e-posten är riktig";position:fixed;left:0;right:0;bottom:0;z-index:2147483647;padding:4px 12px;background:#161616;color:#F7F6F2;font:500 12px/16px -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;letter-spacing:.05em;text-transform:uppercase;text-align:center;pointer-events:none}