/* ── LogBox merkevare ───────────────────────────────────────────────────────────
   Utledet fra logoen: dyp aubergine (#261C44), periwinkle (#7B83D4) og lys lavendel (#D6DAF7).
   Alle tekstfarger er kontrastsjekket for WCAG 2.1 AA (≥ 4.5:1 for brødtekst).
   Bruk alltid tokens, aldri rå hex i views eller andre stilark. */
:root {
  --lb-bakgrunn:      #F3F3F9;   /* sidebakgrunn med lavendelhint */
  --lb-flate:         #FFFFFF;
  --lb-flate-2:       #F8F8FD;
  --lb-linje:         #E3E2F0;
  --lb-linje-2:       #CDCBE4;

  --lb-tekst:         #231A3D;   /* ≈ 15:1 på hvit */
  --lb-tekst-2:       #564E74;   /* ≈ 7.5:1 */
  --lb-tekst-3:       #6A6389;   /* ≈ 5.5:1 */

  --lb-primar:        #4F56B0;   /* knapper og lenker, hvit tekst ≈ 6:1 */
  --lb-primar-hover:  #40469A;
  --lb-primar-lys:    #E7E9FA;
  --lb-paa-primar:    #FFFFFF;

  --lb-natt:          #261C44;   /* menyen */
  --lb-natt-dyp:      #15112A;   /* TV-rammen og hjulets nav: alltid mørk */
  --lb-natt-tekst:    #E4E6FA;
  --lb-natt-dempet:   #A9A5CC;
  --lb-periwinkle:    #7B83D4;
  --lb-lavendel:      #D6DAF7;

  --lb-gull:          #E4B23A;
  --lb-gull-tekst:    #7A5605;
  --lb-gull-lys:      #FBF1D6;
  --lb-paa-gull:      #3A2A05;   /* tekst på gull, ≈ 7:1 */
  --lb-hjulpeker:     #F2C14E;
  --lb-periwinkle-hover: #98A0EA;
  --lb-paa-periwinkle:   #15112A; /* ≈ 5:1 */
  --lb-rod:           #C4453C;   /* «Fest»-reaksjon (ikon) */
  --lb-rod-2:         #D65A50;   /* reaksjonsvarsel (ikon) */
  --lb-natt-gradient: radial-gradient(120% 90% at 20% 0%, #4A3F6B 0%, #2A1F4A 45%, #170F2E 100%);
  --lb-ok:            #137A3A;   /* ≥ 4.5:1 også på --lb-ok-lys (QA 2026-09-25) */
  --lb-ok-lys:        #E3F5E8;
  --lb-feil:          #B42318;
  --lb-feil-lys:      #FEEDEB;

  --lb-skygge:        0 1px 2px rgba(35,26,61,.06), 0 6px 18px rgba(35,26,61,.06);
  --lb-skygge-loftet: 0 18px 50px rgba(20,12,40,.28);
  --lb-fokus:         0 0 0 3px rgba(123,131,212,.55);

  --lb-r-sm: 6px;
  --lb-r:    10px;
  --lb-r-lg: 16px;

  --lb-font-overskrift: 'Plus Jakarta Sans', 'Jakarta Fallback', 'Segoe UI', system-ui, sans-serif;
  --lb-font-tekst:      'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ── Typeskala (typeset 2026-09-26): roller, ikke verdier. Jakarta 700/800, Inter 400/600 (lastede vekter). ── */
  --lb-fs-display:  44px;    /* nøkkeltall (hero: 56px) */
  --lb-fs-title:    clamp(24px, 2.6vw, 30px);   /* sideoverskrift */
  --lb-fs-dialog:   20px;    /* dialogoverskrift */
  --lb-fs-amount:   20px;    /* beløp og tall i lister */
  --lb-fs-heading:  16px;    /* korttitler, produktnavn */
  --lb-fs-subhead:  13px;    /* små korttitler */
  --lb-fs-body:     15px;    /* brødtekst, innlegg */
  --lb-fs-ui:       14px;    /* tabeller, meny, knapper */
  --lb-fs-label:    13px;    /* feltetiketter */
  --lb-fs-small:    12.5px;  /* metadata, hint */
  --lb-fs-chip:     12px;    /* brikker; også minste tekst på mørk bakgrunn */
  --lb-fs-eyebrow:  11.5px;  /* overtitler og tabellhoder, store bokstaver */
  /* ── Avstandsskala (layout 2026-09-26), 4 px-base: bruk rollene, ikke nye px-verdier ── */
  --lb-space-0: 2px;    /* hårfin: indre avstand i segmenterte kontroller */
  --lb-space-1: 4px;    /* ikon og tekst, meta-linjer */
  --lb-space-2: 8px;    /* inni en gruppe: brikker, knapper, etikett → felt */
  --lb-space-3: 12px;   /* mellom blokker i et kort, radpadding */
  --lb-space-4: 16px;   /* kompakte kort; avstand mellom kort i en kolonne */
  --lb-space-5: 20px;   /* vanlige kort og innlegg, dialoger, kolonneavstand */
  --lb-space-6: 24px;   /* overskrift → innhold i en seksjon */
  --lb-space-7: 32px;   /* mellom seksjoner */
  --lb-space-8: 48px;   /* store brudd */
  --lb-gutter: clamp(16px, 3vw, 36px);   /* sidemarg */
  --lb-track-eyebrow: .08em;
  --lb-track-tall:    -.03em;

  --lb-type-display: 800 var(--lb-fs-display)/1 var(--lb-font-overskrift);
  --lb-type-dialog:  800 var(--lb-fs-dialog)/1.2 var(--lb-font-overskrift);
  --lb-type-amount:  800 var(--lb-fs-amount)/1.1 var(--lb-font-overskrift);
  --lb-type-heading: 700 var(--lb-fs-heading)/1.25 var(--lb-font-overskrift);
  --lb-type-subhead: 700 var(--lb-fs-subhead)/1.25 var(--lb-font-overskrift);
  --lb-type-chip:    600 var(--lb-fs-chip)/1.5 var(--lb-font-tekst);
  --lb-type-eyebrow: 600 var(--lb-fs-eyebrow)/1.3 var(--lb-font-tekst);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --lb-bakgrunn: #15112A; --lb-flate: #1F1937; --lb-flate-2: #271F43; --lb-linje: #352C57; --lb-linje-2: #463C6E;
    --lb-tekst: #EEEDF8; --lb-tekst-2: #BDB8DA; --lb-tekst-3: #A39DC6;
    --lb-primar: #9CA3EE; --lb-primar-hover: #B3B9F4; --lb-primar-lys: #2E2A5A; --lb-paa-primar: #15112A;
    --lb-natt: #0F0B1F;
    --lb-gull-tekst: #F2CE72; --lb-gull-lys: #3A2F17;
    --lb-ok: #5DD08A; --lb-ok-lys: #173527; --lb-feil: #F08278; --lb-feil-lys: #3E1F24;
    --lb-skygge: 0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.25);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --lb-bakgrunn: #15112A; --lb-flate: #1F1937; --lb-flate-2: #271F43; --lb-linje: #352C57; --lb-linje-2: #463C6E;
  --lb-tekst: #EEEDF8; --lb-tekst-2: #BDB8DA; --lb-tekst-3: #A39DC6;
  --lb-primar: #9CA3EE; --lb-primar-hover: #B3B9F4; --lb-primar-lys: #2E2A5A; --lb-paa-primar: #15112A;
  --lb-natt: #0F0B1F;
  --lb-gull-tekst: #F2CE72; --lb-gull-lys: #3A2F17;
  --lb-ok: #5DD08A; --lb-ok-lys: #173527; --lb-feil: #F08278; --lb-feil-lys: #3E1F24;
  --lb-skygge: 0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.25);
}

/* ── Nattflate: mørk modus sine egne (kontrastsjekkede) tokens, avgrenset til ett element.
   Brukes der LogBox vil løfte noe til salgslokalets styrke (dashbordets hero), også i lys modus. ── */
.lb-natt-flate {
  color-scheme: dark;
  --lb-flate: var(--lb-natt); --lb-flate-2: #271F43; --lb-linje: #352C57; --lb-linje-2: #463C6E;
  --lb-tekst: #EEEDF8; --lb-tekst-2: #BDB8DA; --lb-tekst-3: #A39DC6;
  --lb-primar: #9CA3EE; --lb-primar-hover: #B3B9F4; --lb-primar-lys: #2E2A5A; --lb-paa-primar: #15112A;
  --lb-gull-tekst: #F2CE72; --lb-gull-lys: #3A2F17;
  --lb-ok: #5DD08A; --lb-ok-lys: #173527; --lb-feil: #F08278; --lb-feil-lys: #3E1F24;
  background: var(--lb-flate); color: var(--lb-tekst); border-color: var(--lb-linje);
}
/* I mørk modus er siden allerede mørk: nattflaten får en svak lilla tone og tydelig ramme, så den fortsatt skiller seg ut */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lb-natt-flate { --lb-flate: color-mix(in srgb, var(--lb-periwinkle) 10%, #15112A); border-color: var(--lb-linje-2); }
}
:root[data-theme="dark"] .lb-natt-flate { --lb-flate: color-mix(in srgb, var(--lb-periwinkle) 10%, #15112A); border-color: var(--lb-linje-2); }