:root {
  /* ── Merkevare: mørk #260D47 + lys #eaedfe ──────────────────────────────
     Alle tekstfarger er kontrastsjekket mot bakgrunn for WCAG 2.1 AA (≥4.5:1
     for brødtekst, ≥3:1 for store overskrifter og UI-komponenter).          */
  --color-primary:         #260D47;   /* hovedfarge – knapper, aktive steg   */
  --color-primary-hover:   #341958;   /* hover (hvit tekst ≈ 12:1)           */
  --color-primary-active:  #160730;   /* trykk                                */
  --color-primary-light:   #EAEDFE;   /* lys lavendel – fyll/markering        */
  --color-primary-tint:    #F4F5FD;   /* enda lysere lavendel                 */
  --color-primary-border:  #C3CBF7;   /* kantlinje på lyse lavendelflater     */
  --color-on-primary:      #FFFFFF;   /* tekst på mørk primær (≈ 16:1)       */

  --color-surface:        #FFFFFF;
  --color-surface-alt:    #F4F5FD;    /* sidebakgrunn (lavendelhint)          */
  --color-surface-raised: #FBFBFF;    /* hevede flater (filterlinje o.l.)     */
  /* ── Kantlinjer: to nivåer med hensikt ─────────────────────────────────────
     Den lyse er DEKORATIV (kortkanter, skillelinjer) og har ingen kontrastkrav.
     Den mørkere avgrenser UI-KOMPONENTER — inputfelt, knapper, kontroller — og
     må nå 3:1 mot både hvit og surface-alt (WCAG 2.2 SC 1.4.11).
     Bruk alltid --color-border-ui på noe brukeren kan taste i eller trykke på. */
  --color-border:         #DCDEF2;    /* dekorativ (1.33:1 — kun skillelinjer) */
  --color-border-ui:      #8189BE;    /* UI-komponent (3.36:1 hvit / 3.09:1 alt) */
  --color-border-strong:  #7A82B8;    /* fremhevet kontroll (3.68:1)          */

  --color-text:           #260D47;    /* brødtekst på hvit (17.06:1)         */
  --color-text-secondary: #595080;    /* sekundærtekst på hvit (≈ 7.3:1)     */
  --color-text-on-alt:    #4A4270;    /* sekundærtekst på lavendel (≈ 7.8:1) */
  --color-disabled:       #6B6390;    /* placeholder / deaktivert (5.51:1)   */

  --color-error:          #C81E1E;    /* 5.74:1 hvit, 5.24:1 på error-light  */
  --color-error-light:    #FEF2F2;
  --color-error-border:   #FECACA;
  --color-success:        #15803D;    /* mørkere grønn for AA på lys bg       */
  --color-success-light:  #F0FDF4;
  --color-success-border: #86EFAC;
  --color-warning:        #B45309;    /* mørkere amber for AA                  */
  --color-warning-light:  #FFFBEB;

  /* Aliaser brukt inline i views/site.js — peker mot merkevarepaletten slik at
     gamle blå/grå fallback-verdier aldri trer i kraft. */
  --color-text-primary:   var(--color-text);
  --color-bg-subtle:      var(--color-surface-alt);
  --color-primary-600:    var(--color-primary);
  --color-primary-300:    var(--color-primary-border);
  --color-warning-700:    var(--color-warning);
  --color-warning-300:    #FCD34D;
  --color-warning-50:     var(--color-warning-light);

  /* Kildemarkører: Brønnøysund = grønn, AI = merkevare-lilla */
  --color-brreg-bg:       #F0FDF4;
  --color-brreg-border:   #86EFAC;
  --color-brreg-text:     #15803D;
  --color-ai-bg:          #EAEDFE;
  --color-ai-border:      #C3CBF7;
  --color-ai-text:        #3A2480;    /* lilla på lavendel (≈ 9:1)           */

  --font-heading: 'Plus Jakarta Sans', 'Inter', sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'SF Mono', 'Fira Code', monospace;
  --font-size-base: 16px;
  --line-height-body: 1.6;
  --line-height-heading: 1.2;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  --border-radius-sm:  6px;
  --border-radius-md:  8px;
  --border-radius-lg:  12px;
  --border-radius-btn: 8px;
  /* Aliaser brukt i enkelte views */
  --radius-sm: var(--border-radius-sm);
  --radius-md: var(--border-radius-md);
  --radius-lg: var(--border-radius-lg);

  --shadow-sm: 0 1px 3px rgba(33,13,69,0.08);
  --shadow-md: 0 4px 12px rgba(33,13,69,0.10);
  --shadow-lg: 0 8px 24px rgba(33,13,69,0.14);
  --focus-ring: 0 0 0 3px rgba(33,13,69,0.18);

  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --easing-out:      cubic-bezier(0.0, 0.0, 0.2, 1);
}

/* ══════════════════════════════════════════════════════════════════════════
   MØRK MODUS
   ══════════════════════════════════════════════════════════════════════════
   Følger systeminnstillingen. Alle verdier er kontrastberegnet mot de mørke
   flatene — de lyse verdiene over kan ikke bare inverteres.

   Merk at merkevarens lilla snus om: i lys modus er #260D47 mørk primærfarge
   med hvit tekst, i mørk modus brukes en lys lavendel som aksent med mørk
   tekst oppå. Identiteten beholdes, kontrasten snus.

   Komponent-CSS trenger ingen endring — alt går gjennom tokens.               */
/* ══════════════════════════════════════════════════════════════════════════
   MØRK MODUS
   ══════════════════════════════════════════════════════════════════════════
   Tre tilstander, styrt av data-theme på <html> (settes av js/theme.js):
     data-theme="dark"   → tvungen mørk
     data-theme="light"  → tvungen lys
     ingen attributt     → følger operativsystemet

   Verdiene er kontrastberegnet mot de mørke flatene — de lyse verdiene over
   kan ikke bare inverteres. Merkevarens lilla snus om: #260D47 med hvit tekst
   i lys modus blir lys lavendel med mørk tekst i mørk modus.

   Deklarasjonene står to steder fordi ren CSS ikke lar en regelblokk gjenbrukes
   av to ulike selektorer. Endrer du en verdi, endre BEGGE.

   Komponent-CSS trenger ingen endring — alt går gjennom tokens.               */

/* 1) Systemet er mørkt, og brukeren har ikke overstyrt til lyst */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-primary:         #B9A9F5;   /* aksent (8.77:1 mot surface)        */
    --color-primary-hover:   #C9BCF8;
    --color-primary-active:  #A897E8;
    --color-primary-light:   #2A2348;   /* fyll/markering                      */
    --color-primary-tint:    #201B3A;
    --color-primary-border:  #453C6E;
    --color-on-primary:      #1A1030;   /* mørk tekst på lys knapp (8.66:1)   */

    --color-surface:        #151226;    /* kort og flater                      */
    --color-surface-alt:    #0E0C1A;    /* sidebakgrunn                        */
    --color-surface-raised: #1C1834;

    --color-border:         #2E2A4A;    /* dekorativ                           */
    --color-border-ui:      #6B6396;    /* UI-komponent (3.36:1 / 3.54:1)     */
    --color-border-strong:  #7169A0;    /* fremhevet kontroll (3.69:1)        */

    --color-text:           #EAE8F5;    /* brødtekst (15.1:1)                 */
    --color-text-secondary: #A9A2C9;    /* sekundær (7.6:1)                   */
    --color-text-on-alt:    #B5AED4;
    --color-disabled:       #6E6890;

    --color-error:          #FF8A8A;    /* 8.07:1                              */
    --color-error-light:    #2E1A1F;
    --color-error-border:   #6B3A3A;
    --color-success:        #6EE7A8;    /* 11.9:1                              */
    --color-success-light:  #12281E;
    --color-success-border: #2F6B4A;
    --color-warning:        #FBBF5A;    /* 11.1:1                              */
    --color-warning-light:  #2B2113;

    /* Aliaser må følge med, ellers henger de igjen på lyse verdier */
    --color-text-primary:   var(--color-text);
    --color-bg-subtle:      var(--color-surface-alt);
    --color-primary-600:    var(--color-primary);
    --color-primary-300:    var(--color-primary-border);
    --color-warning-700:    var(--color-warning);
    --color-warning-300:    #6B5320;
    --color-warning-50:     var(--color-warning-light);

    /* Kildemarkører */
    --color-brreg-bg:       #12281E;
    --color-brreg-border:   #2F6B4A;
    --color-brreg-text:     #6EE7A8;
    --color-ai-bg:          #241C46;
    --color-ai-border:      #453C6E;
    --color-ai-text:        #C6B8FA;

    /* Skygger må være kraftigere for å leses på mørk bakgrunn */
    --shadow-sm: 0 1px 3px rgba(0,0,0,.40);
    --shadow-md: 0 4px 12px rgba(0,0,0,.45);
    --shadow-lg: 0 8px 24px rgba(0,0,0,.55);
    --focus-ring: 0 0 0 3px rgba(185,169,245,.35);  }
}

/* 2) Brukeren har valgt mørkt eksplisitt */
:root[data-theme="dark"] {
    --color-primary:         #B9A9F5;   /* aksent (8.77:1 mot surface)        */
    --color-primary-hover:   #C9BCF8;
    --color-primary-active:  #A897E8;
    --color-primary-light:   #2A2348;   /* fyll/markering                      */
    --color-primary-tint:    #201B3A;
    --color-primary-border:  #453C6E;
    --color-on-primary:      #1A1030;   /* mørk tekst på lys knapp (8.66:1)   */

    --color-surface:        #151226;    /* kort og flater                      */
    --color-surface-alt:    #0E0C1A;    /* sidebakgrunn                        */
    --color-surface-raised: #1C1834;

    --color-border:         #2E2A4A;    /* dekorativ                           */
    --color-border-ui:      #6B6396;    /* UI-komponent (3.36:1 / 3.54:1)     */
    --color-border-strong:  #7169A0;    /* fremhevet kontroll (3.69:1)        */

    --color-text:           #EAE8F5;    /* brødtekst (15.1:1)                 */
    --color-text-secondary: #A9A2C9;    /* sekundær (7.6:1)                   */
    --color-text-on-alt:    #B5AED4;
    --color-disabled:       #6E6890;

    --color-error:          #FF8A8A;    /* 8.07:1                              */
    --color-error-light:    #2E1A1F;
    --color-error-border:   #6B3A3A;
    --color-success:        #6EE7A8;    /* 11.9:1                              */
    --color-success-light:  #12281E;
    --color-success-border: #2F6B4A;
    --color-warning:        #FBBF5A;    /* 11.1:1                              */
    --color-warning-light:  #2B2113;

    /* Aliaser må følge med, ellers henger de igjen på lyse verdier */
    --color-text-primary:   var(--color-text);
    --color-bg-subtle:      var(--color-surface-alt);
    --color-primary-600:    var(--color-primary);
    --color-primary-300:    var(--color-primary-border);
    --color-warning-700:    var(--color-warning);
    --color-warning-300:    #6B5320;
    --color-warning-50:     var(--color-warning-light);

    /* Kildemarkører */
    --color-brreg-bg:       #12281E;
    --color-brreg-border:   #2F6B4A;
    --color-brreg-text:     #6EE7A8;
    --color-ai-bg:          #241C46;
    --color-ai-border:      #453C6E;
    --color-ai-text:        #C6B8FA;

    /* Skygger må være kraftigere for å leses på mørk bakgrunn */
    --shadow-sm: 0 1px 3px rgba(0,0,0,.40);
    --shadow-md: 0 4px 12px rgba(0,0,0,.45);
    --shadow-lg: 0 8px 24px rgba(0,0,0,.55);
    --focus-ring: 0 0 0 3px rgba(185,169,245,.35);
}

/* Nettleserens egne kontroller (datovelger, scrollbars, autofyll) må følge
   temaet — ellers får du hvite systemkontroller på mørk bakgrunn. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}
:root[data-theme="dark"]  { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }