/* ═══════════════════════════════════════════════════════════════════════
   BILNYCKELGRUPPEN — FÄRGSYSTEM
   ───────────────────────────────────────────────────────────────────────
   Allt på sajten härleds ur de nio raderna i blocket nedan.
   Ändrar du en rad ändras hela sidan, konsekvent, utan att du behöver
   leta reda på en enda hex-kod någon annanstans i koden.

   Färgerna räknas i OKLCH — ett färgrum där "ljushet" betyder samma sak
   för alla färgtoner. I hex blir gult alltid ljusare än blått vid samma
   siffra; i OKLCH gör det inte det. Därför går paletten att styra med
   reglage utan att den spricker.

   --vand är den viktigaste raden: 0 = ljus sida, 1 = mörk sida.
   Den drar hela sidan mellan lägena. Det är därför de tre spåren kan byta
   ljushet utan att byggas om.
   ═══════════════════════════════════════════════════════════════════════ */

:root{

  /* ─── DE RADER DU ÄNDRAR ─────────────────────────────────────────── */

  --vand:            0;      /* 0 = ljus sida · 1 = mörk sida            */
  --ton:           258;      /* grundton 0–360. A6:s blå ligger på 264   */
  --kroma:        .035;      /* hur färgat gråskalan är. 0 = neutralt    */

  --signal-ton:     27;      /* signalfärg. Rött 27 · orange 55 · blå 258 */
  --signal-kroma:  .195;
  --signal-ljus:    54;      /* signalens ljushet i procent               */

  --band-ton:      264;      /* de mörka helbreddsbandens ton             */
  --band-ljus:      19;
  --band-kroma:   .075;

  /* ─── HÄRLETT — rör inte om du inte vet varför ───────────────────── */

  /* Ljushetstrappa. Varje steg tolkas mellan ljust och mörkt läge med
     --vand, så samma rad ger rätt värde i båda lägena.                  */
  --L-botten:  calc((1 - var(--vand)) * 97   + var(--vand) * 13);
  --L-yta:     calc((1 - var(--vand)) * 100  + var(--vand) * 17);
  --L-upphojd: calc((1 - var(--vand)) * 93.5 + var(--vand) * 22);
  --L-linje:   calc((1 - var(--vand)) * 84   + var(--vand) * 30);
  --L-svag:    calc((1 - var(--vand)) * 46   + var(--vand) * 68);
  --L-text:    calc((1 - var(--vand)) * 21   + var(--vand) * 95);
  --L-stark:   calc((1 - var(--vand)) * 12   + var(--vand) * 100);

  --botten:  oklch(calc(var(--L-botten)  * 1%) calc(var(--kroma) * .45) var(--ton));
  --yta:     oklch(calc(var(--L-yta)     * 1%) calc(var(--kroma) * .25) var(--ton));
  --upphojd: oklch(calc(var(--L-upphojd) * 1%) calc(var(--kroma) * .70) var(--ton));
  --linje:   oklch(calc(var(--L-linje)   * 1%) calc(var(--kroma) * .85) var(--ton));
  --svag:    oklch(calc(var(--L-svag)    * 1%) calc(var(--kroma) * .90) var(--ton));
  --text:    oklch(calc(var(--L-text)    * 1%) calc(var(--kroma) * .55) var(--ton));
  --stark:   oklch(calc(var(--L-stark)   * 1%) calc(var(--kroma) * .30) var(--ton));

  /* Signalfärgen — telefonnumret, knappen, det akuta. Liten och sällan. */
  --signal:      oklch(calc(var(--signal-ljus) * 1%) var(--signal-kroma) var(--signal-ton));
  --signal-mork: oklch(calc((var(--signal-ljus) - 11) * 1%) var(--signal-kroma) var(--signal-ton));
  --signal-ljus-yta: oklch(calc((var(--signal-ljus) + 40) * 1%) calc(var(--signal-kroma) * .22) var(--signal-ton));
  --pa-signal:   oklch(99% .01 var(--signal-ton));

  /* De mörka banden. Ligger fast oavsett --vand — det är de som ger
     sidan rytm, och de ska vara mörka även när sidan i övrigt är ljus. */
  --band:       oklch(calc(var(--band-ljus) * 1%) var(--band-kroma) var(--band-ton));
  --band-djup:  oklch(calc((var(--band-ljus) - 7) * 1%) calc(var(--band-kroma) * 1.1) var(--band-ton));
  --band-text:  oklch(96% .012 var(--band-ton));
  --band-svag:  oklch(72% .02  var(--band-ton));
  --band-linje: oklch(calc((var(--band-ljus) + 14) * 1%) calc(var(--band-kroma) * .8) var(--band-ton));

  /* Form och rörelse */
  --radie: 3px;
  --lugn: cubic-bezier(.22,.61,.36,1);
  --kvick: cubic-bezier(.23,1,.32,1);

  /* Papperstexturen som gör att ljus botten inte blir platt vit.
     Två lager brus i olika skala — det är skillnaden mot #FFFFFF.     */
  --papper:
    radial-gradient(circle at 20% 12%, oklch(from var(--botten) calc(l + .015) c h) 0%, transparent 42%),
    radial-gradient(circle at 82% 78%, oklch(from var(--botten) calc(l + .01)  c h) 0%, transparent 38%);
}

/* ─── GRUND ──────────────────────────────────────────────────────────── */

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  background-color:var(--botten);
  background-image:var(--papper);
  color:var(--text);
  font-family:"Inter","Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:inherit}

/* Tabulära siffror överallt där tal jämförs — priser och telefonnummer
   ska stå i pelare, inte dansa.                                        */
.tal,td,th,time,.pris,.tel{font-variant-numeric:tabular-nums}

::selection{background:var(--signal);color:var(--pa-signal)}

:focus-visible{
  outline:2.5px solid var(--signal);
  outline-offset:3px;
  border-radius:1px;
}

/* ─── DELADE BYGGSTENAR ──────────────────────────────────────────────── */

.ram{ width:100%; max-width:1440px; margin-inline:auto; padding-inline:clamp(1.15rem,4.5vw,4rem) }
.ram-smal{ max-width:1080px }

.etikett{
  font-size:11px; font-weight:650; letter-spacing:.15em; text-transform:uppercase;
  color:var(--svag);
}

/* Telefonknappen. Samma på alla tre spåren — det är sidans enda riktiga
   uppmaning, och den ska se likadan ut var man än möter den.           */
.tel-knapp{
  display:inline-flex; align-items:center; gap:.7rem;
  background:var(--signal); color:var(--pa-signal);
  font-weight:700; text-decoration:none;
  padding:1rem 1.6rem; border-radius:var(--radie);
  font-size:clamp(17px,2.1vw,21px); letter-spacing:-.01em;
  transition:background 220ms var(--kvick), transform 150ms var(--kvick);
  box-shadow:0 1px 0 oklch(from var(--signal-mork) l c h / .9);
}
.tel-knapp:hover{ background:var(--signal-mork) }
.tel-knapp:active{ transform:scale(.978) }
.tel-knapp svg{ width:1.1em; height:1.1em; flex:none }

@media(prefers-reduced-motion:reduce){
  .tel-knapp:active{transform:none}
}

/* Mörkt helbreddsband — sidans rytm. Går kant i kant oavsett spår.     */
.band{
  background:var(--band); color:var(--band-text);
  position:relative;
}
.band .etikett{ color:var(--band-svag) }

/* Regelverk i stället för svävande kort. Linjer och ramar, inga mjuka
   skuggor — svävande kort med mjuk skugga är den tydligaste mallmarkören
   som finns, och den vill vi inte ha någonstans på den här sajten.      */
.rutor{ display:grid; border-top:1px solid var(--linje); border-left:1px solid var(--linje) }
.rutor > *{ border-right:1px solid var(--linje); border-bottom:1px solid var(--linje) }

.hoppa-till{
  position:absolute; left:-9999px; top:0;
  background:var(--signal); color:var(--pa-signal);
  padding:.9rem 1.4rem; font-weight:650; z-index:999;
}
.hoppa-till:focus{ left:0 }