:root {
  /* ── Merkevare: mørk #210D45 + 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:         #210D45;   /* 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.)     */
  --color-border:         #DCDEF2;    /* nøytral kant med lavendelhint        */
  --color-border-strong:  #C3CBF7;

  --color-text:           #210D45;    /* brødtekst på hvit (≈ 16:1)          */
  --color-text-secondary: #595080;    /* sekundærtekst på hvit (≈ 6.5:1)     */
  --color-text-on-alt:    #4A4270;    /* sekundærtekst på lavendel            */
  --color-disabled:       #6B6488;    /* placeholder / deaktivert (≈ 5.5:1 — mørknet for AA, var #9A93B8 ga 2.9:1) */

  --color-error:          #DC2626;
  --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);
}