@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../assets/fonts/schibsted-grotesk-var.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}

:root {
  
  --grunn: #f5f2ec;
  --grunn-2: #ebe5da;
  --flate: #fcfaf6;
  --flate-lys: #fefdfb;
  --tekst: #131a26;
  --tekst-dempet: #5b6271;
  --strek: #d8d1c4;
  --strek-sterk: #131a26;
  --strek-felt: #7d776b;
  --aksent-mork: #7a5e31;   
  --mork: #14213a;
  --mork-2: #0d172b;
  --mork-flate: #1d2d4a;
  --mork-tekst: #f3f0e9;
  --mork-dempet: #aeb8ca;
  --mork-strek: #2c3e5e;
  --blokk: #1b3260;
  --aksent: #9a7841;
  --aksent-tekst: #856735;   
  --aksent-mork: #7a5e31;
  --aksent-lys: #d9be88;
  --tegl-tekst: #f6f2ea;
  --tegl-dempet: #c9d3e6;
  --tegl-strek: rgba(230, 236, 248, 0.24);
  --gull: #c9a86a;
  --gull-lys: #e6d3a5;
  --knapp: var(--mork);
  --knapp-tekst: #f5f2ec;
  --knapp-hover: #08101f;
  --stjerne: var(--gull);
  --fokus: #1b3260;
  --feil: #9a2c16;
  --meny-glass: rgba(245, 242, 236, 0.94);
  --hover-tint: rgba(19, 26, 38, 0.06);
  --skygge-farge: rgba(10, 18, 36, 0.2);
  --skygge-myk: rgba(16, 22, 34, 0.07);
  --skygge-bunn: linear-gradient(to top, rgba(8, 14, 28, 0.82), rgba(8, 14, 28, 0));
  --skygge-topp: linear-gradient(to bottom, rgba(8, 14, 28, 0.55), rgba(8, 14, 28, 0));
  --kort-skygge: linear-gradient(to top, rgba(8, 14, 28, 0.9) 8%, rgba(8, 14, 28, 0.08) 64%);
  --kort-tekst: #e3e7ef;
  --bilde-tekst: #ece8df;
  --kart-ramme: #1d2d4a;
  --kart-tekst: #eef1f6;
  --kart-kilde-bak: rgba(0, 0, 0, 0.45);
  --kart-skygge: rgba(0, 0, 0, 0.35);
  --blekk: #131a26;
  --blekk-dempet: #5b6271;
  --strek-lys: #e6dfd2;
  --skygge-tegl: rgba(6, 14, 34, 0.35);
  --merke-strek: var(--gull);

  
  --tegning-papir: #f8f6f1;
  --tegning-rute: rgba(90, 84, 70, 0.06);
  --tegning-strek: #1b221d;
  --tegning-tynn: #6f6a60;
  --tegning-hjelp: #b8b0a3;
  --tegning-snitt: #8c8577;
  --tre: #ecd9b4;
  --tre-strek: #2a2a24;
  --isolasjon: #ecd27f;
  --isolasjon-strek: #c9a94f;
  --gips: #d1ccc3;
  --gips-skjot: #b7b0a5;
  --skrue: #8f897f;
  --sparkel: #e8e4dc;
  --maling: #f8f6f1;
  --rull: #ece7dd;
  --list: #f8f6f1;
  --list-strek: #d6d0c5;
  --speil: #d8d3c9;
  --glass: #c9d3d4;
  --gulv: #c4955f;
  --gulv-strek: #a77a4a;
  --aapning: #e4e0d8;

  
  --font: "Schibsted Grotesk", "Helvetica Neue", sans-serif;
  --vekt-tekst: 400;
  --vekt-halv: 600;
  --vekt-tittel: 500;
  --tekst-str: 17px;
  --tekst-linje: 1.5;
  --liten: 0.875rem;
  --merke-str: 0.8125rem;
  --t-h1: clamp(2.25rem, 1.4rem + 3.6vw, 4.5rem);
  --t-h2: clamp(1.875rem, 1.3rem + 2.4vw, 3.25rem);
  --t-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  --t-stor: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --t-kjempe: clamp(5rem, 3rem + 9vw, 11rem);
  --sporing-tittel: -0.028em;
  --sporing-merke: 0.14em;

  
  --marg: clamp(16px, 4vw, 56px);
  --bredde: 1280px;
  --bredde-tekst: 680px;
  --seksjon-luft: clamp(48px, 6vw, 88px);
  --gap: clamp(16px, 2vw, 28px);
  --gap-stor: clamp(28px, 4vw, 56px);
  --radius: 4px;
  --radius-stor: 14px;
  --meny-h: 72px;
  --ringelinje-h: 64px;

  
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --tid: 0.6s;
}

@media (min-width: 768px) {
  :root { --tekst-str: 18px; }
}

@media (min-width: 1024px) {
  :root { --meny-h: 84px; }
}

.rom {
  --tekst: var(--mork-tekst);
  --tekst-dempet: var(--mork-dempet);
  --strek: var(--mork-strek);
  --strek-sterk: var(--mork-tekst);
  --knapp: var(--grunn);
  --knapp-tekst: var(--mork);
  --knapp-hover: #ffffff;
  --flate: var(--mork-flate);
  --merke-strek: var(--aksent-lys);
  background: var(--mork);
  color: var(--tekst);
}

.tegl {
  --tekst: var(--tegl-tekst);
  --tekst-dempet: var(--tegl-dempet);
  --strek: var(--tegl-strek);
  --strek-sterk: var(--tegl-tekst);
  --knapp: var(--tegl-tekst);
  --knapp-tekst: var(--blokk);
  --knapp-hover: #ffffff;
  --merke-strek: var(--tegl-tekst);
  background: var(--blokk);
  color: var(--tekst);
}