@fremtind/jokul 1.4.1 → 1.5.1

package/styles/core/core.css

@@ -1,1517 +1,1656 @@
 @charset "UTF-8";
-/**
- * Do not edit directly
- * Generated on Wed, 18 Dec 2024 12:25:37 GMT
- */
-/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
-/* Document
-   ========================================================================== */
-/**
- * 1. Correct the line height in all browsers.
- * 2. Prevent adjustments of font size after orientation changes in iOS.
- */
-html {
-  line-height: 1.15; /* 1 */
-  -webkit-text-size-adjust: 100%; /* 2 */
-}
-
-/* Sections
-   ========================================================================== */
-/**
- * Remove the margin in all browsers.
- */
-body {
-  margin: 0;
-}
-
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
-/* Grouping content
-   ========================================================================== */
-/**
- * 1. Add the correct box sizing in Firefox.
- * 2. Show the overflow in Edge and IE.
- */
-hr {
-  box-sizing: content-box; /* 1 */
-  height: 0; /* 1 */
-  overflow: visible; /* 2 */
-}
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-pre {
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
-}
-
-/* Text-level semantics
-   ========================================================================== */
-/**
- * 1. Remove the bottom border in Chrome 57-
- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
- */
-abbr[title] {
-  border-bottom: none; /* 1 */
-  text-decoration: underline; /* 2 */
-  text-decoration: underline dotted; /* 2 */
-}
-
-/**
- * Add the correct font weight in Chrome, Edge, and Safari.
- */
-b,
-strong {
-  font-weight: bolder;
-}
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-code,
-kbd,
-samp {
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
-}
-
-/**
- * Add the correct font size in all browsers.
- */
-small {
-  font-size: 80%;
-}
-
-/**
- * Prevent `sub` and `sup` elements from affecting the line height in
- * all browsers.
- */
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-sup {
-  top: -0.5em;
-}
-
-/* Forms
-   ========================================================================== */
-/**
- * 1. Change the font styles in all browsers.
- * 2. Remove the margin in Firefox and Safari.
- */
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: inherit; /* 1 */
-  font-size: 100%; /* 1 */
-  line-height: 1.15; /* 1 */
-  margin: 0; /* 2 */
-}
-
-/**
- * Remove the inheritance of text transform in Edge, Firefox, and IE.
- * 1. Remove the inheritance of text transform in Firefox.
- */
-button,
-select {
-  /* 1 */
-  text-transform: none;
-}
-
-/**
- * Correct the inability to style clickable types in iOS and Safari.
- */
-button,
-[type=button],
-[type=reset],
-[type=submit] {
-  -webkit-appearance: button;
-}
-
-/**
- * Correct the padding in Firefox.
- */
-fieldset {
-  padding: 0.35em 0.75em 0.625em;
-}
-
-/**
- * 1. Correct the text wrapping in Edge and IE.
- * 2. Remove the padding so developers are not caught out when they zero out
- *    `fieldset` elements in all browsers.
- */
-legend {
-  box-sizing: border-box; /* 1 */
-  display: table; /* 1 */
-  max-width: 100%; /* 1 */
-  padding: 0; /* 2 */
-  white-space: normal; /* 1 */
-}
-
-/**
- * Add the correct vertical alignment in Chrome, Firefox, and Opera.
- */
-progress {
-  vertical-align: baseline;
-}
-
-/**
- * Correct the cursor style of increment and decrement buttons in Chrome.
- */
-[type=number]::-webkit-inner-spin-button,
-[type=number]::-webkit-outer-spin-button {
-  height: auto;
-}
-
-/**
- * 1. Correct the odd appearance in Chrome and Safari.
- * 2. Correct the outline style in Safari.
- */
-[type=search] {
-  -webkit-appearance: textfield; /* 1 */
-  outline-offset: -2px; /* 2 */
-}
-
-/**
- * Remove the inner padding in Chrome and Safari on macOS.
- */
-[type=search]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-/**
- * 1. Correct the inability to style clickable types in iOS and Safari.
- * 2. Change font properties to `inherit` in Safari.
- */
-::-webkit-file-upload-button {
-  -webkit-appearance: button; /* 1 */
-  font: inherit; /* 2 */
+@layer jokul {
+  @layer resets, theme, global, components, utility;
 }
-
-/* Interactive
-   ========================================================================== */
-/*
- * Add the correct display in Edge, IE 10+, and Firefox.
- */
-details {
-  display: block;
-}
-
-/*
- * Add the correct display in all browsers.
- */
-summary {
-  display: list-item;
-}
-
-/* Text blocks
-   ========================================================================== */
-/**
- * Remove default margins from all block-level text elements
- * such as `p` and headings
- */
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p {
-  margin: 0;
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+@layer jokul.resets {
+  /* Document
+     ========================================================================== */
+  /**
+   * 1. Correct the line height in all browsers.
+   * 2. Prevent adjustments of font size after orientation changes in iOS.
+   */
+  html {
+    line-height: 1.15; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+  }
+  /* Sections
+     ========================================================================== */
+  /**
+   * Remove the margin in all browsers.
+   */
+  body {
+    margin: 0;
+  }
+  /**
+   * Correct the font size and margin on `h1` elements within `section` and
+   * `article` contexts in Chrome, Firefox, and Safari.
+   */
+  h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+  }
+  /* Grouping content
+     ========================================================================== */
+  /**
+   * 1. Add the correct box sizing in Firefox.
+   * 2. Show the overflow in Edge and IE.
+   */
+  hr {
+    box-sizing: content-box; /* 1 */
+    height: 0; /* 1 */
+    overflow: visible; /* 2 */
+  }
+  /**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+  pre {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+  /* Text-level semantics
+     ========================================================================== */
+  /**
+   * 1. Remove the bottom border in Chrome 57-
+   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+   */
+  abbr[title] {
+    border-bottom: none; /* 1 */
+    text-decoration: underline; /* 2 */
+    text-decoration: underline dotted; /* 2 */
+  }
+  /**
+   * Add the correct font weight in Chrome, Edge, and Safari.
+   */
+  b,
+  strong {
+    font-weight: bolder;
+  }
+  /**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+  code,
+  kbd,
+  samp {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+  /**
+   * Add the correct font size in all browsers.
+   */
+  small {
+    font-size: 80%;
+  }
+  /**
+   * Prevent `sub` and `sup` elements from affecting the line height in
+   * all browsers.
+   */
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  sub {
+    bottom: -0.25em;
+  }
+  sup {
+    top: -0.5em;
+  }
+  /* Forms
+     ========================================================================== */
+  /**
+   * 1. Change the font styles in all browsers.
+   * 2. Remove the margin in Firefox and Safari.
+   */
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 1 */
+    line-height: 1.15; /* 1 */
+    margin: 0; /* 2 */
+  }
+  /**
+   * Remove the inheritance of text transform in Edge, Firefox, and IE.
+   * 1. Remove the inheritance of text transform in Firefox.
+   */
+  button,
+  select {
+    /* 1 */
+    text-transform: none;
+  }
+  /**
+   * Correct the inability to style clickable types in iOS and Safari.
+   */
+  button,
+  [type=button],
+  [type=reset],
+  [type=submit] {
+    -webkit-appearance: button;
+  }
+  /**
+   * Correct the padding in Firefox.
+   */
+  fieldset {
+    padding: 0.35em 0.75em 0.625em;
+  }
+  /**
+   * 1. Correct the text wrapping in Edge and IE.
+   * 2. Remove the padding so developers are not caught out when they zero out
+   *    `fieldset` elements in all browsers.
+   */
+  legend {
+    box-sizing: border-box; /* 1 */
+    display: table; /* 1 */
+    max-width: 100%; /* 1 */
+    padding: 0; /* 2 */
+    white-space: normal; /* 1 */
+  }
+  /**
+   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+   */
+  progress {
+    vertical-align: baseline;
+  }
+  /**
+   * Correct the cursor style of increment and decrement buttons in Chrome.
+   */
+  [type=number]::-webkit-inner-spin-button,
+  [type=number]::-webkit-outer-spin-button {
+    height: auto;
+  }
+  /**
+   * 1. Correct the odd appearance in Chrome and Safari.
+   * 2. Correct the outline style in Safari.
+   */
+  [type=search] {
+    -webkit-appearance: textfield; /* 1 */
+    outline-offset: -2px; /* 2 */
+  }
+  /**
+   * Remove the inner padding in Chrome and Safari on macOS.
+   */
+  [type=search]::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  /**
+   * 1. Correct the inability to style clickable types in iOS and Safari.
+   * 2. Change font properties to `inherit` in Safari.
+   */
+  ::-webkit-file-upload-button {
+    -webkit-appearance: button; /* 1 */
+    font: inherit; /* 2 */
+  }
+  /* Interactive
+     ========================================================================== */
+  /*
+   * Add the correct display in Edge, IE 10+, and Firefox.
+   */
+  details {
+    display: block;
+  }
+  /*
+   * Add the correct display in all browsers.
+   */
+  summary {
+    display: list-item;
+  }
 }
-
-/* Forms
-   ========================================================================== */
-/**
- * Remove margins from fieldset element.
- */
-fieldset {
-  margin: 0;
-  border: 0;
-  padding: 0;
-  display: block;
-  line-height: 1;
+@layer jokul.resets {
+  /* Text blocks
+     ========================================================================== */
+  /**
+   * Remove default margins from all block-level text elements
+   * such as `p` and headings
+   */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p {
+    margin: 0;
+  }
+  /* Forms
+     ========================================================================== */
+  /**
+   * Remove margins from fieldset element.
+   */
+  fieldset {
+    margin: 0;
+    border: 0;
+    padding: 0;
+    display: block;
+    line-height: 1;
+  }
+  /* Forms
+     ========================================================================== */
+  /**
+   * Remove borders from table elements.
+   */
+  table {
+    border-collapse: collapse;
+  }
+  /**
+   * Remove margins from table elements.
+   */
+  table,
+  thead,
+  tbody,
+  tr,
+  td,
+  th {
+    margin: 0;
+    padding: 0;
+  }
+  /*
+   * https://css-tricks.com/the-hidden-attribute-is-visibly-weak/
+   * tl;dr – hidden er en User Agent style, så hvis et element har noen som helst display som ikke er
+   * hidden vil ikke hidden-attributtet gjøre noe som helst visuelt. Her gjør vi det til vår egen author style.
+   */
+  .jkl [hidden] {
+    display: none;
+  }
 }
-
-/* Forms
-   ========================================================================== */
 /**
- * Remove borders from table elements.
+ * Do not edit directly, this file was auto-generated.
  */
-table {
-  border-collapse: collapse;
-}
-
+/* stylelint-disable */
 /**
- * Remove margins from table elements.
- */
-table,
-thead,
-tbody,
-tr,
-td,
-th {
-  margin: 0;
-  padding: 0;
-}
-
-/*
- * https://css-tricks.com/the-hidden-attribute-is-visibly-weak/
- * tl;dr – hidden er en User Agent style, så hvis et element har noen som helst display som ikke er
- * hidden vil ikke hidden-attributtet gjøre noe som helst visuelt. Her gjør vi det til vår egen author style.
+ * Do not edit directly, this file was auto-generated.
  */
-.jkl [hidden] {
-  display: none;
-}
-
 /**
- * Do not edit directly
- * Generated on Wed, 18 Dec 2024 12:25:37 GMT
+ * Do not edit directly, this file was auto-generated.
  */
-:root {
-  --jkl-color-brand-snohvit: #f9f9f9;
-  --jkl-color-brand-varde: #e0dbd4;
-  --jkl-color-brand-granitt: #1b1917;
-  --jkl-color-brand-hvit: #ffffff;
-  --jkl-color-brand-svart: #000000;
-  --jkl-color-brand-skifer: #313030;
-  --jkl-color-brand-fjellgra: #444141;
-  --jkl-color-brand-stein: #636060;
-  --jkl-color-brand-svaberg: #c8c5c3;
-  --jkl-color-brand-dis: #ece9e5;
-  --jkl-color-brand-sand: #f4f2ef;
-  --jkl-color-functional-info: #d3d3f6;
-  --jkl-color-functional-info-dark: #a9a9ca;
-  --jkl-color-functional-success: #acd3b5;
-  --jkl-color-functional-success-dark: #94b79b;
-  --jkl-color-functional-warning: #efdd9e;
-  --jkl-color-functional-warning-dark: #decc8d;
-  --jkl-color-functional-error: #f6b3b3;
-  --jkl-color-functional-error-dark: #de9e9e;
-  --jkl-spacing-0: 0;
-  --jkl-spacing-2: 0.125rem;
-  --jkl-spacing-4: 0.25rem;
-  --jkl-spacing-8: 0.5rem;
-  --jkl-spacing-12: 0.75rem;
-  --jkl-spacing-16: 1rem;
-  --jkl-spacing-24: 1.5rem;
-  --jkl-spacing-32: 2rem;
-  --jkl-spacing-40: 2.5rem;
-  --jkl-spacing-64: 4rem;
-  --jkl-spacing-104: 6.5rem;
-  --jkl-spacing-168: 10.5rem;
-  --jkl-typography-weight-normal: 400;
-  --jkl-typography-weight-bold: 700;
-  --jkl-typography-font-size-16: 1rem;
-  --jkl-typography-font-size-18: 1.125rem;
-  --jkl-typography-font-size-20: 1.25rem;
-  --jkl-typography-font-size-21: 1.3125rem;
-  --jkl-typography-font-size-23: 1.4375rem;
-  --jkl-typography-font-size-25: 1.5625rem;
-  --jkl-typography-font-size-26: 1.625rem;
-  --jkl-typography-font-size-28: 1.75rem;
-  --jkl-typography-font-size-30: 1.875rem;
-  --jkl-typography-font-size-36: 2.25rem;
-  --jkl-typography-font-size-44: 2.75rem;
-  --jkl-typography-font-size-56: 3.5rem;
-  --jkl-typography-line-height-24: 1.5rem;
-  --jkl-typography-line-height-28: 1.75rem;
-  --jkl-typography-line-height-32: 2rem;
-  --jkl-typography-line-height-36: 2.25rem;
-  --jkl-typography-line-height-40: 2.5rem;
-  --jkl-typography-line-height-44: 2.75rem;
-  --jkl-typography-line-height-52: 3.25rem;
-  --jkl-typography-line-height-64: 4rem;
-  --jkl-typography-title-small-font-size: 2.25rem;
-  --jkl-typography-title-small-line-height: 2.75rem;
-  --jkl-typography-title-small-font-weight: 400;
-  --jkl-typography-title-base-font-size: 3.5rem;
-  --jkl-typography-title-base-line-height: 4rem;
-  --jkl-typography-title-base-font-weight: 400;
-  --jkl-typography-title-small-small-font-size: 1.875rem;
-  --jkl-typography-title-small-small-line-height: 2.25rem;
-  --jkl-typography-title-small-small-font-weight: 400;
-  --jkl-typography-title-small-base-font-size: 2.75rem;
-  --jkl-typography-title-small-base-line-height: 3.25rem;
-  --jkl-typography-title-small-base-font-weight: 400;
-  --jkl-typography-heading-1-small-font-size: 1.625rem;
-  --jkl-typography-heading-1-small-line-height: 2rem;
-  --jkl-typography-heading-1-small-font-weight: 400;
-  --jkl-typography-heading-1-base-font-size: 2.25rem;
-  --jkl-typography-heading-1-base-line-height: 2.75rem;
-  --jkl-typography-heading-1-base-font-weight: 400;
-  --jkl-typography-heading-2-small-font-size: 1.4375rem;
-  --jkl-typography-heading-2-small-line-height: 2rem;
-  --jkl-typography-heading-2-small-font-weight: 400;
-  --jkl-typography-heading-2-base-font-size: 1.75rem;
-  --jkl-typography-heading-2-base-line-height: 2.5rem;
-  --jkl-typography-heading-2-base-font-weight: 400;
-  --jkl-typography-heading-3-small-font-size: 1.3125rem;
-  --jkl-typography-heading-3-small-line-height: 1.75rem;
-  --jkl-typography-heading-3-small-font-weight: 700;
-  --jkl-typography-heading-3-base-font-size: 1.5625rem;
-  --jkl-typography-heading-3-base-line-height: 2rem;
-  --jkl-typography-heading-3-base-font-weight: 700;
-  --jkl-typography-heading-4-small-font-size: 1.125rem;
-  --jkl-typography-heading-4-small-line-height: 1.5rem;
-  --jkl-typography-heading-4-small-font-weight: 700;
-  --jkl-typography-heading-4-base-font-size: 1.3125rem;
-  --jkl-typography-heading-4-base-line-height: 1.75rem;
-  --jkl-typography-heading-4-base-font-weight: 700;
-  --jkl-typography-heading-5-small-font-size: 1rem;
-  --jkl-typography-heading-5-small-line-height: 1.5rem;
-  --jkl-typography-heading-5-small-font-weight: 700;
-  --jkl-typography-heading-5-base-font-size: 1rem;
-  --jkl-typography-heading-5-base-line-height: 1.5rem;
-  --jkl-typography-heading-5-base-font-weight: 700;
-  --jkl-typography-body-small-font-size: 1.125rem;
-  --jkl-typography-body-small-line-height: 1.75rem;
-  --jkl-typography-body-small-font-weight: 400;
-  --jkl-typography-body-base-font-size: 1.25rem;
-  --jkl-typography-body-base-line-height: 2rem;
-  --jkl-typography-body-base-font-weight: 400;
-  --jkl-typography-small-small-font-size: 1rem;
-  --jkl-typography-small-small-line-height: 1.5rem;
-  --jkl-typography-small-small-font-weight: 400;
-  --jkl-typography-small-base-font-size: 1rem;
-  --jkl-typography-small-base-line-height: 1.5rem;
-  --jkl-typography-small-base-font-weight: 400;
-  --jkl-unit-10: 0.5rem;
-  --jkl-unit-15: calc(var(--jkl-unit-10) * 1.5);
-  --jkl-unit-20: calc(var(--jkl-unit-10) * 2);
-  --jkl-unit-25: calc(var(--jkl-unit-10) * 2.5);
-  --jkl-unit-30: calc(var(--jkl-unit-10) * 3);
-  --jkl-unit-40: calc(var(--jkl-unit-10) * 4);
-  --jkl-unit-50: calc(var(--jkl-unit-10) * 5);
-  --jkl-unit-60: calc(var(--jkl-unit-10) * 6);
-  --jkl-unit-70: calc(var(--jkl-unit-10) * 7);
-  --jkl-unit-80: calc(var(--jkl-unit-10) * 8);
-  --jkl-unit-90: calc(var(--jkl-unit-10) * 9);
-  --jkl-unit-130: calc(var(--jkl-unit-10) * 13);
-  --jkl-unit-210: calc(var(--jkl-unit-10) * 21);
-  --jkl-unit-02: calc(var(--jkl-unit-10) * 0.25);
-  --jkl-unit-05: calc(var(--jkl-unit-10) * 0.5);
+@layer jokul.theme {
+  @media screen and (prefers-color-scheme: light) {
+    :root {
+      --jkl-color-background-page: oklch(96% 0.004 67);
+      --jkl-color-background-surface-default: oklch(92% 0.008 67);
+      --jkl-color-background-surface-highlight: oklch(100% 0.001 67);
+      --jkl-color-background-surface-on-surface: oklch(96% 0.004 67);
+      --jkl-color-background-surface-moderate: oklch(80% 0.008 67);
+      --jkl-color-background-surface-knockout: oklch(35% 0.007 67);
+      --jkl-color-background-surface-error: oklch(80% 0.09 16);
+      --jkl-color-background-surface-warning: oklch(90% 0.08 94);
+      --jkl-color-background-surface-info: oklch(80% 0.09 285);
+      --jkl-color-background-surface-succes: oklch(80% 0.066 156);
+      --jkl-color-border-subdued: oklch(80% 0.008 67);
+      --jkl-color-border-strong: oklch(50% 0.007 67);
+      --jkl-color-border-strongest: oklch(0% 0.007 64);
+      --jkl-color-border-knockout: oklch(100% 0.001 67);
+      --jkl-color-border-info: oklch(70% 0.145 285);
+      --jkl-color-border-success: oklch(70% 0.089 156);
+      --jkl-color-border-error: oklch(70% 0.13 16);
+      --jkl-color-border-warning: oklch(70% 0.1 94);
+      --jkl-color-text-default: oklch(0% 0.007 64);
+      --jkl-color-text-subdued: oklch(50% 0.007 67);
+      --jkl-color-text-knockout: oklch(100% 0.001 67);
+      --jkl-color-text-info: oklch(25% 0.056 285);
+      --jkl-color-text-info-strong: oklch(50% 0.186 285);
+      --jkl-color-text-success: oklch(25% 0.024 156);
+      --jkl-color-text-success-strong: oklch(50% 0.106 156);
+      --jkl-color-text-error: oklch(25% 0.056 16);
+      --jkl-color-text-error-strong: oklch(50% 0.16 16);
+      --jkl-color-text-warning: oklch(25% 0.03 94);
+      --jkl-color-text-warning-strong: oklch(70% 0.1 94);
+    }
+  }
+  [data-theme=light] {
+    --jkl-color-background-page: oklch(96% 0.004 67);
+    --jkl-color-background-surface-default: oklch(92% 0.008 67);
+    --jkl-color-background-surface-highlight: oklch(100% 0.001 67);
+    --jkl-color-background-surface-on-surface: oklch(96% 0.004 67);
+    --jkl-color-background-surface-moderate: oklch(80% 0.008 67);
+    --jkl-color-background-surface-knockout: oklch(35% 0.007 67);
+    --jkl-color-background-surface-error: oklch(80% 0.09 16);
+    --jkl-color-background-surface-warning: oklch(90% 0.08 94);
+    --jkl-color-background-surface-info: oklch(80% 0.09 285);
+    --jkl-color-background-surface-succes: oklch(80% 0.066 156);
+    --jkl-color-border-subdued: oklch(80% 0.008 67);
+    --jkl-color-border-strong: oklch(50% 0.007 67);
+    --jkl-color-border-strongest: oklch(0% 0.007 64);
+    --jkl-color-border-knockout: oklch(100% 0.001 67);
+    --jkl-color-border-info: oklch(70% 0.145 285);
+    --jkl-color-border-success: oklch(70% 0.089 156);
+    --jkl-color-border-error: oklch(70% 0.13 16);
+    --jkl-color-border-warning: oklch(70% 0.1 94);
+    --jkl-color-text-default: oklch(0% 0.007 64);
+    --jkl-color-text-subdued: oklch(50% 0.007 67);
+    --jkl-color-text-knockout: oklch(100% 0.001 67);
+    --jkl-color-text-info: oklch(25% 0.056 285);
+    --jkl-color-text-info-strong: oklch(50% 0.186 285);
+    --jkl-color-text-success: oklch(25% 0.024 156);
+    --jkl-color-text-success-strong: oklch(50% 0.106 156);
+    --jkl-color-text-error: oklch(25% 0.056 16);
+    --jkl-color-text-error-strong: oklch(50% 0.16 16);
+    --jkl-color-text-warning: oklch(25% 0.03 94);
+    --jkl-color-text-warning-strong: oklch(70% 0.1 94);
+  }
+  @media screen and (prefers-color-scheme: dark) {
+    :root {
+      --jkl-color-background-page: oklch(10% 0.007 67);
+      --jkl-color-background-surface-default: oklch(25% 0.007 67);
+      --jkl-color-background-surface-highlight: oklch(35% 0.007 67);
+      --jkl-color-background-surface-on-surface: oklch(10% 0.007 67);
+      --jkl-color-background-surface-moderate: oklch(50% 0.007 67);
+      --jkl-color-background-surface-knockout: oklch(85% 0.008 67);
+      --jkl-color-background-surface-error: oklch(45% 0.146 16);
+      --jkl-color-background-surface-warning: oklch(45% 0.065 94);
+      --jkl-color-background-surface-info: oklch(45% 0.169 285);
+      --jkl-color-background-surface-succes: oklch(45% 0.095 156);
+      --jkl-color-border-subdued: oklch(50% 0.007 67);
+      --jkl-color-border-strong: oklch(80% 0.008 67);
+      --jkl-color-border-strongest: oklch(100% 0.001 67);
+      --jkl-color-border-knockout: oklch(0% 0.007 64);
+      --jkl-color-border-info: oklch(60% 0.17 285);
+      --jkl-color-border-success: oklch(60% 0.1 156);
+      --jkl-color-border-error: oklch(60% 0.149 16);
+      --jkl-color-border-warning: oklch(60% 0.09 94);
+      --jkl-color-text-default: oklch(100% 0.001 67);
+      --jkl-color-text-subdued: oklch(80% 0.008 67);
+      --jkl-color-text-knockout: oklch(0% 0.007 64);
+      --jkl-color-text-info: oklch(90% 0.034 285);
+      --jkl-color-text-info-strong: oklch(70% 0.145 285);
+      --jkl-color-text-success: oklch(90% 0.035 156);
+      --jkl-color-text-success-strong: oklch(70% 0.089 156);
+      --jkl-color-text-error: oklch(90% 0.045 16);
+      --jkl-color-text-error-strong: oklch(70% 0.13 16);
+      --jkl-color-text-warning: oklch(90% 0.08 94);
+      --jkl-color-text-warning-strong: oklch(70% 0.1 94);
+    }
+  }
+  [data-theme=dark] {
+    --jkl-color-background-page: oklch(10% 0.007 67);
+    --jkl-color-background-surface-default: oklch(25% 0.007 67);
+    --jkl-color-background-surface-highlight: oklch(35% 0.007 67);
+    --jkl-color-background-surface-on-surface: oklch(10% 0.007 67);
+    --jkl-color-background-surface-moderate: oklch(50% 0.007 67);
+    --jkl-color-background-surface-knockout: oklch(85% 0.008 67);
+    --jkl-color-background-surface-error: oklch(45% 0.146 16);
+    --jkl-color-background-surface-warning: oklch(45% 0.065 94);
+    --jkl-color-background-surface-info: oklch(45% 0.169 285);
+    --jkl-color-background-surface-succes: oklch(45% 0.095 156);
+    --jkl-color-border-subdued: oklch(50% 0.007 67);
+    --jkl-color-border-strong: oklch(80% 0.008 67);
+    --jkl-color-border-strongest: oklch(100% 0.001 67);
+    --jkl-color-border-knockout: oklch(0% 0.007 64);
+    --jkl-color-border-info: oklch(60% 0.17 285);
+    --jkl-color-border-success: oklch(60% 0.1 156);
+    --jkl-color-border-error: oklch(60% 0.149 16);
+    --jkl-color-border-warning: oklch(60% 0.09 94);
+    --jkl-color-text-default: oklch(100% 0.001 67);
+    --jkl-color-text-subdued: oklch(80% 0.008 67);
+    --jkl-color-text-knockout: oklch(0% 0.007 64);
+    --jkl-color-text-info: oklch(90% 0.034 285);
+    --jkl-color-text-info-strong: oklch(70% 0.145 285);
+    --jkl-color-text-success: oklch(90% 0.035 156);
+    --jkl-color-text-success-strong: oklch(70% 0.089 156);
+    --jkl-color-text-error: oklch(90% 0.045 16);
+    --jkl-color-text-error-strong: oklch(70% 0.13 16);
+    --jkl-color-text-warning: oklch(90% 0.08 94);
+    --jkl-color-text-warning-strong: oklch(70% 0.1 94);
+  }
 }
-
-/**
- * Do not edit directly
- * Generated on Wed, 18 Dec 2024 12:25:37 GMT
- */
-:root {
-  --jkl-color-svart: #000000;
-  --jkl-color-granitt: #1b1917;
-  --jkl-color-skifer: #313030;
-  --jkl-color-fjellgra: #444141;
-  --jkl-color-stein: #636060;
-  --jkl-color-svaberg: #c8c5c3;
-  --jkl-color-varde: #e0dbd4;
-  --jkl-color-dis: #ece9e5;
-  --jkl-color-sand: #f4f2ef;
-  --jkl-color-snohvit: #f9f9f9;
-  --jkl-color-hvit: #ffffff;
-  --jkl-color-suksess: #acd3b5;
-  --jkl-color-suksess-dark: #94b79b;
-  --jkl-color-feil: #f6b3b3;
-  --jkl-color-feil-dark: #de9e9e;
-  --jkl-color-info: #d3d3f6;
-  --jkl-color-info-dark: #a9a9ca;
-  --jkl-color-advarsel: #efdd9e;
-  --jkl-color-advarsel-dark: #decc8d;
-  --jkl-spacing-0: 0;
-  --jkl-spacing-2: 0.125rem;
-  --jkl-spacing-4: 0.25rem;
-  --jkl-spacing-8: 0.5rem;
-  --jkl-spacing-12: 0.75rem;
-  --jkl-spacing-16: 1rem;
-  --jkl-spacing-24: 1.5rem;
-  --jkl-spacing-32: 2rem;
-  --jkl-spacing-40: 2.5rem;
-  --jkl-spacing-64: 4rem;
-  --jkl-spacing-104: 6.5rem;
-  --jkl-spacing-168: 10.5rem;
+@layer jokul.theme {
+  :root {
+    --jkl-spacing-2: 0.125rem;
+    --jkl-spacing-4: 0.25rem;
+    --jkl-spacing-8: 0.5rem;
+    --jkl-spacing-12: 0.75rem;
+    --jkl-spacing-16: 1rem;
+    --jkl-spacing-24: 1.5rem;
+    --jkl-spacing-32: 2rem;
+    --jkl-spacing-40: 2.5rem;
+    --jkl-spacing-64: 4rem;
+    --jkl-spacing-104: 6.5rem;
+    --jkl-spacing-168: 10.5rem;
+    --jkl-spacing-16-24: 1rem;
+    --jkl-spacing-24-40: 1.5rem;
+    --jkl-spacing-24-32: 1.5rem;
+    --jkl-spacing-32-40: 2rem;
+    --jkl-spacing-40-64: 2.5rem;
+    --jkl-spacing-64-104: 4rem;
+    --jkl-spacing-104-168: 6.5rem;
+    --jkl-spacing-16-16-24: 1rem;
+    --jkl-spacing-16-24-32: 1rem;
+    --jkl-spacing-16-24-40: 1rem;
+    --jkl-spacing-24-24-32: 1.5rem;
+    --jkl-spacing-24-24-40: 1.5rem;
+    --jkl-spacing-24-32-40: 1.5rem;
+    --jkl-spacing-32-32-40: 2rem;
+    --jkl-spacing-32-40-64: 2rem;
+    --jkl-spacing-40-40-64: 2.5rem;
+    --jkl-spacing-40-64-104: 2.5rem;
+    --jkl-spacing-64-64-104: 4rem;
+    --jkl-spacing-64-104-168: 4rem;
+    --jkl-spacing-104-104-168: 6.5rem;
+  }
+  @media (min-width: 680px) {
+    :root {
+      --jkl-spacing-16-24: 1.5rem;
+      --jkl-spacing-24-40: 2.5rem;
+      --jkl-spacing-24-32: 2rem;
+      --jkl-spacing-32-40: 2.5rem;
+      --jkl-spacing-40-64: 4rem;
+      --jkl-spacing-64-104: 6.5rem;
+      --jkl-spacing-104-168: 10.5rem;
+      --jkl-spacing-16-16-24: 1rem;
+      --jkl-spacing-16-24-32: 1.5rem;
+      --jkl-spacing-16-24-40: 1.5rem;
+      --jkl-spacing-24-24-32: 1.5rem;
+      --jkl-spacing-24-24-40: 1.5rem;
+      --jkl-spacing-24-32-40: 2rem;
+      --jkl-spacing-32-32-40: 2rem;
+      --jkl-spacing-32-40-64: 2.5rem;
+      --jkl-spacing-40-40-64: 2.5rem;
+      --jkl-spacing-40-64-104: 4rem;
+      --jkl-spacing-64-64-104: 4rem;
+      --jkl-spacing-64-104-168: 6.5rem;
+      --jkl-spacing-104-104-168: 6.5rem;
+    }
+  }
+  @media (min-width: 1200px) {
+    :root {
+      --jkl-spacing-16-16-24: 1.5rem;
+      --jkl-spacing-16-24-32: 2rem;
+      --jkl-spacing-16-24-40: 2.5rem;
+      --jkl-spacing-24-24-32: 2rem;
+      --jkl-spacing-24-24-40: 2.5rem;
+      --jkl-spacing-24-32-40: 2.5rem;
+      --jkl-spacing-32-32-40: 2.5rem;
+      --jkl-spacing-32-40-64: 4rem;
+      --jkl-spacing-40-40-64: 4rem;
+      --jkl-spacing-40-64-104: 6.5rem;
+      --jkl-spacing-64-64-104: 6.5rem;
+      --jkl-spacing-64-104-168: 10.5rem;
+      --jkl-spacing-104-104-168: 10.5rem;
+    }
+  }
 }
-
 /**
- * Do not edit directly
- * Generated on Wed, 18 Dec 2024 12:25:37 GMT
+ * Do not edit directly, this file was auto-generated.
  */
-@media screen and (prefers-color-scheme: light) {
-  :root {
-    --jkl-color-background-page: #f4f2ef;
-    --jkl-color-background-page-variant: #f9f9f9;
-    --jkl-color-background-container: #f9f9f9;
-    --jkl-color-background-container-low: #ece9e5;
-    --jkl-color-background-container-high: #ffffff;
-    --jkl-color-background-container-inverted: #1b1917;
-    --jkl-color-background-container-subdued: #c8c5c3;
-    --jkl-color-background-input-base: rgb(0 0 0 / 0%);
-    --jkl-color-background-input-focus: #ffffff;
-    --jkl-color-background-action: #1b1917;
-    --jkl-color-background-interactive: rgb(0 0 0 / 0%);
-    --jkl-color-background-interactive-hover: #ece9e5;
-    --jkl-color-background-interactive-selected: #e0dbd4;
-    --jkl-color-background-alert-neutral: #e0dbd4;
-    --jkl-color-background-alert-info: #d3d3f6;
-    --jkl-color-background-alert-success: #acd3b5;
-    --jkl-color-background-alert-warning: #efdd9e;
-    --jkl-color-background-alert-error: #f6b3b3;
-    --jkl-color-text-default: #1b1917;
+/* stylelint-disable */
+@layer jokul.theme {
+  @media screen and (prefers-color-scheme: light) {
+    :root {
+      --jkl-color-background-page: #F4F2EF;
+      --jkl-color-background-page-variant: #F9F9F9;
+      --jkl-color-background-container: #F9F9F9;
+      --jkl-color-background-container-low: #ECE9E5;
+      --jkl-color-background-container-high: #FFFFFF;
+      --jkl-color-background-container-inverted: #1B1917;
+      --jkl-color-background-container-subdued: #C8C5C3;
+      --jkl-color-background-input-base: rgba(0, 0, 0, 0);
+      --jkl-color-background-input-focus: #FFFFFF;
+      --jkl-color-background-action: #1B1917;
+      --jkl-color-background-interactive: rgba(0, 0, 0, 0);
+      --jkl-color-background-interactive-hover: #ECE9E5;
+      --jkl-color-background-interactive-selected: #E0DBD4;
+      --jkl-color-background-alert-neutral: #E0DBD4;
+      --jkl-color-background-alert-info: #D3D3F6;
+      --jkl-color-background-alert-success: #ACD3B5;
+      --jkl-color-background-alert-warning: #EFDD9E;
+      --jkl-color-background-alert-error: #F6B3B3;
+      --jkl-color-text-default: #1B1917;
+      --jkl-color-text-subdued: #636060;
+      --jkl-color-text-inverted: #F9F9F9;
+      --jkl-color-text-on-action: #F9F9F9;
+      --jkl-color-text-interactive: #1B1917;
+      --jkl-color-text-interactive-hover: #636060;
+      --jkl-color-text-on-alert: #1B1917;
+      --jkl-color-text-on-alert-subdued: #444141;
+      --jkl-color-border-action: #1B1917;
+      --jkl-color-border-input: #636060;
+      --jkl-color-border-input-focus: #1B1917;
+      --jkl-color-border-separator: #C8C5C3;
+      --jkl-color-border-separator-strong: #636060;
+      --jkl-color-border-separator-hover: #1B1917;
+      --jkl-color-border-subdued: #C8C5C3;
+    }
+  }
+  [data-theme=light] {
+    --jkl-color-background-page: #F4F2EF;
+    --jkl-color-background-page-variant: #F9F9F9;
+    --jkl-color-background-container: #F9F9F9;
+    --jkl-color-background-container-low: #ECE9E5;
+    --jkl-color-background-container-high: #FFFFFF;
+    --jkl-color-background-container-inverted: #1B1917;
+    --jkl-color-background-container-subdued: #C8C5C3;
+    --jkl-color-background-input-base: rgba(0, 0, 0, 0);
+    --jkl-color-background-input-focus: #FFFFFF;
+    --jkl-color-background-action: #1B1917;
+    --jkl-color-background-interactive: rgba(0, 0, 0, 0);
+    --jkl-color-background-interactive-hover: #ECE9E5;
+    --jkl-color-background-interactive-selected: #E0DBD4;
+    --jkl-color-background-alert-neutral: #E0DBD4;
+    --jkl-color-background-alert-info: #D3D3F6;
+    --jkl-color-background-alert-success: #ACD3B5;
+    --jkl-color-background-alert-warning: #EFDD9E;
+    --jkl-color-background-alert-error: #F6B3B3;
+    --jkl-color-text-default: #1B1917;
     --jkl-color-text-subdued: #636060;
-    --jkl-color-text-inverted: #f9f9f9;
-    --jkl-color-text-on-action: #f9f9f9;
-    --jkl-color-text-interactive: #1b1917;
+    --jkl-color-text-inverted: #F9F9F9;
+    --jkl-color-text-on-action: #F9F9F9;
+    --jkl-color-text-interactive: #1B1917;
     --jkl-color-text-interactive-hover: #636060;
-    --jkl-color-text-on-alert: #1b1917;
+    --jkl-color-text-on-alert: #1B1917;
     --jkl-color-text-on-alert-subdued: #444141;
-    --jkl-color-border-action: #1b1917;
+    --jkl-color-border-action: #1B1917;
     --jkl-color-border-input: #636060;
-    --jkl-color-border-input-focus: #1b1917;
-    --jkl-color-border-separator: #c8c5c3;
+    --jkl-color-border-input-focus: #1B1917;
+    --jkl-color-border-separator: #C8C5C3;
     --jkl-color-border-separator-strong: #636060;
-    --jkl-color-border-separator-hover: #1b1917;
-    --jkl-color-border-subdued: #c8c5c3;
+    --jkl-color-border-separator-hover: #1B1917;
+    --jkl-color-border-subdued: #C8C5C3;
   }
-}
-[data-theme=light] {
-  --jkl-color-background-page: #f4f2ef;
-  --jkl-color-background-page-variant: #f9f9f9;
-  --jkl-color-background-container: #f9f9f9;
-  --jkl-color-background-container-low: #ece9e5;
-  --jkl-color-background-container-high: #ffffff;
-  --jkl-color-background-container-inverted: #1b1917;
-  --jkl-color-background-container-subdued: #c8c5c3;
-  --jkl-color-background-input-base: rgb(0 0 0 / 0%);
-  --jkl-color-background-input-focus: #ffffff;
-  --jkl-color-background-action: #1b1917;
-  --jkl-color-background-interactive: rgb(0 0 0 / 0%);
-  --jkl-color-background-interactive-hover: #ece9e5;
-  --jkl-color-background-interactive-selected: #e0dbd4;
-  --jkl-color-background-alert-neutral: #e0dbd4;
-  --jkl-color-background-alert-info: #d3d3f6;
-  --jkl-color-background-alert-success: #acd3b5;
-  --jkl-color-background-alert-warning: #efdd9e;
-  --jkl-color-background-alert-error: #f6b3b3;
-  --jkl-color-text-default: #1b1917;
-  --jkl-color-text-subdued: #636060;
-  --jkl-color-text-inverted: #f9f9f9;
-  --jkl-color-text-on-action: #f9f9f9;
-  --jkl-color-text-interactive: #1b1917;
-  --jkl-color-text-interactive-hover: #636060;
-  --jkl-color-text-on-alert: #1b1917;
-  --jkl-color-text-on-alert-subdued: #444141;
-  --jkl-color-border-action: #1b1917;
-  --jkl-color-border-input: #636060;
-  --jkl-color-border-input-focus: #1b1917;
-  --jkl-color-border-separator: #c8c5c3;
-  --jkl-color-border-separator-strong: #636060;
-  --jkl-color-border-separator-hover: #1b1917;
-  --jkl-color-border-subdued: #c8c5c3;
-}
-
-@media screen and (prefers-color-scheme: dark) {
-  :root {
-    --jkl-color-background-page: #1b1917;
-    --jkl-color-background-page-variant: #1b1917;
+  @media screen and (prefers-color-scheme: dark) {
+    :root {
+      --jkl-color-background-page: #1B1917;
+      --jkl-color-background-page-variant: #1B1917;
+      --jkl-color-background-container: #313030;
+      --jkl-color-background-container-low: #000000;
+      --jkl-color-background-container-high: #313030;
+      --jkl-color-background-container-inverted: #F9F9F9;
+      --jkl-color-background-container-subdued: #636060;
+      --jkl-color-background-input-base: rgba(0, 0, 0, 0);
+      --jkl-color-background-input-focus: #313030;
+      --jkl-color-background-action: #F9F9F9;
+      --jkl-color-background-interactive: rgba(0, 0, 0, 0);
+      --jkl-color-background-interactive-hover: #444141;
+      --jkl-color-background-interactive-selected: #636060;
+      --jkl-color-background-alert-neutral: #E0DBD4;
+      --jkl-color-background-alert-info: #A9A9CA;
+      --jkl-color-background-alert-success: #94B79B;
+      --jkl-color-background-alert-warning: #DECC8D;
+      --jkl-color-background-alert-error: #DE9E9E;
+      --jkl-color-text-default: #F9F9F9;
+      --jkl-color-text-subdued: #C8C5C3;
+      --jkl-color-text-inverted: #1B1917;
+      --jkl-color-text-on-action: #1B1917;
+      --jkl-color-text-interactive: #F9F9F9;
+      --jkl-color-text-interactive-hover: #C8C5C3;
+      --jkl-color-text-on-alert: #1B1917;
+      --jkl-color-text-on-alert-subdued: #444141;
+      --jkl-color-border-action: #F9F9F9;
+      --jkl-color-border-input: #C8C5C3;
+      --jkl-color-border-input-focus: #F9F9F9;
+      --jkl-color-border-separator: #636060;
+      --jkl-color-border-separator-strong: #C8C5C3;
+      --jkl-color-border-separator-hover: #F9F9F9;
+      --jkl-color-border-subdued: #636060;
+    }
+  }
+  [data-theme=dark] {
+    --jkl-color-background-page: #1B1917;
+    --jkl-color-background-page-variant: #1B1917;
     --jkl-color-background-container: #313030;
     --jkl-color-background-container-low: #000000;
     --jkl-color-background-container-high: #313030;
-    --jkl-color-background-container-inverted: #f9f9f9;
+    --jkl-color-background-container-inverted: #F9F9F9;
     --jkl-color-background-container-subdued: #636060;
-    --jkl-color-background-input-base: rgb(0 0 0 / 0%);
+    --jkl-color-background-input-base: rgba(0, 0, 0, 0);
     --jkl-color-background-input-focus: #313030;
-    --jkl-color-background-action: #f9f9f9;
-    --jkl-color-background-interactive: rgb(0 0 0 / 0%);
+    --jkl-color-background-action: #F9F9F9;
+    --jkl-color-background-interactive: rgba(0, 0, 0, 0);
     --jkl-color-background-interactive-hover: #444141;
     --jkl-color-background-interactive-selected: #636060;
-    --jkl-color-background-alert-neutral: #e0dbd4;
-    --jkl-color-background-alert-info: #a9a9ca;
-    --jkl-color-background-alert-success: #94b79b;
-    --jkl-color-background-alert-warning: #decc8d;
-    --jkl-color-background-alert-error: #de9e9e;
-    --jkl-color-text-default: #f9f9f9;
-    --jkl-color-text-subdued: #c8c5c3;
-    --jkl-color-text-inverted: #1b1917;
-    --jkl-color-text-on-action: #1b1917;
-    --jkl-color-text-interactive: #f9f9f9;
-    --jkl-color-text-interactive-hover: #c8c5c3;
-    --jkl-color-text-on-alert: #1b1917;
+    --jkl-color-background-alert-neutral: #E0DBD4;
+    --jkl-color-background-alert-info: #A9A9CA;
+    --jkl-color-background-alert-success: #94B79B;
+    --jkl-color-background-alert-warning: #DECC8D;
+    --jkl-color-background-alert-error: #DE9E9E;
+    --jkl-color-text-default: #F9F9F9;
+    --jkl-color-text-subdued: #C8C5C3;
+    --jkl-color-text-inverted: #1B1917;
+    --jkl-color-text-on-action: #1B1917;
+    --jkl-color-text-interactive: #F9F9F9;
+    --jkl-color-text-interactive-hover: #C8C5C3;
+    --jkl-color-text-on-alert: #1B1917;
     --jkl-color-text-on-alert-subdued: #444141;
-    --jkl-color-border-action: #f9f9f9;
-    --jkl-color-border-input: #c8c5c3;
-    --jkl-color-border-input-focus: #f9f9f9;
+    --jkl-color-border-action: #F9F9F9;
+    --jkl-color-border-input: #C8C5C3;
+    --jkl-color-border-input-focus: #F9F9F9;
     --jkl-color-border-separator: #636060;
-    --jkl-color-border-separator-strong: #c8c5c3;
-    --jkl-color-border-separator-hover: #f9f9f9;
+    --jkl-color-border-separator-strong: #C8C5C3;
+    --jkl-color-border-separator-hover: #F9F9F9;
     --jkl-color-border-subdued: #636060;
   }
 }
-[data-theme=dark] {
-  --jkl-color-background-page: #1b1917;
-  --jkl-color-background-page-variant: #1b1917;
-  --jkl-color-background-container: #313030;
-  --jkl-color-background-container-low: #000000;
-  --jkl-color-background-container-high: #313030;
-  --jkl-color-background-container-inverted: #f9f9f9;
-  --jkl-color-background-container-subdued: #636060;
-  --jkl-color-background-input-base: rgb(0 0 0 / 0%);
-  --jkl-color-background-input-focus: #313030;
-  --jkl-color-background-action: #f9f9f9;
-  --jkl-color-background-interactive: rgb(0 0 0 / 0%);
-  --jkl-color-background-interactive-hover: #444141;
-  --jkl-color-background-interactive-selected: #636060;
-  --jkl-color-background-alert-neutral: #e0dbd4;
-  --jkl-color-background-alert-info: #a9a9ca;
-  --jkl-color-background-alert-success: #94b79b;
-  --jkl-color-background-alert-warning: #decc8d;
-  --jkl-color-background-alert-error: #de9e9e;
-  --jkl-color-text-default: #f9f9f9;
-  --jkl-color-text-subdued: #c8c5c3;
-  --jkl-color-text-inverted: #1b1917;
-  --jkl-color-text-on-action: #1b1917;
-  --jkl-color-text-interactive: #f9f9f9;
-  --jkl-color-text-interactive-hover: #c8c5c3;
-  --jkl-color-text-on-alert: #1b1917;
-  --jkl-color-text-on-alert-subdued: #444141;
-  --jkl-color-border-action: #f9f9f9;
-  --jkl-color-border-input: #c8c5c3;
-  --jkl-color-border-input-focus: #f9f9f9;
-  --jkl-color-border-separator: #636060;
-  --jkl-color-border-separator-strong: #c8c5c3;
-  --jkl-color-border-separator-hover: #f9f9f9;
-  --jkl-color-border-subdued: #636060;
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+@layer jokul.theme {
+  :root {
+    --jkl-breakpoint-medium: 680px;
+    --jkl-breakpoint-large: 1200px;
+    --jkl-breakpoint-xl: 1600px;
+    --jkl-color-brand-snohvit: #F9F9F9;
+    --jkl-color-brand-varde: #E0DBD4;
+    --jkl-color-brand-granitt: #1B1917;
+    --jkl-color-brand-hvit: #FFFFFF;
+    --jkl-color-brand-svart: #000000;
+    --jkl-color-brand-skifer: #313030;
+    --jkl-color-brand-fjellgra: #444141;
+    --jkl-color-brand-stein: #636060;
+    --jkl-color-brand-svaberg: #C8C5C3;
+    --jkl-color-brand-dis: #ECE9E5;
+    --jkl-color-brand-sand: #F4F2EF;
+    --jkl-color-functional-info: #D3D3F6;
+    --jkl-color-functional-info-dark: #A9A9CA;
+    --jkl-color-functional-success: #ACD3B5;
+    --jkl-color-functional-success-dark: #94B79B;
+    --jkl-color-functional-warning: #EFDD9E;
+    --jkl-color-functional-warning-dark: #DECC8D;
+    --jkl-color-functional-error: #F6B3B3;
+    --jkl-color-functional-error-dark: #DE9E9E;
+    --jkl-color-svart: #000;
+    --jkl-color-granitt: #1b1917;
+    --jkl-color-skifer: #313030;
+    --jkl-color-fjellgra: #444141;
+    --jkl-color-stein: #636060;
+    --jkl-color-svaberg: #c8c5c3;
+    --jkl-color-varde: #e0dbd4;
+    --jkl-color-dis: #ece9e5;
+    --jkl-color-sand: #f4f2ef;
+    --jkl-color-snohvit: #f9f9f9;
+    --jkl-color-hvit: #fff;
+    --jkl-color-suksess: #acd3b5;
+    --jkl-color-suksess-dark: #94b79b;
+    --jkl-color-feil: #f6b3b3;
+    --jkl-color-feil-dark: #de9e9e;
+    --jkl-color-info: #d3d3f6;
+    --jkl-color-info-dark: #a9a9ca;
+    --jkl-color-advarsel: #efdd9e;
+    --jkl-color-advarsel-dark: #decc8d;
+    --jkl-motion-timing-energetic: 75ms;
+    --jkl-motion-timing-snappy: 100ms;
+    --jkl-motion-timing-productive: 150ms;
+    --jkl-motion-timing-expressive: 250ms;
+    --jkl-motion-timing-lazy: 400ms;
+    --jkl-motion-easing-standard: ease;
+    --jkl-motion-easing-entrance: ease-out;
+    --jkl-motion-easing-exit: ease-in;
+    --jkl-motion-easing-ease-in-bounce-out: cubic-bezier(0, 0, 0.375, 1.17);
+    --jkl-motion-easing-focus: cubic-bezier(0.6, 0.2, 0.35, 1);
+    --jkl-spacing-0: 0rem;
+    --jkl-spacing-2: 0.125rem;
+    --jkl-spacing-4: 0.25rem;
+    --jkl-spacing-8: 0.5rem;
+    --jkl-spacing-12: 0.75rem;
+    --jkl-spacing-16: 1rem;
+    --jkl-spacing-24: 1.5rem;
+    --jkl-spacing-32: 2rem;
+    --jkl-spacing-40: 2.5rem;
+    --jkl-spacing-64: 4rem;
+    --jkl-spacing-104: 6.5rem;
+    --jkl-spacing-168: 10.5rem;
+    --jkl-icon-weight-normal: 300;
+    --jkl-icon-weight-bold: 400;
+    --jkl-typography-weight-normal: 400;
+    --jkl-typography-weight-bold: 700;
+    --jkl-typography-font-size-16: 1rem;
+    --jkl-typography-font-size-18: 1.125rem;
+    --jkl-typography-font-size-20: 1.25rem;
+    --jkl-typography-font-size-21: 1.3125rem;
+    --jkl-typography-font-size-23: 1.4375rem;
+    --jkl-typography-font-size-25: 1.5625rem;
+    --jkl-typography-font-size-26: 1.625rem;
+    --jkl-typography-font-size-28: 1.75rem;
+    --jkl-typography-font-size-30: 1.875rem;
+    --jkl-typography-font-size-36: 2.25rem;
+    --jkl-typography-font-size-44: 2.75rem;
+    --jkl-typography-font-size-56: 3.5rem;
+    --jkl-typography-line-height-24: 1.5rem;
+    --jkl-typography-line-height-28: 1.75rem;
+    --jkl-typography-line-height-32: 2rem;
+    --jkl-typography-line-height-36: 2.25rem;
+    --jkl-typography-line-height-40: 2.5rem;
+    --jkl-typography-line-height-44: 2.75rem;
+    --jkl-typography-line-height-52: 3.25rem;
+    --jkl-typography-line-height-64: 4rem;
+    --jkl-typography-title-small-font-size: 2.25rem;
+    --jkl-typography-title-small-line-height: 2.75rem;
+    --jkl-typography-title-small-font-weight: 400;
+    --jkl-typography-title-base-font-size: 3.5rem;
+    --jkl-typography-title-base-line-height: 4rem;
+    --jkl-typography-title-base-font-weight: 400;
+    --jkl-typography-title-small-small-font-size: 1.875rem;
+    --jkl-typography-title-small-small-line-height: 2.25rem;
+    --jkl-typography-title-small-small-font-weight: 400;
+    --jkl-typography-title-small-base-font-size: 2.75rem;
+    --jkl-typography-title-small-base-line-height: 3.25rem;
+    --jkl-typography-title-small-base-font-weight: 400;
+    --jkl-typography-heading-1-small-font-size: 1.625rem;
+    --jkl-typography-heading-1-small-line-height: 2rem;
+    --jkl-typography-heading-1-small-font-weight: 400;
+    --jkl-typography-heading-1-base-font-size: 2.25rem;
+    --jkl-typography-heading-1-base-line-height: 2.75rem;
+    --jkl-typography-heading-1-base-font-weight: 400;
+    --jkl-typography-heading-2-small-font-size: 1.4375rem;
+    --jkl-typography-heading-2-small-line-height: 2rem;
+    --jkl-typography-heading-2-small-font-weight: 400;
+    --jkl-typography-heading-2-base-font-size: 1.75rem;
+    --jkl-typography-heading-2-base-line-height: 2.5rem;
+    --jkl-typography-heading-2-base-font-weight: 400;
+    --jkl-typography-heading-3-small-font-size: 1.3125rem;
+    --jkl-typography-heading-3-small-line-height: 1.75rem;
+    --jkl-typography-heading-3-small-font-weight: 700;
+    --jkl-typography-heading-3-base-font-size: 1.5625rem;
+    --jkl-typography-heading-3-base-line-height: 2rem;
+    --jkl-typography-heading-3-base-font-weight: 700;
+    --jkl-typography-heading-4-small-font-size: 1.125rem;
+    --jkl-typography-heading-4-small-line-height: 1.5rem;
+    --jkl-typography-heading-4-small-font-weight: 700;
+    --jkl-typography-heading-4-base-font-size: 1.3125rem;
+    --jkl-typography-heading-4-base-line-height: 1.75rem;
+    --jkl-typography-heading-4-base-font-weight: 700;
+    --jkl-typography-heading-5-small-font-size: 1rem;
+    --jkl-typography-heading-5-small-line-height: 1.5rem;
+    --jkl-typography-heading-5-small-font-weight: 700;
+    --jkl-typography-heading-5-base-font-size: 1rem;
+    --jkl-typography-heading-5-base-line-height: 1.5rem;
+    --jkl-typography-heading-5-base-font-weight: 700;
+    --jkl-typography-body-small-font-size: 1.125rem;
+    --jkl-typography-body-small-line-height: 1.75rem;
+    --jkl-typography-body-small-font-weight: 400;
+    --jkl-typography-body-base-font-size: 1.25rem;
+    --jkl-typography-body-base-line-height: 2rem;
+    --jkl-typography-body-base-font-weight: 400;
+    --jkl-typography-small-small-font-size: 1rem;
+    --jkl-typography-small-small-line-height: 1.5rem;
+    --jkl-typography-small-small-font-weight: 400;
+    --jkl-typography-small-base-font-size: 1rem;
+    --jkl-typography-small-base-line-height: 1.5rem;
+    --jkl-typography-small-base-font-weight: 400;
+  }
+}
+@layer jokul.theme {
+  /* Used by menu to figure out if it should render a compact or comfortable view */
+  :root,
+  [data-layout-density=comfortable],
+  [data-density=comfortable] {
+    --jkl-density: "comfortable";
+  }
+  [data-layout-density=compact],
+  [data-density=compact] {
+    --jkl-density: "compact";
+  }
+  @media screen and (prefers-color-scheme: light) {
+    :root {
+      --jkl-background-color: #f9f9f9;
+      --jkl-color: #1b1917;
+      --jkl-error: #f6b3b3;
+      --jkl-info: #d3d3f6;
+      --jkl-warning: #efdd9e;
+      --jkl-success: #acd3b5;
+    }
+  }
+  [data-theme=light] {
+    --jkl-background-color: #f9f9f9;
+    --jkl-color: #1b1917;
+    --jkl-error: #f6b3b3;
+    --jkl-info: #d3d3f6;
+    --jkl-warning: #efdd9e;
+    --jkl-success: #acd3b5;
+  }
+  @media screen and (prefers-color-scheme: dark) {
+    :root {
+      --jkl-background-color: #1b1917;
+      --jkl-color: #f9f9f9;
+      --jkl-error: #de9e9e;
+      --jkl-info: #a9a9ca;
+      --jkl-warning: #decc8d;
+      --jkl-success: #94b79b;
+    }
+  }
+  [data-theme=dark] {
+    --jkl-background-color: #1b1917;
+    --jkl-color: #f9f9f9;
+    --jkl-error: #de9e9e;
+    --jkl-info: #a9a9ca;
+    --jkl-warning: #decc8d;
+    --jkl-success: #94b79b;
+  }
+}
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+@layer jokul.theme {
+  :root {
+    --jkl-unit-10: 0.5rem;
+    --jkl-unit-15: calc(var(--jkl-unit-10) * 1.5);
+    --jkl-unit-20: calc(var(--jkl-unit-10) * 2);
+    --jkl-unit-25: calc(var(--jkl-unit-10) * 2.5);
+    --jkl-unit-30: calc(var(--jkl-unit-10) * 3);
+    --jkl-unit-40: calc(var(--jkl-unit-10) * 4);
+    --jkl-unit-50: calc(var(--jkl-unit-10) * 5);
+    --jkl-unit-60: calc(var(--jkl-unit-10) * 6);
+    --jkl-unit-70: calc(var(--jkl-unit-10) * 7);
+    --jkl-unit-80: calc(var(--jkl-unit-10) * 8);
+    --jkl-unit-90: calc(var(--jkl-unit-10) * 9);
+    --jkl-unit-130: calc(var(--jkl-unit-10) * 13);
+    --jkl-unit-210: calc(var(--jkl-unit-10) * 21);
+    --jkl-unit-02: calc(var(--jkl-unit-10) * .25);
+    --jkl-unit-05: calc(var(--jkl-unit-10) * .5);
+    --jkl-spacing-xs: 0.5rem;
+    --jkl-spacing-s: calc(var(--jkl-unit-10) * 2);
+    --jkl-spacing-m: calc(var(--jkl-unit-10) * 3);
+    --jkl-spacing-l: calc(var(--jkl-unit-10) * 5);
+    --jkl-spacing-xl: calc(var(--jkl-unit-10) * 8);
+    --jkl-spacing-2xl: calc(var(--jkl-unit-10) * 13);
+  }
+}
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+@layer jokul.theme {
+  :root {
+    --jkl-unit-10: 0.5rem;
+    --jkl-unit-15: calc(var(--jkl-unit-10) * 1.5);
+    --jkl-unit-20: calc(var(--jkl-unit-10) * 2);
+    --jkl-unit-25: calc(var(--jkl-unit-10) * 2.5);
+    --jkl-unit-30: calc(var(--jkl-unit-10) * 3);
+    --jkl-unit-40: calc(var(--jkl-unit-10) * 4);
+    --jkl-unit-50: calc(var(--jkl-unit-10) * 5);
+    --jkl-unit-60: calc(var(--jkl-unit-10) * 6);
+    --jkl-unit-70: calc(var(--jkl-unit-10) * 7);
+    --jkl-unit-80: calc(var(--jkl-unit-10) * 8);
+    --jkl-unit-90: calc(var(--jkl-unit-10) * 9);
+    --jkl-unit-130: calc(var(--jkl-unit-10) * 13);
+    --jkl-unit-210: calc(var(--jkl-unit-10) * 21);
+    --jkl-unit-02: calc(var(--jkl-unit-10) * .25);
+    --jkl-unit-05: calc(var(--jkl-unit-10) * .5);
+    --jkl-spacing-xs: 0.5rem;
+    --jkl-spacing-s: calc(var(--jkl-unit-10) * 2);
+    --jkl-spacing-m: calc(var(--jkl-unit-10) * 3);
+    --jkl-spacing-l: calc(var(--jkl-unit-10) * 5);
+    --jkl-spacing-xl: calc(var(--jkl-unit-10) * 8);
+    --jkl-spacing-2xl: calc(var(--jkl-unit-10) * 13);
+  }
+}
+@layer jokul.theme {
+  :root {
+    --jkl-title-font-size: 2.25rem;
+    --jkl-title-line-height: 2.75rem;
+    --jkl-title-font-weight: 400;
+    --jkl-title---jkl-icon-weight: 300;
+    --jkl-title---jkl-icon-size: 1.2em;
+    --jkl-title-small-font-size: 1.875rem;
+    --jkl-title-small-line-height: 2.25rem;
+    --jkl-title-small-font-weight: 400;
+    --jkl-title-small---jkl-icon-weight: 300;
+    --jkl-title-small---jkl-icon-size: 1.2em;
+    --jkl-heading-1-font-size: 1.625rem;
+    --jkl-heading-1-line-height: 2rem;
+    --jkl-heading-1-font-weight: 400;
+    --jkl-heading-1---jkl-icon-weight: 300;
+    --jkl-heading-1---jkl-icon-size: 1.2em;
+    --jkl-heading-2-font-size: 1.4375rem;
+    --jkl-heading-2-line-height: 2rem;
+    --jkl-heading-2-font-weight: 400;
+    --jkl-heading-2---jkl-icon-weight: 300;
+    --jkl-heading-2---jkl-icon-size: 1.2em;
+    --jkl-heading-3-font-size: 1.3125rem;
+    --jkl-heading-3-line-height: 1.75rem;
+    --jkl-heading-3-font-weight: 700;
+    --jkl-heading-3---jkl-icon-weight: 400;
+    --jkl-heading-3---jkl-icon-size: 1.2em;
+    --jkl-heading-4-font-size: 1.125rem;
+    --jkl-heading-4-line-height: 1.5rem;
+    --jkl-heading-4-font-weight: 700;
+    --jkl-heading-4---jkl-icon-weight: 400;
+    --jkl-heading-5-font-size: 1rem;
+    --jkl-heading-5-line-height: 1.5rem;
+    --jkl-heading-5-font-weight: 700;
+    --jkl-heading-5---jkl-icon-weight: 400;
+    --jkl-heading-5---jkl-icon-size: 1.25rem;
+    --jkl-heading-5---jkl-icon-opsz: 20;
+    --jkl-body-font-size: 1.125rem;
+    --jkl-body-line-height: 1.75rem;
+    --jkl-body-font-weight: 400;
+    --jkl-body---jkl-icon-weight: 300;
+    --jkl-small-font-size: 1rem;
+    --jkl-small-line-height: 1.5rem;
+    --jkl-small-font-weight: 400;
+    --jkl-small---jkl-icon-weight: 300;
+    --jkl-small---jkl-icon-size: 1.25rem;
+    --jkl-small---jkl-icon-opsz: 20;
+  }
+  @media (min-width: 680px) {
+    :root {
+      --jkl-title-font-size: 3.5rem;
+      --jkl-title-line-height: 4rem;
+      --jkl-title-font-weight: 400;
+      --jkl-title---jkl-icon-weight: 300;
+      --jkl-title---jkl-icon-size: 1.2em;
+      --jkl-title-small-font-size: 2.75rem;
+      --jkl-title-small-line-height: 3.25rem;
+      --jkl-title-small-font-weight: 400;
+      --jkl-title-small---jkl-icon-weight: 300;
+      --jkl-title-small---jkl-icon-size: 1.2em;
+      --jkl-heading-1-font-size: 2.25rem;
+      --jkl-heading-1-line-height: 2.75rem;
+      --jkl-heading-1-font-weight: 400;
+      --jkl-heading-1---jkl-icon-weight: 300;
+      --jkl-heading-1---jkl-icon-size: 1.2em;
+      --jkl-heading-2-font-size: 1.75rem;
+      --jkl-heading-2-line-height: 2.5rem;
+      --jkl-heading-2-font-weight: 400;
+      --jkl-heading-2---jkl-icon-weight: 300;
+      --jkl-heading-2---jkl-icon-size: 1.2em;
+      --jkl-heading-3-font-size: 1.5625rem;
+      --jkl-heading-3-line-height: 2rem;
+      --jkl-heading-3-font-weight: 700;
+      --jkl-heading-3---jkl-icon-weight: 400;
+      --jkl-heading-3---jkl-icon-size: 1.2em;
+      --jkl-heading-4-font-size: 1.3125rem;
+      --jkl-heading-4-line-height: 1.75rem;
+      --jkl-heading-4-font-weight: 700;
+      --jkl-heading-4---jkl-icon-weight: 400;
+      --jkl-heading-5-font-size: 1rem;
+      --jkl-heading-5-line-height: 1.5rem;
+      --jkl-heading-5-font-weight: 700;
+      --jkl-heading-5---jkl-icon-weight: 400;
+      --jkl-heading-5---jkl-icon-size: 1.25rem;
+      --jkl-heading-5---jkl-icon-opsz: 20;
+      --jkl-body-font-size: 1.25rem;
+      --jkl-body-line-height: 2rem;
+      --jkl-body-font-weight: 400;
+      --jkl-body---jkl-icon-weight: 300;
+      --jkl-small-font-size: 1rem;
+      --jkl-small-line-height: 1.5rem;
+      --jkl-small-font-weight: 400;
+      --jkl-small---jkl-icon-weight: 300;
+      --jkl-small---jkl-icon-size: 1.25rem;
+      --jkl-small---jkl-icon-opsz: 20;
+    }
+  }
+}
+@layer jokul.global {
+  .jkl {
+    font-family: "Fremtind Grotesk", "Adjusted Arial Fallback", Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    background-color: var(--jkl-background-color);
+    color: var(--jkl-color);
+  }
+  @supports (font: -apple-system-body) {
+    .jkl {
+      font: -apple-system-body;
+    }
+  }
+  .jkl strong {
+    --jkl-icon-weight: 400;
+    font-weight: 700;
+  }
+  @media screen and (prefers-reduced-motion: reduce) {
+    *,
+    *::after,
+    *::before {
+      animation-duration: 0ms !important;
+      animation-delay: 0ms !important;
+      transition: none !important;
+    }
+  }
 }
-
-.jkl-title {
-  font-size: 2.25rem;
-  line-height: 2.75rem;
-  font-weight: 400;
-  --jkl-icon-weight: 300;
-  --jkl-icon-size: 1.2em;
+@layer jokul.global {
+  [popover] {
+    opacity: 0;
+    transition: opacity, overlay allow-discrete, display allow-discrete;
+    transition-timing-function: ease;
+    transition-duration: 150ms;
+  }
+  [popover]:popover-open {
+    opacity: 1;
+  }
+  @starting-style {
+    [popover]:popover-open {
+      opacity: 0;
+    }
+  }
 }
-@media (min-width: 680px) {
+@layer jokul.utility {
   .jkl-title {
-    font-size: 3.5rem;
-    line-height: 4rem;
+    font-size: 2.25rem;
+    line-height: 2.75rem;
     font-weight: 400;
     --jkl-icon-weight: 300;
     --jkl-icon-size: 1.2em;
   }
-}
-
-.jkl-title-small {
-  font-size: 1.875rem;
-  line-height: 2.25rem;
-  font-weight: 400;
-  --jkl-icon-weight: 300;
-  --jkl-icon-size: 1.2em;
-}
-@media (min-width: 680px) {
+  @media (min-width: 680px) {
+    .jkl-title {
+      font-size: 3.5rem;
+      line-height: 4rem;
+      font-weight: 400;
+      --jkl-icon-weight: 300;
+      --jkl-icon-size: 1.2em;
+    }
+  }
   .jkl-title-small {
-    font-size: 2.75rem;
-    line-height: 3.25rem;
+    font-size: 1.875rem;
+    line-height: 2.25rem;
     font-weight: 400;
     --jkl-icon-weight: 300;
     --jkl-icon-size: 1.2em;
   }
-}
-
-.jkl-heading-1 {
-  font-size: 1.625rem;
-  line-height: 2rem;
-  font-weight: 400;
-  --jkl-icon-weight: 300;
-  --jkl-icon-size: 1.2em;
-}
-@media (min-width: 680px) {
+  @media (min-width: 680px) {
+    .jkl-title-small {
+      font-size: 2.75rem;
+      line-height: 3.25rem;
+      font-weight: 400;
+      --jkl-icon-weight: 300;
+      --jkl-icon-size: 1.2em;
+    }
+  }
   .jkl-heading-1 {
-    font-size: 2.25rem;
-    line-height: 2.75rem;
+    font-size: 1.625rem;
+    line-height: 2rem;
     font-weight: 400;
     --jkl-icon-weight: 300;
     --jkl-icon-size: 1.2em;
   }
-}
-
-.jkl-heading-2 {
-  font-size: 1.4375rem;
-  line-height: 2rem;
-  font-weight: 400;
-  --jkl-icon-weight: 300;
-  --jkl-icon-size: 1.2em;
-}
-@media (min-width: 680px) {
+  @media (min-width: 680px) {
+    .jkl-heading-1 {
+      font-size: 2.25rem;
+      line-height: 2.75rem;
+      font-weight: 400;
+      --jkl-icon-weight: 300;
+      --jkl-icon-size: 1.2em;
+    }
+  }
   .jkl-heading-2 {
-    font-size: 1.75rem;
-    line-height: 2.5rem;
+    font-size: 1.4375rem;
+    line-height: 2rem;
     font-weight: 400;
     --jkl-icon-weight: 300;
     --jkl-icon-size: 1.2em;
   }
-}
-
-.jkl-heading-3 {
-  font-size: 1.3125rem;
-  line-height: 1.75rem;
-  font-weight: 700;
-  --jkl-icon-weight: 400;
-  --jkl-icon-size: 1.2em;
-}
-@media (min-width: 680px) {
+  @media (min-width: 680px) {
+    .jkl-heading-2 {
+      font-size: 1.75rem;
+      line-height: 2.5rem;
+      font-weight: 400;
+      --jkl-icon-weight: 300;
+      --jkl-icon-size: 1.2em;
+    }
+  }
   .jkl-heading-3 {
-    font-size: 1.5625rem;
-    line-height: 2rem;
+    font-size: 1.3125rem;
+    line-height: 1.75rem;
     font-weight: 700;
     --jkl-icon-weight: 400;
     --jkl-icon-size: 1.2em;
   }
-}
-
-.jkl-heading-4 {
-  font-size: 1.125rem;
-  line-height: 1.5rem;
-  font-weight: 700;
-  --jkl-icon-weight: 400;
-}
-@media (min-width: 680px) {
+  @media (min-width: 680px) {
+    .jkl-heading-3 {
+      font-size: 1.5625rem;
+      line-height: 2rem;
+      font-weight: 700;
+      --jkl-icon-weight: 400;
+      --jkl-icon-size: 1.2em;
+    }
+  }
   .jkl-heading-4 {
-    font-size: 1.3125rem;
-    line-height: 1.75rem;
+    font-size: 1.125rem;
+    line-height: 1.5rem;
     font-weight: 700;
     --jkl-icon-weight: 400;
   }
+  @media (min-width: 680px) {
+    .jkl-heading-4 {
+      font-size: 1.3125rem;
+      line-height: 1.75rem;
+      font-weight: 700;
+      --jkl-icon-weight: 400;
+    }
+  }
+  .jkl-heading-5 {
+    font-size: 1rem;
+    line-height: 1.5rem;
+    font-weight: 700;
+    --jkl-icon-weight: 400;
+    --jkl-icon-size: 1.25rem;
+    --jkl-icon-opsz: 20;
+  }
 }
-
-.jkl-heading-5 {
-  font-size: 1rem;
-  line-height: 1.5rem;
-  font-weight: 700;
-  --jkl-icon-weight: 400;
-  --jkl-icon-size: 1.25rem;
-  --jkl-icon-opsz: 20;
-}
-
-.jkl-body {
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-  font-weight: 400;
-  --jkl-icon-weight: 300;
-}
-@media (min-width: 680px) {
+@layer jokul.utility {
   .jkl-body {
-    font-size: 1.25rem;
-    line-height: 2rem;
+    font-size: 1.125rem;
+    line-height: 1.75rem;
     font-weight: 400;
     --jkl-icon-weight: 300;
   }
-}
-
-.jkl-bold {
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-  font-weight: 400;
-  --jkl-icon-weight: 300;
-  --jkl-icon-weight: 400;
-  font-weight: 700;
-}
-@media (min-width: 680px) {
+  @media (min-width: 680px) {
+    .jkl-body {
+      font-size: 1.25rem;
+      line-height: 2rem;
+      font-weight: 400;
+      --jkl-icon-weight: 300;
+    }
+  }
   .jkl-bold {
-    font-size: 1.25rem;
-    line-height: 2rem;
+    font-size: 1.125rem;
+    line-height: 1.75rem;
     font-weight: 400;
     --jkl-icon-weight: 300;
     --jkl-icon-weight: 400;
     font-weight: 700;
   }
+  @media (min-width: 680px) {
+    .jkl-bold {
+      font-size: 1.25rem;
+      line-height: 2rem;
+      font-weight: 400;
+      --jkl-icon-weight: 300;
+      --jkl-icon-weight: 400;
+      font-weight: 700;
+    }
+  }
+  .jkl-small {
+    font-size: 1rem;
+    line-height: 1.5rem;
+    font-weight: 400;
+    --jkl-icon-weight: 300;
+    --jkl-icon-size: 1.25rem;
+    --jkl-icon-opsz: 20;
+  }
 }
-
-.jkl-small {
-  font-size: 1rem;
-  line-height: 1.5rem;
-  font-weight: 400;
-  --jkl-icon-weight: 300;
-  --jkl-icon-size: 1.25rem;
-  --jkl-icon-opsz: 20;
-}
-
-:root {
-  --jkl-spacing-2: 0.125rem;
-  --jkl-spacing-4: 0.25rem;
-  --jkl-spacing-8: 0.5rem;
-  --jkl-spacing-12: 0.75rem;
-  --jkl-spacing-16: 1rem;
-  --jkl-spacing-24: 1.5rem;
-  --jkl-spacing-32: 2rem;
-  --jkl-spacing-40: 2.5rem;
-  --jkl-spacing-64: 4rem;
-  --jkl-spacing-104: 6.5rem;
-  --jkl-spacing-168: 10.5rem;
-  --jkl-spacing-16-24: 1rem;
-  --jkl-spacing-24-40: 1.5rem;
-  --jkl-spacing-24-32: 1.5rem;
-  --jkl-spacing-32-40: 2rem;
-  --jkl-spacing-40-64: 2.5rem;
-  --jkl-spacing-64-104: 4rem;
-  --jkl-spacing-104-168: 6.5rem;
-  --jkl-spacing-16-16-24: 1rem;
-  --jkl-spacing-16-24-32: 1rem;
-  --jkl-spacing-16-24-40: 1rem;
-  --jkl-spacing-24-24-32: 1.5rem;
-  --jkl-spacing-24-24-40: 1.5rem;
-  --jkl-spacing-24-32-40: 1.5rem;
-  --jkl-spacing-32-32-40: 2rem;
-  --jkl-spacing-32-40-64: 2rem;
-  --jkl-spacing-40-40-64: 2.5rem;
-  --jkl-spacing-40-64-104: 2.5rem;
-  --jkl-spacing-64-64-104: 4rem;
-  --jkl-spacing-64-104-168: 4rem;
-  --jkl-spacing-104-104-168: 6.5rem;
+@layer jokul.utility {
+  .jkl-sr-only {
+    border: 0 !important;
+    clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
+    clip-path: inset(50%) !important; /* 2 */
+    height: 1px !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    padding: 0 !important;
+    position: absolute !important;
+    width: 1px !important;
+    white-space: nowrap !important; /* 3 */
+  }
+  .jkl-sr-only--focusable:focus, .jkl-sr-only--focusable:active {
+    clip: auto !important;
+    clip-path: none !important;
+    height: auto !important;
+    margin: auto !important;
+    overflow: visible !important;
+    width: auto !important;
+    white-space: normal !important;
+  }
 }
-@media (min-width: 680px) {
-  :root {
-    --jkl-spacing-16-24: 1.5rem;
-    --jkl-spacing-24-40: 2.5rem;
-    --jkl-spacing-24-32: 2rem;
-    --jkl-spacing-32-40: 2.5rem;
-    --jkl-spacing-40-64: 4rem;
-    --jkl-spacing-64-104: 6.5rem;
-    --jkl-spacing-104-168: 10.5rem;
-    --jkl-spacing-16-16-24: 1rem;
-    --jkl-spacing-16-24-32: 1.5rem;
-    --jkl-spacing-16-24-40: 1.5rem;
-    --jkl-spacing-24-24-32: 1.5rem;
-    --jkl-spacing-24-24-40: 1.5rem;
-    --jkl-spacing-24-32-40: 2rem;
-    --jkl-spacing-32-32-40: 2rem;
-    --jkl-spacing-32-40-64: 2.5rem;
-    --jkl-spacing-40-40-64: 2.5rem;
-    --jkl-spacing-40-64-104: 4rem;
-    --jkl-spacing-64-64-104: 4rem;
-    --jkl-spacing-64-104-168: 6.5rem;
-    --jkl-spacing-104-104-168: 6.5rem;
+@layer jokul.utility {
+  .jkl-spacing-2--all {
+    margin: var(--jkl-spacing-2);
   }
-}
-@media (min-width: 1200px) {
-  :root {
-    --jkl-spacing-16-16-24: 1.5rem;
-    --jkl-spacing-16-24-32: 2rem;
-    --jkl-spacing-16-24-40: 2.5rem;
-    --jkl-spacing-24-24-32: 2rem;
-    --jkl-spacing-24-24-40: 2.5rem;
-    --jkl-spacing-24-32-40: 2.5rem;
-    --jkl-spacing-32-32-40: 2.5rem;
-    --jkl-spacing-32-40-64: 4rem;
-    --jkl-spacing-40-40-64: 4rem;
-    --jkl-spacing-40-64-104: 6.5rem;
-    --jkl-spacing-64-64-104: 6.5rem;
-    --jkl-spacing-64-104-168: 10.5rem;
-    --jkl-spacing-104-104-168: 10.5rem;
+  .jkl-spacing-2--top {
+    margin-top: var(--jkl-spacing-2);
   }
-}
-
-.jkl-spacing-2--all {
-  margin: var(--jkl-spacing-2);
-}
-.jkl-spacing-2--top {
-  margin-top: var(--jkl-spacing-2);
-}
-.jkl-spacing-2--bottom {
-  margin-bottom: var(--jkl-spacing-2);
-}
-.jkl-spacing-2--left {
-  margin-left: var(--jkl-spacing-2);
-}
-.jkl-spacing-2--right {
-  margin-right: var(--jkl-spacing-2);
-}
-
-.jkl-spacing-4--all {
-  margin: var(--jkl-spacing-4);
-}
-.jkl-spacing-4--top {
-  margin-top: var(--jkl-spacing-4);
-}
-.jkl-spacing-4--bottom {
-  margin-bottom: var(--jkl-spacing-4);
-}
-.jkl-spacing-4--left {
-  margin-left: var(--jkl-spacing-4);
-}
-.jkl-spacing-4--right {
-  margin-right: var(--jkl-spacing-4);
-}
-
-.jkl-spacing-8--all {
-  margin: var(--jkl-spacing-8);
-}
-.jkl-spacing-8--top {
-  margin-top: var(--jkl-spacing-8);
-}
-.jkl-spacing-8--bottom {
-  margin-bottom: var(--jkl-spacing-8);
-}
-.jkl-spacing-8--left {
-  margin-left: var(--jkl-spacing-8);
-}
-.jkl-spacing-8--right {
-  margin-right: var(--jkl-spacing-8);
-}
-
-.jkl-spacing-12--all {
-  margin: var(--jkl-spacing-12);
-}
-.jkl-spacing-12--top {
-  margin-top: var(--jkl-spacing-12);
-}
-.jkl-spacing-12--bottom {
-  margin-bottom: var(--jkl-spacing-12);
-}
-.jkl-spacing-12--left {
-  margin-left: var(--jkl-spacing-12);
-}
-.jkl-spacing-12--right {
-  margin-right: var(--jkl-spacing-12);
-}
-
-.jkl-spacing-16--all {
-  margin: var(--jkl-spacing-16);
-}
-.jkl-spacing-16--top {
-  margin-top: var(--jkl-spacing-16);
-}
-.jkl-spacing-16--bottom {
-  margin-bottom: var(--jkl-spacing-16);
-}
-.jkl-spacing-16--left {
-  margin-left: var(--jkl-spacing-16);
-}
-.jkl-spacing-16--right {
-  margin-right: var(--jkl-spacing-16);
-}
-
-.jkl-spacing-24--all {
-  margin: var(--jkl-spacing-24);
-}
-.jkl-spacing-24--top {
-  margin-top: var(--jkl-spacing-24);
-}
-.jkl-spacing-24--bottom {
-  margin-bottom: var(--jkl-spacing-24);
-}
-.jkl-spacing-24--left {
-  margin-left: var(--jkl-spacing-24);
-}
-.jkl-spacing-24--right {
-  margin-right: var(--jkl-spacing-24);
-}
-
-.jkl-spacing-32--all {
-  margin: var(--jkl-spacing-32);
-}
-.jkl-spacing-32--top {
-  margin-top: var(--jkl-spacing-32);
-}
-.jkl-spacing-32--bottom {
-  margin-bottom: var(--jkl-spacing-32);
-}
-.jkl-spacing-32--left {
-  margin-left: var(--jkl-spacing-32);
-}
-.jkl-spacing-32--right {
-  margin-right: var(--jkl-spacing-32);
-}
-
-.jkl-spacing-40--all {
-  margin: var(--jkl-spacing-40);
-}
-.jkl-spacing-40--top {
-  margin-top: var(--jkl-spacing-40);
-}
-.jkl-spacing-40--bottom {
-  margin-bottom: var(--jkl-spacing-40);
-}
-.jkl-spacing-40--left {
-  margin-left: var(--jkl-spacing-40);
-}
-.jkl-spacing-40--right {
-  margin-right: var(--jkl-spacing-40);
-}
-
-.jkl-spacing-64--all {
-  margin: var(--jkl-spacing-64);
-}
-.jkl-spacing-64--top {
-  margin-top: var(--jkl-spacing-64);
-}
-.jkl-spacing-64--bottom {
-  margin-bottom: var(--jkl-spacing-64);
-}
-.jkl-spacing-64--left {
-  margin-left: var(--jkl-spacing-64);
-}
-.jkl-spacing-64--right {
-  margin-right: var(--jkl-spacing-64);
-}
-
-.jkl-spacing-104--all {
-  margin: var(--jkl-spacing-104);
-}
-.jkl-spacing-104--top {
-  margin-top: var(--jkl-spacing-104);
-}
-.jkl-spacing-104--bottom {
-  margin-bottom: var(--jkl-spacing-104);
-}
-.jkl-spacing-104--left {
-  margin-left: var(--jkl-spacing-104);
-}
-.jkl-spacing-104--right {
-  margin-right: var(--jkl-spacing-104);
-}
-
-.jkl-spacing-168--all {
-  margin: var(--jkl-spacing-168);
-}
-.jkl-spacing-168--top {
-  margin-top: var(--jkl-spacing-168);
-}
-.jkl-spacing-168--bottom {
-  margin-bottom: var(--jkl-spacing-168);
-}
-.jkl-spacing-168--left {
-  margin-left: var(--jkl-spacing-168);
-}
-.jkl-spacing-168--right {
-  margin-right: var(--jkl-spacing-168);
-}
-
-.jkl-spacing-16-24--all {
-  margin: var(--jkl-spacing-16-24);
-}
-.jkl-spacing-16-24--top {
-  margin-top: var(--jkl-spacing-16-24);
-}
-.jkl-spacing-16-24--bottom {
-  margin-bottom: var(--jkl-spacing-16-24);
-}
-.jkl-spacing-16-24--left {
-  margin-left: var(--jkl-spacing-16-24);
-}
-.jkl-spacing-16-24--right {
-  margin-right: var(--jkl-spacing-16-24);
-}
-
-.jkl-spacing-24-40--all {
-  margin: var(--jkl-spacing-24-40);
-}
-.jkl-spacing-24-40--top {
-  margin-top: var(--jkl-spacing-24-40);
-}
-.jkl-spacing-24-40--bottom {
-  margin-bottom: var(--jkl-spacing-24-40);
-}
-.jkl-spacing-24-40--left {
-  margin-left: var(--jkl-spacing-24-40);
-}
-.jkl-spacing-24-40--right {
-  margin-right: var(--jkl-spacing-24-40);
-}
-
-.jkl-spacing-24-32--all {
-  margin: var(--jkl-spacing-24-32);
-}
-.jkl-spacing-24-32--top {
-  margin-top: var(--jkl-spacing-24-32);
-}
-.jkl-spacing-24-32--bottom {
-  margin-bottom: var(--jkl-spacing-24-32);
-}
-.jkl-spacing-24-32--left {
-  margin-left: var(--jkl-spacing-24-32);
-}
-.jkl-spacing-24-32--right {
-  margin-right: var(--jkl-spacing-24-32);
-}
-
-.jkl-spacing-32-40--all {
-  margin: var(--jkl-spacing-32-40);
-}
-.jkl-spacing-32-40--top {
-  margin-top: var(--jkl-spacing-32-40);
-}
-.jkl-spacing-32-40--bottom {
-  margin-bottom: var(--jkl-spacing-32-40);
-}
-.jkl-spacing-32-40--left {
-  margin-left: var(--jkl-spacing-32-40);
-}
-.jkl-spacing-32-40--right {
-  margin-right: var(--jkl-spacing-32-40);
-}
-
-.jkl-spacing-40-64--all {
-  margin: var(--jkl-spacing-40-64);
-}
-.jkl-spacing-40-64--top {
-  margin-top: var(--jkl-spacing-40-64);
-}
-.jkl-spacing-40-64--bottom {
-  margin-bottom: var(--jkl-spacing-40-64);
-}
-.jkl-spacing-40-64--left {
-  margin-left: var(--jkl-spacing-40-64);
-}
-.jkl-spacing-40-64--right {
-  margin-right: var(--jkl-spacing-40-64);
-}
-
-.jkl-spacing-64-104--all {
-  margin: var(--jkl-spacing-64-104);
-}
-.jkl-spacing-64-104--top {
-  margin-top: var(--jkl-spacing-64-104);
-}
-.jkl-spacing-64-104--bottom {
-  margin-bottom: var(--jkl-spacing-64-104);
-}
-.jkl-spacing-64-104--left {
-  margin-left: var(--jkl-spacing-64-104);
-}
-.jkl-spacing-64-104--right {
-  margin-right: var(--jkl-spacing-64-104);
-}
-
-.jkl-spacing-104-168--all {
-  margin: var(--jkl-spacing-104-168);
-}
-.jkl-spacing-104-168--top {
-  margin-top: var(--jkl-spacing-104-168);
-}
-.jkl-spacing-104-168--bottom {
-  margin-bottom: var(--jkl-spacing-104-168);
-}
-.jkl-spacing-104-168--left {
-  margin-left: var(--jkl-spacing-104-168);
-}
-.jkl-spacing-104-168--right {
-  margin-right: var(--jkl-spacing-104-168);
-}
-
-.jkl-spacing-16-16-24--all {
-  margin: var(--jkl-spacing-16-16-24);
-}
-.jkl-spacing-16-16-24--top {
-  margin-top: var(--jkl-spacing-16-16-24);
-}
-.jkl-spacing-16-16-24--bottom {
-  margin-bottom: var(--jkl-spacing-16-16-24);
-}
-.jkl-spacing-16-16-24--left {
-  margin-left: var(--jkl-spacing-16-16-24);
-}
-.jkl-spacing-16-16-24--right {
-  margin-right: var(--jkl-spacing-16-16-24);
-}
-
-.jkl-spacing-16-24-32--all {
-  margin: var(--jkl-spacing-16-24-32);
-}
-.jkl-spacing-16-24-32--top {
-  margin-top: var(--jkl-spacing-16-24-32);
-}
-.jkl-spacing-16-24-32--bottom {
-  margin-bottom: var(--jkl-spacing-16-24-32);
-}
-.jkl-spacing-16-24-32--left {
-  margin-left: var(--jkl-spacing-16-24-32);
-}
-.jkl-spacing-16-24-32--right {
-  margin-right: var(--jkl-spacing-16-24-32);
-}
-
-.jkl-spacing-16-24-40--all {
-  margin: var(--jkl-spacing-16-24-40);
-}
-.jkl-spacing-16-24-40--top {
-  margin-top: var(--jkl-spacing-16-24-40);
-}
-.jkl-spacing-16-24-40--bottom {
-  margin-bottom: var(--jkl-spacing-16-24-40);
-}
-.jkl-spacing-16-24-40--left {
-  margin-left: var(--jkl-spacing-16-24-40);
-}
-.jkl-spacing-16-24-40--right {
-  margin-right: var(--jkl-spacing-16-24-40);
-}
-
-.jkl-spacing-24-24-32--all {
-  margin: var(--jkl-spacing-24-24-32);
-}
-.jkl-spacing-24-24-32--top {
-  margin-top: var(--jkl-spacing-24-24-32);
-}
-.jkl-spacing-24-24-32--bottom {
-  margin-bottom: var(--jkl-spacing-24-24-32);
-}
-.jkl-spacing-24-24-32--left {
-  margin-left: var(--jkl-spacing-24-24-32);
-}
-.jkl-spacing-24-24-32--right {
-  margin-right: var(--jkl-spacing-24-24-32);
-}
-
-.jkl-spacing-24-24-40--all {
-  margin: var(--jkl-spacing-24-24-40);
-}
-.jkl-spacing-24-24-40--top {
-  margin-top: var(--jkl-spacing-24-24-40);
-}
-.jkl-spacing-24-24-40--bottom {
-  margin-bottom: var(--jkl-spacing-24-24-40);
-}
-.jkl-spacing-24-24-40--left {
-  margin-left: var(--jkl-spacing-24-24-40);
-}
-.jkl-spacing-24-24-40--right {
-  margin-right: var(--jkl-spacing-24-24-40);
-}
-
-.jkl-spacing-24-32-40--all {
-  margin: var(--jkl-spacing-24-32-40);
-}
-.jkl-spacing-24-32-40--top {
-  margin-top: var(--jkl-spacing-24-32-40);
-}
-.jkl-spacing-24-32-40--bottom {
-  margin-bottom: var(--jkl-spacing-24-32-40);
-}
-.jkl-spacing-24-32-40--left {
-  margin-left: var(--jkl-spacing-24-32-40);
-}
-.jkl-spacing-24-32-40--right {
-  margin-right: var(--jkl-spacing-24-32-40);
-}
-
-.jkl-spacing-32-32-40--all {
-  margin: var(--jkl-spacing-32-32-40);
-}
-.jkl-spacing-32-32-40--top {
-  margin-top: var(--jkl-spacing-32-32-40);
-}
-.jkl-spacing-32-32-40--bottom {
-  margin-bottom: var(--jkl-spacing-32-32-40);
-}
-.jkl-spacing-32-32-40--left {
-  margin-left: var(--jkl-spacing-32-32-40);
-}
-.jkl-spacing-32-32-40--right {
-  margin-right: var(--jkl-spacing-32-32-40);
-}
-
-.jkl-spacing-32-40-64--all {
-  margin: var(--jkl-spacing-32-40-64);
-}
-.jkl-spacing-32-40-64--top {
-  margin-top: var(--jkl-spacing-32-40-64);
-}
-.jkl-spacing-32-40-64--bottom {
-  margin-bottom: var(--jkl-spacing-32-40-64);
-}
-.jkl-spacing-32-40-64--left {
-  margin-left: var(--jkl-spacing-32-40-64);
-}
-.jkl-spacing-32-40-64--right {
-  margin-right: var(--jkl-spacing-32-40-64);
-}
-
-.jkl-spacing-40-40-64--all {
-  margin: var(--jkl-spacing-40-40-64);
-}
-.jkl-spacing-40-40-64--top {
-  margin-top: var(--jkl-spacing-40-40-64);
-}
-.jkl-spacing-40-40-64--bottom {
-  margin-bottom: var(--jkl-spacing-40-40-64);
-}
-.jkl-spacing-40-40-64--left {
-  margin-left: var(--jkl-spacing-40-40-64);
-}
-.jkl-spacing-40-40-64--right {
-  margin-right: var(--jkl-spacing-40-40-64);
-}
-
-.jkl-spacing-40-64-104--all {
-  margin: var(--jkl-spacing-40-64-104);
-}
-.jkl-spacing-40-64-104--top {
-  margin-top: var(--jkl-spacing-40-64-104);
-}
-.jkl-spacing-40-64-104--bottom {
-  margin-bottom: var(--jkl-spacing-40-64-104);
-}
-.jkl-spacing-40-64-104--left {
-  margin-left: var(--jkl-spacing-40-64-104);
-}
-.jkl-spacing-40-64-104--right {
-  margin-right: var(--jkl-spacing-40-64-104);
-}
-
-.jkl-spacing-64-64-104--all {
-  margin: var(--jkl-spacing-64-64-104);
-}
-.jkl-spacing-64-64-104--top {
-  margin-top: var(--jkl-spacing-64-64-104);
-}
-.jkl-spacing-64-64-104--bottom {
-  margin-bottom: var(--jkl-spacing-64-64-104);
-}
-.jkl-spacing-64-64-104--left {
-  margin-left: var(--jkl-spacing-64-64-104);
-}
-.jkl-spacing-64-64-104--right {
-  margin-right: var(--jkl-spacing-64-64-104);
-}
-
-.jkl-spacing-64-104-168--all {
-  margin: var(--jkl-spacing-64-104-168);
-}
-.jkl-spacing-64-104-168--top {
-  margin-top: var(--jkl-spacing-64-104-168);
-}
-.jkl-spacing-64-104-168--bottom {
-  margin-bottom: var(--jkl-spacing-64-104-168);
-}
-.jkl-spacing-64-104-168--left {
-  margin-left: var(--jkl-spacing-64-104-168);
-}
-.jkl-spacing-64-104-168--right {
-  margin-right: var(--jkl-spacing-64-104-168);
-}
-
-.jkl-spacing-104-104-168--all {
-  margin: var(--jkl-spacing-104-104-168);
-}
-.jkl-spacing-104-104-168--top {
-  margin-top: var(--jkl-spacing-104-104-168);
-}
-.jkl-spacing-104-104-168--bottom {
-  margin-bottom: var(--jkl-spacing-104-104-168);
-}
-.jkl-spacing-104-104-168--left {
-  margin-left: var(--jkl-spacing-104-104-168);
-}
-.jkl-spacing-104-104-168--right {
-  margin-right: var(--jkl-spacing-104-104-168);
-}
-
-.jkl-sr-only {
-  border: 0 !important;
-  clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
-  clip-path: inset(50%) !important; /* 2 */
-  height: 1px !important;
-  margin: -1px !important;
-  overflow: hidden !important;
-  padding: 0 !important;
-  position: absolute !important;
-  width: 1px !important;
-  white-space: nowrap !important; /* 3 */
-}
-.jkl-sr-only--focusable:focus, .jkl-sr-only--focusable:active {
-  clip: auto !important;
-  clip-path: none !important;
-  height: auto !important;
-  margin: auto !important;
-  overflow: visible !important;
-  width: auto !important;
-  white-space: normal !important;
-}
-
-/* Used by menu to figure out if it should render a compact or comfortable view */
-:root,
-[data-layout-density=comfortable],
-[data-density=comfortable] {
-  --jkl-density: "comfortable";
-}
-
-[data-layout-density=compact],
-[data-density=compact] {
-  --jkl-density: "compact";
-}
-
-@media screen and (prefers-color-scheme: light) {
-  :root {
-    --jkl-background-color: #f9f9f9;
-    --jkl-color: #1b1917;
-    --jkl-error: #f6b3b3;
-    --jkl-info: #d3d3f6;
-    --jkl-warning: #efdd9e;
-    --jkl-success: #acd3b5;
+  .jkl-spacing-2--bottom {
+    margin-bottom: var(--jkl-spacing-2);
   }
-}
-[data-theme=light] {
-  --jkl-background-color: #f9f9f9;
-  --jkl-color: #1b1917;
-  --jkl-error: #f6b3b3;
-  --jkl-info: #d3d3f6;
-  --jkl-warning: #efdd9e;
-  --jkl-success: #acd3b5;
-}
-
-@media screen and (prefers-color-scheme: dark) {
-  :root {
-    --jkl-background-color: #1b1917;
-    --jkl-color: #f9f9f9;
-    --jkl-error: #de9e9e;
-    --jkl-info: #a9a9ca;
-    --jkl-warning: #decc8d;
-    --jkl-success: #94b79b;
+  .jkl-spacing-2--left {
+    margin-left: var(--jkl-spacing-2);
   }
-}
-[data-theme=dark] {
-  --jkl-background-color: #1b1917;
-  --jkl-color: #f9f9f9;
-  --jkl-error: #de9e9e;
-  --jkl-info: #a9a9ca;
-  --jkl-warning: #decc8d;
-  --jkl-success: #94b79b;
-}
-
-:root {
-  --jkl-title-font-size: 2.25rem;
-  --jkl-title-line-height: 2.75rem;
-  --jkl-title-font-weight: 400;
-  --jkl-title---jkl-icon-weight: 300;
-  --jkl-title---jkl-icon-size: 1.2em;
-  --jkl-title-small-font-size: 1.875rem;
-  --jkl-title-small-line-height: 2.25rem;
-  --jkl-title-small-font-weight: 400;
-  --jkl-title-small---jkl-icon-weight: 300;
-  --jkl-title-small---jkl-icon-size: 1.2em;
-  --jkl-heading-1-font-size: 1.625rem;
-  --jkl-heading-1-line-height: 2rem;
-  --jkl-heading-1-font-weight: 400;
-  --jkl-heading-1---jkl-icon-weight: 300;
-  --jkl-heading-1---jkl-icon-size: 1.2em;
-  --jkl-heading-2-font-size: 1.4375rem;
-  --jkl-heading-2-line-height: 2rem;
-  --jkl-heading-2-font-weight: 400;
-  --jkl-heading-2---jkl-icon-weight: 300;
-  --jkl-heading-2---jkl-icon-size: 1.2em;
-  --jkl-heading-3-font-size: 1.3125rem;
-  --jkl-heading-3-line-height: 1.75rem;
-  --jkl-heading-3-font-weight: 700;
-  --jkl-heading-3---jkl-icon-weight: 400;
-  --jkl-heading-3---jkl-icon-size: 1.2em;
-  --jkl-heading-4-font-size: 1.125rem;
-  --jkl-heading-4-line-height: 1.5rem;
-  --jkl-heading-4-font-weight: 700;
-  --jkl-heading-4---jkl-icon-weight: 400;
-  --jkl-heading-5-font-size: 1rem;
-  --jkl-heading-5-line-height: 1.5rem;
-  --jkl-heading-5-font-weight: 700;
-  --jkl-heading-5---jkl-icon-weight: 400;
-  --jkl-heading-5---jkl-icon-size: 1.25rem;
-  --jkl-heading-5---jkl-icon-opsz: 20;
-  --jkl-body-font-size: 1.125rem;
-  --jkl-body-line-height: 1.75rem;
-  --jkl-body-font-weight: 400;
-  --jkl-body---jkl-icon-weight: 300;
-  --jkl-small-font-size: 1rem;
-  --jkl-small-line-height: 1.5rem;
-  --jkl-small-font-weight: 400;
-  --jkl-small---jkl-icon-weight: 300;
-  --jkl-small---jkl-icon-size: 1.25rem;
-  --jkl-small---jkl-icon-opsz: 20;
-}
-@media (min-width: 680px) {
-  :root {
-    --jkl-title-font-size: 3.5rem;
-    --jkl-title-line-height: 4rem;
-    --jkl-title-font-weight: 400;
-    --jkl-title---jkl-icon-weight: 300;
-    --jkl-title---jkl-icon-size: 1.2em;
-    --jkl-title-small-font-size: 2.75rem;
-    --jkl-title-small-line-height: 3.25rem;
-    --jkl-title-small-font-weight: 400;
-    --jkl-title-small---jkl-icon-weight: 300;
-    --jkl-title-small---jkl-icon-size: 1.2em;
-    --jkl-heading-1-font-size: 2.25rem;
-    --jkl-heading-1-line-height: 2.75rem;
-    --jkl-heading-1-font-weight: 400;
-    --jkl-heading-1---jkl-icon-weight: 300;
-    --jkl-heading-1---jkl-icon-size: 1.2em;
-    --jkl-heading-2-font-size: 1.75rem;
-    --jkl-heading-2-line-height: 2.5rem;
-    --jkl-heading-2-font-weight: 400;
-    --jkl-heading-2---jkl-icon-weight: 300;
-    --jkl-heading-2---jkl-icon-size: 1.2em;
-    --jkl-heading-3-font-size: 1.5625rem;
-    --jkl-heading-3-line-height: 2rem;
-    --jkl-heading-3-font-weight: 700;
-    --jkl-heading-3---jkl-icon-weight: 400;
-    --jkl-heading-3---jkl-icon-size: 1.2em;
-    --jkl-heading-4-font-size: 1.3125rem;
-    --jkl-heading-4-line-height: 1.75rem;
-    --jkl-heading-4-font-weight: 700;
-    --jkl-heading-4---jkl-icon-weight: 400;
-    --jkl-heading-5-font-size: 1rem;
-    --jkl-heading-5-line-height: 1.5rem;
-    --jkl-heading-5-font-weight: 700;
-    --jkl-heading-5---jkl-icon-weight: 400;
-    --jkl-heading-5---jkl-icon-size: 1.25rem;
-    --jkl-heading-5---jkl-icon-opsz: 20;
-    --jkl-body-font-size: 1.25rem;
-    --jkl-body-line-height: 2rem;
-    --jkl-body-font-weight: 400;
-    --jkl-body---jkl-icon-weight: 300;
-    --jkl-small-font-size: 1rem;
-    --jkl-small-line-height: 1.5rem;
-    --jkl-small-font-weight: 400;
-    --jkl-small---jkl-icon-weight: 300;
-    --jkl-small---jkl-icon-size: 1.25rem;
-    --jkl-small---jkl-icon-opsz: 20;
+  .jkl-spacing-2--right {
+    margin-right: var(--jkl-spacing-2);
   }
-}
-
-.jkl {
-  font-family: "Fremtind Grotesk", "Adjusted Arial Fallback", Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  background-color: var(--jkl-background-color);
-  color: var(--jkl-color);
-}
-.jkl strong {
-  --jkl-icon-weight: 400;
-  font-weight: 700;
-}
-
-@media screen and (prefers-reduced-motion: reduce) {
-  *,
-  *::after,
-  *::before {
-    animation-duration: 0ms !important;
-    animation-delay: 0ms !important;
-    transition: none !important;
+  .jkl-spacing-4--all {
+    margin: var(--jkl-spacing-4);
+  }
+  .jkl-spacing-4--top {
+    margin-top: var(--jkl-spacing-4);
+  }
+  .jkl-spacing-4--bottom {
+    margin-bottom: var(--jkl-spacing-4);
+  }
+  .jkl-spacing-4--left {
+    margin-left: var(--jkl-spacing-4);
+  }
+  .jkl-spacing-4--right {
+    margin-right: var(--jkl-spacing-4);
+  }
+  .jkl-spacing-8--all {
+    margin: var(--jkl-spacing-8);
+  }
+  .jkl-spacing-8--top {
+    margin-top: var(--jkl-spacing-8);
+  }
+  .jkl-spacing-8--bottom {
+    margin-bottom: var(--jkl-spacing-8);
+  }
+  .jkl-spacing-8--left {
+    margin-left: var(--jkl-spacing-8);
+  }
+  .jkl-spacing-8--right {
+    margin-right: var(--jkl-spacing-8);
+  }
+  .jkl-spacing-12--all {
+    margin: var(--jkl-spacing-12);
+  }
+  .jkl-spacing-12--top {
+    margin-top: var(--jkl-spacing-12);
+  }
+  .jkl-spacing-12--bottom {
+    margin-bottom: var(--jkl-spacing-12);
+  }
+  .jkl-spacing-12--left {
+    margin-left: var(--jkl-spacing-12);
+  }
+  .jkl-spacing-12--right {
+    margin-right: var(--jkl-spacing-12);
+  }
+  .jkl-spacing-16--all {
+    margin: var(--jkl-spacing-16);
+  }
+  .jkl-spacing-16--top {
+    margin-top: var(--jkl-spacing-16);
+  }
+  .jkl-spacing-16--bottom {
+    margin-bottom: var(--jkl-spacing-16);
+  }
+  .jkl-spacing-16--left {
+    margin-left: var(--jkl-spacing-16);
+  }
+  .jkl-spacing-16--right {
+    margin-right: var(--jkl-spacing-16);
+  }
+  .jkl-spacing-24--all {
+    margin: var(--jkl-spacing-24);
+  }
+  .jkl-spacing-24--top {
+    margin-top: var(--jkl-spacing-24);
+  }
+  .jkl-spacing-24--bottom {
+    margin-bottom: var(--jkl-spacing-24);
+  }
+  .jkl-spacing-24--left {
+    margin-left: var(--jkl-spacing-24);
+  }
+  .jkl-spacing-24--right {
+    margin-right: var(--jkl-spacing-24);
+  }
+  .jkl-spacing-32--all {
+    margin: var(--jkl-spacing-32);
+  }
+  .jkl-spacing-32--top {
+    margin-top: var(--jkl-spacing-32);
+  }
+  .jkl-spacing-32--bottom {
+    margin-bottom: var(--jkl-spacing-32);
+  }
+  .jkl-spacing-32--left {
+    margin-left: var(--jkl-spacing-32);
+  }
+  .jkl-spacing-32--right {
+    margin-right: var(--jkl-spacing-32);
+  }
+  .jkl-spacing-40--all {
+    margin: var(--jkl-spacing-40);
+  }
+  .jkl-spacing-40--top {
+    margin-top: var(--jkl-spacing-40);
+  }
+  .jkl-spacing-40--bottom {
+    margin-bottom: var(--jkl-spacing-40);
+  }
+  .jkl-spacing-40--left {
+    margin-left: var(--jkl-spacing-40);
+  }
+  .jkl-spacing-40--right {
+    margin-right: var(--jkl-spacing-40);
+  }
+  .jkl-spacing-64--all {
+    margin: var(--jkl-spacing-64);
+  }
+  .jkl-spacing-64--top {
+    margin-top: var(--jkl-spacing-64);
+  }
+  .jkl-spacing-64--bottom {
+    margin-bottom: var(--jkl-spacing-64);
+  }
+  .jkl-spacing-64--left {
+    margin-left: var(--jkl-spacing-64);
+  }
+  .jkl-spacing-64--right {
+    margin-right: var(--jkl-spacing-64);
+  }
+  .jkl-spacing-104--all {
+    margin: var(--jkl-spacing-104);
+  }
+  .jkl-spacing-104--top {
+    margin-top: var(--jkl-spacing-104);
+  }
+  .jkl-spacing-104--bottom {
+    margin-bottom: var(--jkl-spacing-104);
+  }
+  .jkl-spacing-104--left {
+    margin-left: var(--jkl-spacing-104);
+  }
+  .jkl-spacing-104--right {
+    margin-right: var(--jkl-spacing-104);
+  }
+  .jkl-spacing-168--all {
+    margin: var(--jkl-spacing-168);
+  }
+  .jkl-spacing-168--top {
+    margin-top: var(--jkl-spacing-168);
+  }
+  .jkl-spacing-168--bottom {
+    margin-bottom: var(--jkl-spacing-168);
+  }
+  .jkl-spacing-168--left {
+    margin-left: var(--jkl-spacing-168);
+  }
+  .jkl-spacing-168--right {
+    margin-right: var(--jkl-spacing-168);
+  }
+  .jkl-spacing-16-24--all {
+    margin: var(--jkl-spacing-16-24);
+  }
+  .jkl-spacing-16-24--top {
+    margin-top: var(--jkl-spacing-16-24);
+  }
+  .jkl-spacing-16-24--bottom {
+    margin-bottom: var(--jkl-spacing-16-24);
+  }
+  .jkl-spacing-16-24--left {
+    margin-left: var(--jkl-spacing-16-24);
+  }
+  .jkl-spacing-16-24--right {
+    margin-right: var(--jkl-spacing-16-24);
+  }
+  .jkl-spacing-24-40--all {
+    margin: var(--jkl-spacing-24-40);
+  }
+  .jkl-spacing-24-40--top {
+    margin-top: var(--jkl-spacing-24-40);
+  }
+  .jkl-spacing-24-40--bottom {
+    margin-bottom: var(--jkl-spacing-24-40);
+  }
+  .jkl-spacing-24-40--left {
+    margin-left: var(--jkl-spacing-24-40);
+  }
+  .jkl-spacing-24-40--right {
+    margin-right: var(--jkl-spacing-24-40);
+  }
+  .jkl-spacing-24-32--all {
+    margin: var(--jkl-spacing-24-32);
+  }
+  .jkl-spacing-24-32--top {
+    margin-top: var(--jkl-spacing-24-32);
+  }
+  .jkl-spacing-24-32--bottom {
+    margin-bottom: var(--jkl-spacing-24-32);
+  }
+  .jkl-spacing-24-32--left {
+    margin-left: var(--jkl-spacing-24-32);
+  }
+  .jkl-spacing-24-32--right {
+    margin-right: var(--jkl-spacing-24-32);
+  }
+  .jkl-spacing-32-40--all {
+    margin: var(--jkl-spacing-32-40);
+  }
+  .jkl-spacing-32-40--top {
+    margin-top: var(--jkl-spacing-32-40);
+  }
+  .jkl-spacing-32-40--bottom {
+    margin-bottom: var(--jkl-spacing-32-40);
+  }
+  .jkl-spacing-32-40--left {
+    margin-left: var(--jkl-spacing-32-40);
+  }
+  .jkl-spacing-32-40--right {
+    margin-right: var(--jkl-spacing-32-40);
+  }
+  .jkl-spacing-40-64--all {
+    margin: var(--jkl-spacing-40-64);
+  }
+  .jkl-spacing-40-64--top {
+    margin-top: var(--jkl-spacing-40-64);
+  }
+  .jkl-spacing-40-64--bottom {
+    margin-bottom: var(--jkl-spacing-40-64);
+  }
+  .jkl-spacing-40-64--left {
+    margin-left: var(--jkl-spacing-40-64);
+  }
+  .jkl-spacing-40-64--right {
+    margin-right: var(--jkl-spacing-40-64);
+  }
+  .jkl-spacing-64-104--all {
+    margin: var(--jkl-spacing-64-104);
+  }
+  .jkl-spacing-64-104--top {
+    margin-top: var(--jkl-spacing-64-104);
+  }
+  .jkl-spacing-64-104--bottom {
+    margin-bottom: var(--jkl-spacing-64-104);
+  }
+  .jkl-spacing-64-104--left {
+    margin-left: var(--jkl-spacing-64-104);
+  }
+  .jkl-spacing-64-104--right {
+    margin-right: var(--jkl-spacing-64-104);
+  }
+  .jkl-spacing-104-168--all {
+    margin: var(--jkl-spacing-104-168);
+  }
+  .jkl-spacing-104-168--top {
+    margin-top: var(--jkl-spacing-104-168);
+  }
+  .jkl-spacing-104-168--bottom {
+    margin-bottom: var(--jkl-spacing-104-168);
+  }
+  .jkl-spacing-104-168--left {
+    margin-left: var(--jkl-spacing-104-168);
+  }
+  .jkl-spacing-104-168--right {
+    margin-right: var(--jkl-spacing-104-168);
+  }
+  .jkl-spacing-16-16-24--all {
+    margin: var(--jkl-spacing-16-16-24);
+  }
+  .jkl-spacing-16-16-24--top {
+    margin-top: var(--jkl-spacing-16-16-24);
+  }
+  .jkl-spacing-16-16-24--bottom {
+    margin-bottom: var(--jkl-spacing-16-16-24);
+  }
+  .jkl-spacing-16-16-24--left {
+    margin-left: var(--jkl-spacing-16-16-24);
+  }
+  .jkl-spacing-16-16-24--right {
+    margin-right: var(--jkl-spacing-16-16-24);
+  }
+  .jkl-spacing-16-24-32--all {
+    margin: var(--jkl-spacing-16-24-32);
+  }
+  .jkl-spacing-16-24-32--top {
+    margin-top: var(--jkl-spacing-16-24-32);
+  }
+  .jkl-spacing-16-24-32--bottom {
+    margin-bottom: var(--jkl-spacing-16-24-32);
+  }
+  .jkl-spacing-16-24-32--left {
+    margin-left: var(--jkl-spacing-16-24-32);
+  }
+  .jkl-spacing-16-24-32--right {
+    margin-right: var(--jkl-spacing-16-24-32);
+  }
+  .jkl-spacing-16-24-40--all {
+    margin: var(--jkl-spacing-16-24-40);
+  }
+  .jkl-spacing-16-24-40--top {
+    margin-top: var(--jkl-spacing-16-24-40);
+  }
+  .jkl-spacing-16-24-40--bottom {
+    margin-bottom: var(--jkl-spacing-16-24-40);
+  }
+  .jkl-spacing-16-24-40--left {
+    margin-left: var(--jkl-spacing-16-24-40);
+  }
+  .jkl-spacing-16-24-40--right {
+    margin-right: var(--jkl-spacing-16-24-40);
+  }
+  .jkl-spacing-24-24-32--all {
+    margin: var(--jkl-spacing-24-24-32);
+  }
+  .jkl-spacing-24-24-32--top {
+    margin-top: var(--jkl-spacing-24-24-32);
+  }
+  .jkl-spacing-24-24-32--bottom {
+    margin-bottom: var(--jkl-spacing-24-24-32);
+  }
+  .jkl-spacing-24-24-32--left {
+    margin-left: var(--jkl-spacing-24-24-32);
+  }
+  .jkl-spacing-24-24-32--right {
+    margin-right: var(--jkl-spacing-24-24-32);
+  }
+  .jkl-spacing-24-24-40--all {
+    margin: var(--jkl-spacing-24-24-40);
+  }
+  .jkl-spacing-24-24-40--top {
+    margin-top: var(--jkl-spacing-24-24-40);
+  }
+  .jkl-spacing-24-24-40--bottom {
+    margin-bottom: var(--jkl-spacing-24-24-40);
+  }
+  .jkl-spacing-24-24-40--left {
+    margin-left: var(--jkl-spacing-24-24-40);
+  }
+  .jkl-spacing-24-24-40--right {
+    margin-right: var(--jkl-spacing-24-24-40);
+  }
+  .jkl-spacing-24-32-40--all {
+    margin: var(--jkl-spacing-24-32-40);
+  }
+  .jkl-spacing-24-32-40--top {
+    margin-top: var(--jkl-spacing-24-32-40);
+  }
+  .jkl-spacing-24-32-40--bottom {
+    margin-bottom: var(--jkl-spacing-24-32-40);
+  }
+  .jkl-spacing-24-32-40--left {
+    margin-left: var(--jkl-spacing-24-32-40);
+  }
+  .jkl-spacing-24-32-40--right {
+    margin-right: var(--jkl-spacing-24-32-40);
+  }
+  .jkl-spacing-32-32-40--all {
+    margin: var(--jkl-spacing-32-32-40);
+  }
+  .jkl-spacing-32-32-40--top {
+    margin-top: var(--jkl-spacing-32-32-40);
+  }
+  .jkl-spacing-32-32-40--bottom {
+    margin-bottom: var(--jkl-spacing-32-32-40);
+  }
+  .jkl-spacing-32-32-40--left {
+    margin-left: var(--jkl-spacing-32-32-40);
+  }
+  .jkl-spacing-32-32-40--right {
+    margin-right: var(--jkl-spacing-32-32-40);
+  }
+  .jkl-spacing-32-40-64--all {
+    margin: var(--jkl-spacing-32-40-64);
+  }
+  .jkl-spacing-32-40-64--top {
+    margin-top: var(--jkl-spacing-32-40-64);
+  }
+  .jkl-spacing-32-40-64--bottom {
+    margin-bottom: var(--jkl-spacing-32-40-64);
+  }
+  .jkl-spacing-32-40-64--left {
+    margin-left: var(--jkl-spacing-32-40-64);
+  }
+  .jkl-spacing-32-40-64--right {
+    margin-right: var(--jkl-spacing-32-40-64);
+  }
+  .jkl-spacing-40-40-64--all {
+    margin: var(--jkl-spacing-40-40-64);
+  }
+  .jkl-spacing-40-40-64--top {
+    margin-top: var(--jkl-spacing-40-40-64);
+  }
+  .jkl-spacing-40-40-64--bottom {
+    margin-bottom: var(--jkl-spacing-40-40-64);
+  }
+  .jkl-spacing-40-40-64--left {
+    margin-left: var(--jkl-spacing-40-40-64);
+  }
+  .jkl-spacing-40-40-64--right {
+    margin-right: var(--jkl-spacing-40-40-64);
+  }
+  .jkl-spacing-40-64-104--all {
+    margin: var(--jkl-spacing-40-64-104);
+  }
+  .jkl-spacing-40-64-104--top {
+    margin-top: var(--jkl-spacing-40-64-104);
+  }
+  .jkl-spacing-40-64-104--bottom {
+    margin-bottom: var(--jkl-spacing-40-64-104);
+  }
+  .jkl-spacing-40-64-104--left {
+    margin-left: var(--jkl-spacing-40-64-104);
+  }
+  .jkl-spacing-40-64-104--right {
+    margin-right: var(--jkl-spacing-40-64-104);
+  }
+  .jkl-spacing-64-64-104--all {
+    margin: var(--jkl-spacing-64-64-104);
+  }
+  .jkl-spacing-64-64-104--top {
+    margin-top: var(--jkl-spacing-64-64-104);
+  }
+  .jkl-spacing-64-64-104--bottom {
+    margin-bottom: var(--jkl-spacing-64-64-104);
+  }
+  .jkl-spacing-64-64-104--left {
+    margin-left: var(--jkl-spacing-64-64-104);
+  }
+  .jkl-spacing-64-64-104--right {
+    margin-right: var(--jkl-spacing-64-64-104);
+  }
+  .jkl-spacing-64-104-168--all {
+    margin: var(--jkl-spacing-64-104-168);
+  }
+  .jkl-spacing-64-104-168--top {
+    margin-top: var(--jkl-spacing-64-104-168);
+  }
+  .jkl-spacing-64-104-168--bottom {
+    margin-bottom: var(--jkl-spacing-64-104-168);
+  }
+  .jkl-spacing-64-104-168--left {
+    margin-left: var(--jkl-spacing-64-104-168);
+  }
+  .jkl-spacing-64-104-168--right {
+    margin-right: var(--jkl-spacing-64-104-168);
+  }
+  .jkl-spacing-104-104-168--all {
+    margin: var(--jkl-spacing-104-104-168);
+  }
+  .jkl-spacing-104-104-168--top {
+    margin-top: var(--jkl-spacing-104-104-168);
+  }
+  .jkl-spacing-104-104-168--bottom {
+    margin-bottom: var(--jkl-spacing-104-104-168);
+  }
+  .jkl-spacing-104-104-168--left {
+    margin-left: var(--jkl-spacing-104-104-168);
+  }
+  .jkl-spacing-104-104-168--right {
+    margin-right: var(--jkl-spacing-104-104-168);
   }
 }