/* Biotherm Heat · webb · gemensam bas för startsideförslagen (grafisk profil 2026).
   Tokens, typsnitt, typografi, knappar och rörelse ur profilen. Varje förslag bygger sin egen layout ovanpå.
   Ladda före förslagets egen <style>. Allt här får skrivas över, men tokens och regler ska följas. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-grotesque.woff2") format("woff2-variations"), url("fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: block;
}

:root {
  /* natt (grunden, 70 %) */
  --natt: #040a18;
  --natt-2: #071430;
  --djup: #020611;
  --panel: rgba(14, 28, 56, .55);
  --panel-solid: #0b1934;
  /* text på natt */
  --is: #eef3fa;                        /* rubriker, all text 17,7:1 */
  --is-2: rgba(212, 226, 243, .84);     /* brödtext */
  --is-3: rgba(180, 206, 236, .64);     /* etiketter, liten text */
  --is-4: rgba(170, 196, 228, .44);     /* bara fotnoter */
  --linje: rgba(170, 196, 228, .16);
  --linje-2: rgba(170, 196, 228, .32);
  /* flödesskalan: kall nordisk blå -> varm bärnsten (temperatur, aldrig dekor) */
  --kall-0: #1d3a78;
  --kall: #1f74b8;
  --sval: #9fb4c4;
  --varm: #f29a3c;
  --glod: #ffd7a0;
  --bla: #0098d4;                       /* Biotherm-blå: logotyp, pilar, länkar, aktiva lägen */
  --flode: linear-gradient(90deg, #1d3a78, #1f74b8 35%, #9fb4c4 58%, #f29a3c 80%, #ffd7a0);
  --flode-v: linear-gradient(0deg, #1d3a78, #1f74b8 35%, #9fb4c4 58%, #f29a3c 80%, #ffd7a0);
  --varmt-ord: linear-gradient(90deg, #c9d3dc, #f2a24a 46%, #ffd7a0);
  /* ljus variant (sparsamt: tekniska tabeller och mycket text) */
  --snö: #f3f6fa;
  --snö-2: #e6ecf3;
  --bläck: #0a1428;
  --bläck-2: #3a4a63;
  --bläck-3: #6b7a92;
  --logosvart: #1d1d1b;
  /* mått */
  --marg: clamp(24px, 6.25vw, 120px);   /* 120 px på 1920, 24 px på mobil */
  --innehall: 1680px;                   /* största innehållsbredd */
  --spalt: clamp(16px, 1.5vw, 28px);    /* mellanrum i 12-kolumnsrutnätet */
  --sektion: clamp(96px, 11vw, 200px);  /* luft mellan sektioner */
  --vh: 1vh;                            /* sätts i px av bas.js – använd calc(var(--vh) * 100) i stället för 100vh */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--natt);
  color: var(--is);
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  font-weight: 340;
  font-variation-settings: "opsz" 18;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: rgba(242, 154, 60, .32); color: #fff; }
:focus-visible { outline: 2px solid var(--bla); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hoppa { position: absolute; left: 16px; top: -60px; z-index: 1000; background: var(--is); color: var(--natt); padding: 10px 16px; border-radius: 999px; font-size: .9375rem; }
.hoppa:focus { top: 16px; }

/* ---------- typografi (lätta rubriker, smala versaletiketter, tabulära siffror) ---------- */
.t-etikett {
  font-size: .8125rem; line-height: 1.3; font-weight: 600; font-stretch: 80%;
  font-variation-settings: "opsz" 12; letter-spacing: .16em; text-transform: uppercase; color: var(--is-3);
}
.t-etikett.med-linje { display: inline-flex; align-items: center; gap: 14px; }
.t-etikett.med-linje::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.t-h1 { font-size: clamp(3.25rem, 1.55rem + 5.4vw, 8rem); line-height: .96; font-weight: 240; font-variation-settings: "opsz" 96; letter-spacing: -.038em; text-wrap: balance; }
.t-h2 { font-size: clamp(2.375rem, 1.4rem + 3.3vw, 5.25rem); line-height: 1; font-weight: 260; font-variation-settings: "opsz" 96; letter-spacing: -.032em; text-wrap: balance; }
.t-h3 { font-size: clamp(1.75rem, 1.3rem + 1.3vw, 2.75rem); line-height: 1.08; font-weight: 300; font-variation-settings: "opsz" 60; letter-spacing: -.018em; text-wrap: balance; }
.t-h4 { font-size: clamp(1.3125rem, 1.15rem + .5vw, 1.75rem); line-height: 1.18; font-weight: 400; font-variation-settings: "opsz" 32; letter-spacing: -.008em; }
.t-ingress { font-size: clamp(1.1875rem, 1.02rem + .55vw, 1.625rem); line-height: 1.4; font-weight: 320; font-variation-settings: "opsz" 28; color: var(--is-2); text-wrap: pretty; }
.t-brod { font-size: clamp(1.0625rem, 1rem + .2vw, 1.1875rem); line-height: 1.55; font-weight: 340; font-variation-settings: "opsz" 18; color: var(--is-2); text-wrap: pretty; }
.t-liten { font-size: .9375rem; line-height: 1.5; font-weight: 380; font-variation-settings: "opsz" 14; color: var(--is-3); }
.t-siffra { font-weight: 240; font-variation-settings: "opsz" 96; letter-spacing: -.035em; font-variant-numeric: tabular-nums; line-height: .9; white-space: nowrap; }
.t-enhet { font-size: .32em; font-weight: 400; letter-spacing: 0; color: var(--is-3); margin-left: .12em; }
.t-varm { color: var(--varm); }
.t-glod { color: var(--glod); }
.t-bla { color: var(--bla); }
.t-varmt-ord { background: var(--varmt-ord); -webkit-background-clip: text; background-clip: text; color: transparent; }
.t-flode { background: var(--flode); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- layout ---------- */
.bredd { width: 100%; max-width: calc(var(--innehall) + 2 * var(--marg)); margin-inline: auto; padding-inline: var(--marg); }
.rutnat { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); }
@media (max-width: 760px) { .rutnat { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- komponenter ---------- */
.pil { display: inline-block; width: 22px; height: 12px; flex: none; overflow: visible; }
/* <svg class="pil" viewBox="0 0 22 12" aria-hidden="true"><path d="M0 6h20M15 1l5 5-5 5" fill="none" stroke="currentColor" stroke-width="1.4"/></svg>  (BT.pil i bas.js) */
.knapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  height: 56px; padding: 0 26px 0 28px; border-radius: 999px;
  background: var(--is); color: var(--natt);
  font-size: 1rem; font-weight: 450; font-variation-settings: "opsz" 18; letter-spacing: -.003em; white-space: nowrap;
  transition: background-color .5s var(--ease), color .5s var(--ease);
}
.knapp:hover { background: #fff; }
.knapp .pil { transition: transform .6s var(--ease); }
.knapp:hover .pil, .lank:hover .pil { transform: translateX(4px); }
.knapp.sekundar { background: transparent; color: var(--is); box-shadow: inset 0 0 0 1px var(--linje-2); }
.knapp.sekundar:hover { box-shadow: inset 0 0 0 1px rgba(238, 243, 250, .6); }
@media (max-width: 760px) { .knapp { height: 52px; } }
.lank { display: inline-flex; align-items: center; gap: 12px; color: var(--is); font-weight: 420; }
.lank .pil { color: var(--bla); transition: transform .6s var(--ease); }
.meny-lank { position: relative; font-size: 1.0625rem; font-weight: 380; color: var(--is-2); padding: 6px 0; transition: color .4s ease; }
.meny-lank:hover, .meny-lank.aktiv { color: var(--is); }
.meny-lank::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; border-radius: 2px; background: var(--flode); transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s var(--ease); }
.meny-lank.aktiv::after, .meny-lank:hover::after { transform: scaleX(1); }
.linje { height: 1px; background: var(--linje); }
.linje-flode { height: 2px; border-radius: 2px; background: var(--flode); }
.kort { background: var(--panel); border: 1px solid var(--linje); border-radius: 20px; }
.rad-data { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 14px 0; border-top: 1px solid var(--linje); }
.rad-data:last-child { border-bottom: 1px solid var(--linje); }
.markning {   /* på genererade bilder: <span class="markning">Illustrativ miljöbild</span> */
  display: inline-block; padding: 6px 10px; border-radius: 6px;
  background: rgba(4, 10, 24, .72); border: 1px solid var(--linje);
  font-size: .6875rem; font-weight: 600; font-stretch: 80%; font-variation-settings: "opsz" 12;
  letter-spacing: .14em; text-transform: uppercase; color: var(--is-2);
}
.punkt-varm { width: 10px; height: 10px; border-radius: 50%; background: var(--varm); box-shadow: 0 0 0 6px rgba(242, 154, 60, .16), 0 0 24px rgba(242, 154, 60, .6); }

/* ljus yta: <section class="ljus"> */
.ljus { background: var(--snö); color: var(--bläck); }
.ljus .t-ingress, .ljus .t-brod { color: var(--bläck-2); }
.ljus .t-etikett, .ljus .t-liten, .ljus .t-enhet { color: var(--bläck-3); }
.ljus .linje, .ljus .rad-data { border-color: rgba(10, 20, 40, .12); }
.ljus .linje { background: rgba(10, 20, 40, .12); }
.ljus .lank { color: var(--bläck); }
.ljus .lank .pil { color: var(--kall); }
.ljus .knapp { background: var(--bläck); color: var(--snö); }
.ljus .knapp:hover { background: #000; }

/* ---------- rörelse (lugn, i läsordning; kurva cubic-bezier(.16,1,.3,1)) ----------
   Klasserna får .syns av bas.js när de kommer in i bild. Utan JS syns allt direkt. */
.js .in { opacity: 0; transform: translateY(14px); transition: opacity 1.1s ease var(--d, 0s), transform 1.3s var(--ease) var(--d, 0s); }
.js .in.syns { opacity: 1; transform: none; }
.rad { display: block; overflow: hidden; padding: .1em .06em .12em 0; margin: -.1em 0 -.12em; }
.js .rad > span { display: block; transform: translateY(108%); transition: transform 1.5s var(--ease) var(--d, 0s); }
.js .rad.syns > span { transform: none; }
.js .tona { opacity: 0; transition: opacity 1.2s ease var(--d, 0s); }
.js .tona.syns { opacity: 1; }
.js .rita { transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.6s var(--ease) var(--d, 0s); }
.js .rita.syns { transform: none; }
html.visa-allt *, html.visa-allt *::before, html.visa-allt *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation-delay: 0s !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01s !important; transition-delay: 0s !important; animation-duration: .01s !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}