/* Designsystem for redesign 2026 — lastes ETTER style.css og vinner over de gamle
   variablene. Rolig, lys palett med én varm aksent.

   Kontrast (WCAG AA, normal tekst krever 4,5:1):
     tekst #1B1F1E paa hvit        ~16:1   OK
     dempet #4A5552 paa hvit       ~7,5:1  OK
     dempet #4A5552 paa flate      ~7,0:1  OK
     hvit paa primaer #12332E      ~14:1   OK
     hvit paa aksent #B4643C       ~5,0:1  OK
     aksent #B4643C paa hvit       ~5,0:1  OK  (brukt paa pris)
*/
:root {
  /* Nye designtokens */
  --primar: #12332E;
  --primar-moerk: #0D2621;
  --bg: #FFFFFF;
  --flate: #F7F5F0;
  --tekst: #1B1F1E;
  --dempet: #4A5552;
  --aksent: #B05E38;       /* KUN hovedknapp og pris. Dempet noe for WCAG AA (hvit tekst = 4.66:1) */
  --aksent-moerk: #99512F;
  --kantlinje: #E6E2D9;    /* varm, dempet strek */

  /* Kartlagt paa de eksisterende variabelnavnene slik at komponentene i style.css
     arver den nye paletten uten aa maatte skrives om her i fase 1. */
  --green: #12332E;
  --green-dark: #0D2621;
  --green-line: #CFE0D7;
  --navy: #F7F5F0;
  --navy-2: #EFEBE2;
  --paper: #FFFFFF;
  --paper-2: #F7F5F0;
  --white: #FFFFFF;
  --ink: #1B1F1E;
  --ink-rgb: 27, 31, 30;
  --muted: #4A5552;
  --line: #E6E2D9;
  --line-dark: #2A3B36;

  /* Typografi */
  --font-tekst: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --maks-tekst: 70ch;
}

/* Systemfont for alt — ingen nedlasting, ingen font-CLS, rolig og lesbart for
   maalgruppa. Overstyrer IBM Plex / Space Grotesk fra style.css. */
body {
  font-family: var(--font-tekst);
  font-size: 18px;
  line-height: 1.6;
  color: var(--tekst);
  background: var(--bg);
}
h1, h2, h3, h4 {
  font-family: var(--font-tekst);
  color: var(--tekst);
  letter-spacing: -0.015em;
}

/* Broedtekst faar luft og en lesbar maksbredde der den staar aaleine i en .wrap. */
main p { max-width: var(--maks-tekst); }

/* Lenker i broedtekst: dempet understrek, primaerfarge. */
main a { color: var(--primar); }

/* Aksenten er reservert. Hovedknappen og pris — ingenting annet. */
.btn-solid {
  background: var(--aksent);
  color: #fff;
  border-color: var(--aksent);
}
.btn-solid:hover { background: var(--aksent-moerk); border-color: var(--aksent-moerk); }
.pris, .price, .prisvar { color: var(--aksent); font-weight: 700; }

/* Sekundaerknapp: rolig omriss i primaerfarge. */
.btn-outline { border-color: var(--primar); color: var(--primar); }
.btn-outline:hover { background: var(--primar); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}