/* =====================================================================
   123Tivoli designsystem, bud: GitHub Primer
   Kilde (hentet én gang 2026-10-30, kun værdier læst, intet kørt):
     pakke   @primer/primitives
     version 11.10.0 (npm "latest", udgivet 2026-07-30)
     URL     https://cdn.jsdelivr.net/npm/@primer/primitives@11.10.0/dist/css/
             functional/themes/light.css, functional/themes/dark.css,
             functional/size/{radius,size,border}.css, functional/spacing/space.css,
             base/size/size.css, base/typography/typography.css, functional/typography/typography.css
   Herefter er filen 123Tivolis egen; der følges ikke op på upstream.

   Tre afsnit:
     A. Rå Primer-værdier (--pr-*), kun dem vi bruger
     B. Fælles semantisk kontrakt (--ds-*), samme navne i alle bud
     C. Temaets egne variabler (style.css, atlas.css) peger på --ds-*
   ===================================================================== */


/* ---------------------------------------------------------------------
   A. Rå værdier fra Primer
   Neutrale: Primers grå er kolde blågrå (oklch-hue ca. 250). De er her
   drejet til 123Tivolis lilla hue (335) med samme lyshed og samme kroma,
   så trinene, kontrasterne og forholdet mellem dem er Primers.
   Original-hex står i kommentaren.
   Accent/primary: Primers blå accent og grønne primary er erstattet af
   123Tivolis lilla (primary-500/600/700 fra style.css).
   --------------------------------------------------------------------- */
:root {
  /* Flader */
  --pr-bgColor-default: #ffffff;           /* #ffffff */
  --pr-bgColor-muted: #faf7f9;             /* #f6f8fa  bgColor-muted / control-bgColor-rest */
  --pr-base-neutral-2: #f4f0f3;            /* #eff2f5  control-bgColor-hover / bgColor-disabled */
  --pr-base-neutral-3: #ede8ec;            /* #e6eaef  control-bgColor-active */
  --pr-overlay-bgColor: #ffffff;           /* #ffffff */
  --pr-bgColor-neutral-muted: #93859026;   /* #818b981f  ActionList hover, Token */

  /* Kanter */
  --pr-borderColor-default: #ded5db;       /* #d1d9e0 */
  --pr-borderColor-muted: #ded5dbb3;       /* #d1d9e0b3 */
  --pr-borderColor-emphasis: #938590;      /* #818b98 */
  --pr-borderColor-translucent: #26212526; /* #1f232826 */

  /* Tekst */
  --pr-fgColor-default: #262125;           /* #1f2328 */
  --pr-fgColor-muted: #6a5d67;             /* #59636e */
  --pr-fgColor-onEmphasis: #ffffff;
  --pr-fgColor-disabled: #938590;          /* #818b98 */

  /* Accent = 123Tivoli lilla */
  --pr-accent-emphasis: #793C70;           /* primary-700, erstatter #0969da / #1f883d */
  --pr-accent-hover: #6a3462;
  --pr-accent-fg: #793C70;
  --pr-accent-muted: #FEE0F1;              /* primary-200, erstatter #ddf4ff */

  /* Status (Primers egne) */
  --pr-fgColor-success: #1a7f37;
  --pr-bgColor-success-muted: #dafbe1;
  --pr-fgColor-attention: #9a6700;
  --pr-bgColor-attention-muted: #fff8c5;
  --pr-fgColor-danger: #d1242f;
  --pr-bgColor-danger-muted: #ffebe9;
  --pr-fgColor-accent-blue: #0969da;       /* Primers accent bruges som "info" */
  --pr-bgColor-accent-muted-blue: #ddf4ff;
  /* Fyldte statusflader (StateLabel, ikonbadges): hvid tekst 4.5:1 eller mere */
  --pr-bgColor-success-emphasis: #1f883d;
  --pr-bgColor-attention-emphasis: #9a6700;
  --pr-bgColor-danger-emphasis: #cf222e;
  /* Svage statuskanter (Flash, Label) */
  --pr-borderColor-success-muted: #4ac26b66;
  --pr-borderColor-attention-muted: #d4a72c66;
  --pr-borderColor-danger-muted: #ff818266;
  --pr-borderColor-accent-muted-blue: #54aeff66;
  --pr-borderColor-accent-muted: #cc89ba66;  /* lilla udgave af borderColor-accent-muted */
  /* Baggrund bag dialoger (overlay-backdrop), lilla-grå */
  --pr-overlay-backdrop: #93859066;

  /* Skygger */
  --pr-shadow-resting-xsmall: 0 1px 1px 0 #1f23280d;
  --pr-shadow-resting-small: 0 1px 1px 0 #1f23280a, 0 1px 2px 0 #1f232808;
  --pr-shadow-resting-medium: 0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f;
  --pr-shadow-floating-small: 0 0 0 1px #ded5db40, 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f;
  --pr-button-default-shadow-resting: 0 1px 0 0 #1f23280a;
  --pr-shadow-inset: inset 0 1px 0 0 #1f23280a;

  /* Størrelser (rem, 1rem = 16px) */
  --pr-borderRadius-small: 0.1875rem;
  --pr-borderRadius-medium: 0.375rem;
  --pr-borderRadius-large: 0.75rem;
  --pr-borderRadius-full: 624.9375rem;
  --pr-base-size-4: 0.25rem;
  --pr-base-size-8: 0.5rem;
  --pr-base-size-12: 0.75rem;
  --pr-base-size-16: 1rem;
  --pr-base-size-20: 1.25rem;
  --pr-base-size-24: 1.5rem;
  --pr-base-size-32: 2rem;
  --pr-base-size-40: 2.5rem;
  --pr-control-small-size: 1.75rem;
  --pr-control-medium-size: 2rem;
  --pr-control-large-size: 2.5rem;

  /* Typografi */
  --pr-base-text-size-xs: 0.75rem;
  --pr-base-text-size-sm: 0.875rem;
  --pr-base-text-size-md: 1rem;
  --pr-base-text-size-lg: 1.25rem;
  --pr-base-text-size-xl: 2rem;
  --pr-base-text-size-2xl: 2.5rem;
  --pr-base-text-lineHeight-normal: 1.5;
  --pr-base-text-weight-normal: 400;
  --pr-base-text-weight-medium: 500;
  --pr-base-text-weight-semibold: 600;
  --pr-base-text-lineHeight-tight: 1.25;   /* markdown-overskrifter */
  --pr-base-duration-fast: 80ms;           /* Button: background-color 80ms */
  --pr-base-easing-ease-out: cubic-bezier(.33, 1, .68, 1);
}

[data-theme="dark"] {
  /* Primer "dark" (ikke dimmed): grunden er inset, kortene default, headere muted */
  --pr-bgColor-inset: #070206;             /* #010409 */
  --pr-bgColor-default: #150e13;           /* #0d1117 */
  --pr-bgColor-muted: #20171e;             /* #151b23 */
  --pr-control-bgColor-rest: #2d242b;      /* #212830 */
  --pr-control-bgColor-hover: #322830;     /* #262c36 */
  --pr-control-bgColor-active: #382d35;    /* #2a313c */
  --pr-overlay-bgColor: #20171e;           /* Primer 11 bruger #010409; muted er valgt, så menuer ikke ligner huller */
  --pr-bgColor-neutral-muted: #72687033;   /* #656c7633 */

  --pr-borderColor-default: #4a4047;       /* #3d444d */
  --pr-borderColor-muted: #4a4047b3;       /* #3d444db3 */
  --pr-borderColor-emphasis: #726870;      /* #656c76 */
  --pr-borderColor-translucent: #ffffff26;

  --pr-fgColor-default: #faf3f8;           /* #f0f6fc */
  --pr-fgColor-muted: #9e949b;             /* #9198a1 */
  --pr-fgColor-onEmphasis: #ffffff;
  --pr-fgColor-disabled: #726870;          /* #656c76 */

  --pr-accent-emphasis: #A35A93;           /* primary-600, hvid tekst 4.7:1 (Primer: hvid på emphasis i begge temaer) */
  --pr-accent-hover: #93508a;
  --pr-accent-fg: #CC89BA;                 /* primary-500, erstatter #4493f8 */
  --pr-accent-muted: #cc89ba26;            /* erstatter #388bfd1a */

  --pr-fgColor-success: #3fb950;
  --pr-bgColor-success-muted: #2ea04326;
  --pr-fgColor-attention: #d29922;
  --pr-bgColor-attention-muted: #bb800926;
  --pr-fgColor-danger: #f85149;
  --pr-bgColor-danger-muted: #f851491a;
  --pr-fgColor-accent-blue: #4493f8;
  --pr-bgColor-accent-muted-blue: #388bfd1a;
  --pr-bgColor-success-emphasis: #238636;
  --pr-bgColor-attention-emphasis: #9e6a03;
  --pr-bgColor-danger-emphasis: #da3633;
  --pr-borderColor-success-muted: #2ea04366;
  --pr-borderColor-attention-muted: #bb800966;
  --pr-borderColor-danger-muted: #f8514966;
  --pr-borderColor-accent-muted-blue: #4493f866;
  --pr-borderColor-accent-muted: #cc89ba66;
  --pr-overlay-backdrop: #07020699;

  --pr-shadow-resting-xsmall: 0 1px 1px 0 #010409cc;
  --pr-shadow-resting-small: 0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999;
  --pr-shadow-resting-medium: 0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc;
  --pr-shadow-floating-small: 0 0 0 1px #4a4047, 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966;
  --pr-button-default-shadow-resting: 0 0 0 0 #00000000;
  --pr-shadow-inset: inset 0 1px 0 0 #0104093d;
}


/* ---------------------------------------------------------------------
   Zoom-kompensation. style.css zoomer hele siden (html zoom .8 fra 1100px,
   .9 fra 1920px, 1.1/1.2 på 4K). --ds-k er den omvendte faktor, så Primers
   størrelser (14px brødtekst, 32px kontroller, 6px radius) vises 1:1.
   --------------------------------------------------------------------- */
:root { --ds-k: 1; }
@media (min-width: 1100px) { :root { --ds-k: 1.25; } }
@media (min-width: 1920px) { :root { --ds-k: 1.1111; } }
@media (min-width: 2560px) { :root { --ds-k: 1; } }
@media (min-width: 3200px) { :root { --ds-k: .9091; } }
@media (min-width: 3840px) { :root { --ds-k: .8333; } }


/* ---------------------------------------------------------------------
   B. Fælles semantisk kontrakt (--ds-*)
   Kontraster (regnet, WCAG 2):
     lys:  tekst-daempet #6a5d67 på grund 5.5, flade 6.2, haevet 5.9
           kant-felt #938590 på flade 3.5, haevet 3.3, grund 3.1
           hvid på primaer #793C70 7.8, primaer-tekst på grund 6.9
           ok/advarsel/fejl/info på deres svage flade 4.5-4.6
     mørk: tekst-daempet #9e949b på grund 7.0, flade 6.5, haevet 6.0, kontrol 5.1
           kant-felt #726870 på flade 3.6, haevet 3.3, grund 3.9
           hvid på primaer #A35A93 4.7, primaer-tekst #CC89BA på flade 7.1
           ok 7.5, advarsel 7.5, fejl 5.7, info 6.1 på flade
   Tilføjet til fælleslaget (fase 1):
     hvid på ok-/advarsel-/fejl-fyldt  lys 4.5/4.9/5.4, mørk 4.6/4.7/4.6
     Label-tekst på svag statusflade   lys ok 4.6, advarsel 4.5, fejl 4.6; mørk ok 6.3, advarsel 6.3, fejl 5.1, primær 5.7
     NB: advarsel-tekst direkte på lys grund er kun 4.3; brug den på flade eller advarsel-svag
   --------------------------------------------------------------------- */
:root {
  /* Lag: grund < flade (Box) ; haevet = Box-header/muted ; overlag = menuer */
  --ds-grund: var(--pr-base-neutral-2);
  --ds-nedsaenket: var(--pr-bgColor-muted);
  --ds-flade: var(--pr-bgColor-default);
  --ds-flade-haevet: var(--pr-bgColor-muted);
  --ds-overlag: var(--pr-overlay-bgColor);
  /* Ekstra: kontrol-fyld (Button default, SegmentedControl) og neutral hover */
  --ds-kontrol: var(--pr-bgColor-muted);
  --ds-kontrol-hover: var(--pr-base-neutral-2);
  --ds-kontrol-aktiv: var(--pr-base-neutral-3);
  --ds-neutral-svag: var(--pr-bgColor-neutral-muted);

  /* Kanter */
  --ds-kant: var(--pr-borderColor-default);
  --ds-kant-svag: var(--pr-borderColor-muted);
  --ds-kant-felt: var(--pr-borderColor-emphasis);
  --ds-kant-gennemsigtig: var(--pr-borderColor-translucent);

  /* Tekst */
  --ds-tekst: var(--pr-fgColor-default);
  --ds-tekst-daempet: var(--pr-fgColor-muted);
  --ds-tekst-paa-primaer: var(--pr-fgColor-onEmphasis);
  --ds-tekst-deaktiv: var(--pr-fgColor-disabled);

  /* Primær (lilla) */
  --ds-primaer: var(--pr-accent-emphasis);
  --ds-primaer-hover: var(--pr-accent-hover);
  --ds-primaer-svag: var(--pr-accent-muted);
  --ds-primaer-tekst: var(--pr-accent-fg);
  --ds-fokus: var(--pr-accent-fg);

  /* Status */
  --ds-ok: var(--pr-fgColor-success);
  --ds-ok-svag: var(--pr-bgColor-success-muted);
  --ds-advarsel: var(--pr-fgColor-attention);
  --ds-advarsel-svag: var(--pr-bgColor-attention-muted);
  --ds-fejl: var(--pr-fgColor-danger);
  --ds-fejl-svag: var(--pr-bgColor-danger-muted);
  --ds-info: var(--pr-fgColor-accent-blue);
  --ds-info-svag: var(--pr-bgColor-accent-muted-blue);
  /* Ekstra: fyldte statusflader (hvid tekst) og svage statuskanter */
  --ds-ok-fyldt: var(--pr-bgColor-success-emphasis);
  --ds-advarsel-fyldt: var(--pr-bgColor-attention-emphasis);
  --ds-fejl-fyldt: var(--pr-bgColor-danger-emphasis);
  --ds-ok-kant: var(--pr-borderColor-success-muted);
  --ds-advarsel-kant: var(--pr-borderColor-attention-muted);
  --ds-fejl-kant: var(--pr-borderColor-danger-muted);
  --ds-info-kant: var(--pr-borderColor-accent-muted-blue);
  --ds-primaer-kant: var(--pr-borderColor-accent-muted);
  --ds-baggrund-dialog: var(--pr-overlay-backdrop);

  /* Skygger */
  --ds-skygge-1: var(--pr-shadow-resting-small);
  --ds-skygge-2: var(--pr-shadow-resting-medium);
  --ds-skygge-3: var(--pr-shadow-floating-small);
  --ds-skygge-knap: var(--pr-button-default-shadow-resting);
  --ds-skygge-felt: var(--pr-shadow-inset);

  /* Radier */
  --ds-r-sm: calc(var(--pr-borderRadius-small) * var(--ds-k));
  --ds-r: calc(var(--pr-borderRadius-medium) * var(--ds-k));
  --ds-r-lg: calc(var(--pr-borderRadius-large) * var(--ds-k));
  --ds-r-rund: var(--pr-borderRadius-full);

  /* Afstand: Primers base-size 4/8/12/16/20/24/32/40 */
  --ds-1: calc(var(--pr-base-size-4) * var(--ds-k));
  --ds-2: calc(var(--pr-base-size-8) * var(--ds-k));
  --ds-3: calc(var(--pr-base-size-12) * var(--ds-k));
  --ds-4: calc(var(--pr-base-size-16) * var(--ds-k));
  --ds-5: calc(var(--pr-base-size-20) * var(--ds-k));
  --ds-6: calc(var(--pr-base-size-24) * var(--ds-k));
  --ds-7: calc(var(--pr-base-size-32) * var(--ds-k));
  --ds-8: calc(var(--pr-base-size-40) * var(--ds-k));
  /* Ekstra: kontrolhøjder */
  --ds-kontrol-s: calc(var(--pr-control-small-size) * var(--ds-k));
  --ds-kontrol-m: calc(var(--pr-control-medium-size) * var(--ds-k));
  --ds-kontrol-l: calc(var(--pr-control-large-size) * var(--ds-k));
  --ds-streg: 1px;
  --ds-streg-tyk: 2px;

  /* Typografi: xs = caption 12, sm = body-medium 14 (UI), fs = body-large 16 (læsetekst),
     lg = title-medium 20, xl = title-large 32, 2xl = display 40 */
  --ds-fs-xs: calc(var(--pr-base-text-size-xs) * var(--ds-k));
  --ds-fs-sm: calc(var(--pr-base-text-size-sm) * var(--ds-k));
  --ds-fs: calc(var(--pr-base-text-size-md) * var(--ds-k));
  --ds-fs-lg: calc(var(--pr-base-text-size-lg) * var(--ds-k));
  --ds-fs-xl: calc(var(--pr-base-text-size-xl) * var(--ds-k));
  --ds-fs-2xl: calc(var(--pr-base-text-size-2xl) * var(--ds-k));
  --ds-lh: var(--pr-base-text-lineHeight-normal);
  --ds-lh-tet: var(--pr-base-text-lineHeight-tight);
  --ds-vaegt-normal: var(--pr-base-text-weight-normal);
  --ds-vaegt-medium: var(--pr-base-text-weight-medium);
  --ds-vaegt-fed: var(--pr-base-text-weight-semibold);

  /* Ekstra: bevægelse (Primers Button-overgang) */
  --ds-overgang: var(--pr-base-duration-fast) var(--pr-base-easing-ease-out);
}

[data-theme="dark"] {
  --ds-grund: var(--pr-bgColor-inset);
  --ds-nedsaenket: var(--pr-bgColor-inset);
  --ds-flade: var(--pr-bgColor-default);
  --ds-flade-haevet: var(--pr-bgColor-muted);
  --ds-overlag: var(--pr-overlay-bgColor);
  --ds-kontrol: var(--pr-control-bgColor-rest);
  --ds-kontrol-hover: var(--pr-control-bgColor-hover);
  --ds-kontrol-aktiv: var(--pr-control-bgColor-active);
}


/* ---------------------------------------------------------------------
   C. Temaets variabler peger på kontrakten, så resten af siden følger med
   --------------------------------------------------------------------- */
:root,
[data-theme] {
  --bg: var(--ds-grund);
  --page-canvas: var(--ds-grund);
  --color-bg: var(--ds-grund);
  --surface: var(--ds-flade);
  --color-surface: var(--ds-flade);
  --surface-1: var(--ds-flade);
  --surface-soft: var(--ds-flade-haevet);
  --color-surface-soft: var(--ds-flade-haevet);
  --surface-2: var(--ds-flade-haevet);
  --sidebar-bg: var(--ds-flade-haevet);
  --border: var(--ds-kant);
  --line: var(--ds-kant);
  --color-border: var(--ds-kant);
  --text: var(--ds-tekst);
  --color-text: var(--ds-tekst);
  --heading: var(--ds-tekst);
  --color-heading: var(--ds-tekst);
  --text-secondary: var(--ds-tekst-daempet);
  --text-muted: var(--ds-tekst-daempet);
  --color-text-muted: var(--ds-tekst-daempet);
  --muted: var(--ds-tekst-daempet);
  --link: var(--ds-primaer-tekst);
  --link-hover: var(--ds-primaer-tekst);
  --category-heading: var(--ds-primaer-tekst);
  --active-bg: var(--ds-primaer-svag);
  --active-border: var(--ds-fokus);
  --active-text: var(--ds-tekst);
  --menu-hover-bg: var(--ds-neutral-svag);
  --menu-indicator: var(--ds-tekst-daempet);
  --menu-sub-active-text: var(--ds-tekst);
  --hover-highlight: var(--ds-neutral-svag);
  --btn-primary-bg: var(--ds-primaer);
  --btn-primary-hover: var(--ds-primaer-hover);
  --btn-primary-text: var(--ds-tekst-paa-primaer);
  --btn-secondary-bg: var(--ds-kontrol);
  --btn-secondary-hover: var(--ds-kontrol-hover);
  --shadow-elev: var(--ds-skygge-3);
  --success: var(--ds-ok);
  --toast-ok: var(--ds-ok);
  --toast-advarsel: var(--ds-advarsel);
  --toast-fejl: var(--ds-fejl);
  --toast-info: var(--ds-info);
}

/* style.css' mørke regler bruger --dark-* direkte (fx topnav, søgefelt, kategorier); de peger nu også på kontrakten */
[data-theme="dark"] {
  --dark-bg: var(--ds-grund);
  --dark-surface-1: var(--ds-flade);
  --dark-surface-2: var(--ds-flade-haevet);
  --dark-surface-3: var(--ds-kontrol-hover);
  --dark-border: var(--ds-kant);
  --dark-text-primary: var(--ds-tekst);
  --dark-text-secondary: var(--ds-tekst-daempet);
  --dark-text-muted: var(--ds-tekst-daempet);
  --dark-primary: var(--ds-primaer-tekst);
  --dark-primary-hover: var(--ds-primaer-tekst);
  --dark-warning: var(--ds-advarsel);
  --dark-danger: var(--ds-fejl);
}

/* atlas.css: statusfarver (lys og mørk i én regel, samme specificitet som atlas.css' mørke regel) */
[data-theme] .atlas {
  --atlas-ok: var(--ds-ok);
  --atlas-ok-bg: var(--ds-ok-svag);
  --atlas-bad: var(--ds-fejl);
  --atlas-bad-bg: var(--ds-fejl-svag);
  --atlas-afvist: var(--ds-tekst-paa-primaer);
  --atlas-afvist-bg: var(--ds-fejl-fyldt);
}