/* ==========================================================================
   Morning Walk Marketing: designtokens
   Kilde: Merkevareguide MWM 020826.pdf + MWM_Detaljerte_Regler.md seksjon 1
   Alle verdier her er fasit. Ingen farge, font eller størrelse utenfor denne
   filen skal brukes i MWM-flater.
   ========================================================================== */

:root {

  /* ---------- Farger: primær (base / lys / mørk) ---------- */
  --mwm-sort:              #000000;
  --mwm-hvit:              #FFFFFF;

  --mwm-morkegronn:        #1F3A31;
  --mwm-morkegronn-lys:    #34594C;
  --mwm-morkegronn-mork:   #13241D;

  --mwm-burgunder:         #5A2A2A;
  --mwm-burgunder-lys:     #804343;
  --mwm-burgunder-mork:    #3D1C1C;

  --mwm-stovbla:           #7A9EAC;
  --mwm-stovbla-lys:       #94B3C0;
  --mwm-stovbla-mork:      #5E7F8D;

  --mwm-lysgra:            #E5E5E5;
  --mwm-lysgra-lys:        #F0F0F0;
  --mwm-lysgra-mork:       #C6C6C6;

  /* ---------- Farger: sekundær ---------- */
  --mwm-blagra:            #2C3E50;
  --mwm-blagra-lys:        #3E5368;
  --mwm-blagra-mork:       #1A2733;

  --mwm-varmbrun:          #A68A7B;
  --mwm-varmbrun-lys:      #BFA79A;
  --mwm-varmbrun-mork:     #82685D;

  --mwm-salviegronn:       #8CA59B;
  --mwm-salviegronn-lys:   #A6BDB4;
  --mwm-salviegronn-mork:  #6E837A;

  /* ---------- Tekstfarger ---------- */
  --mwm-tekst:             #000000;  /* brødtekst på alle lyse flater */
  --mwm-tekst-invers:      #F0F0F0;  /* tekst på mørk flate. Ikke ren hvit */
  /* Ingen egen farge for dempet tekst. Metadata skilles med størrelse
     (--fs-liten), ikke med farge. Alle tekstfarger er i MWM-paletten. */

  /* ---------- Semantiske roller ---------- */
  --farge-primer:          var(--mwm-morkegronn);
  --farge-aksent:          var(--mwm-burgunder);
  --farge-flate:           var(--mwm-hvit);
  --farge-flate-dempet:    var(--mwm-lysgra);
  --farge-flate-mork:      var(--mwm-morkegronn);
  --farge-flate-data:      var(--mwm-stovbla);
  /* Kantlinjer er delt i to roller. WCAG 1.4.11 krever 3:1 på kanten av et
     grensesnittelement, altså felt og knapper. Dekorative skiller er unntatt. */
  --farge-kantlinje-kontroll: var(--mwm-morkegronn);  /* 12,3:1 på hvit */
  --farge-kantlinje-dekor:    var(--mwm-lysgra);      /* kort, tabellrader */
  --farge-feil:            var(--mwm-burgunder);
  --farge-fokus:           var(--mwm-stovbla-mork);

  /* ---------- Typografi ---------- */
  --font-overskrift: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --font-brod:       "Open Sans", "Segoe UI", system-ui, sans-serif;

  --vekt-overskrift: 600;   /* Montserrat SemiBold. Aldri 700, aldri kursiv */
  --vekt-brod:       400;
  --vekt-uthevet:    600;

  /* Skala: grunntall 18 px, forholdstall 1,25.
     clamp(min, flytende, maks). Maks er desktopverdien. */
  --fs-hero:   clamp(2.750rem, 1.60rem + 5.75vw, 8.375rem);  /*  44 -> 134 */
  --fs-1:      clamp(2.250rem, 1.55rem + 3.50vw, 5.375rem);  /*  36 ->  86 */
  --fs-2:      clamp(1.875rem, 1.45rem + 2.15vw, 3.438rem);  /*  30 ->  55 */
  --fs-3:      clamp(1.625rem, 1.35rem + 1.40vw, 2.750rem);  /*  26 ->  44 */
  --fs-4:      clamp(1.375rem, 1.28rem + 0.48vw, 1.750rem);  /*  22 ->  28 */
  --fs-ingress:clamp(1.125rem, 1.06rem + 0.32vw, 1.375rem);  /*  18 ->  22 */
  --fs-brod:   1.125rem;                                     /*  18 */
  --fs-liten:  0.875rem;                                     /*  14. Gulv. */

  --lh-hero:    1.05;
  --lh-1:       1.10;
  --lh-2:       1.15;
  --lh-3:       1.20;
  --lh-4:       1.35;
  --lh-ingress: 1.55;
  --lh-brod:    1.70;
  --lh-liten:   1.60;

  --sperring-overskrift: -0.01em;
  --sperring-brod:        0;

  /* ---------- Spacing: 4 px grunnenhet ---------- */
  --sp-1:  0.25rem;   /*   4 */
  --sp-2:  0.5rem;    /*   8 */
  --sp-3:  0.75rem;   /*  12 */
  --sp-4:  1rem;      /*  16 */
  --sp-5:  1.5rem;    /*  24 */
  --sp-6:  2rem;      /*  32 */
  --sp-7:  3rem;      /*  48 */
  --sp-8:  4rem;      /*  64 */
  --sp-9:  6rem;      /*  96 */
  --sp-10: 8rem;      /* 128 */
  --sp-11: 10rem;     /* 160 */

  /* Seksjonsluft. Flytende, men alltid et trinn i skalaen på ytterpunktene. */
  --sp-seksjon: clamp(var(--sp-8), 5vw + 2rem, var(--sp-11));

  /* ---------- Bredder ---------- */
  --bredde-container: 1280px;  /* ytre ramme */
  --bredde-tekst:     800px;   /* maks lesebredde, ca. 70 tegn */
  --bredde-smal:      640px;   /* skjema, kort enkeltspalte */

  /* ---------- Radius ---------- */
  --radius-sm:   6px;
  --radius-md:  10px;   /* standard. Matcher dagens nettside */
  --radius-lg:  16px;
  --radius-full: 999px;

  /* ---------- Kantlinje ---------- */
  --kant-kontroll: 1px solid var(--farge-kantlinje-kontroll);
  --kant-dekor:    1px solid var(--farge-kantlinje-dekor);

  /* ---------- Fokusring (tilgjengelighet, aldri fjern) ---------- */
  --fokus-ring: 0 0 0 3px var(--mwm-stovbla-lys);
  --fokus-ring-mork: 0 0 0 3px var(--mwm-lysgra-lys);

  /* ---------- Bevegelse ---------- */
  --overgang: 160ms ease-out;

  /* ---------- Brytepunkter (til dokumentasjon, brukes i media queries) ----
     480 / 768 / 1024 / 1280 / 1600
     ------------------------------------------------------------------------ */
}

@media (prefers-reduced-motion: reduce) {
  :root { --overgang: 0ms; }
}