/* ============================================================
   Renli — tokens.css
   ENESTE KILDE for designtokens (typografi, farger, rom,
   høyder/skygger, kontroller). Filen inneholder KUN :root —
   ingen selektorer, ingen visuelle regler. Endrer du en verdi
   her, endres den overalt på én gang.

   Lasterekkefølge på alle 8 sidene:
     fonts.css → tokens.css → style.css → (bestill.css | pages.css)

   fonts.css definerer @font-face. tokens.css definerer verdiene.
   style.css og sidefilene bruker dem — og skal ikke definere
   egne råverdier. --wz-*-blokken bodde tidligere i bestill.css;
   den er flyttet hit, slik at det finnes nøyaktig én :root-kilde
   og ingen tvil om «hvilken verdi vinner».
   ============================================================ */

:root {
  /* ---------- Wizard-base (flyttet fra bestill.css) ---------- */
  --wz-page: #F4F5F7;
  /* Målt kontrollramme (spec §8: deres #DADBE3 → nøytral ramme #DDDFE2). */
  --wz-border: #DDDFE2;
  --wz-radius: 8px;
  /* Målt kortradius (spec §3: 20px desktop, 10px mobil full-bleed). */
  --wz-radius-card: 20px;
  --wz-radius-card-sm: 10px;
  /* Samme trinn som --ink-050 i den nøytrale trappen — aliaset holder
     verdien ett sted i stedet for to like literaler. */
  --wz-hairline: var(--ink-050);
  /* Målt positiv tint (spec §8: deres #D5F1E2 → tint av wizard-green). */
  --wz-green-tint: #E5F7DE;
  /* Dyp nok til AA på ALLE tre flatene den faktisk lander på:
     5.9:1 på #FFFFFF, ~5.2:1 på --wz-green-tint, 5.4:1 på --wz-page.
     #2E8412 målte 4.75:1 på hvitt og falt til 4.26:1 på tinten. */
  --wz-green-deep: #256A0E;
  --wz-bar-h: 64px;

  /* ---------- Målt sjekkout-geometri (docs/freska-measured-spec.md) ----------
     Verdiene er målte px fra referanseflyten — de er spec-tall, ikke
     trinn i 8px-skalaen, og skal ikke «rundes pent». */
  --wz-col-w: 660px;         /* hovedkolonne */
  --wz-inner-w: 468px;       /* kortets indre kolonne = fanebredde */
  --wz-aside-w: 410px;       /* sidefelt-reservasjon (panel innenfor 16px polstring) */
  --wz-sb-panel-w: 362.8px;  /* sidefeltpanelet: 410 − 16 − 16 − 15.2px rullefelt */
  --wz-page-pad-top: 40px;   /* innholdets toppluft */
  --wz-card-pad: 64px 96px;  /* kortflate desktop */
  --wz-card-pad-sm: 32px 24px; /* kortflate mobil (full-bleed) */
  --wz-gap-card: 32px;       /* kort-til-kort (mobil 16px) */
  --wz-gap-card-first: 48px; /* fanespor → første kort (mobil 20px) */
  --wz-gap-block: 48px;      /* seksjonsblokker inne i kortet */
  --wz-gap-overline: 16px;   /* versallinje → kontroll */
  --wz-ctl-h: 62.35px;       /* tekstfelt: 60.75 + 2 × 0.8px ramme */
  --wz-ctl-border-w: 0.8px;
  --wz-ctl-border-w-sel: 1.6px; /* valgt kort/chip-ramme */
  --wz-border-light: #E1E3E6;   /* tidschip-ramme (deres #DFE0E7) */
  --wz-gray-2: #5E6668;      /* sekundærtekst (deres #626E7D) — 5.6:1 på hvitt */
  --wz-gray-3: #9AA1A5;      /* tertiær/deaktivert/footerlenker (deres #949EA9) */
  --wz-fs-title: 2.1875rem;  /* 35 — kort-h2, lh 1, ls −0.29px */
  --wz-fs-lead: 1.25rem;     /* 20 — brød/inputverdier/frekvenstitler, lh 1.4 */
  --wz-fs-overline: 0.75rem; /* 12 — versallinjer, lh 16px, ls 1px */
  --wz-ls-overline: 1px;
  /* Målt kort/pille/chip-skygge: rgba(0,5,82,.08) 0 7px 14px → Renli-nøytral. */
  --elev-card: 0 7px 14px rgba(26, 29, 30, 0.08);

  /* ============================================================
     1. TYPOGRAFI — primitiver
     Ubuntu har kun 400/500/700. Skriv aldri font-weight 600/800
     sammen med var(--font-head) — det kollapser stille til 700.
     ============================================================ */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  --lh-figure: 1.05;
  --lh-tight: 1.15;
  --lh-snug: 1.25;
  --lh-heading: 1.35;
  --lh-ui: 1.45;
  --lh-normal: 1.55;
  --lh-body: 1.65;

  --ls-display: -0.02em;
  --ls-heading: -0.01em;
  --ls-normal: 0;
  --ls-eyebrow: 0.06em;
  --ls-caps-sm: 0.08em;

  /* ---------- Størrelsesskala (px 375 → 1200) ---------- */
  --fs-display: clamp(1.875rem, 1.5rem + 1.6vw, 2.625rem);   /* 30 → 42 */
  --fs-h1: clamp(1.75rem, 1.45rem + 1.3vw, 2.125rem);        /* 28 → 34 */
  --fs-h2: clamp(1.5rem, 1.3rem + 0.85vw, 2rem);             /* 24 → 32 */
  --fs-h3: clamp(1.3125rem, 1.22rem + 0.4vw, 1.5rem);        /* 21 → 24 */
  --fs-h4: 1.125rem;                                         /* 18 */
  --fs-eyebrow: clamp(0.75rem, 0.72rem + 0.13vw, 0.8125rem); /* 12 → 13 */
  --fs-eyebrow-sm: 0.6875rem;                                /* 11 */
  --fs-label: 0.9375rem;                                     /* 15 */
  --fs-input: clamp(1rem, 0.94rem + 0.28vw, 1.125rem);       /* 16 → 18, aldri under 1rem (iOS zoom) */
  --fs-helper: 0.875rem;                                     /* 14 */
  --fs-card-title: 1.1875rem;                                /* 19 */
  --fs-card-sub: 0.9375rem;                                  /* 15 */
  --fs-body: 1.0625rem;                                      /* 17 */
  --fs-body-lg: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);/* 17 → 19 */
  --fs-fine: 0.8125rem;                                      /* 13 */
  --fs-btn: clamp(1.0625rem, 1.01rem + 0.23vw, 1.125rem);    /* 17 → 18 */
  --fs-btn-sm: 0.9375rem;                                    /* 15 */
  --fs-figure-xl: clamp(2.25rem, 1.7rem + 2.3vw, 3rem);      /* 36 → 48 */
  --fs-figure-lg: clamp(1.75rem, 1.5rem + 1.05vw, 2.25rem);  /* 28 → 36 */
  --fs-figure-sm: 1.25rem;                                   /* 20 */
  --fs-sb-label: 0.75rem;                                    /* 12 */
  --fs-sb-value: 1rem;                                       /* 16 */

  /* Ordmerket er en merkelås, ikke et trinn i tekstskalaen — derfor egen
     token utenfor h/body-rekken. Clampen erstatter de to literalene
     .wtop-brand hadde (1.3rem under 640px, 1.45rem over). */
  --fs-brand: clamp(1.3rem, 1.088rem + 0.906vw, 1.45rem);    /* 20.8 → 23.2 */

  /* ============================================================
     2. FARGER
     ============================================================ */
  /* ---------- Nøytral trapp ---------- */
  --ink-900: #1A1D1E;  /* 17.4:1 */
  --ink-800: #26292A;  /* 14.6:1 */
  --ink-600: #4A5155;  /* 8.0:1 */
  --ink-500: #61686B;  /* 5.4:1 hvitt / 5.0:1 --wz-page / 4.9:1 --wz-green-tint.
                          #6B7275 var 4.49:1 på --wz-page — under AA der --text-4
                          faktisk brukes (.wlegal, .wsecure, .wsum-fine, .wkl-mva). */
  --ink-400: #8F959C;  /* 3.02:1 — kontrollrammer, WCAG 1.4.11 */
  --ink-300: #B9BEC6;
  --ink-200: #D9DBE0;
  --ink-100: #E4E7E8;
  --ink-050: #EEF0F3;

  /* ---------- Flater ----------
     Vekselbandet på innholdssidene. Bodde i et tredje :root i pages.css;
     flyttet hit slik at tokens.css forblir eneste kilde. */
  --band-alt: #FAFAFC;

  /* ---------- Semantiske roller ---------- */
  --text-1: var(--ink-900);  /* overskrifter, eyebrow, tall */
  --text-2: var(--ink-800);  /* brødtekst, etiketter, feltverdier */
  --text-3: var(--ink-600);  /* hint, underlinjer */
  --text-4: var(--ink-500);  /* finstilt tekst, placeholder, disabled */

  --on-dark-1: #FFFFFF;
  --on-dark-2: rgba(255, 255, 255, 0.88);
  --on-dark-3: rgba(255, 255, 255, 0.66);
  --on-slate-1: #FFFFFF;
  --on-slate-2: rgba(255, 255, 255, 0.82);  /* hardt gulv på #3D445D */

  --success-text: var(--wz-green-deep);  /* #256A0E — #4ECA22 aldri som tekst */
  --danger-text: #C43B1E;
  --danger-bg: #FDEEEA;
  --warn-text: #8A4B12;
  --link: #C8471B;        /* 4.79:1 — --primary er 3.2:1 og ulovlig som lenketekst på hvitt */
  --link-hover: #A93A14;

  /* ---------- Pris-heatmap på tidschips (grønn = rimeligst, rød = dyrest) ----------
     Endepunktene arver den semantiske skalaen: cheap = suksessgrønn, dear =
     fareraud. Gull-midtpunktet er nytt for å gi et perseptuelt jevnt spenn
     grønn → gull → rød (unngår gjørmete grønn→rød-blanding). Tallet vises
     ALLTID, så farge er redundant vektlegging (WCAG 1.4.1). Interpoleres i
     lineær sRGB i js/bestill.js. Kontrast på hvitt (chip-flaten er #FFFFFF):
     cheap 6.7:1, mid 5.9:1, dear 5.3:1 — alle mellomtoner ≥ 4.5:1. */
  --heat-cheap: #256A0E;  /* = --wz-green-deep, 6.7:1 */
  --heat-mid: #8A5A00;    /* gull-amber, 5.9:1 */
  --heat-dear: #C43B1E;   /* = --danger-text, 5.3:1 */

  /* ---------- CTA-flater: farge UNDER hvit tekst ----------
     --wizard-green (#4ECA22) og --primary (#EC683B) er 2.14:1 og 3.18:1 mot
     hvitt. Knappeetikettene er 17–18px/700 = under 18.66px-terskelen, så
     4.5:1 gjelder. Disse to tokenene er de eneste lovlige knappeflatene;
     --wizard-green/-–primary beholdes for grafikk og små merker på hvitt. */
  --cta-green: #1F7A0C;         /* hvit tekst = 6.0:1 */
  --cta-green-hover: #196308;
  --primary-cta: #C2521F;       /* hvit tekst = 4.6:1 */
  --primary-cta-hover: #B84A18; /* 5.2:1 */

  /* ---------- Vipps offisiell merkevarefarge — brukes KUN på
     «Logg inn med Vipps»-knappen, ikke på Renli-CTA-er. ---------- */
  --vipps-orange: #FF5B24;
  --vipps-orange-hover: #E8501C; /* mørkere trykk/hover-tone */

  /* ============================================================
     3. ROM
     ============================================================ */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10: 64px;
  --sp-11: 80px;

  --card-pad: clamp(20px, 4vw, 36px);
  --card-pad-tight: clamp(18px, 3.4vw, 26px);
  --gap-card: clamp(20px, 2.2vw, 28px);
  --gap-group: clamp(24px, 3vw, 32px);
  --gap-field: 20px;
  --gap-field-q: 28px;
  --gap-fieldset: 28px;
  --gap-label: 8px;
  --gap-eyebrow: 10px;
  --gap-hint: 8px;
  --prose-flow: 1.15rem;
  --prose-heading-gap: 1.2rem;
  --prose-section: clamp(2.4rem, 4vw, 3.25rem);
  --band-pad: clamp(48px, 6vw, 72px);

  /* ============================================================
     4. HØYDER (skygger)
     Alle tolags: kontaktskygge + spredning — ellers leses kort
     som tåke i stedet for objekter.
     ============================================================ */
  --elev-1: 0 1px 2px rgba(20, 20, 20, 0.05), 0 8px 24px rgba(20, 20, 20, 0.07);
  --elev-2: 0 2px 4px rgba(20, 20, 20, 0.06), 0 16px 40px rgba(20, 20, 20, 0.10);
  --elev-3: 0 1px 0 rgba(20, 20, 20, 0.06), 0 12px 28px rgba(20, 20, 20, 0.14);
  --elev-pill: 0 2px 6px rgba(38, 41, 42, 0.18);
  --elev-cta: 0 1px 2px rgba(20, 20, 20, 0.12), 0 4px 12px rgba(236, 104, 59, 0.28);
  --elev-cta-green: 0 1px 2px rgba(20, 20, 20, 0.12), 0 4px 12px rgba(78, 202, 34, 0.26);
  --ring-focus: 0 0 0 3px rgba(46, 132, 18, 0.32);
  /* Valgt-ringen bærer tilstandsinformasjon (WCAG 1.4.11 = 3:1). --wizard-green
     målte 2.14:1 mot det hvite kortet; --cta-green måler 6.0:1. */
  --ring-selected: inset 0 0 0 2px var(--cta-green);

  /* ============================================================
     5. KONTROLLER
     ============================================================ */
  --ctl-h: 56px;
  --ctl-h-sm: 52px;  /* ≤380px */
  --ctl-pad-y: 14px;
  --ctl-pad-x: 16px;
  --ctl-border: var(--ink-400);
  --ctl-border-hover: var(--ink-500);
  --ctl-bg: #FFFFFF;
  --ctl-bg-disabled: var(--wz-page);
  --radius-ctl: 10px;
  --radius-pill: 50px;
}