/* markedsside-tokens.css - tokens som bare markedssiden trenger.
   design-tokens.css er uendret kopi fra beffen-web og er ENESTE fargekilde.
   Her ligger kun nye trinn/avstander, aldri farger. Hele piksler. */
:root{
  /* Display-trinn til hero: ett trinn over --skrift-h1 (clamp(26px,4vw,38px)).
     Barlow Condensed 600, VERSALER, linjehøyde 0.96. */
  --ms-skrift-display:clamp(40px,5.4vw,72px);
  /* Ingress under overskriften: ett trinn over --skrift-under (18) på store skjermer. */
  --ms-skrift-ingress:clamp(16px,1.4vw,20px);
  /* Seksjonsluft: mer luft enn appen (rom-8 = 64) uten nytt gridbrudd (4-px-grid). */
  --ms-luft-seksjon:96px;
  --ms-luft-seksjon-mobil:56px;
  /* Toppmenyens høyde (appen: --topbar-h 56; markedssiden 64 = 16 x 4). */
  --ms-topp-h:64px;
  /* Skjermens maks bredde i hero = detaljpanelet i appen på >= 1400 px. */
  --ms-panel-bredde:620px;
}

/* Scener styrt av rulling (reisen i index.html). Rullelengde, stempel, ark, luft, tekst. */
:root{
  /* Scene = 100vh stage + egen rulling + overlapp der neste scene glir over (forrige står fast under). Effektivt ca. 220 % / 180 %. */
  --ms-scene-rull:120vh;           /* egen rulling på desktop */
  --ms-scene-rull-mobil:80vh;
  --ms-scene-rull-ferdig:200vh;    /* «Ferdig» får lengst strekning: før blir etter */
  --ms-scene-rull-ferdig-mobil:140vh;
  --ms-scene-overlapp:100vh;       /* neste scene glir over denne; bunnen toner inn de siste 30 % */
  --ms-stegrekke-h:44px;           /* stegrekken står over scenene */
  --ms-scene-luft:48px;            /* minst 48 px luft til skjermkanten i hvile (desktop) */
  --ms-scene-luft-mobil:32px;
  --ms-scene-stempel-maks:400px;   /* JS måler ordet og setter størrelsen til 80 % av bredden, aldri over dette */
  --ms-scene-stempel-maks-mobil:150px;
  --ms-scene-stempel-liten:64px;   /* stempelordet etter krympingen, øverst til venstre */
  --ms-scene-stempel-liten-mobil:40px;
  --ms-scene-ark-font:18px;        /* arkene er satt i em: ett tall skalerer hele arket */
  --ms-scene-ark-font-mobil:16px;  /* mobil: arkene må få plass i 615 px stage med Safari-linjer */
  --ms-scene-ark-font-desktop:22px;
  --ms-scene-ark-font-fokus:25px;  /* arket som tar over (desktop) */
  --ms-scene-ark-bredde:24em;
  --ms-scene-tekst-stor:22px;      /* setningen i scenen */
  --ms-scene-bilde-demp:.35;       /* foto bak et ark */
  --ms-scene-kari-x:-24vw;         /* arket som viker (desktop) */
  --ms-scene-deg-x:20vw;           /* arket som tar over (desktop) */
  --ms-scene-kari-x-mobil:-72vw;
  --ms-scene-deg-x-mobil:0vw;
}

/* Prøv en befaring (prov.html): store kontroller for håndverkere som ikke er vant til programvare. */
:root{
  --pv-tekst:20px;        /* brødtekst, felt, knapper */
  --pv-liten:18px;        /* ledetekster og hjelpetekst: aldri under 18 */
  --pv-kontroll:56px;     /* knapper, fliser og felt: minst 56 px høye */
  --pv-topp-h:52px;       /* «Steg 2 av 7» står fast under toppmenyen */
  --pv-ramme-maks:1600px; /* demoen bruker bredden: steg til venstre, tilbudsark til høyre, fra 1280 til 1920 px */
  --pv-ark-b:clamp(420px,34vw,560px); /* tilbudsarkets bredde på PC */
}
/* Bevegelse på «Prøv en befaring», etter emil-design-eng. --ease-ut (inn/ut av skjermen) og --ease-skuff (skuffen) ligger i design-tokens.css. */
:root{
  --ms-ease-inn-ut:cubic-bezier(.77,0,.175,1);   /* bevegelse PÅ skjermen (arket som legges på plass) */
  --pv-steg-inn:400ms;                            /* nytt steg kommer fram */
  --pv-steg-ut:200ms;                             /* besvart steg legger seg opp (utgang raskere enn inngang) */
  --pv-linje-inn:300ms;                           /* linje inn på arket */
  --pv-sum-tell:250ms;                            /* summen teller: kort nok til at mellomtallet ikke leses som et annet tall */
  --pv-skuff:400ms;                               /* skuffen på mobil */
  --pv-ark-legg:600ms;                            /* arket legges på plass (sidens ene store øyeblikk) */
  --pv-stempel:220ms;                             /* stempelet slår ned */
}