/* Zervo Klinikk — tokens.css
   Generert fra tokens.json. Lys modus er standard. Mørk modus følger systemet,
   eller tvinges med <html data-theme="dark">; <html data-theme="light"> tvinger lys. */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/SchibstedGrotesk-Variable-Latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/SchibstedGrotesk-Variable-LatinExt.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/Figtree-Variable-Latin.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/Figtree-Variable-LatinExt.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root, [data-theme="light"] {
  --flate: #F7F4F1;
  --kort: #FFFFFF;
  --senket: #EFEAE5;
  --strek: #E2DBD5;
  --kant: #8C837C;
  --blekk: #141B2D;
  --blekk-dempet: #555B69;
  --blaa: #1877F2;
  --blaa-tekst: #1559C2;
  --blaa-tint: #E9F1FE;
  --logo: #1877F2;
  --on-blaa: #FFFFFF;
  --koral: #E8836A;
  --koral-trykk: #DD6F55;
  --koral-tint: #FCEAE4;
  --on-koral: #141B2D;
  --rav: #CF8216;
  --rav-tekst: #8A5300;
  --rav-tint: #FDF2DE;
  --ok: #1F6E55;
  --ok-tint: #E2F1EA;
  --feil: #B3243F;
  --feil-tint: #FBE7EA;
  --fokus: var(--blaa-tekst);
  --ramme: #141B2D;
  --foto-slor: rgba(13, 18, 32, 0.55);
  --hoyde-1: 0 1px 2px rgba(20, 27, 45, 0.06), 0 1px 1px rgba(20, 27, 45, 0.04);
  --hoyde-2: 0 10px 24px -10px rgba(20, 27, 45, 0.18), 0 2px 4px rgba(20, 27, 45, 0.05);
  --hoyde-3: 0 28px 56px -20px rgba(20, 27, 45, 0.28), 0 6px 12px rgba(20, 27, 45, 0.06);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --flate: #0D1220;
  --kort: #161C2C;
  --senket: #0A0E19;
  --strek: #273047;
  --kant: #7B8499;
  --blekk: #F3F1EE;
  --blekk-dempet: #A8AEBB;
  --blaa: #1877F2;
  --blaa-tekst: #79AAFF;
  --blaa-tint: #14284A;
  --logo: #FFFFFF;
  --on-blaa: #FFFFFF;
  --koral: #E8836A;
  --koral-trykk: #F0977F;
  --koral-tint: #3A2220;
  --on-koral: #141B2D;
  --rav: #F0B04F;
  --rav-tekst: #F4C374;
  --rav-tint: #33270F;
  --ok: #5CC69E;
  --ok-tint: #0F2C24;
  --feil: #FF8597;
  --feil-tint: #3A1620;
  --fokus: var(--blaa-tekst);
  --ramme: #2A3247;
  --foto-slor: rgba(13, 18, 32, 0.55);
  --hoyde-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --hoyde-2: 0 10px 24px -10px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.3);
  --hoyde-3: 0 28px 56px -20px rgba(0, 0, 0, 0.75), 0 6px 12px rgba(0, 0, 0, 0.35);
    color-scheme: dark;
  }
}
[data-theme="dark"] {
  --flate: #0D1220;
  --kort: #161C2C;
  --senket: #0A0E19;
  --strek: #273047;
  --kant: #7B8499;
  --blekk: #F3F1EE;
  --blekk-dempet: #A8AEBB;
  --blaa: #1877F2;
  --blaa-tekst: #79AAFF;
  --blaa-tint: #14284A;
  --logo: #FFFFFF;
  --on-blaa: #FFFFFF;
  --koral: #E8836A;
  --koral-trykk: #F0977F;
  --koral-tint: #3A2220;
  --on-koral: #141B2D;
  --rav: #F0B04F;
  --rav-tekst: #F4C374;
  --rav-tint: #33270F;
  --ok: #5CC69E;
  --ok-tint: #0F2C24;
  --feil: #FF8597;
  --feil-tint: #3A1620;
  --fokus: var(--blaa-tekst);
  --ramme: #2A3247;
  --foto-slor: rgba(13, 18, 32, 0.55);
  --hoyde-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --hoyde-2: 0 10px 24px -10px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.3);
  --hoyde-3: 0 28px 56px -20px rgba(0, 0, 0, 0.75), 0 6px 12px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}
:root {
  /* spacing */
  --rom-1: 4px;
  --rom-2: 8px;
  --rom-3: 12px;
  --rom-4: 16px;
  --rom-5: 24px;
  --rom-6: 32px;
  --rom-7: 48px;
  --rom-8: 64px;
  --rom-9: 96px;
  --rom-10: 128px;
  /* radius */
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 16px;
  --radius-z-stor: 24px;
  --radius-full: 999px;
  /* varighet */
  --varighet-respons: 120ms;
  --varighet-kort: 300ms;
  --varighet-standard: 450ms;
  --varighet-valgt: 600ms;
  --varighet-teller: 1400ms;
  --stagger: 80ms;
  /* kurve */
  --kurve-ro: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* layout */
  --maks-bredde: 1200px;
  --tekst-bredde: 640px;
  --gutter: 24px;
  --sidemarg: 32px;
  /* skrift */
  --font-display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-tekst: Figtree, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --radius-z: var(--radius-s) var(--radius-z-stor) var(--radius-s) var(--radius-z-stor); /* Z-hjørnet: TL TR BR BL */
}

/* Typestiler (samme navn som i tokens.json, med prefiks t-) */
.t-display-xl { font-family: var(--font-display); font-size: 56px; line-height: 60px; font-weight: 650; letter-spacing: -0.025em; }
.t-display { font-family: var(--font-display); font-size: 44px; line-height: 48px; font-weight: 650; letter-spacing: -0.02em; }
.t-h1 { font-family: var(--font-display); font-size: 34px; line-height: 40px; font-weight: 650; letter-spacing: -0.015em; }
.t-h2 { font-family: var(--font-display); font-size: 26px; line-height: 32px; font-weight: 600; letter-spacing: -0.01em; }
.t-h3 { font-family: var(--font-display); font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -0.005em; }
.t-tall { font-family: var(--font-display); font-size: 40px; line-height: 44px; font-weight: 650; letter-spacing: -0.02em; }
.t-ingress { font-family: var(--font-tekst); font-size: 19px; line-height: 30px; font-weight: 400; }
.t-brodtekst { font-family: var(--font-tekst); font-size: 16px; line-height: 26px; font-weight: 400; }
.t-liten { font-family: var(--font-tekst); font-size: 14px; line-height: 22px; font-weight: 400; }
.t-etikett { font-family: var(--font-tekst); font-size: 15px; line-height: 20px; font-weight: 600; }
.t-eyebrow { font-family: var(--font-tekst); font-size: 13px; line-height: 16px; font-weight: 650; letter-spacing: 0.09em; text-transform: uppercase; }
.t-fotnote { font-family: var(--font-tekst); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.01em; }
@media (max-width: 640px) {
  .t-display-xl { font-size: 40px; line-height: 44px; }
  .t-display { font-size: 32px; line-height: 36px; }
  .t-h1 { font-size: 28px; line-height: 34px; }
  .t-h2 { font-size: 22px; line-height: 28px; }
}