/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-outline-style: solid;
    }
  }
}

@layer pretzel-assets {
  @font-face {
    font-display: swap;
    font-family: Storebrand Display;
    font-stretch: 100%;
    font-style: normal;
    font-weight: 400 700;
    src: url("/bank/lan/mine-boliger/assets/StorebrandDisplay-CA9Xw8Sr.woff2") format("woff2");
  }

  @font-face {
    font-display: swap;
    font-family: Storebrand Display;
    font-stretch: 100%;
    font-style: italic;
    font-weight: 400 700;
    src: url("/bank/lan/mine-boliger/assets/StorebrandDisplay-Italic-CqCcSe91.woff2") format("woff2");
  }

  @font-face {
    font-display: swap;
    font-family: Storebrand Text;
    font-stretch: 100%;
    font-style: normal;
    font-weight: 400 700;
    src: url("/bank/lan/mine-boliger/assets/StorebrandText-CYEBqy8k.woff2") format("woff2");
  }

  @font-face {
    font-display: swap;
    font-family: Storebrand Text;
    font-stretch: 100%;
    font-style: italic;
    font-weight: 400 700;
    src: url("/bank/lan/mine-boliger/assets/StorebrandText-Italic-D-ROECLA.woff2") format("woff2");
  }

  @font-face {
    font-family: Phosphor;
    src: url("/bank/lan/mine-boliger/assets/Phosphor-DcZUnBsc.eot") format("eot"), url("/bank/lan/mine-boliger/assets/Phosphor-hL7c4zMx.woff") format("woff"), url("/bank/lan/mine-boliger/assets/Phosphor-Cm8Q6BbE.woff2") format("woff2"), url("/bank/lan/mine-boliger/assets/Phosphor-DwYFQeIz.ttf") format("truetype");
    text-rendering: optimizelegibility;
  }

  body[data-phosphor-icons="true"] i, body [data-phosphor-icons="true"] i, body i[data-phosphor-icons="true"] {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-size: 1rem;
    font-style: normal;
    font-weight: normal;
    line-height: 1rem;
    font-family: Phosphor !important;
  }

  @font-face {
    font-family: Storebrand Symbols;
    src: url("/bank/lan/mine-boliger/assets/StorebrandSymbols-Ddvl1UfG.eot") format("eot"), url("/bank/lan/mine-boliger/assets/StorebrandSymbols-CXUlnB4a.woff") format("woff"), url("/bank/lan/mine-boliger/assets/StorebrandSymbols-CLiWfw3R.woff2") format("woff2"), url("/bank/lan/mine-boliger/assets/StorebrandSymbols-Dzc8t1ve.ttf") format("truetype");
    text-rendering: optimizelegibility;
  }

  i {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 1rem;
    font-style: normal;
    font-weight: normal;
    line-height: 1rem;
    font-family: Storebrand Symbols !important;
  }

  i:empty:not([class*="system-icon"]) {
    background: var(--p-color-icon-error);
    width: 1.5em;
    height: 1.5em;
    display: inline-flex;
  }

  @font-face {
    font-family: System-Icons;
    src: url("/bank/lan/mine-boliger/assets/System-Icons-CFHUVFFa.eot") format("eot"), url("/bank/lan/mine-boliger/assets/System-Icons-CDmQQzZf.woff") format("woff"), url("/bank/lan/mine-boliger/assets/System-Icons-BhhMhGw2.woff2") format("woff2"), url("/bank/lan/mine-boliger/assets/System-Icons-CYcpoQ-s.ttf") format("truetype");
    text-rendering: optimizelegibility;
  }

  i.legacy, body[data-legacy-icons="true"] i {
    font-family: System-Icons !important;
  }

  :root, :host {
    --p-border-xsmall: 1px;
    --p-border-small: 2px;
    --p-border-medium: 3px;
    --p-border-large: 4px;
    --p-border-rem-xsmall: .0625rem;
    --p-border-rem-small: .125rem;
    --p-border-rem-medium: .1875rem;
    --p-border-rem-large: .25rem;
    --p-button-icon-desktop-xl: 2rem;
    --p-button-icon-desktop-lg: 1.5rem;
    --p-button-icon-desktop-md: 1.25rem;
    --p-button-icon-desktop-sm: 1.125rem;
    --p-button-icon-desktop-xsm: 1rem;
    --p-button-icon-mobile-xl: 1.125rem;
    --p-button-icon-mobile-lg: 1.125rem;
    --p-button-icon-mobile-md: 1.125rem;
    --p-button-icon-mobile-sm: 1.125rem;
    --p-button-icon-mobile-xsm: 1rem;
    --p-color-red-100: #fff0f0;
    --p-color-red-200: #ffdfdf;
    --p-color-red-300: #ffb8b8;
    --p-color-red-400: #fc9797;
    --p-color-red-500: #ff6c6c;
    --p-color-red-550: #ff5d5d;
    --p-color-red-600: #b20000;
    --p-color-red-700: #940000;
    --p-color-red-800: #700;
    --p-color-red-pale-800: #492727;
    --p-color-red-900: #560000;
    --p-color-red-1000: #310502;
    --p-color-purple-100: #f7f0ff;
    --p-color-purple-200: #f0deff;
    --p-color-purple-300: #e5ccff;
    --p-color-purple-400: #dbb8ff;
    --p-color-purple-500: #ce99ff;
    --p-color-purple-550: #ba6fff;
    --p-color-purple-600: #730099;
    --p-color-purple-700: #610080;
    --p-color-purple-800: #521264;
    --p-color-purple-pale-800: #472749;
    --p-color-purple-900: #410e44;
    --p-color-purple-1000: #29082b;
    --p-color-orange-100: #fff0eb;
    --p-color-orange-200: #ffe7e0;
    --p-color-orange-300: #ffc4b2;
    --p-color-orange-400: #ffa58f;
    --p-color-orange-500: #ff8468;
    --p-color-orange-600: #943100;
    --p-color-orange-pale-800: #493227;
    --p-color-grey-000: #fff;
    --p-color-grey-100: #f7f3f3;
    --p-color-grey-200: #e9e2e2;
    --p-color-grey-300: #d1c7c7;
    --p-color-grey-400: #b6a5a5;
    --p-color-grey-500: #9a8989;
    --p-color-grey-600: #7f6c6c;
    --p-color-grey-700: #5e5050;
    --p-color-grey-800: #3d3434;
    --p-color-grey-900: #2b2525;
    --p-color-grey-1000: #191515;
    --p-color-grey-cold-000: #fff;
    --p-color-grey-cold-100: #f2f1f4;
    --p-color-grey-cold-200: #e3e0e6;
    --p-color-grey-cold-300: #d1c7c7;
    --p-color-grey-cold-400: #afa5b6;
    --p-color-grey-cold-500: #93869c;
    --p-color-grey-cold-600: #776a81;
    --p-color-grey-cold-700: #584e5f;
    --p-color-grey-cold-800: #39323e;
    --p-color-grey-cold-900: #27222a;
    --p-color-grey-cold-1000: #171519;
    --p-color-logo-red: #da291c;
    --p-color-yellow-100: #fff7e6;
    --p-color-yellow-200: #fff0d1;
    --p-color-yellow-300: #ffe9bd;
    --p-color-yellow-400: #ffdb94;
    --p-color-yellow-500: #ffcf70;
    --p-color-yellow-600: #8f5f00;
    --p-color-yellow-700: #754e00;
    --p-color-yellow-800: #5c3d00;
    --p-color-yellow-pale-800: #433723;
    --p-color-yellow-900: #473000;
    --p-color-yellow-1000: #320;
    --p-color-green-100: #e6f9ec;
    --p-color-green-200: #d0f5dc;
    --p-color-green-300: #adebc1;
    --p-color-green-400: #88dda3;
    --p-color-green-500: #48cb71;
    --p-color-green-550: #30a956;
    --p-color-green-600: #1f6f3d;
    --p-color-green-700: #1a5b32;
    --p-color-green-800: #134425;
    --p-color-green-pale-800: #1e3828;
    --p-color-green-900: #10381e;
    --p-color-green-1000: #0b2816;
    --p-color-blue-100: #e1f2fe;
    --p-color-blue-200: #c9e7fd;
    --p-color-blue-300: #9dd2fb;
    --p-color-blue-400: #6cb5f9;
    --p-color-blue-500: #388fe5;
    --p-color-blue-600: #1f47ad;
    --p-color-blue-700: #17368c;
    --p-color-blue-800: #0b2365;
    --p-color-blue-pale-800: #273049;
    --p-color-blue-900: #001247;
    --p-color-blue-1000: #000a29;
    --p-color-focus-1: #00f;
    --p-color-scrim-1: #19151560;
    --p-corner-radius-none: 0px;
    --p-corner-radius-small: 8px;
    --p-corner-radius-medium: 16px;
    --p-corner-radius-extreme: 999px;
    --p-corner-radius-rem-none: 0rem;
    --p-corner-radius-rem-small: .5rem;
    --p-corner-radius-rem-medium: 1rem;
    --p-corner-radius-rem-extreme: 62.4375rem;
    --p-font-styles-size-12: 12px;
    --p-font-styles-size-14: 14px;
    --p-font-styles-size-16: 16px;
    --p-font-styles-size-18: 18px;
    --p-font-styles-size-20: 20px;
    --p-font-styles-size-24: 24px;
    --p-font-styles-size-28: 28px;
    --p-font-styles-size-32: 32px;
    --p-font-styles-size-36: 36px;
    --p-font-styles-size-40: 40px;
    --p-font-styles-size-64: 64px;
    --p-font-styles-line-height-desktop-14: 18px;
    --p-font-styles-line-height-desktop-16: 22px;
    --p-font-styles-line-height-desktop-18: 26px;
    --p-font-styles-line-height-desktop-20: 28px;
    --p-font-styles-line-height-desktop-24: 32px;
    --p-font-styles-line-height-desktop-32: 40px;
    --p-font-styles-line-height-desktop-40: 52px;
    --p-font-styles-line-height-desktop-64: 72px;
    --p-font-styles-line-height-mobile-12: 16px;
    --p-font-styles-line-height-mobile-14: 20px;
    --p-font-styles-line-height-mobile-16: 22px;
    --p-font-styles-line-height-mobile-18: 26px;
    --p-font-styles-line-height-mobile-20: 28px;
    --p-font-styles-line-height-mobile-24: 32px;
    --p-font-styles-line-height-mobile-28: 36px;
    --p-font-styles-line-height-mobile-36: 44px;
    --p-grid-column-04: 4px;
    --p-grid-column-08: 8px;
    --p-grid-column-12: 12px;
    --p-grid-margin-16: 16px;
    --p-grid-margin-24: 24px;
    --p-grid-gutter-16: 16px;
    --p-grid-gutter-24: 24px;
    --p-spacing-04: 4px;
    --p-spacing-08: 8px;
    --p-spacing-12: 12px;
    --p-spacing-16: 16px;
    --p-spacing-20: 20px;
    --p-spacing-24: 24px;
    --p-spacing-28: 28px;
    --p-spacing-32: 32px;
    --p-spacing-40: 40px;
    --p-spacing-48: 48px;
    --p-spacing-56: 56px;
    --p-spacing-64: 64px;
    --p-spacing-96: 96px;
    --p-spacing-rem-04: .25rem;
    --p-spacing-rem-08: .5rem;
    --p-spacing-rem-12: .75rem;
    --p-spacing-rem-16: 1rem;
    --p-spacing-rem-20: 1.25rem;
    --p-spacing-rem-24: 1.5rem;
    --p-spacing-rem-28: 1.75rem;
    --p-spacing-rem-32: 2rem;
    --p-spacing-rem-40: 2.5rem;
    --p-spacing-rem-48: 3rem;
    --p-spacing-rem-56: 3.5rem;
    --p-spacing-rem-64: 4rem;
    --p-spacing-rem-96: 6rem;
  }

  .section-away {
    margin: var(--p-spacing-rem-64) 0;
  }

  @media (min-width: 600px) {
    .section-away {
      margin: var(--p-spacing-rem-96) 0;
    }
  }

  .section-away-top {
    margin-top: var(--p-spacing-rem-64);
  }

  @media (min-width: 600px) {
    .section-away-top {
      margin-top: var(--p-spacing-rem-96);
    }
  }

  .section-away-bottom {
    margin-bottom: var(--p-spacing-rem-64);
  }

  @media (min-width: 600px) {
    .section-away-bottom {
      margin-bottom: var(--p-spacing-rem-96);
    }
  }

  .section-near {
    margin: var(--p-spacing-rem-40) 0;
  }

  @media (min-width: 600px) {
    .section-near {
      margin: var(--p-spacing-rem-48) 0;
    }
  }

  .section-near-top {
    margin-top: var(--p-spacing-rem-40);
  }

  @media (min-width: 600px) {
    .section-near-top {
      margin-top: var(--p-spacing-rem-48);
    }
  }

  .section-near-bottom {
    margin-bottom: var(--p-spacing-rem-40);
  }

  @media (min-width: 600px) {
    .section-near-bottom {
      margin-bottom: var(--p-spacing-rem-48);
    }
  }

  .subsection-away {
    margin: var(--p-spacing-rem-24) 0;
  }

  @media (min-width: 600px) {
    .subsection-away {
      margin: var(--p-spacing-rem-32) 0;
    }
  }

  .subsection-away-top {
    margin-top: var(--p-spacing-rem-24);
  }

  @media (min-width: 600px) {
    .subsection-away-top {
      margin-top: var(--p-spacing-rem-32);
    }
  }

  .subsection-away-bottom {
    margin-bottom: var(--p-spacing-rem-24);
  }

  @media (min-width: 600px) {
    .subsection-away-bottom {
      margin-bottom: var(--p-spacing-rem-32);
    }
  }

  .subsection-near {
    margin: var(--p-spacing-rem-12) 0;
  }

  @media (min-width: 600px) {
    .subsection-near {
      margin: var(--p-spacing-rem-16) 0;
    }
  }

  .subsection-near-top {
    margin-top: var(--p-spacing-rem-12);
  }

  @media (min-width: 600px) {
    .subsection-near-top {
      margin-top: var(--p-spacing-rem-16);
    }
  }

  .subsection-near-bottom {
    margin-bottom: var(--p-spacing-rem-12);
  }

  @media (min-width: 600px) {
    .subsection-near-bottom {
      margin-bottom: var(--p-spacing-rem-16);
    }
  }

  .heading-near {
    margin: var(--p-spacing-rem-08) 0;
  }

  @media (min-width: 600px) {
    .heading-near {
      margin: var(--p-spacing-rem-12) 0;
    }
  }

  .heading-near-top {
    margin-top: var(--p-spacing-rem-08);
  }

  @media (min-width: 600px) {
    .heading-near-top {
      margin-top: var(--p-spacing-rem-12);
    }
  }

  .heading-near-bottom {
    margin-bottom: var(--p-spacing-rem-08);
  }

  @media (min-width: 600px) {
    .heading-near-bottom {
      margin-bottom: var(--p-spacing-rem-12);
    }
  }

  .body-away {
    margin: var(--p-spacing-rem-12) 0;
  }

  @media (min-width: 600px) {
    .body-away {
      margin: var(--p-spacing-rem-16) 0;
    }
  }

  .body-away-top {
    margin-top: var(--p-spacing-rem-12);
  }

  @media (min-width: 600px) {
    .body-away-top {
      margin-top: var(--p-spacing-rem-16);
    }
  }

  .body-away-bottom {
    margin-bottom: var(--p-spacing-rem-12);
  }

  @media (min-width: 600px) {
    .body-away-bottom {
      margin-bottom: var(--p-spacing-rem-16);
    }
  }

  .body-near {
    margin: var(--p-spacing-rem-04) 0;
  }

  @media (min-width: 600px) {
    .body-near {
      margin: var(--p-spacing-rem-04) 0;
    }
  }

  .body-near-top {
    margin-top: var(--p-spacing-rem-04);
  }

  @media (min-width: 600px) {
    .body-near-top {
      margin-top: var(--p-spacing-rem-04);
    }
  }

  .body-near-bottom {
    margin-bottom: var(--p-spacing-rem-04);
  }

  @media (min-width: 600px) {
    .body-near-bottom {
      margin-bottom: var(--p-spacing-rem-04);
    }
  }

  :root, :host {
    --p-transition-duration: .1s;
  }

  :root, :host, [data-theme="pretzel-light"] {
    --p-color-background: var(--p-color-grey-000);
    --p-color-background-white: var(--p-color-grey-000);
    --p-color-background-grey: var(--p-color-grey-100);
    --p-color-background-hover: var(--p-color-grey-100);
    --p-color-background-hover-white: var(--p-color-grey-100);
    --p-color-background-hover-grey: var(--p-color-grey-200);
    --p-color-background-pressed: var(--p-color-grey-200);
    --p-color-background-pressed-white: var(--p-color-grey-200);
    --p-color-background-pressed-grey: var(--p-color-grey-300);
    --p-color-background-active: var(--p-color-red-600);
    --p-color-background-active-white: var(--p-color-red-600);
    --p-color-background-active-grey: var(--p-color-red-600);
    --p-color-background-disabled: var(--p-color-grey-200);
    --p-color-background-disabled-white: var(--p-color-grey-200);
    --p-color-background-disabled-grey: var(--p-color-grey-300);
    --p-color-background-selected: var(--p-color-red-700);
    --p-color-background-selected-white: var(--p-color-red-700);
    --p-color-background-selected-grey: var(--p-color-red-700);
    --p-color-background-selected-hover: var(--p-color-red-800);
    --p-color-background-selected-hover-white: var(--p-color-red-800);
    --p-color-background-selected-hover-grey: var(--p-color-red-800);
    --p-color-background-selected-pressed: var(--p-color-red-900);
    --p-color-background-selected-pressed-white: var(--p-color-red-900);
    --p-color-background-selected-pressed-grey: var(--p-color-red-900);
    --p-color-text-primary: var(--p-color-red-900);
    --p-color-text-primary-white: var(--p-color-red-900);
    --p-color-text-primary-grey: var(--p-color-red-900);
    --p-color-text-primary-hover: var(--p-color-red-800);
    --p-color-text-primary-hover-white: var(--p-color-red-800);
    --p-color-text-primary-hover-grey: var(--p-color-red-800);
    --p-color-text-primary-pressed: var(--p-color-red-700);
    --p-color-text-primary-pressed-white: var(--p-color-red-700);
    --p-color-text-primary-pressed-grey: var(--p-color-red-700);
    --p-color-text-primary-active: var(--p-color-red-700);
    --p-color-text-primary-active-white: var(--p-color-red-700);
    --p-color-text-primary-active-grey: var(--p-color-red-700);
    --p-color-text-interactive: var(--p-color-red-600);
    --p-color-text-interactive-white: var(--p-color-red-600);
    --p-color-text-interactive-grey: var(--p-color-red-600);
    --p-color-text-interactive-hover: var(--p-color-red-700);
    --p-color-text-interactive-hover-white: var(--p-color-red-700);
    --p-color-text-interactive-hover-grey: var(--p-color-red-700);
    --p-color-text-interactive-pressed: var(--p-color-red-800);
    --p-color-text-interactive-pressed-white: var(--p-color-red-800);
    --p-color-text-interactive-pressed-grey: var(--p-color-red-800);
    --p-color-text-interactive-active: var(--p-color-red-800);
    --p-color-text-interactive-active-white: var(--p-color-red-800);
    --p-color-text-interactive-active-grey: var(--p-color-red-800);
    --p-color-text-selected: var(--p-color-red-700);
    --p-color-text-selected-white: var(--p-color-red-700);
    --p-color-text-selected-grey: var(--p-color-red-700);
    --p-color-text-selected-hover: var(--p-color-red-800);
    --p-color-text-selected-hover-white: var(--p-color-red-800);
    --p-color-text-selected-hover-grey: var(--p-color-red-800);
    --p-color-text-selected-pressed: var(--p-color-red-900);
    --p-color-text-selected-pressed-white: var(--p-color-red-900);
    --p-color-text-selected-pressed-grey: var(--p-color-red-900);
    --p-color-text-secondary: var(--p-color-grey-700);
    --p-color-text-secondary-white: var(--p-color-grey-700);
    --p-color-text-secondary-grey: var(--p-color-grey-700);
    --p-color-text-placeholder: var(--p-color-grey-600);
    --p-color-text-placeholder-white: var(--p-color-grey-600);
    --p-color-text-placeholder-grey: var(--p-color-grey-600);
    --p-color-text-on-color: var(--p-color-red-100);
    --p-color-text-on-color-white: var(--p-color-red-100);
    --p-color-text-on-color-grey: var(--p-color-red-100);
    --p-color-text-disabled: var(--p-color-grey-400);
    --p-color-text-disabled-white: var(--p-color-grey-400);
    --p-color-text-disabled-grey: var(--p-color-grey-500);
    --p-color-text-error: var(--p-color-red-600);
    --p-color-text-alert: var(--p-color-grey-900);
    --p-color-text-alert-white: var(--p-color-grey-900);
    --p-color-text-alert-grey: var(--p-color-grey-900);
    --p-color-text-on-brand: var(--p-color-red-100);
    --p-color-text-on-brand-white: var(--p-color-red-100);
    --p-color-text-on-brand-grey: var(--p-color-red-100);
    --p-color-text-on-error: var(--p-color-red-800);
    --p-color-text-on-info: var(--p-color-blue-900);
    --p-color-text-on-warning: var(--p-color-yellow-900);
    --p-color-text-on-success: var(--p-color-green-900);
    --p-color-icon-primary: var(--p-color-red-900);
    --p-color-icon-primary-white: var(--p-color-red-900);
    --p-color-icon-primary-grey: var(--p-color-red-900);
    --p-color-icon-primary-hover: var(--p-color-red-800);
    --p-color-icon-primary-hover-white: var(--p-color-red-800);
    --p-color-icon-primary-hover-grey: var(--p-color-red-800);
    --p-color-icon-primary-active: var(--p-color-red-700);
    --p-color-icon-primary-active-white: var(--p-color-red-700);
    --p-color-icon-primary-active-grey: var(--p-color-red-700);
    --p-color-icon-primary-pressed: var(--p-color-red-700);
    --p-color-icon-primary-pressed-white: var(--p-color-red-700);
    --p-color-icon-primary-pressed-grey: var(--p-color-red-700);
    --p-color-icon-interactive: var(--p-color-red-600);
    --p-color-icon-interactive-white: var(--p-color-red-600);
    --p-color-icon-interactive-grey: var(--p-color-red-600);
    --p-color-icon-interactive-hover: var(--p-color-red-700);
    --p-color-icon-interactive-hover-white: var(--p-color-red-700);
    --p-color-icon-interactive-hover-grey: var(--p-color-red-700);
    --p-color-icon-interactive-pressed: var(--p-color-red-800);
    --p-color-icon-interactive-pressed-white: var(--p-color-red-800);
    --p-color-icon-interactive-pressed-grey: var(--p-color-red-800);
    --p-color-icon-interactive-active: var(--p-color-red-800);
    --p-color-icon-interactive-active-white: var(--p-color-red-800);
    --p-color-icon-interactive-active-grey: var(--p-color-red-800);
    --p-color-icon-on-color: var(--p-color-red-100);
    --p-color-icon-on-color-white: var(--p-color-red-100);
    --p-color-icon-on-color-grey: var(--p-color-red-100);
    --p-color-icon-disabled: var(--p-color-grey-400);
    --p-color-icon-disabled-white: var(--p-color-grey-400);
    --p-color-icon-disabled-grey: var(--p-color-grey-500);
    --p-color-icon-error: var(--p-color-red-600);
    --p-color-icon-error-white: var(--p-color-red-600);
    --p-color-icon-error-grey: var(--p-color-red-600);
    --p-color-icon-success: var(--p-color-green-600);
    --p-color-icon-success-white: var(--p-color-green-600);
    --p-color-icon-success-grey: var(--p-color-green-600);
    --p-color-icon-warning: var(--p-color-yellow-600);
    --p-color-icon-warning-white: var(--p-color-yellow-600);
    --p-color-icon-warning-grey: var(--p-color-yellow-600);
    --p-color-icon-info: var(--p-color-blue-600);
    --p-color-icon-info-white: var(--p-color-blue-600);
    --p-color-icon-info-grey: var(--p-color-blue-600);
    --p-color-icon-neutral: var(--p-color-grey-900);
    --p-color-icon-neutral-white: var(--p-color-grey-900);
    --p-color-icon-neutral-grey: var(--p-color-grey-900);
    --p-color-icon-on-brand: var(--p-color-red-100);
    --p-color-icon-on-brand-white: var(--p-color-red-100);
    --p-color-icon-on-brand-grey: var(--p-color-red-100);
    --p-color-icon-on-error: var(--p-color-red-800);
    --p-color-icon-on-info: var(--p-color-blue-900);
    --p-color-icon-on-warning: var(--p-color-yellow-900);
    --p-color-icon-on-success: var(--p-color-green-900);
    --p-color-button-brand-fill: var(--p-color-red-600);
    --p-color-button-brand-fill-white: var(--p-color-red-600);
    --p-color-button-brand-fill-grey: var(--p-color-red-600);
    --p-color-button-brand-fill-hover: var(--p-color-red-700);
    --p-color-button-brand-fill-hover-white: var(--p-color-red-700);
    --p-color-button-brand-fill-hover-grey: var(--p-color-red-700);
    --p-color-button-brand-fill-pressed: var(--p-color-red-800);
    --p-color-button-brand-fill-pressed-white: var(--p-color-red-800);
    --p-color-button-brand-fill-pressed-grey: var(--p-color-red-800);
    --p-color-button-brand-fill-active: var(--p-color-red-800);
    --p-color-button-brand-fill-active-white: var(--p-color-red-800);
    --p-color-button-brand-fill-active-grey: var(--p-color-red-800);
    --p-color-button-action-fill: var(--p-color-red-900);
    --p-color-button-action-fill-white: var(--p-color-red-900);
    --p-color-button-action-fill-grey: var(--p-color-red-900);
    --p-color-button-action-fill-hover: var(--p-color-red-800);
    --p-color-button-action-fill-hover-white: var(--p-color-red-800);
    --p-color-button-action-fill-hover-grey: var(--p-color-red-800);
    --p-color-button-action-fill-pressed: var(--p-color-red-700);
    --p-color-button-action-fill-pressed-white: var(--p-color-red-700);
    --p-color-button-action-fill-pressed-grey: var(--p-color-red-700);
    --p-color-button-action-fill-active: var(--p-color-red-700);
    --p-color-button-action-fill-active-white: var(--p-color-red-700);
    --p-color-button-action-fill-active-grey: var(--p-color-red-700);
    --p-color-button-disabled: var(--p-color-grey-200);
    --p-color-button-disabled-white: var(--p-color-grey-200);
    --p-color-button-disabled-grey: var(--p-color-grey-300);
    --p-color-graphics-illustration-primary: var(--p-color-red-600);
    --p-color-graphics-illustration-primary-white: var(--p-color-red-600);
    --p-color-graphics-illustration-primary-grey: var(--p-color-red-600);
    --p-color-graphics-illustration-detail: var(--p-color-logo-red);
    --p-color-graphics-illustration-detail-white: var(--p-color-logo-red);
    --p-color-graphics-illustration-detail-grey: var(--p-color-logo-red);
    --p-color-graphics-illustration-base: var(--p-color-purple-900);
    --p-color-graphics-illustration-base-white: var(--p-color-purple-900);
    --p-color-graphics-illustration-base-grey: var(--p-color-purple-900);
    --p-color-graphics-illustration-white: var(--p-color-grey-000);
    --p-color-graphics-illustration-white-white: var(--p-color-grey-000);
    --p-color-graphics-illustration-white-grey: var(--p-color-grey-000);
    --p-color-graphics-storebrand-icon-detail: var(--p-color-logo-red);
    --p-color-graphics-storebrand-icon-detail-white: var(--p-color-logo-red);
    --p-color-graphics-storebrand-icon-detail-grey: var(--p-color-logo-red);
    --p-color-graphics-storebrand-icon-outline: var(--p-color-red-800);
    --p-color-graphics-storebrand-icon-outline-white: var(--p-color-red-800);
    --p-color-graphics-storebrand-icon-outline-grey: var(--p-color-red-800);
    --p-color-static-brand-foreground: var(--p-color-red-600);
    --p-color-static-brand-foreground-white: var(--p-color-red-600);
    --p-color-static-brand-foreground-grey: var(--p-color-red-600);
    --p-color-static-brand-background: var(--p-color-red-200);
    --p-color-static-brand-background-white: var(--p-color-red-200);
    --p-color-static-brand-background-grey: var(--p-color-red-200);
    --p-color-static-orange-foreground: var(--p-color-orange-600);
    --p-color-static-orange-foreground-white: var(--p-color-orange-600);
    --p-color-static-orange-foreground-grey: var(--p-color-orange-600);
    --p-color-static-orange-background: var(--p-color-orange-200);
    --p-color-static-orange-background-white: var(--p-color-orange-200);
    --p-color-static-orange-background-grey: var(--p-color-orange-300);
    --p-color-static-purple-foreground: var(--p-color-purple-600);
    --p-color-static-purple-foreground-white: var(--p-color-purple-600);
    --p-color-static-purple-foreground-grey: var(--p-color-purple-600);
    --p-color-static-purple-background: var(--p-color-purple-200);
    --p-color-static-purple-background-white: var(--p-color-purple-200);
    --p-color-static-purple-background-grey: var(--p-color-purple-300);
    --p-color-static-red-foreground: var(--p-color-red-600);
    --p-color-static-red-foreground-white: var(--p-color-red-600);
    --p-color-static-red-foreground-grey: var(--p-color-red-600);
    --p-color-static-red-background: var(--p-color-red-200);
    --p-color-static-red-background-white: var(--p-color-red-200);
    --p-color-static-red-background-grey: var(--p-color-red-200);
    --p-color-static-grey-foreground: var(--p-color-grey-600);
    --p-color-static-grey-foreground-white: var(--p-color-grey-600);
    --p-color-static-grey-foreground-grey: var(--p-color-grey-600);
    --p-color-static-grey-background: var(--p-color-grey-200);
    --p-color-static-grey-background-white: var(--p-color-grey-200);
    --p-color-static-grey-background-grey: var(--p-color-grey-300);
    --p-color-static-risk-filled: var(--p-color-orange-600);
    --p-color-static-risk-filled-white: var(--p-color-orange-600);
    --p-color-static-risk-filled-grey: var(--p-color-orange-600);
    --p-color-static-risk-unfilled: var(--p-color-orange-200);
    --p-color-static-risk-unfilled-white: var(--p-color-orange-200);
    --p-color-static-risk-unfilled-grey: var(--p-color-orange-300);
    --p-color-static-sustainability-filled: var(--p-color-purple-600);
    --p-color-static-sustainability-filled-white: var(--p-color-purple-600);
    --p-color-static-sustainability-filled-grey: var(--p-color-purple-600);
    --p-color-static-sustainability-unfilled: var(--p-color-purple-200);
    --p-color-static-sustainability-unfilled-white: var(--p-color-purple-200);
    --p-color-static-sustainability-unfilled-grey: var(--p-color-purple-300);
    --p-color-states-focus: var(--p-color-focus-1);
    --p-color-states-focus-white: var(--p-color-focus-1);
    --p-color-states-focus-grey: var(--p-color-focus-1);
    --p-color-states-scrim: var(--p-color-scrim-1);
    --p-color-states-scrim-white: var(--p-color-scrim-1);
    --p-color-states-scrim-grey: var(--p-color-scrim-1);
    --p-color-states-toggle-off: var(--p-color-grey-400);
    --p-color-states-toggle-off-white: var(--p-color-grey-400);
    --p-color-states-toggle-off-grey: var(--p-color-grey-500);
    --p-color-states-toggle-off-hover: var(--p-color-grey-300);
    --p-color-states-toggle-off-hover-white: var(--p-color-grey-300);
    --p-color-states-toggle-off-hover-grey: var(--p-color-grey-400);
    --p-color-surface-1: var(--p-color-grey-100);
    --p-color-surface-1-white: var(--p-color-grey-100);
    --p-color-surface-1-grey: var(--p-color-grey-000);
    --p-color-surface-2: var(--p-color-grey-000);
    --p-color-surface-2-white: var(--p-color-grey-000);
    --p-color-surface-2-grey: var(--p-color-grey-100);
    --p-color-surface-1-hover: var(--p-color-grey-200);
    --p-color-surface-1-hover-white: var(--p-color-grey-200);
    --p-color-surface-1-hover-grey: var(--p-color-grey-200);
    --p-color-surface-2-hover: var(--p-color-grey-200);
    --p-color-surface-2-hover-white: var(--p-color-grey-200);
    --p-color-surface-2-hover-grey: var(--p-color-grey-200);
    --p-color-surface-inverse: var(--p-color-red-900);
    --p-color-surface-inverse-white: var(--p-color-red-900);
    --p-color-surface-inverse-grey: var(--p-color-red-900);
    --p-color-surface-inverse-hover: var(--p-color-red-800);
    --p-color-surface-inverse-hover-white: var(--p-color-red-800);
    --p-color-surface-inverse-hover-grey: var(--p-color-red-800);
    --p-color-surface-inverse-pressed: var(--p-color-red-700);
    --p-color-surface-inverse-pressed-white: var(--p-color-red-700);
    --p-color-surface-inverse-pressed-grey: var(--p-color-red-700);
    --p-color-surface-selected: var(--p-color-red-700);
    --p-color-surface-selected-white: var(--p-color-red-700);
    --p-color-surface-selected-grey: var(--p-color-red-700);
    --p-color-surface-selected-hover: var(--p-color-red-800);
    --p-color-surface-selected-hover-white: var(--p-color-red-800);
    --p-color-surface-selected-hover-grey: var(--p-color-red-800);
    --p-color-surface-selected-pressed: var(--p-color-red-800);
    --p-color-surface-selected-pressed-white: var(--p-color-red-800);
    --p-color-surface-selected-pressed-grey: var(--p-color-red-800);
    --p-color-surface-selected-active: var(--p-color-red-900);
    --p-color-surface-selected-active-white: var(--p-color-red-900);
    --p-color-surface-selected-active-grey: var(--p-color-red-900);
    --p-color-surface-error: var(--p-color-red-200);
    --p-color-surface-error-white: var(--p-color-red-200);
    --p-color-surface-error-grey: var(--p-color-red-200);
    --p-color-surface-success: var(--p-color-green-200);
    --p-color-surface-success-white: var(--p-color-green-200);
    --p-color-surface-success-grey: var(--p-color-green-200);
    --p-color-surface-warning: var(--p-color-yellow-200);
    --p-color-surface-warning-white: var(--p-color-yellow-200);
    --p-color-surface-warning-grey: var(--p-color-yellow-200);
    --p-color-surface-info: var(--p-color-blue-200);
    --p-color-surface-info-white: var(--p-color-blue-200);
    --p-color-surface-info-grey: var(--p-color-blue-200);
    --p-color-surface-neutral: var(--p-color-grey-100);
    --p-color-surface-neutral-white: var(--p-color-grey-000);
    --p-color-surface-neutral-grey: var(--p-color-grey-100);
    --p-color-surface-static: var(--p-color-grey-000);
    --p-color-surface-static-white: var(--p-color-grey-000);
    --p-color-surface-static-grey: var(--p-color-grey-000);
    --p-color-stroke-strong: var(--p-color-red-900);
    --p-color-stroke-strong-white: var(--p-color-red-900);
    --p-color-stroke-strong-grey: var(--p-color-red-900);
    --p-color-stroke-strong-hover: var(--p-color-red-800);
    --p-color-stroke-strong-hover-white: var(--p-color-red-800);
    --p-color-stroke-strong-hover-grey: var(--p-color-red-800);
    --p-color-stroke-strong-pressed: var(--p-color-red-700);
    --p-color-stroke-strong-pressed-white: var(--p-color-red-700);
    --p-color-stroke-strong-pressed-grey: var(--p-color-red-700);
    --p-color-stroke-0: var(--p-color-grey-300);
    --p-color-stroke-0-white: var(--p-color-grey-300);
    --p-color-stroke-0-grey: var(--p-color-grey-400);
    --p-color-stroke-1: var(--p-color-grey-400);
    --p-color-stroke-1-white: var(--p-color-grey-400);
    --p-color-stroke-1-grey: var(--p-color-grey-300);
    --p-color-stroke-2: var(--p-color-grey-300);
    --p-color-stroke-2-white: var(--p-color-grey-300);
    --p-color-stroke-2-grey: var(--p-color-grey-400);
    --p-color-stroke-on-white: var(--p-color-grey-300);
    --p-color-stroke-on-white-white: var(--p-color-grey-300);
    --p-color-stroke-on-white-grey: var(--p-color-grey-300);
    --p-color-stroke-subtle-0: var(--p-color-grey-200);
    --p-color-stroke-subtle-0-white: var(--p-color-grey-200);
    --p-color-stroke-subtle-0-grey: var(--p-color-grey-300);
    --p-color-stroke-subtle-1: var(--p-color-grey-300);
    --p-color-stroke-subtle-1-white: var(--p-color-grey-300);
    --p-color-stroke-subtle-1-grey: var(--p-color-grey-200);
    --p-color-stroke-subtle-2: var(--p-color-grey-200);
    --p-color-stroke-subtle-2-white: var(--p-color-grey-200);
    --p-color-stroke-subtle-2-grey: var(--p-color-grey-300);
    --p-color-stroke-subtle-on-white: var(--p-color-grey-200);
    --p-color-stroke-subtle-on-white-white: var(--p-color-grey-200);
    --p-color-stroke-subtle-on-white-grey: var(--p-color-grey-200);
    --p-color-stroke-subtle-hover: var(--p-color-red-800);
    --p-color-stroke-subtle-hover-white: var(--p-color-red-800);
    --p-color-stroke-subtle-hover-grey: var(--p-color-red-800);
    --p-color-stroke-subtle-pressed: var(--p-color-red-700);
    --p-color-stroke-subtle-pressed-white: var(--p-color-red-700);
    --p-color-stroke-subtle-pressed-grey: var(--p-color-red-700);
    --p-color-stroke-on-color: var(--p-color-red-100);
    --p-color-stroke-on-color-white: var(--p-color-red-100);
    --p-color-stroke-on-color-grey: var(--p-color-red-100);
    --p-color-stroke-interactive: var(--p-color-red-600);
    --p-color-stroke-interactive-white: var(--p-color-red-600);
    --p-color-stroke-interactive-grey: var(--p-color-red-600);
    --p-color-stroke-interactive-hover: var(--p-color-red-700);
    --p-color-stroke-interactive-hover-white: var(--p-color-red-700);
    --p-color-stroke-interactive-hover-grey: var(--p-color-red-700);
    --p-color-stroke-interactive-pressed: var(--p-color-red-800);
    --p-color-stroke-interactive-pressed-white: var(--p-color-red-800);
    --p-color-stroke-interactive-pressed-grey: var(--p-color-red-800);
    --p-color-stroke-selected: var(--p-color-red-700);
    --p-color-stroke-selected-white: var(--p-color-red-700);
    --p-color-stroke-selected-grey: var(--p-color-red-700);
    --p-color-stroke-selected-hover: var(--p-color-red-800);
    --p-color-stroke-selected-hover-white: var(--p-color-red-800);
    --p-color-stroke-selected-hover-grey: var(--p-color-red-800);
    --p-color-stroke-selected-pressed: var(--p-color-red-900);
    --p-color-stroke-selected-pressed-white: var(--p-color-red-900);
    --p-color-stroke-selected-pressed-grey: var(--p-color-red-900);
    --p-color-stroke-disabled: var(--p-color-grey-400);
    --p-color-stroke-disabled-white: var(--p-color-grey-400);
    --p-color-stroke-disabled-grey: var(--p-color-grey-500);
    --p-color-stroke-error: var(--p-color-red-600);
    --p-color-stroke-error-white: var(--p-color-red-600);
    --p-color-stroke-error-grey: var(--p-color-red-600);
    --p-color-stroke-success: var(--p-color-green-600);
    --p-color-stroke-success-white: var(--p-color-green-600);
    --p-color-stroke-success-grey: var(--p-color-green-600);
    --p-color-stroke-warning: var(--p-color-yellow-600);
    --p-color-stroke-warning-white: var(--p-color-yellow-600);
    --p-color-stroke-warning-grey: var(--p-color-yellow-600);
    --p-color-monochromatic-red-1: var(--p-color-red-550);
    --p-color-monochromatic-red-1-white: var(--p-color-red-550);
    --p-color-monochromatic-red-1-grey: var(--p-color-red-550);
    --p-color-monochromatic-red-2: var(--p-color-red-600);
    --p-color-monochromatic-red-2-white: var(--p-color-red-600);
    --p-color-monochromatic-red-2-grey: var(--p-color-red-600);
    --p-color-monochromatic-red-3: var(--p-color-red-800);
    --p-color-monochromatic-red-3-white: var(--p-color-red-800);
    --p-color-monochromatic-red-3-grey: var(--p-color-red-800);
    --p-color-monochromatic-red-4: var(--p-color-red-900);
    --p-color-monochromatic-red-4-white: var(--p-color-red-900);
    --p-color-monochromatic-red-4-grey: var(--p-color-red-900);
    --p-color-monochromatic-purple-1: var(--p-color-purple-550);
    --p-color-monochromatic-purple-1-white: var(--p-color-purple-550);
    --p-color-monochromatic-purple-1-grey: var(--p-color-purple-550);
    --p-color-monochromatic-purple-2: var(--p-color-purple-600);
    --p-color-monochromatic-purple-2-white: var(--p-color-purple-600);
    --p-color-monochromatic-purple-2-grey: var(--p-color-purple-600);
    --p-color-monochromatic-purple-3: var(--p-color-purple-800);
    --p-color-monochromatic-purple-3-white: var(--p-color-purple-800);
    --p-color-monochromatic-purple-3-grey: var(--p-color-purple-800);
    --p-color-monochromatic-purple-4: var(--p-color-purple-900);
    --p-color-monochromatic-purple-4-white: var(--p-color-purple-900);
    --p-color-monochromatic-purple-4-grey: var(--p-color-purple-900);
    --p-color-categorical-1: var(--p-color-purple-800);
    --p-color-categorical-1-white: var(--p-color-purple-800);
    --p-color-categorical-1-grey: var(--p-color-purple-800);
    --p-color-categorical-2: var(--p-color-red-550);
    --p-color-categorical-2-white: var(--p-color-red-550);
    --p-color-categorical-2-grey: var(--p-color-red-550);
    --p-color-categorical-3: var(--p-color-red-600);
    --p-color-categorical-3-white: var(--p-color-red-600);
    --p-color-categorical-3-grey: var(--p-color-red-600);
    --p-color-categorical-4: var(--p-color-purple-550);
    --p-color-categorical-4-white: var(--p-color-purple-550);
    --p-color-categorical-4-grey: var(--p-color-purple-550);
    --p-color-categorical-5: var(--p-color-red-800);
    --p-color-categorical-5-white: var(--p-color-red-800);
    --p-color-categorical-5-grey: var(--p-color-red-800);
    --p-color-categorical-6: var(--p-color-grey-500);
    --p-color-categorical-6-white: var(--p-color-grey-500);
    --p-color-categorical-6-grey: var(--p-color-grey-500);
    --p-color-categorical-7: var(--p-color-blue-700);
    --p-color-categorical-7-white: var(--p-color-blue-700);
    --p-color-categorical-7-grey: var(--p-color-blue-700);
    --p-color-categorical-8: var(--p-color-green-550);
    --p-color-categorical-8-white: var(--p-color-green-550);
    --p-color-categorical-8-grey: var(--p-color-green-550);
    --p-color-categorical-9: var(--p-color-purple-600);
    --p-color-categorical-9-white: var(--p-color-purple-600);
    --p-color-categorical-9-grey: var(--p-color-purple-600);
    --p-color-categorical-10: var(--p-color-blue-500);
    --p-color-categorical-10-white: var(--p-color-blue-500);
    --p-color-categorical-10-grey: var(--p-color-blue-500);
    --p-color-categorical-11: var(--p-color-green-700);
    --p-color-categorical-11-white: var(--p-color-green-700);
    --p-color-categorical-11-grey: var(--p-color-green-700);
    --p-color-categorical-12: var(--p-color-grey-700);
    --p-color-categorical-12-white: var(--p-color-grey-700);
    --p-color-categorical-12-grey: var(--p-color-grey-700);
    --p-outline: .125rem solid var(--p-color-states-focus);
    --p-outline-offset: .125rem;
  }

  [data-theme="pretzel-dark"] {
    --p-color-background: var(--p-color-grey-1000);
    --p-color-background-white: var(--p-color-grey-1000);
    --p-color-background-grey: var(--p-color-grey-1000);
    --p-color-background-hover: var(--p-color-grey-900);
    --p-color-background-hover-white: var(--p-color-grey-900);
    --p-color-background-hover-grey: var(--p-color-grey-800);
    --p-color-background-pressed: var(--p-color-grey-800);
    --p-color-background-pressed-white: var(--p-color-grey-800);
    --p-color-background-pressed-grey: var(--p-color-grey-700);
    --p-color-background-active: var(--p-color-red-400);
    --p-color-background-active-white: var(--p-color-red-400);
    --p-color-background-active-grey: var(--p-color-red-400);
    --p-color-background-disabled: var(--p-color-grey-800);
    --p-color-background-disabled-white: var(--p-color-grey-800);
    --p-color-background-disabled-grey: var(--p-color-grey-700);
    --p-color-background-selected: var(--p-color-red-300);
    --p-color-background-selected-white: var(--p-color-red-300);
    --p-color-background-selected-grey: var(--p-color-red-300);
    --p-color-background-selected-hover: var(--p-color-red-200);
    --p-color-background-selected-hover-white: var(--p-color-red-200);
    --p-color-background-selected-hover-grey: var(--p-color-red-200);
    --p-color-background-selected-pressed: var(--p-color-red-100);
    --p-color-background-selected-pressed-white: var(--p-color-red-100);
    --p-color-background-selected-pressed-grey: var(--p-color-red-100);
    --p-color-text-primary: var(--p-color-red-100);
    --p-color-text-primary-white: var(--p-color-red-100);
    --p-color-text-primary-grey: var(--p-color-red-100);
    --p-color-text-primary-hover: var(--p-color-red-200);
    --p-color-text-primary-hover-white: var(--p-color-red-200);
    --p-color-text-primary-hover-grey: var(--p-color-red-200);
    --p-color-text-primary-pressed: var(--p-color-red-300);
    --p-color-text-primary-pressed-white: var(--p-color-red-300);
    --p-color-text-primary-pressed-grey: var(--p-color-red-300);
    --p-color-text-primary-active: var(--p-color-red-300);
    --p-color-text-primary-active-white: var(--p-color-red-300);
    --p-color-text-primary-active-grey: var(--p-color-red-300);
    --p-color-text-interactive: var(--p-color-red-200);
    --p-color-text-interactive-white: var(--p-color-red-200);
    --p-color-text-interactive-grey: var(--p-color-red-200);
    --p-color-text-interactive-hover: var(--p-color-red-400);
    --p-color-text-interactive-hover-white: var(--p-color-red-400);
    --p-color-text-interactive-hover-grey: var(--p-color-red-400);
    --p-color-text-interactive-pressed: var(--p-color-red-300);
    --p-color-text-interactive-pressed-white: var(--p-color-red-300);
    --p-color-text-interactive-pressed-grey: var(--p-color-red-300);
    --p-color-text-interactive-active: var(--p-color-red-300);
    --p-color-text-interactive-active-white: var(--p-color-red-300);
    --p-color-text-interactive-active-grey: var(--p-color-red-300);
    --p-color-text-selected: var(--p-color-red-300);
    --p-color-text-selected-white: var(--p-color-red-300);
    --p-color-text-selected-grey: var(--p-color-red-300);
    --p-color-text-selected-hover: var(--p-color-red-200);
    --p-color-text-selected-hover-white: var(--p-color-red-200);
    --p-color-text-selected-hover-grey: var(--p-color-red-200);
    --p-color-text-selected-pressed: var(--p-color-red-100);
    --p-color-text-selected-pressed-white: var(--p-color-red-100);
    --p-color-text-selected-pressed-grey: var(--p-color-red-100);
    --p-color-text-secondary: var(--p-color-grey-300);
    --p-color-text-secondary-white: var(--p-color-grey-300);
    --p-color-text-secondary-grey: var(--p-color-grey-300);
    --p-color-text-placeholder: var(--p-color-grey-400);
    --p-color-text-placeholder-white: var(--p-color-grey-400);
    --p-color-text-placeholder-grey: var(--p-color-grey-400);
    --p-color-text-on-color: var(--p-color-red-900);
    --p-color-text-on-color-white: var(--p-color-red-900);
    --p-color-text-on-color-grey: var(--p-color-red-900);
    --p-color-text-disabled: var(--p-color-grey-600);
    --p-color-text-disabled-white: var(--p-color-grey-600);
    --p-color-text-disabled-grey: var(--p-color-grey-500);
    --p-color-text-error: var(--p-color-red-400);
    --p-color-text-alert: var(--p-color-grey-100);
    --p-color-text-alert-white: var(--p-color-grey-100);
    --p-color-text-alert-grey: var(--p-color-grey-100);
    --p-color-text-on-brand: var(--p-color-red-900);
    --p-color-text-on-brand-white: var(--p-color-red-900);
    --p-color-text-on-brand-grey: var(--p-color-red-900);
    --p-color-text-on-error: var(--p-color-red-200);
    --p-color-text-on-info: var(--p-color-blue-100);
    --p-color-text-on-warning: var(--p-color-yellow-100);
    --p-color-text-on-success: var(--p-color-green-100);
    --p-color-icon-primary: var(--p-color-red-100);
    --p-color-icon-primary-white: var(--p-color-red-100);
    --p-color-icon-primary-grey: var(--p-color-red-100);
    --p-color-icon-primary-hover: var(--p-color-red-200);
    --p-color-icon-primary-hover-white: var(--p-color-red-200);
    --p-color-icon-primary-hover-grey: var(--p-color-red-200);
    --p-color-icon-primary-active: var(--p-color-red-300);
    --p-color-icon-primary-active-white: var(--p-color-red-300);
    --p-color-icon-primary-active-grey: var(--p-color-red-300);
    --p-color-icon-primary-pressed: var(--p-color-red-300);
    --p-color-icon-primary-pressed-white: var(--p-color-red-300);
    --p-color-icon-primary-pressed-grey: var(--p-color-red-300);
    --p-color-icon-interactive: var(--p-color-red-200);
    --p-color-icon-interactive-white: var(--p-color-red-200);
    --p-color-icon-interactive-grey: var(--p-color-red-200);
    --p-color-icon-interactive-hover: var(--p-color-red-400);
    --p-color-icon-interactive-hover-white: var(--p-color-red-400);
    --p-color-icon-interactive-hover-grey: var(--p-color-red-400);
    --p-color-icon-interactive-pressed: var(--p-color-red-300);
    --p-color-icon-interactive-pressed-white: var(--p-color-red-300);
    --p-color-icon-interactive-pressed-grey: var(--p-color-red-300);
    --p-color-icon-interactive-active: var(--p-color-red-300);
    --p-color-icon-interactive-active-white: var(--p-color-red-300);
    --p-color-icon-interactive-active-grey: var(--p-color-red-300);
    --p-color-icon-on-color: var(--p-color-red-900);
    --p-color-icon-on-color-white: var(--p-color-red-900);
    --p-color-icon-on-color-grey: var(--p-color-red-900);
    --p-color-icon-disabled: var(--p-color-grey-600);
    --p-color-icon-disabled-white: var(--p-color-grey-600);
    --p-color-icon-disabled-grey: var(--p-color-grey-500);
    --p-color-icon-error: var(--p-color-red-400);
    --p-color-icon-error-white: var(--p-color-red-400);
    --p-color-icon-error-grey: var(--p-color-red-400);
    --p-color-icon-success: var(--p-color-green-400);
    --p-color-icon-success-white: var(--p-color-green-400);
    --p-color-icon-success-grey: var(--p-color-green-400);
    --p-color-icon-warning: var(--p-color-yellow-400);
    --p-color-icon-warning-white: var(--p-color-yellow-400);
    --p-color-icon-warning-grey: var(--p-color-yellow-400);
    --p-color-icon-info: var(--p-color-blue-400);
    --p-color-icon-info-white: var(--p-color-blue-400);
    --p-color-icon-info-grey: var(--p-color-blue-400);
    --p-color-icon-neutral: var(--p-color-grey-100);
    --p-color-icon-neutral-white: var(--p-color-grey-100);
    --p-color-icon-neutral-grey: var(--p-color-grey-100);
    --p-color-icon-on-brand: var(--p-color-red-900);
    --p-color-icon-on-brand-white: var(--p-color-red-900);
    --p-color-icon-on-brand-grey: var(--p-color-red-900);
    --p-color-icon-on-error: var(--p-color-red-200);
    --p-color-icon-on-info: var(--p-color-blue-100);
    --p-color-icon-on-warning: var(--p-color-yellow-100);
    --p-color-icon-on-success: var(--p-color-green-100);
    --p-color-button-brand-fill: var(--p-color-red-400);
    --p-color-button-brand-fill-white: var(--p-color-red-400);
    --p-color-button-brand-fill-grey: var(--p-color-red-400);
    --p-color-button-brand-fill-hover: var(--p-color-red-300);
    --p-color-button-brand-fill-hover-white: var(--p-color-red-300);
    --p-color-button-brand-fill-hover-grey: var(--p-color-red-300);
    --p-color-button-brand-fill-pressed: var(--p-color-red-200);
    --p-color-button-brand-fill-pressed-white: var(--p-color-red-200);
    --p-color-button-brand-fill-pressed-grey: var(--p-color-red-200);
    --p-color-button-brand-fill-active: var(--p-color-red-200);
    --p-color-button-brand-fill-active-white: var(--p-color-red-200);
    --p-color-button-brand-fill-active-grey: var(--p-color-red-200);
    --p-color-button-action-fill: var(--p-color-red-100);
    --p-color-button-action-fill-white: var(--p-color-red-100);
    --p-color-button-action-fill-grey: var(--p-color-red-100);
    --p-color-button-action-fill-hover: var(--p-color-red-200);
    --p-color-button-action-fill-hover-white: var(--p-color-red-200);
    --p-color-button-action-fill-hover-grey: var(--p-color-red-200);
    --p-color-button-action-fill-pressed: var(--p-color-red-300);
    --p-color-button-action-fill-pressed-white: var(--p-color-red-300);
    --p-color-button-action-fill-pressed-grey: var(--p-color-red-300);
    --p-color-button-action-fill-active: var(--p-color-red-300);
    --p-color-button-action-fill-active-white: var(--p-color-red-300);
    --p-color-button-action-fill-active-grey: var(--p-color-red-300);
    --p-color-button-disabled: var(--p-color-grey-800);
    --p-color-button-disabled-white: var(--p-color-grey-800);
    --p-color-button-disabled-grey: var(--p-color-grey-800);
    --p-color-graphics-illustration-primary: var(--p-color-red-400);
    --p-color-graphics-illustration-primary-white: var(--p-color-red-400);
    --p-color-graphics-illustration-primary-grey: var(--p-color-red-400);
    --p-color-graphics-illustration-detail: var(--p-color-logo-red);
    --p-color-graphics-illustration-detail-white: var(--p-color-logo-red);
    --p-color-graphics-illustration-detail-grey: var(--p-color-logo-red);
    --p-color-graphics-illustration-base: var(--p-color-purple-100);
    --p-color-graphics-illustration-base-white: var(--p-color-purple-100);
    --p-color-graphics-illustration-base-grey: var(--p-color-purple-100);
    --p-color-graphics-illustration-white: var(--p-color-grey-1000);
    --p-color-graphics-illustration-white-white: var(--p-color-grey-1000);
    --p-color-graphics-illustration-white-grey: var(--p-color-grey-1000);
    --p-color-graphics-storebrand-icon-detail: var(--p-color-logo-red);
    --p-color-graphics-storebrand-icon-detail-white: var(--p-color-logo-red);
    --p-color-graphics-storebrand-icon-detail-grey: var(--p-color-logo-red);
    --p-color-graphics-storebrand-icon-outline: var(--p-color-red-200);
    --p-color-graphics-storebrand-icon-outline-white: var(--p-color-red-200);
    --p-color-graphics-storebrand-icon-outline-grey: var(--p-color-red-200);
    --p-color-static-brand-foreground: var(--p-color-red-400);
    --p-color-static-brand-foreground-white: var(--p-color-red-400);
    --p-color-static-brand-foreground-grey: var(--p-color-red-400);
    --p-color-static-brand-background: var(--p-color-red-800);
    --p-color-static-brand-background-white: var(--p-color-red-800);
    --p-color-static-brand-background-grey: var(--p-color-red-800);
    --p-color-static-orange-foreground: var(--p-color-orange-400);
    --p-color-static-orange-foreground-white: var(--p-color-orange-400);
    --p-color-static-orange-foreground-grey: var(--p-color-orange-400);
    --p-color-static-orange-background: var(--p-color-orange-200);
    --p-color-static-orange-background-white: var(--p-color-orange-200);
    --p-color-static-orange-background-grey: var(--p-color-orange-300);
    --p-color-static-purple-foreground: var(--p-color-purple-400);
    --p-color-static-purple-foreground-white: var(--p-color-purple-400);
    --p-color-static-purple-foreground-grey: var(--p-color-purple-400);
    --p-color-static-purple-background: var(--p-color-purple-800);
    --p-color-static-purple-background-white: var(--p-color-purple-800);
    --p-color-static-purple-background-grey: var(--p-color-purple-800);
    --p-color-static-red-foreground: var(--p-color-red-400);
    --p-color-static-red-foreground-white: var(--p-color-red-400);
    --p-color-static-red-foreground-grey: var(--p-color-red-400);
    --p-color-static-red-background: var(--p-color-red-800);
    --p-color-static-red-background-white: var(--p-color-red-800);
    --p-color-static-red-background-grey: var(--p-color-red-800);
    --p-color-static-grey-foreground: var(--p-color-grey-400);
    --p-color-static-grey-foreground-white: var(--p-color-grey-400);
    --p-color-static-grey-foreground-grey: var(--p-color-grey-400);
    --p-color-static-grey-background: var(--p-color-grey-800);
    --p-color-static-grey-background-white: var(--p-color-grey-800);
    --p-color-static-grey-background-grey: var(--p-color-grey-800);
    --p-color-static-risk-filled: var(--p-color-orange-300);
    --p-color-static-risk-filled-white: var(--p-color-orange-300);
    --p-color-static-risk-filled-grey: var(--p-color-orange-300);
    --p-color-static-risk-unfilled: var(--p-color-orange-pale-800);
    --p-color-static-risk-unfilled-white: var(--p-color-orange-pale-800);
    --p-color-static-risk-unfilled-grey: var(--p-color-orange-pale-800);
    --p-color-static-sustainability-filled: var(--p-color-purple-300);
    --p-color-static-sustainability-filled-white: var(--p-color-purple-300);
    --p-color-static-sustainability-filled-grey: var(--p-color-purple-300);
    --p-color-static-sustainability-unfilled: var(--p-color-purple-pale-800);
    --p-color-static-sustainability-unfilled-white: var(--p-color-purple-pale-800);
    --p-color-static-sustainability-unfilled-grey: var(--p-color-purple-pale-800);
    --p-color-states-focus: var(--p-color-focus-1);
    --p-color-states-focus-white: var(--p-color-focus-1);
    --p-color-states-focus-grey: var(--p-color-focus-1);
    --p-color-states-scrim: var(--p-color-scrim-1);
    --p-color-states-scrim-white: var(--p-color-scrim-1);
    --p-color-states-scrim-grey: var(--p-color-scrim-1);
    --p-color-states-toggle-off: var(--p-color-grey-600);
    --p-color-states-toggle-off-white: var(--p-color-grey-600);
    --p-color-states-toggle-off-grey: var(--p-color-grey-500);
    --p-color-states-toggle-off-hover: var(--p-color-grey-700);
    --p-color-states-toggle-off-hover-white: var(--p-color-grey-700);
    --p-color-states-toggle-off-hover-grey: var(--p-color-grey-600);
    --p-color-surface-1: var(--p-color-grey-900);
    --p-color-surface-1-white: var(--p-color-grey-900);
    --p-color-surface-1-grey: var(--p-color-grey-1000);
    --p-color-surface-2: var(--p-color-grey-800);
    --p-color-surface-2-white: var(--p-color-grey-800);
    --p-color-surface-2-grey: var(--p-color-grey-800);
    --p-color-surface-1-hover: var(--p-color-grey-800);
    --p-color-surface-1-hover-white: var(--p-color-grey-800);
    --p-color-surface-1-hover-grey: var(--p-color-grey-800);
    --p-color-surface-2-hover: var(--p-color-grey-800);
    --p-color-surface-2-hover-white: var(--p-color-grey-800);
    --p-color-surface-2-hover-grey: var(--p-color-grey-800);
    --p-color-surface-inverse: var(--p-color-red-100);
    --p-color-surface-inverse-white: var(--p-color-red-100);
    --p-color-surface-inverse-grey: var(--p-color-red-100);
    --p-color-surface-inverse-hover: var(--p-color-red-200);
    --p-color-surface-inverse-hover-white: var(--p-color-red-200);
    --p-color-surface-inverse-hover-grey: var(--p-color-red-200);
    --p-color-surface-inverse-pressed: var(--p-color-red-300);
    --p-color-surface-inverse-pressed-white: var(--p-color-red-300);
    --p-color-surface-inverse-pressed-grey: var(--p-color-red-300);
    --p-color-surface-selected: var(--p-color-red-400);
    --p-color-surface-selected-white: var(--p-color-red-400);
    --p-color-surface-selected-grey: var(--p-color-red-400);
    --p-color-surface-selected-hover: var(--p-color-red-300);
    --p-color-surface-selected-hover-white: var(--p-color-red-300);
    --p-color-surface-selected-hover-grey: var(--p-color-red-300);
    --p-color-surface-selected-pressed: var(--p-color-red-200);
    --p-color-surface-selected-pressed-white: var(--p-color-red-200);
    --p-color-surface-selected-pressed-grey: var(--p-color-red-200);
    --p-color-surface-selected-active: var(--p-color-red-200);
    --p-color-surface-selected-active-white: var(--p-color-red-200);
    --p-color-surface-selected-active-grey: var(--p-color-red-200);
    --p-color-surface-error: var(--p-color-red-800);
    --p-color-surface-error-white: var(--p-color-red-800);
    --p-color-surface-error-grey: var(--p-color-red-800);
    --p-color-surface-success: var(--p-color-green-800);
    --p-color-surface-success-white: var(--p-color-green-800);
    --p-color-surface-success-grey: var(--p-color-green-800);
    --p-color-surface-warning: var(--p-color-yellow-800);
    --p-color-surface-warning-white: var(--p-color-yellow-800);
    --p-color-surface-warning-grey: var(--p-color-yellow-800);
    --p-color-surface-info: var(--p-color-blue-800);
    --p-color-surface-info-white: var(--p-color-blue-800);
    --p-color-surface-info-grey: var(--p-color-blue-800);
    --p-color-surface-neutral: var(--p-color-grey-900);
    --p-color-surface-neutral-white: var(--p-color-grey-1000);
    --p-color-surface-neutral-grey: var(--p-color-grey-900);
    --p-color-surface-static: var(--p-color-grey-1000);
    --p-color-surface-static-white: var(--p-color-grey-900);
    --p-color-surface-static-grey: var(--p-color-grey-900);
    --p-color-stroke-strong: var(--p-color-red-200);
    --p-color-stroke-strong-white: var(--p-color-red-200);
    --p-color-stroke-strong-grey: var(--p-color-red-200);
    --p-color-stroke-strong-hover: var(--p-color-red-400);
    --p-color-stroke-strong-hover-white: var(--p-color-red-400);
    --p-color-stroke-strong-hover-grey: var(--p-color-red-400);
    --p-color-stroke-strong-pressed: var(--p-color-red-300);
    --p-color-stroke-strong-pressed-white: var(--p-color-red-300);
    --p-color-stroke-strong-pressed-grey: var(--p-color-red-300);
    --p-color-stroke-0: var(--p-color-grey-700);
    --p-color-stroke-0-white: var(--p-color-grey-700);
    --p-color-stroke-0-grey: var(--p-color-grey-600);
    --p-color-stroke-1: var(--p-color-grey-600);
    --p-color-stroke-1-white: var(--p-color-grey-600);
    --p-color-stroke-1-grey: var(--p-color-grey-700);
    --p-color-stroke-2: var(--p-color-grey-700);
    --p-color-stroke-2-white: var(--p-color-grey-700);
    --p-color-stroke-2-grey: var(--p-color-grey-600);
    --p-color-stroke-on-white: var(--p-color-grey-700);
    --p-color-stroke-on-white-white: var(--p-color-grey-700);
    --p-color-stroke-on-white-grey: var(--p-color-grey-700);
    --p-color-stroke-subtle-0: var(--p-color-grey-800);
    --p-color-stroke-subtle-0-white: var(--p-color-grey-800);
    --p-color-stroke-subtle-0-grey: var(--p-color-grey-700);
    --p-color-stroke-subtle-1: var(--p-color-grey-700);
    --p-color-stroke-subtle-1-white: var(--p-color-grey-700);
    --p-color-stroke-subtle-1-grey: var(--p-color-grey-800);
    --p-color-stroke-subtle-2: var(--p-color-grey-800);
    --p-color-stroke-subtle-2-white: var(--p-color-grey-800);
    --p-color-stroke-subtle-2-grey: var(--p-color-grey-700);
    --p-color-stroke-subtle-on-white: var(--p-color-grey-800);
    --p-color-stroke-subtle-on-white-white: var(--p-color-grey-800);
    --p-color-stroke-subtle-on-white-grey: var(--p-color-grey-800);
    --p-color-stroke-subtle-hover: var(--p-color-red-200);
    --p-color-stroke-subtle-hover-white: var(--p-color-red-200);
    --p-color-stroke-subtle-hover-grey: var(--p-color-red-200);
    --p-color-stroke-subtle-pressed: var(--p-color-red-300);
    --p-color-stroke-subtle-pressed-white: var(--p-color-red-300);
    --p-color-stroke-subtle-pressed-grey: var(--p-color-red-300);
    --p-color-stroke-on-color: var(--p-color-red-900);
    --p-color-stroke-on-color-white: var(--p-color-red-900);
    --p-color-stroke-on-color-grey: var(--p-color-red-900);
    --p-color-stroke-interactive: var(--p-color-red-400);
    --p-color-stroke-interactive-white: var(--p-color-red-400);
    --p-color-stroke-interactive-grey: var(--p-color-red-400);
    --p-color-stroke-interactive-hover: var(--p-color-red-300);
    --p-color-stroke-interactive-hover-white: var(--p-color-red-300);
    --p-color-stroke-interactive-hover-grey: var(--p-color-red-300);
    --p-color-stroke-interactive-pressed: var(--p-color-red-200);
    --p-color-stroke-interactive-pressed-white: var(--p-color-red-200);
    --p-color-stroke-interactive-pressed-grey: var(--p-color-red-200);
    --p-color-stroke-selected: var(--p-color-red-300);
    --p-color-stroke-selected-white: var(--p-color-red-300);
    --p-color-stroke-selected-grey: var(--p-color-red-300);
    --p-color-stroke-selected-hover: var(--p-color-red-200);
    --p-color-stroke-selected-hover-white: var(--p-color-red-200);
    --p-color-stroke-selected-hover-grey: var(--p-color-red-200);
    --p-color-stroke-selected-pressed: var(--p-color-red-100);
    --p-color-stroke-selected-pressed-white: var(--p-color-red-100);
    --p-color-stroke-selected-pressed-grey: var(--p-color-red-100);
    --p-color-stroke-disabled: var(--p-color-grey-600);
    --p-color-stroke-disabled-white: var(--p-color-grey-600);
    --p-color-stroke-disabled-grey: var(--p-color-grey-500);
    --p-color-stroke-error: var(--p-color-red-400);
    --p-color-stroke-error-white: var(--p-color-red-400);
    --p-color-stroke-error-grey: var(--p-color-red-400);
    --p-color-stroke-success: var(--p-color-green-400);
    --p-color-stroke-success-white: var(--p-color-green-400);
    --p-color-stroke-success-grey: var(--p-color-green-400);
    --p-color-stroke-warning: var(--p-color-yellow-200);
    --p-color-stroke-warning-white: var(--p-color-yellow-200);
    --p-color-stroke-warning-grey: var(--p-color-yellow-200);
    --p-outline: 2px solid var(--p-color-states-focus);
    --p-outline-offset: 2px;
  }

  [data-theme="kron"] {
    --p-color-background: var(--p-color-grey-cold-000);
    --p-color-background-white: var(--p-color-grey-cold-000);
    --p-color-background-grey: var(--p-color-grey-cold-100);
    --p-color-background-hover: var(--p-color-grey-cold-100);
    --p-color-background-hover-white: var(--p-color-grey-cold-100);
    --p-color-background-hover-grey: var(--p-color-grey-cold-200);
    --p-color-background-pressed: var(--p-color-grey-cold-200);
    --p-color-background-pressed-white: var(--p-color-grey-cold-200);
    --p-color-background-pressed-grey: var(--p-color-grey-cold-300);
    --p-color-background-active: var(--p-color-red-600);
    --p-color-background-active-white: var(--p-color-red-600);
    --p-color-background-active-grey: var(--p-color-red-600);
    --p-color-background-disabled: var(--p-color-grey-cold-200);
    --p-color-background-disabled-white: var(--p-color-grey-cold-200);
    --p-color-background-disabled-grey: var(--p-color-grey-cold-300);
    --p-color-background-selected: var(--p-color-purple-700);
    --p-color-background-selected-white: var(--p-color-purple-700);
    --p-color-background-selected-grey: var(--p-color-purple-700);
    --p-color-background-selected-hover: var(--p-color-purple-800);
    --p-color-background-selected-hover-white: var(--p-color-purple-800);
    --p-color-background-selected-hover-grey: var(--p-color-purple-800);
    --p-color-background-selected-pressed: var(--p-color-purple-900);
    --p-color-background-selected-pressed-white: var(--p-color-purple-900);
    --p-color-background-selected-pressed-grey: var(--p-color-purple-900);
    --p-color-text-primary: var(--p-color-purple-900);
    --p-color-text-primary-white: var(--p-color-purple-900);
    --p-color-text-primary-grey: var(--p-color-purple-900);
    --p-color-text-primary-hover: var(--p-color-purple-800);
    --p-color-text-primary-hover-white: var(--p-color-purple-800);
    --p-color-text-primary-hover-grey: var(--p-color-purple-800);
    --p-color-text-primary-pressed: var(--p-color-purple-700);
    --p-color-text-primary-pressed-white: var(--p-color-purple-700);
    --p-color-text-primary-pressed-grey: var(--p-color-purple-700);
    --p-color-text-primary-active: var(--p-color-purple-700);
    --p-color-text-primary-active-white: var(--p-color-purple-700);
    --p-color-text-primary-active-grey: var(--p-color-purple-700);
    --p-color-text-interactive: var(--p-color-purple-800);
    --p-color-text-interactive-white: var(--p-color-purple-800);
    --p-color-text-interactive-grey: var(--p-color-purple-800);
    --p-color-text-interactive-hover: var(--p-color-purple-600);
    --p-color-text-interactive-hover-white: var(--p-color-purple-600);
    --p-color-text-interactive-hover-grey: var(--p-color-purple-600);
    --p-color-text-interactive-pressed: var(--p-color-purple-700);
    --p-color-text-interactive-pressed-white: var(--p-color-purple-700);
    --p-color-text-interactive-pressed-grey: var(--p-color-purple-700);
    --p-color-text-interactive-active: var(--p-color-purple-700);
    --p-color-text-interactive-active-white: var(--p-color-purple-700);
    --p-color-text-interactive-active-grey: var(--p-color-purple-700);
    --p-color-text-selected: var(--p-color-purple-700);
    --p-color-text-selected-white: var(--p-color-purple-700);
    --p-color-text-selected-grey: var(--p-color-purple-700);
    --p-color-text-selected-hover: var(--p-color-purple-800);
    --p-color-text-selected-hover-white: var(--p-color-purple-800);
    --p-color-text-selected-hover-grey: var(--p-color-purple-800);
    --p-color-text-selected-pressed: var(--p-color-purple-900);
    --p-color-text-selected-pressed-white: var(--p-color-purple-900);
    --p-color-text-selected-pressed-grey: var(--p-color-purple-900);
    --p-color-text-secondary: var(--p-color-grey-cold-700);
    --p-color-text-secondary-white: var(--p-color-grey-cold-700);
    --p-color-text-secondary-grey: var(--p-color-grey-cold-700);
    --p-color-text-placeholder: var(--p-color-grey-cold-600);
    --p-color-text-placeholder-white: var(--p-color-grey-cold-600);
    --p-color-text-placeholder-grey: var(--p-color-grey-cold-600);
    --p-color-text-on-color: var(--p-color-purple-100);
    --p-color-text-on-color-white: var(--p-color-purple-100);
    --p-color-text-on-color-grey: var(--p-color-purple-100);
    --p-color-text-disabled: var(--p-color-grey-cold-500);
    --p-color-text-disabled-white: var(--p-color-grey-cold-500);
    --p-color-text-disabled-grey: var(--p-color-grey-cold-500);
    --p-color-text-error: var(--p-color-red-600);
    --p-color-text-alert: var(--p-color-grey-cold-900);
    --p-color-text-alert-white: var(--p-color-grey-cold-900);
    --p-color-text-alert-grey: var(--p-color-grey-cold-900);
    --p-color-text-on-brand: var(--p-color-purple-100);
    --p-color-text-on-brand-white: var(--p-color-purple-100);
    --p-color-text-on-brand-grey: var(--p-color-purple-100);
    --p-color-text-on-error: var(--p-color-red-800);
    --p-color-text-on-info: var(--p-color-purple-900);
    --p-color-text-on-warning: var(--p-color-yellow-900);
    --p-color-text-on-success: var(--p-color-green-900);
    --p-color-icon-primary: var(--p-color-purple-900);
    --p-color-icon-primary-white: var(--p-color-purple-900);
    --p-color-icon-primary-grey: var(--p-color-purple-900);
    --p-color-icon-primary-hover: var(--p-color-purple-800);
    --p-color-icon-primary-hover-white: var(--p-color-purple-800);
    --p-color-icon-primary-hover-grey: var(--p-color-purple-800);
    --p-color-icon-primary-active: var(--p-color-purple-700);
    --p-color-icon-primary-active-white: var(--p-color-purple-700);
    --p-color-icon-primary-active-grey: var(--p-color-purple-700);
    --p-color-icon-primary-pressed: var(--p-color-purple-700);
    --p-color-icon-primary-pressed-white: var(--p-color-purple-700);
    --p-color-icon-primary-pressed-grey: var(--p-color-purple-700);
    --p-color-icon-interactive: var(--p-color-purple-800);
    --p-color-icon-interactive-white: var(--p-color-purple-800);
    --p-color-icon-interactive-grey: var(--p-color-purple-800);
    --p-color-icon-interactive-hover: var(--p-color-purple-600);
    --p-color-icon-interactive-hover-white: var(--p-color-purple-600);
    --p-color-icon-interactive-hover-grey: var(--p-color-purple-600);
    --p-color-icon-interactive-pressed: var(--p-color-purple-700);
    --p-color-icon-interactive-pressed-white: var(--p-color-purple-700);
    --p-color-icon-interactive-pressed-grey: var(--p-color-purple-700);
    --p-color-icon-interactive-active: var(--p-color-purple-700);
    --p-color-icon-interactive-active-white: var(--p-color-purple-700);
    --p-color-icon-interactive-active-grey: var(--p-color-purple-700);
    --p-color-icon-on-color: var(--p-color-purple-100);
    --p-color-icon-on-color-white: var(--p-color-purple-100);
    --p-color-icon-on-color-grey: var(--p-color-purple-100);
    --p-color-icon-disabled: var(--p-color-grey-cold-500);
    --p-color-icon-disabled-white: var(--p-color-grey-cold-500);
    --p-color-icon-disabled-grey: var(--p-color-grey-cold-500);
    --p-color-icon-error: var(--p-color-red-600);
    --p-color-icon-error-white: var(--p-color-red-600);
    --p-color-icon-error-grey: var(--p-color-red-600);
    --p-color-icon-success: var(--p-color-green-600);
    --p-color-icon-success-white: var(--p-color-green-600);
    --p-color-icon-success-grey: var(--p-color-green-600);
    --p-color-icon-warning: var(--p-color-yellow-600);
    --p-color-icon-warning-white: var(--p-color-yellow-600);
    --p-color-icon-warning-grey: var(--p-color-yellow-600);
    --p-color-icon-info: var(--p-color-purple-600);
    --p-color-icon-info-white: var(--p-color-purple-600);
    --p-color-icon-info-grey: var(--p-color-purple-600);
    --p-color-icon-neutral: var(--p-color-grey-cold-900);
    --p-color-icon-neutral-white: var(--p-color-grey-cold-900);
    --p-color-icon-neutral-grey: var(--p-color-grey-cold-900);
    --p-color-icon-on-brand: var(--p-color-purple-100);
    --p-color-icon-on-brand-white: var(--p-color-purple-100);
    --p-color-icon-on-brand-grey: var(--p-color-purple-100);
    --p-color-icon-on-error: var(--p-color-red-800);
    --p-color-icon-on-info: var(--p-color-purple-900);
    --p-color-icon-on-warning: var(--p-color-yellow-900);
    --p-color-icon-on-success: var(--p-color-green-900);
    --p-color-button-brand-fill: var(--p-color-purple-900);
    --p-color-button-brand-fill-white: var(--p-color-purple-900);
    --p-color-button-brand-fill-grey: var(--p-color-purple-900);
    --p-color-button-brand-fill-hover: var(--p-color-purple-800);
    --p-color-button-brand-fill-hover-white: var(--p-color-purple-800);
    --p-color-button-brand-fill-hover-grey: var(--p-color-purple-800);
    --p-color-button-brand-fill-pressed: var(--p-color-purple-800);
    --p-color-button-brand-fill-pressed-white: var(--p-color-purple-800);
    --p-color-button-brand-fill-pressed-grey: var(--p-color-purple-800);
    --p-color-button-brand-fill-active: var(--p-color-purple-800);
    --p-color-button-brand-fill-active-white: var(--p-color-purple-800);
    --p-color-button-brand-fill-active-grey: var(--p-color-purple-800);
    --p-color-button-action-fill: var(--p-color-purple-800);
    --p-color-button-action-fill-white: var(--p-color-purple-800);
    --p-color-button-action-fill-grey: var(--p-color-purple-800);
    --p-color-button-action-fill-hover: var(--p-color-purple-600);
    --p-color-button-action-fill-hover-white: var(--p-color-purple-600);
    --p-color-button-action-fill-hover-grey: var(--p-color-purple-600);
    --p-color-button-action-fill-pressed: var(--p-color-purple-700);
    --p-color-button-action-fill-pressed-white: var(--p-color-purple-700);
    --p-color-button-action-fill-pressed-grey: var(--p-color-purple-700);
    --p-color-button-action-fill-active: var(--p-color-purple-700);
    --p-color-button-action-fill-active-white: var(--p-color-purple-700);
    --p-color-button-action-fill-active-grey: var(--p-color-purple-700);
    --p-color-button-disabled: var(--p-color-grey-cold-200);
    --p-color-button-disabled-white: var(--p-color-grey-cold-200);
    --p-color-button-disabled-grey: var(--p-color-grey-cold-300);
    --p-color-graphics-illustration-primary: var(--p-color-red-600);
    --p-color-graphics-illustration-primary-white: var(--p-color-red-600);
    --p-color-graphics-illustration-primary-grey: var(--p-color-red-600);
    --p-color-graphics-illustration-detail: var(--p-color-logo-red);
    --p-color-graphics-illustration-detail-white: var(--p-color-logo-red);
    --p-color-graphics-illustration-detail-grey: var(--p-color-logo-red);
    --p-color-graphics-illustration-base: var(--p-color-purple-900);
    --p-color-graphics-illustration-base-white: var(--p-color-purple-900);
    --p-color-graphics-illustration-base-grey: var(--p-color-purple-900);
    --p-color-graphics-illustration-white: var(--p-color-grey-cold-000);
    --p-color-graphics-illustration-white-white: var(--p-color-grey-cold-000);
    --p-color-graphics-illustration-white-grey: var(--p-color-grey-cold-000);
    --p-color-graphics-storebrand-icon-detail: var(--p-color-logo-red);
    --p-color-graphics-storebrand-icon-detail-white: var(--p-color-logo-red);
    --p-color-graphics-storebrand-icon-detail-grey: var(--p-color-logo-red);
    --p-color-graphics-storebrand-icon-outline: var(--p-color-red-800);
    --p-color-graphics-storebrand-icon-outline-white: var(--p-color-red-800);
    --p-color-graphics-storebrand-icon-outline-grey: var(--p-color-red-800);
    --p-color-static-brand-foreground: var(--p-color-purple-600);
    --p-color-static-brand-foreground-white: var(--p-color-purple-600);
    --p-color-static-brand-foreground-grey: var(--p-color-purple-600);
    --p-color-static-brand-background: var(--p-color-purple-200);
    --p-color-static-brand-background-white: var(--p-color-purple-200);
    --p-color-static-brand-background-grey: var(--p-color-purple-200);
    --p-color-static-orange-foreground: var(--p-color-orange-600);
    --p-color-static-orange-foreground-white: var(--p-color-orange-600);
    --p-color-static-orange-foreground-grey: var(--p-color-orange-600);
    --p-color-static-orange-background: var(--p-color-orange-200);
    --p-color-static-orange-background-white: var(--p-color-orange-200);
    --p-color-static-orange-background-grey: var(--p-color-orange-300);
    --p-color-static-purple-foreground: var(--p-color-purple-600);
    --p-color-static-purple-foreground-white: var(--p-color-purple-600);
    --p-color-static-purple-foreground-grey: var(--p-color-purple-600);
    --p-color-static-purple-background: var(--p-color-purple-200);
    --p-color-static-purple-background-white: var(--p-color-purple-200);
    --p-color-static-purple-background-grey: var(--p-color-purple-300);
    --p-color-static-red-foreground: var(--p-color-red-600);
    --p-color-static-red-foreground-white: var(--p-color-red-600);
    --p-color-static-red-foreground-grey: var(--p-color-red-600);
    --p-color-static-red-background: var(--p-color-red-200);
    --p-color-static-red-background-white: var(--p-color-red-200);
    --p-color-static-red-background-grey: var(--p-color-red-200);
    --p-color-static-grey-foreground: var(--p-color-grey-cold-600);
    --p-color-static-grey-foreground-white: var(--p-color-grey-cold-600);
    --p-color-static-grey-foreground-grey: var(--p-color-grey-cold-600);
    --p-color-static-grey-background: var(--p-color-grey-cold-200);
    --p-color-static-grey-background-white: var(--p-color-grey-cold-200);
    --p-color-static-grey-background-grey: var(--p-color-grey-cold-300);
    --p-color-static-risk-filled: var(--p-color-orange-600);
    --p-color-static-risk-filled-white: var(--p-color-orange-600);
    --p-color-static-risk-filled-grey: var(--p-color-orange-600);
    --p-color-static-risk-unfilled: var(--p-color-orange-200);
    --p-color-static-risk-unfilled-white: var(--p-color-orange-200);
    --p-color-static-risk-unfilled-grey: var(--p-color-orange-300);
    --p-color-static-sustainability-filled: var(--p-color-purple-600);
    --p-color-static-sustainability-filled-white: var(--p-color-purple-600);
    --p-color-static-sustainability-filled-grey: var(--p-color-purple-600);
    --p-color-static-sustainability-unfilled: var(--p-color-purple-200);
    --p-color-static-sustainability-unfilled-white: var(--p-color-purple-200);
    --p-color-static-sustainability-unfilled-grey: var(--p-color-purple-300);
    --p-color-states-focus: var(--p-color-focus-1);
    --p-color-states-focus-white: var(--p-color-focus-1);
    --p-color-states-focus-grey: var(--p-color-focus-1);
    --p-color-states-scrim: var(--p-color-scrim-1);
    --p-color-states-scrim-white: var(--p-color-scrim-1);
    --p-color-states-scrim-grey: var(--p-color-scrim-1);
    --p-color-states-toggle-off: var(--p-color-grey-cold-400);
    --p-color-states-toggle-off-white: var(--p-color-grey-cold-400);
    --p-color-states-toggle-off-grey: var(--p-color-grey-cold-500);
    --p-color-states-toggle-off-hover: var(--p-color-grey-cold-300);
    --p-color-states-toggle-off-hover-white: var(--p-color-grey-cold-300);
    --p-color-states-toggle-off-hover-grey: var(--p-color-grey-cold-400);
    --p-color-surface-1: var(--p-color-grey-cold-100);
    --p-color-surface-1-white: var(--p-color-grey-cold-100);
    --p-color-surface-1-grey: var(--p-color-grey-cold-000);
    --p-color-surface-2: var(--p-color-grey-cold-000);
    --p-color-surface-2-white: var(--p-color-grey-cold-000);
    --p-color-surface-2-grey: var(--p-color-grey-cold-100);
    --p-color-surface-1-hover: var(--p-color-grey-cold-200);
    --p-color-surface-1-hover-white: var(--p-color-grey-cold-200);
    --p-color-surface-1-hover-grey: var(--p-color-grey-cold-200);
    --p-color-surface-2-hover: var(--p-color-grey-cold-200);
    --p-color-surface-2-hover-white: var(--p-color-grey-cold-200);
    --p-color-surface-2-hover-grey: var(--p-color-grey-cold-200);
    --p-color-surface-inverse: var(--p-color-purple-900);
    --p-color-surface-inverse-white: var(--p-color-purple-900);
    --p-color-surface-inverse-grey: var(--p-color-purple-900);
    --p-color-surface-inverse-hover: var(--p-color-purple-800);
    --p-color-surface-inverse-hover-white: var(--p-color-purple-800);
    --p-color-surface-inverse-hover-grey: var(--p-color-purple-800);
    --p-color-surface-inverse-pressed: var(--p-color-purple-700);
    --p-color-surface-inverse-pressed-white: var(--p-color-purple-700);
    --p-color-surface-inverse-pressed-grey: var(--p-color-purple-700);
    --p-color-surface-selected: var(--p-color-purple-600);
    --p-color-surface-selected-white: var(--p-color-purple-600);
    --p-color-surface-selected-grey: var(--p-color-purple-600);
    --p-color-surface-selected-hover: var(--p-color-purple-700);
    --p-color-surface-selected-hover-white: var(--p-color-purple-700);
    --p-color-surface-selected-hover-grey: var(--p-color-purple-700);
    --p-color-surface-selected-pressed: var(--p-color-purple-800);
    --p-color-surface-selected-pressed-white: var(--p-color-purple-800);
    --p-color-surface-selected-pressed-grey: var(--p-color-purple-800);
    --p-color-surface-selected-active: var(--p-color-purple-800);
    --p-color-surface-selected-active-white: var(--p-color-purple-800);
    --p-color-surface-selected-active-grey: var(--p-color-purple-800);
    --p-color-surface-error: var(--p-color-red-200);
    --p-color-surface-error-white: var(--p-color-red-200);
    --p-color-surface-error-grey: var(--p-color-red-200);
    --p-color-surface-success: var(--p-color-green-200);
    --p-color-surface-success-white: var(--p-color-green-200);
    --p-color-surface-success-grey: var(--p-color-green-200);
    --p-color-surface-warning: var(--p-color-yellow-200);
    --p-color-surface-warning-white: var(--p-color-yellow-200);
    --p-color-surface-warning-grey: var(--p-color-yellow-200);
    --p-color-surface-info: var(--p-color-purple-200);
    --p-color-surface-info-white: var(--p-color-purple-200);
    --p-color-surface-info-grey: var(--p-color-purple-200);
    --p-color-surface-neutral: var(--p-color-grey-cold-100);
    --p-color-surface-neutral-white: var(--p-color-grey-cold-000);
    --p-color-surface-neutral-grey: var(--p-color-grey-cold-100);
    --p-color-surface-static: var(--p-color-grey-cold-000);
    --p-color-surface-static-white: var(--p-color-grey-cold-000);
    --p-color-surface-static-grey: var(--p-color-grey-cold-000);
    --p-color-stroke-strong: var(--p-color-purple-900);
    --p-color-stroke-strong-white: var(--p-color-purple-900);
    --p-color-stroke-strong-grey: var(--p-color-purple-900);
    --p-color-stroke-strong-hover: var(--p-color-purple-800);
    --p-color-stroke-strong-hover-white: var(--p-color-purple-800);
    --p-color-stroke-strong-hover-grey: var(--p-color-purple-800);
    --p-color-stroke-strong-pressed: var(--p-color-purple-700);
    --p-color-stroke-strong-pressed-white: var(--p-color-purple-700);
    --p-color-stroke-strong-pressed-grey: var(--p-color-purple-700);
    --p-color-stroke-0: var(--p-color-grey-cold-300);
    --p-color-stroke-0-white: var(--p-color-grey-cold-300);
    --p-color-stroke-0-grey: var(--p-color-grey-cold-400);
    --p-color-stroke-1: var(--p-color-grey-cold-400);
    --p-color-stroke-1-white: var(--p-color-grey-cold-400);
    --p-color-stroke-1-grey: var(--p-color-grey-cold-300);
    --p-color-stroke-2: var(--p-color-grey-cold-300);
    --p-color-stroke-2-white: var(--p-color-grey-cold-300);
    --p-color-stroke-2-grey: var(--p-color-grey-cold-400);
    --p-color-stroke-on-white: var(--p-color-grey-cold-300);
    --p-color-stroke-on-white-white: var(--p-color-grey-cold-300);
    --p-color-stroke-on-white-grey: var(--p-color-grey-cold-300);
    --p-color-stroke-subtle-0: var(--p-color-grey-cold-200);
    --p-color-stroke-subtle-0-white: var(--p-color-grey-cold-200);
    --p-color-stroke-subtle-0-grey: var(--p-color-grey-cold-300);
    --p-color-stroke-subtle-1: var(--p-color-grey-cold-300);
    --p-color-stroke-subtle-1-white: var(--p-color-grey-cold-300);
    --p-color-stroke-subtle-1-grey: var(--p-color-grey-cold-200);
    --p-color-stroke-subtle-2: var(--p-color-grey-cold-200);
    --p-color-stroke-subtle-2-white: var(--p-color-grey-cold-200);
    --p-color-stroke-subtle-2-grey: var(--p-color-grey-cold-300);
    --p-color-stroke-subtle-on-white: var(--p-color-grey-cold-200);
    --p-color-stroke-subtle-on-white-white: var(--p-color-grey-cold-200);
    --p-color-stroke-subtle-on-white-grey: var(--p-color-grey-cold-200);
    --p-color-stroke-on-color: var(--p-color-purple-100);
    --p-color-stroke-on-color-white: var(--p-color-purple-100);
    --p-color-stroke-on-color-grey: var(--p-color-purple-100);
    --p-color-stroke-interactive: var(--p-color-purple-600);
    --p-color-stroke-interactive-white: var(--p-color-purple-600);
    --p-color-stroke-interactive-grey: var(--p-color-purple-600);
    --p-color-stroke-interactive-hover: var(--p-color-purple-700);
    --p-color-stroke-interactive-hover-white: var(--p-color-purple-700);
    --p-color-stroke-interactive-hover-grey: var(--p-color-purple-700);
    --p-color-stroke-interactive-pressed: var(--p-color-purple-800);
    --p-color-stroke-interactive-pressed-white: var(--p-color-purple-800);
    --p-color-stroke-interactive-pressed-grey: var(--p-color-purple-800);
    --p-color-stroke-selected: var(--p-color-purple-700);
    --p-color-stroke-selected-white: var(--p-color-purple-700);
    --p-color-stroke-selected-grey: var(--p-color-purple-700);
    --p-color-stroke-selected-hover: var(--p-color-purple-800);
    --p-color-stroke-selected-hover-white: var(--p-color-purple-800);
    --p-color-stroke-selected-hover-grey: var(--p-color-purple-800);
    --p-color-stroke-selected-pressed: var(--p-color-purple-900);
    --p-color-stroke-selected-pressed-white: var(--p-color-purple-900);
    --p-color-stroke-selected-pressed-grey: var(--p-color-purple-900);
    --p-color-stroke-disabled: var(--p-color-grey-cold-400);
    --p-color-stroke-disabled-white: var(--p-color-grey-cold-400);
    --p-color-stroke-disabled-grey: var(--p-color-grey-cold-500);
    --p-color-stroke-error: var(--p-color-red-600);
    --p-color-stroke-error-white: var(--p-color-red-600);
    --p-color-stroke-error-grey: var(--p-color-red-600);
    --p-color-stroke-success: var(--p-color-green-600);
    --p-color-stroke-success-white: var(--p-color-green-600);
    --p-color-stroke-success-grey: var(--p-color-green-600);
    --p-color-stroke-warning: var(--p-color-yellow-600);
    --p-color-stroke-warning-white: var(--p-color-yellow-600);
    --p-color-stroke-warning-grey: var(--p-color-yellow-600);
    --p-outline: 2px solid var(--p-color-states-focus);
    --p-outline-offset: 2px;
  }

  @media (prefers-color-scheme: dark) {
    [data-theme="kron"] {
      --p-color-background: var(--p-color-grey-cold-1000);
      --p-color-background-white: var(--p-color-grey-cold-1000);
      --p-color-background-grey: var(--p-color-grey-cold-900);
      --p-color-background-hover: var(--p-color-grey-cold-900);
      --p-color-background-hover-white: var(--p-color-grey-cold-900);
      --p-color-background-hover-grey: var(--p-color-grey-cold-800);
      --p-color-background-pressed: var(--p-color-grey-cold-800);
      --p-color-background-pressed-white: var(--p-color-grey-cold-800);
      --p-color-background-pressed-grey: var(--p-color-grey-cold-700);
      --p-color-background-active: var(--p-color-red-400);
      --p-color-background-active-white: var(--p-color-red-400);
      --p-color-background-active-grey: var(--p-color-red-400);
      --p-color-background-disabled: var(--p-color-grey-cold-800);
      --p-color-background-disabled-white: var(--p-color-grey-cold-800);
      --p-color-background-disabled-grey: var(--p-color-grey-cold-700);
      --p-color-background-selected: var(--p-color-purple-300);
      --p-color-background-selected-white: var(--p-color-purple-300);
      --p-color-background-selected-grey: var(--p-color-purple-300);
      --p-color-background-selected-hover: var(--p-color-purple-200);
      --p-color-background-selected-hover-white: var(--p-color-purple-200);
      --p-color-background-selected-hover-grey: var(--p-color-purple-200);
      --p-color-background-selected-pressed: var(--p-color-purple-100);
      --p-color-background-selected-pressed-white: var(--p-color-purple-100);
      --p-color-background-selected-pressed-grey: var(--p-color-purple-100);
      --p-color-text-primary: var(--p-color-purple-100);
      --p-color-text-primary-white: var(--p-color-purple-100);
      --p-color-text-primary-grey: var(--p-color-purple-100);
      --p-color-text-primary-hover: var(--p-color-purple-200);
      --p-color-text-primary-hover-white: var(--p-color-purple-200);
      --p-color-text-primary-hover-grey: var(--p-color-purple-200);
      --p-color-text-primary-pressed: var(--p-color-purple-300);
      --p-color-text-primary-pressed-white: var(--p-color-purple-300);
      --p-color-text-primary-pressed-grey: var(--p-color-purple-300);
      --p-color-text-primary-active: var(--p-color-purple-300);
      --p-color-text-primary-active-white: var(--p-color-purple-300);
      --p-color-text-primary-active-grey: var(--p-color-purple-300);
      --p-color-text-interactive: var(--p-color-purple-200);
      --p-color-text-interactive-white: var(--p-color-purple-200);
      --p-color-text-interactive-grey: var(--p-color-purple-200);
      --p-color-text-interactive-hover: var(--p-color-purple-400);
      --p-color-text-interactive-hover-white: var(--p-color-purple-400);
      --p-color-text-interactive-hover-grey: var(--p-color-purple-400);
      --p-color-text-interactive-pressed: var(--p-color-purple-300);
      --p-color-text-interactive-pressed-white: var(--p-color-purple-300);
      --p-color-text-interactive-pressed-grey: var(--p-color-purple-300);
      --p-color-text-interactive-active: var(--p-color-purple-300);
      --p-color-text-interactive-active-white: var(--p-color-purple-300);
      --p-color-text-interactive-active-grey: var(--p-color-purple-300);
      --p-color-text-selected: var(--p-color-purple-300);
      --p-color-text-selected-white: var(--p-color-purple-300);
      --p-color-text-selected-grey: var(--p-color-purple-300);
      --p-color-text-selected-hover: var(--p-color-purple-200);
      --p-color-text-selected-hover-white: var(--p-color-purple-200);
      --p-color-text-selected-hover-grey: var(--p-color-purple-200);
      --p-color-text-selected-pressed: var(--p-color-purple-100);
      --p-color-text-selected-pressed-white: var(--p-color-purple-100);
      --p-color-text-selected-pressed-grey: var(--p-color-purple-100);
      --p-color-text-secondary: var(--p-color-grey-cold-300);
      --p-color-text-secondary-white: var(--p-color-grey-cold-300);
      --p-color-text-secondary-grey: var(--p-color-grey-cold-300);
      --p-color-text-placeholder: var(--p-color-grey-cold-400);
      --p-color-text-placeholder-white: var(--p-color-grey-cold-400);
      --p-color-text-placeholder-grey: var(--p-color-grey-cold-400);
      --p-color-text-on-color: var(--p-color-purple-900);
      --p-color-text-on-color-white: var(--p-color-purple-900);
      --p-color-text-on-color-grey: var(--p-color-purple-900);
      --p-color-text-disabled: var(--p-color-grey-cold-700);
      --p-color-text-disabled-white: var(--p-color-grey-cold-700);
      --p-color-text-disabled-grey: var(--p-color-grey-cold-700);
      --p-color-text-error: var(--p-color-red-400);
      --p-color-text-alert: var(--p-color-grey-cold-100);
      --p-color-text-alert-white: var(--p-color-grey-cold-100);
      --p-color-text-alert-grey: var(--p-color-grey-cold-100);
      --p-color-text-on-brand: var(--p-color-purple-900);
      --p-color-text-on-brand-white: var(--p-color-purple-900);
      --p-color-text-on-brand-grey: var(--p-color-purple-900);
      --p-color-text-on-error: var(--p-color-red-200);
      --p-color-text-on-info: var(--p-color-purple-100);
      --p-color-text-on-warning: var(--p-color-yellow-100);
      --p-color-text-on-success: var(--p-color-green-100);
      --p-color-icon-primary: var(--p-color-purple-100);
      --p-color-icon-primary-white: var(--p-color-purple-100);
      --p-color-icon-primary-grey: var(--p-color-purple-100);
      --p-color-icon-primary-hover: var(--p-color-purple-200);
      --p-color-icon-primary-hover-white: var(--p-color-purple-200);
      --p-color-icon-primary-hover-grey: var(--p-color-purple-200);
      --p-color-icon-primary-active: var(--p-color-purple-300);
      --p-color-icon-primary-active-white: var(--p-color-purple-300);
      --p-color-icon-primary-active-grey: var(--p-color-purple-300);
      --p-color-icon-primary-pressed: var(--p-color-purple-300);
      --p-color-icon-primary-pressed-white: var(--p-color-purple-300);
      --p-color-icon-primary-pressed-grey: var(--p-color-purple-300);
      --p-color-icon-interactive: var(--p-color-purple-200);
      --p-color-icon-interactive-white: var(--p-color-purple-200);
      --p-color-icon-interactive-grey: var(--p-color-purple-200);
      --p-color-icon-interactive-hover: var(--p-color-purple-400);
      --p-color-icon-interactive-hover-white: var(--p-color-purple-400);
      --p-color-icon-interactive-hover-grey: var(--p-color-purple-400);
      --p-color-icon-interactive-pressed: var(--p-color-purple-300);
      --p-color-icon-interactive-pressed-white: var(--p-color-purple-300);
      --p-color-icon-interactive-pressed-grey: var(--p-color-purple-300);
      --p-color-icon-interactive-active: var(--p-color-purple-300);
      --p-color-icon-interactive-active-white: var(--p-color-purple-300);
      --p-color-icon-interactive-active-grey: var(--p-color-purple-300);
      --p-color-icon-on-color: var(--p-color-purple-900);
      --p-color-icon-on-color-white: var(--p-color-purple-900);
      --p-color-icon-on-color-grey: var(--p-color-purple-900);
      --p-color-icon-disabled: var(--p-color-grey-cold-700);
      --p-color-icon-disabled-white: var(--p-color-grey-cold-700);
      --p-color-icon-disabled-grey: var(--p-color-grey-cold-700);
      --p-color-icon-error: var(--p-color-red-400);
      --p-color-icon-error-white: var(--p-color-red-400);
      --p-color-icon-error-grey: var(--p-color-red-400);
      --p-color-icon-success: var(--p-color-green-400);
      --p-color-icon-success-white: var(--p-color-green-400);
      --p-color-icon-success-grey: var(--p-color-green-400);
      --p-color-icon-warning: var(--p-color-yellow-400);
      --p-color-icon-warning-white: var(--p-color-yellow-400);
      --p-color-icon-warning-grey: var(--p-color-yellow-400);
      --p-color-icon-info: var(--p-color-purple-400);
      --p-color-icon-info-white: var(--p-color-purple-400);
      --p-color-icon-info-grey: var(--p-color-purple-400);
      --p-color-icon-neutral: var(--p-color-grey-cold-100);
      --p-color-icon-neutral-white: var(--p-color-grey-cold-100);
      --p-color-icon-neutral-grey: var(--p-color-grey-cold-100);
      --p-color-icon-on-brand: var(--p-color-purple-900);
      --p-color-icon-on-brand-white: var(--p-color-purple-900);
      --p-color-icon-on-brand-grey: var(--p-color-purple-900);
      --p-color-icon-on-error: var(--p-color-red-200);
      --p-color-icon-on-info: var(--p-color-purple-100);
      --p-color-icon-on-warning: var(--p-color-yellow-100);
      --p-color-icon-on-success: var(--p-color-green-100);
      --p-color-button-brand-fill: var(--p-color-purple-400);
      --p-color-button-brand-fill-white: var(--p-color-purple-400);
      --p-color-button-brand-fill-grey: var(--p-color-purple-400);
      --p-color-button-brand-fill-hover: var(--p-color-purple-300);
      --p-color-button-brand-fill-hover-white: var(--p-color-purple-300);
      --p-color-button-brand-fill-hover-grey: var(--p-color-purple-300);
      --p-color-button-brand-fill-pressed: var(--p-color-purple-200);
      --p-color-button-brand-fill-pressed-white: var(--p-color-purple-200);
      --p-color-button-brand-fill-pressed-grey: var(--p-color-purple-200);
      --p-color-button-brand-fill-active: var(--p-color-purple-200);
      --p-color-button-brand-fill-active-white: var(--p-color-purple-200);
      --p-color-button-brand-fill-active-grey: var(--p-color-purple-200);
      --p-color-button-action-fill: var(--p-color-purple-200);
      --p-color-button-action-fill-white: var(--p-color-purple-200);
      --p-color-button-action-fill-grey: var(--p-color-purple-200);
      --p-color-button-action-fill-hover: var(--p-color-purple-400);
      --p-color-button-action-fill-hover-white: var(--p-color-purple-400);
      --p-color-button-action-fill-hover-grey: var(--p-color-purple-400);
      --p-color-button-action-fill-pressed: var(--p-color-purple-300);
      --p-color-button-action-fill-pressed-white: var(--p-color-purple-300);
      --p-color-button-action-fill-pressed-grey: var(--p-color-purple-300);
      --p-color-button-action-fill-active: var(--p-color-purple-300);
      --p-color-button-action-fill-active-white: var(--p-color-purple-300);
      --p-color-button-action-fill-active-grey: var(--p-color-purple-300);
      --p-color-button-disabled: var(--p-color-grey-cold-500);
      --p-color-button-disabled-white: var(--p-color-grey-cold-500);
      --p-color-button-disabled-grey: var(--p-color-grey-cold-600);
      --p-color-graphics-illustration-primary: var(--p-color-red-400);
      --p-color-graphics-illustration-primary-white: var(--p-color-red-400);
      --p-color-graphics-illustration-primary-grey: var(--p-color-red-400);
      --p-color-graphics-illustration-detail: var(--p-color-logo-red);
      --p-color-graphics-illustration-detail-white: var(--p-color-logo-red);
      --p-color-graphics-illustration-detail-grey: var(--p-color-logo-red);
      --p-color-graphics-illustration-base: var(--p-color-purple-100);
      --p-color-graphics-illustration-base-white: var(--p-color-purple-100);
      --p-color-graphics-illustration-base-grey: var(--p-color-purple-100);
      --p-color-graphics-illustration-white: var(--p-color-grey-cold-1000);
      --p-color-graphics-illustration-white-white: var(--p-color-grey-cold-1000);
      --p-color-graphics-illustration-white-grey: var(--p-color-grey-cold-1000);
      --p-color-graphics-storebrand-icon-detail: var(--p-color-logo-red);
      --p-color-graphics-storebrand-icon-detail-white: var(--p-color-logo-red);
      --p-color-graphics-storebrand-icon-detail-grey: var(--p-color-logo-red);
      --p-color-graphics-storebrand-icon-outline: var(--p-color-red-200);
      --p-color-graphics-storebrand-icon-outline-white: var(--p-color-red-200);
      --p-color-graphics-storebrand-icon-outline-grey: var(--p-color-red-200);
      --p-color-static-brand-foreground: var(--p-color-purple-400);
      --p-color-static-brand-foreground-white: var(--p-color-purple-400);
      --p-color-static-brand-foreground-grey: var(--p-color-purple-400);
      --p-color-static-brand-background: var(--p-color-purple-800);
      --p-color-static-brand-background-white: var(--p-color-purple-800);
      --p-color-static-brand-background-grey: var(--p-color-purple-800);
      --p-color-static-orange-foreground: var(--p-color-orange-400);
      --p-color-static-orange-foreground-white: var(--p-color-orange-400);
      --p-color-static-orange-foreground-grey: var(--p-color-orange-400);
      --p-color-static-orange-background: var(--p-color-orange-800);
      --p-color-static-orange-background-white: var(--p-color-orange-800);
      --p-color-static-orange-background-grey: var(--p-color-orange-700);
      --p-color-static-purple-foreground: var(--p-color-purple-400);
      --p-color-static-purple-foreground-white: var(--p-color-purple-400);
      --p-color-static-purple-foreground-grey: var(--p-color-purple-400);
      --p-color-static-purple-background: var(--p-color-purple-800);
      --p-color-static-purple-background-white: var(--p-color-purple-800);
      --p-color-static-purple-background-grey: var(--p-color-purple-700);
      --p-color-static-red-foreground: var(--p-color-red-400);
      --p-color-static-red-foreground-white: var(--p-color-red-400);
      --p-color-static-red-foreground-grey: var(--p-color-red-400);
      --p-color-static-red-background: var(--p-color-red-800);
      --p-color-static-red-background-white: var(--p-color-red-800);
      --p-color-static-red-background-grey: var(--p-color-red-800);
      --p-color-static-grey-foreground: var(--p-color-grey-cold-400);
      --p-color-static-grey-foreground-white: var(--p-color-grey-cold-400);
      --p-color-static-grey-foreground-grey: var(--p-color-grey-cold-400);
      --p-color-static-grey-background: var(--p-color-grey-cold-800);
      --p-color-static-grey-background-white: var(--p-color-grey-cold-800);
      --p-color-static-grey-background-grey: var(--p-color-grey-cold-700);
      --p-color-static-risk-filled: var(--p-color-orange-300);
      --p-color-static-risk-filled-white: var(--p-color-orange-300);
      --p-color-static-risk-filled-grey: var(--p-color-orange-300);
      --p-color-static-risk-unfilled: var(--p-color-orange-pale-800);
      --p-color-static-risk-unfilled-white: var(--p-color-orange-pale-800);
      --p-color-static-risk-unfilled-grey: var(--p-color-orange-pale-800);
      --p-color-static-sustainability-filled: var(--p-color-purple-300);
      --p-color-static-sustainability-filled-white: var(--p-color-purple-300);
      --p-color-static-sustainability-filled-grey: var(--p-color-purple-300);
      --p-color-static-sustainability-unfilled: var(--p-color-purple-pale-800);
      --p-color-static-sustainability-unfilled-white: var(--p-color-purple-pale-800);
      --p-color-static-sustainability-unfilled-grey: var(--p-color-purple-pale-800);
      --p-color-states-focus: var(--p-color-focus-1);
      --p-color-states-focus-white: var(--p-color-focus-1);
      --p-color-states-focus-grey: var(--p-color-focus-1);
      --p-color-states-scrim: var(--p-color-scrim-1);
      --p-color-states-scrim-white: var(--p-color-scrim-1);
      --p-color-states-scrim-grey: var(--p-color-scrim-1);
      --p-color-states-toggle-off: var(--p-color-grey-cold-800);
      --p-color-states-toggle-off-white: var(--p-color-grey-cold-800);
      --p-color-states-toggle-off-grey: var(--p-color-grey-cold-500);
      --p-color-states-toggle-off-hover: var(--p-color-grey-cold-700);
      --p-color-states-toggle-off-hover-white: var(--p-color-grey-cold-700);
      --p-color-states-toggle-off-hover-grey: var(--p-color-grey-cold-600);
      --p-color-surface-1: var(--p-color-grey-cold-900);
      --p-color-surface-1-white: var(--p-color-grey-cold-900);
      --p-color-surface-1-grey: var(--p-color-grey-cold-1000);
      --p-color-surface-2: var(--p-color-grey-cold-1000);
      --p-color-surface-2-white: var(--p-color-grey-cold-1000);
      --p-color-surface-2-grey: var(--p-color-grey-cold-900);
      --p-color-surface-1-hover: var(--p-color-grey-cold-800);
      --p-color-surface-1-hover-white: var(--p-color-grey-cold-800);
      --p-color-surface-1-hover-grey: var(--p-color-grey-cold-800);
      --p-color-surface-2-hover: var(--p-color-grey-cold-800);
      --p-color-surface-2-hover-white: var(--p-color-grey-cold-800);
      --p-color-surface-2-hover-grey: var(--p-color-grey-cold-800);
      --p-color-surface-inverse: var(--p-color-purple-100);
      --p-color-surface-inverse-white: var(--p-color-purple-100);
      --p-color-surface-inverse-grey: var(--p-color-purple-100);
      --p-color-surface-inverse-hover: var(--p-color-purple-200);
      --p-color-surface-inverse-hover-white: var(--p-color-purple-200);
      --p-color-surface-inverse-hover-grey: var(--p-color-purple-200);
      --p-color-surface-inverse-pressed: var(--p-color-purple-300);
      --p-color-surface-inverse-pressed-white: var(--p-color-purple-300);
      --p-color-surface-inverse-pressed-grey: var(--p-color-purple-300);
      --p-color-surface-selected: var(--p-color-purple-400);
      --p-color-surface-selected-white: var(--p-color-purple-400);
      --p-color-surface-selected-grey: var(--p-color-purple-400);
      --p-color-surface-selected-hover: var(--p-color-purple-300);
      --p-color-surface-selected-hover-white: var(--p-color-purple-300);
      --p-color-surface-selected-hover-grey: var(--p-color-purple-300);
      --p-color-surface-selected-pressed: var(--p-color-purple-200);
      --p-color-surface-selected-pressed-white: var(--p-color-purple-200);
      --p-color-surface-selected-pressed-grey: var(--p-color-purple-200);
      --p-color-surface-selected-active: var(--p-color-purple-200);
      --p-color-surface-selected-active-white: var(--p-color-purple-200);
      --p-color-surface-selected-active-grey: var(--p-color-purple-200);
      --p-color-surface-error: var(--p-color-red-800);
      --p-color-surface-error-white: var(--p-color-red-800);
      --p-color-surface-error-grey: var(--p-color-red-800);
      --p-color-surface-success: var(--p-color-green-800);
      --p-color-surface-success-white: var(--p-color-green-800);
      --p-color-surface-success-grey: var(--p-color-green-800);
      --p-color-surface-warning: var(--p-color-yellow-800);
      --p-color-surface-warning-white: var(--p-color-yellow-800);
      --p-color-surface-warning-grey: var(--p-color-yellow-800);
      --p-color-surface-info: var(--p-color-purple-800);
      --p-color-surface-info-white: var(--p-color-purple-800);
      --p-color-surface-info-grey: var(--p-color-purple-800);
      --p-color-surface-neutral: var(--p-color-grey-cold-900);
      --p-color-surface-neutral-white: var(--p-color-grey-cold-1000);
      --p-color-surface-neutral-grey: var(--p-color-grey-cold-900);
      --p-color-surface-static: var(--p-color-grey-cold-1000);
      --p-color-surface-static-white: var(--p-color-grey-cold-1000);
      --p-color-surface-static-grey: var(--p-color-grey-cold-1000);
      --p-color-stroke-strong: var(--p-color-purple-100);
      --p-color-stroke-strong-white: var(--p-color-purple-100);
      --p-color-stroke-strong-grey: var(--p-color-purple-100);
      --p-color-stroke-strong-hover: var(--p-color-purple-200);
      --p-color-stroke-strong-hover-white: var(--p-color-purple-200);
      --p-color-stroke-strong-hover-grey: var(--p-color-purple-200);
      --p-color-stroke-strong-pressed: var(--p-color-purple-300);
      --p-color-stroke-strong-pressed-white: var(--p-color-purple-300);
      --p-color-stroke-strong-pressed-grey: var(--p-color-purple-300);
      --p-color-stroke-0: var(--p-color-grey-cold-700);
      --p-color-stroke-0-white: var(--p-color-grey-cold-700);
      --p-color-stroke-0-grey: var(--p-color-grey-cold-600);
      --p-color-stroke-1: var(--p-color-grey-cold-600);
      --p-color-stroke-1-white: var(--p-color-grey-cold-600);
      --p-color-stroke-1-grey: var(--p-color-grey-cold-700);
      --p-color-stroke-2: var(--p-color-grey-cold-700);
      --p-color-stroke-2-white: var(--p-color-grey-cold-700);
      --p-color-stroke-2-grey: var(--p-color-grey-cold-600);
      --p-color-stroke-on-white: var(--p-color-grey-cold-700);
      --p-color-stroke-on-white-white: var(--p-color-grey-cold-700);
      --p-color-stroke-on-white-grey: var(--p-color-grey-cold-700);
      --p-color-stroke-subtle-0: var(--p-color-grey-cold-800);
      --p-color-stroke-subtle-0-white: var(--p-color-grey-cold-800);
      --p-color-stroke-subtle-0-grey: var(--p-color-grey-cold-700);
      --p-color-stroke-subtle-1: var(--p-color-grey-cold-700);
      --p-color-stroke-subtle-1-white: var(--p-color-grey-cold-700);
      --p-color-stroke-subtle-1-grey: var(--p-color-grey-cold-800);
      --p-color-stroke-subtle-2: var(--p-color-grey-cold-800);
      --p-color-stroke-subtle-2-white: var(--p-color-grey-cold-800);
      --p-color-stroke-subtle-2-grey: var(--p-color-grey-cold-700);
      --p-color-stroke-subtle-on-white: var(--p-color-grey-cold-800);
      --p-color-stroke-subtle-on-white-white: var(--p-color-grey-cold-800);
      --p-color-stroke-subtle-on-white-grey: var(--p-color-grey-cold-800);
      --p-color-stroke-on-color: var(--p-color-purple-900);
      --p-color-stroke-on-color-white: var(--p-color-purple-900);
      --p-color-stroke-on-color-grey: var(--p-color-purple-900);
      --p-color-stroke-interactive: var(--p-color-purple-400);
      --p-color-stroke-interactive-white: var(--p-color-purple-400);
      --p-color-stroke-interactive-grey: var(--p-color-purple-400);
      --p-color-stroke-interactive-hover: var(--p-color-purple-300);
      --p-color-stroke-interactive-hover-white: var(--p-color-purple-300);
      --p-color-stroke-interactive-hover-grey: var(--p-color-purple-300);
      --p-color-stroke-interactive-pressed: var(--p-color-purple-200);
      --p-color-stroke-interactive-pressed-white: var(--p-color-purple-200);
      --p-color-stroke-interactive-pressed-grey: var(--p-color-purple-200);
      --p-color-stroke-selected: var(--p-color-purple-300);
      --p-color-stroke-selected-white: var(--p-color-purple-300);
      --p-color-stroke-selected-grey: var(--p-color-purple-300);
      --p-color-stroke-selected-hover: var(--p-color-purple-200);
      --p-color-stroke-selected-hover-white: var(--p-color-purple-200);
      --p-color-stroke-selected-hover-grey: var(--p-color-purple-200);
      --p-color-stroke-selected-pressed: var(--p-color-purple-100);
      --p-color-stroke-selected-pressed-white: var(--p-color-purple-100);
      --p-color-stroke-selected-pressed-grey: var(--p-color-purple-100);
      --p-color-stroke-disabled: var(--p-color-grey-cold-600);
      --p-color-stroke-disabled-white: var(--p-color-grey-cold-600);
      --p-color-stroke-disabled-grey: var(--p-color-grey-cold-500);
      --p-color-stroke-error: var(--p-color-red-400);
      --p-color-stroke-error-white: var(--p-color-red-400);
      --p-color-stroke-error-grey: var(--p-color-red-400);
      --p-color-stroke-success: var(--p-color-green-400);
      --p-color-stroke-success-white: var(--p-color-green-400);
      --p-color-stroke-success-grey: var(--p-color-green-400);
      --p-color-stroke-warning: var(--p-color-yellow-400);
      --p-color-stroke-warning-white: var(--p-color-yellow-400);
      --p-color-stroke-warning-grey: var(--p-color-yellow-400);
      --p-outline: 2px solid var(--p-color-states-focus);
      --p-outline-offset: 2px;
    }
  }

  [data-theme="kron-light"] {
    --p-color-background: var(--p-color-grey-cold-000);
    --p-color-background-white: var(--p-color-grey-cold-000);
    --p-color-background-grey: var(--p-color-grey-cold-100);
    --p-color-background-hover: var(--p-color-grey-cold-100);
    --p-color-background-hover-white: var(--p-color-grey-cold-100);
    --p-color-background-hover-grey: var(--p-color-grey-cold-200);
    --p-color-background-pressed: var(--p-color-grey-cold-200);
    --p-color-background-pressed-white: var(--p-color-grey-cold-200);
    --p-color-background-pressed-grey: var(--p-color-grey-cold-300);
    --p-color-background-active: var(--p-color-red-600);
    --p-color-background-active-white: var(--p-color-red-600);
    --p-color-background-active-grey: var(--p-color-red-600);
    --p-color-background-disabled: var(--p-color-grey-cold-200);
    --p-color-background-disabled-white: var(--p-color-grey-cold-200);
    --p-color-background-disabled-grey: var(--p-color-grey-cold-300);
    --p-color-background-selected: var(--p-color-purple-700);
    --p-color-background-selected-white: var(--p-color-purple-700);
    --p-color-background-selected-grey: var(--p-color-purple-700);
    --p-color-background-selected-hover: var(--p-color-purple-800);
    --p-color-background-selected-hover-white: var(--p-color-purple-800);
    --p-color-background-selected-hover-grey: var(--p-color-purple-800);
    --p-color-background-selected-pressed: var(--p-color-purple-900);
    --p-color-background-selected-pressed-white: var(--p-color-purple-900);
    --p-color-background-selected-pressed-grey: var(--p-color-purple-900);
    --p-color-text-primary: var(--p-color-purple-900);
    --p-color-text-primary-white: var(--p-color-purple-900);
    --p-color-text-primary-grey: var(--p-color-purple-900);
    --p-color-text-primary-hover: var(--p-color-purple-800);
    --p-color-text-primary-hover-white: var(--p-color-purple-800);
    --p-color-text-primary-hover-grey: var(--p-color-purple-800);
    --p-color-text-primary-pressed: var(--p-color-purple-700);
    --p-color-text-primary-pressed-white: var(--p-color-purple-700);
    --p-color-text-primary-pressed-grey: var(--p-color-purple-700);
    --p-color-text-primary-active: var(--p-color-purple-700);
    --p-color-text-primary-active-white: var(--p-color-purple-700);
    --p-color-text-primary-active-grey: var(--p-color-purple-700);
    --p-color-text-interactive: var(--p-color-purple-800);
    --p-color-text-interactive-white: var(--p-color-purple-800);
    --p-color-text-interactive-grey: var(--p-color-purple-800);
    --p-color-text-interactive-hover: var(--p-color-purple-600);
    --p-color-text-interactive-hover-white: var(--p-color-purple-600);
    --p-color-text-interactive-hover-grey: var(--p-color-purple-600);
    --p-color-text-interactive-pressed: var(--p-color-purple-700);
    --p-color-text-interactive-pressed-white: var(--p-color-purple-700);
    --p-color-text-interactive-pressed-grey: var(--p-color-purple-700);
    --p-color-text-interactive-active: var(--p-color-purple-700);
    --p-color-text-interactive-active-white: var(--p-color-purple-700);
    --p-color-text-interactive-active-grey: var(--p-color-purple-700);
    --p-color-text-selected: var(--p-color-purple-700);
    --p-color-text-selected-white: var(--p-color-purple-700);
    --p-color-text-selected-grey: var(--p-color-purple-700);
    --p-color-text-selected-hover: var(--p-color-purple-800);
    --p-color-text-selected-hover-white: var(--p-color-purple-800);
    --p-color-text-selected-hover-grey: var(--p-color-purple-800);
    --p-color-text-selected-pressed: var(--p-color-purple-900);
    --p-color-text-selected-pressed-white: var(--p-color-purple-900);
    --p-color-text-selected-pressed-grey: var(--p-color-purple-900);
    --p-color-text-secondary: var(--p-color-grey-cold-700);
    --p-color-text-secondary-white: var(--p-color-grey-cold-700);
    --p-color-text-secondary-grey: var(--p-color-grey-cold-700);
    --p-color-text-placeholder: var(--p-color-grey-cold-600);
    --p-color-text-placeholder-white: var(--p-color-grey-cold-600);
    --p-color-text-placeholder-grey: var(--p-color-grey-cold-600);
    --p-color-text-on-color: var(--p-color-purple-100);
    --p-color-text-on-color-white: var(--p-color-purple-100);
    --p-color-text-on-color-grey: var(--p-color-purple-100);
    --p-color-text-disabled: var(--p-color-grey-cold-500);
    --p-color-text-disabled-white: var(--p-color-grey-cold-500);
    --p-color-text-disabled-grey: var(--p-color-grey-cold-500);
    --p-color-text-error: var(--p-color-red-600);
    --p-color-text-alert: var(--p-color-grey-cold-900);
    --p-color-text-alert-white: var(--p-color-grey-cold-900);
    --p-color-text-alert-grey: var(--p-color-grey-cold-900);
    --p-color-text-on-brand: var(--p-color-purple-100);
    --p-color-text-on-brand-white: var(--p-color-purple-100);
    --p-color-text-on-brand-grey: var(--p-color-purple-100);
    --p-color-text-on-error: var(--p-color-red-800);
    --p-color-text-on-info: var(--p-color-purple-900);
    --p-color-text-on-warning: var(--p-color-yellow-900);
    --p-color-text-on-success: var(--p-color-green-900);
    --p-color-icon-primary: var(--p-color-purple-900);
    --p-color-icon-primary-white: var(--p-color-purple-900);
    --p-color-icon-primary-grey: var(--p-color-purple-900);
    --p-color-icon-primary-hover: var(--p-color-purple-800);
    --p-color-icon-primary-hover-white: var(--p-color-purple-800);
    --p-color-icon-primary-hover-grey: var(--p-color-purple-800);
    --p-color-icon-primary-active: var(--p-color-purple-700);
    --p-color-icon-primary-active-white: var(--p-color-purple-700);
    --p-color-icon-primary-active-grey: var(--p-color-purple-700);
    --p-color-icon-primary-pressed: var(--p-color-purple-700);
    --p-color-icon-primary-pressed-white: var(--p-color-purple-700);
    --p-color-icon-primary-pressed-grey: var(--p-color-purple-700);
    --p-color-icon-interactive: var(--p-color-purple-800);
    --p-color-icon-interactive-white: var(--p-color-purple-800);
    --p-color-icon-interactive-grey: var(--p-color-purple-800);
    --p-color-icon-interactive-hover: var(--p-color-purple-600);
    --p-color-icon-interactive-hover-white: var(--p-color-purple-600);
    --p-color-icon-interactive-hover-grey: var(--p-color-purple-600);
    --p-color-icon-interactive-pressed: var(--p-color-purple-700);
    --p-color-icon-interactive-pressed-white: var(--p-color-purple-700);
    --p-color-icon-interactive-pressed-grey: var(--p-color-purple-700);
    --p-color-icon-interactive-active: var(--p-color-purple-700);
    --p-color-icon-interactive-active-white: var(--p-color-purple-700);
    --p-color-icon-interactive-active-grey: var(--p-color-purple-700);
    --p-color-icon-on-color: var(--p-color-purple-100);
    --p-color-icon-on-color-white: var(--p-color-purple-100);
    --p-color-icon-on-color-grey: var(--p-color-purple-100);
    --p-color-icon-disabled: var(--p-color-grey-cold-500);
    --p-color-icon-disabled-white: var(--p-color-grey-cold-500);
    --p-color-icon-disabled-grey: var(--p-color-grey-cold-500);
    --p-color-icon-error: var(--p-color-red-600);
    --p-color-icon-error-white: var(--p-color-red-600);
    --p-color-icon-error-grey: var(--p-color-red-600);
    --p-color-icon-success: var(--p-color-green-600);
    --p-color-icon-success-white: var(--p-color-green-600);
    --p-color-icon-success-grey: var(--p-color-green-600);
    --p-color-icon-warning: var(--p-color-yellow-600);
    --p-color-icon-warning-white: var(--p-color-yellow-600);
    --p-color-icon-warning-grey: var(--p-color-yellow-600);
    --p-color-icon-info: var(--p-color-purple-600);
    --p-color-icon-info-white: var(--p-color-purple-600);
    --p-color-icon-info-grey: var(--p-color-purple-600);
    --p-color-icon-neutral: var(--p-color-grey-cold-900);
    --p-color-icon-neutral-white: var(--p-color-grey-cold-900);
    --p-color-icon-neutral-grey: var(--p-color-grey-cold-900);
    --p-color-icon-on-brand: var(--p-color-purple-100);
    --p-color-icon-on-brand-white: var(--p-color-purple-100);
    --p-color-icon-on-brand-grey: var(--p-color-purple-100);
    --p-color-icon-on-error: var(--p-color-red-800);
    --p-color-icon-on-info: var(--p-color-purple-900);
    --p-color-icon-on-warning: var(--p-color-yellow-900);
    --p-color-icon-on-success: var(--p-color-green-900);
    --p-color-button-brand-fill: var(--p-color-purple-900);
    --p-color-button-brand-fill-white: var(--p-color-purple-900);
    --p-color-button-brand-fill-grey: var(--p-color-purple-900);
    --p-color-button-brand-fill-hover: var(--p-color-purple-800);
    --p-color-button-brand-fill-hover-white: var(--p-color-purple-800);
    --p-color-button-brand-fill-hover-grey: var(--p-color-purple-800);
    --p-color-button-brand-fill-pressed: var(--p-color-purple-800);
    --p-color-button-brand-fill-pressed-white: var(--p-color-purple-800);
    --p-color-button-brand-fill-pressed-grey: var(--p-color-purple-800);
    --p-color-button-brand-fill-active: var(--p-color-purple-800);
    --p-color-button-brand-fill-active-white: var(--p-color-purple-800);
    --p-color-button-brand-fill-active-grey: var(--p-color-purple-800);
    --p-color-button-action-fill: var(--p-color-purple-800);
    --p-color-button-action-fill-white: var(--p-color-purple-800);
    --p-color-button-action-fill-grey: var(--p-color-purple-800);
    --p-color-button-action-fill-hover: var(--p-color-purple-600);
    --p-color-button-action-fill-hover-white: var(--p-color-purple-600);
    --p-color-button-action-fill-hover-grey: var(--p-color-purple-600);
    --p-color-button-action-fill-pressed: var(--p-color-purple-700);
    --p-color-button-action-fill-pressed-white: var(--p-color-purple-700);
    --p-color-button-action-fill-pressed-grey: var(--p-color-purple-700);
    --p-color-button-action-fill-active: var(--p-color-purple-700);
    --p-color-button-action-fill-active-white: var(--p-color-purple-700);
    --p-color-button-action-fill-active-grey: var(--p-color-purple-700);
    --p-color-button-disabled: var(--p-color-grey-cold-200);
    --p-color-button-disabled-white: var(--p-color-grey-cold-200);
    --p-color-button-disabled-grey: var(--p-color-grey-cold-300);
    --p-color-graphics-illustration-primary: var(--p-color-red-600);
    --p-color-graphics-illustration-primary-white: var(--p-color-red-600);
    --p-color-graphics-illustration-primary-grey: var(--p-color-red-600);
    --p-color-graphics-illustration-detail: var(--p-color-logo-red);
    --p-color-graphics-illustration-detail-white: var(--p-color-logo-red);
    --p-color-graphics-illustration-detail-grey: var(--p-color-logo-red);
    --p-color-graphics-illustration-base: var(--p-color-purple-900);
    --p-color-graphics-illustration-base-white: var(--p-color-purple-900);
    --p-color-graphics-illustration-base-grey: var(--p-color-purple-900);
    --p-color-graphics-illustration-white: var(--p-color-grey-cold-000);
    --p-color-graphics-illustration-white-white: var(--p-color-grey-cold-000);
    --p-color-graphics-illustration-white-grey: var(--p-color-grey-cold-000);
    --p-color-graphics-storebrand-icon-detail: var(--p-color-logo-red);
    --p-color-graphics-storebrand-icon-detail-white: var(--p-color-logo-red);
    --p-color-graphics-storebrand-icon-detail-grey: var(--p-color-logo-red);
    --p-color-graphics-storebrand-icon-outline: var(--p-color-red-800);
    --p-color-graphics-storebrand-icon-outline-white: var(--p-color-red-800);
    --p-color-graphics-storebrand-icon-outline-grey: var(--p-color-red-800);
    --p-color-static-brand-foreground: var(--p-color-purple-600);
    --p-color-static-brand-foreground-white: var(--p-color-purple-600);
    --p-color-static-brand-foreground-grey: var(--p-color-purple-600);
    --p-color-static-brand-background: var(--p-color-purple-200);
    --p-color-static-brand-background-white: var(--p-color-purple-200);
    --p-color-static-brand-background-grey: var(--p-color-purple-200);
    --p-color-static-orange-foreground: var(--p-color-orange-600);
    --p-color-static-orange-foreground-white: var(--p-color-orange-600);
    --p-color-static-orange-foreground-grey: var(--p-color-orange-600);
    --p-color-static-orange-background: var(--p-color-orange-200);
    --p-color-static-orange-background-white: var(--p-color-orange-200);
    --p-color-static-orange-background-grey: var(--p-color-orange-300);
    --p-color-static-purple-foreground: var(--p-color-purple-600);
    --p-color-static-purple-foreground-white: var(--p-color-purple-600);
    --p-color-static-purple-foreground-grey: var(--p-color-purple-600);
    --p-color-static-purple-background: var(--p-color-purple-200);
    --p-color-static-purple-background-white: var(--p-color-purple-200);
    --p-color-static-purple-background-grey: var(--p-color-purple-300);
    --p-color-static-red-foreground: var(--p-color-red-600);
    --p-color-static-red-foreground-white: var(--p-color-red-600);
    --p-color-static-red-foreground-grey: var(--p-color-red-600);
    --p-color-static-red-background: var(--p-color-red-200);
    --p-color-static-red-background-white: var(--p-color-red-200);
    --p-color-static-red-background-grey: var(--p-color-red-200);
    --p-color-static-grey-foreground: var(--p-color-grey-cold-600);
    --p-color-static-grey-foreground-white: var(--p-color-grey-cold-600);
    --p-color-static-grey-foreground-grey: var(--p-color-grey-cold-600);
    --p-color-static-grey-background: var(--p-color-grey-cold-200);
    --p-color-static-grey-background-white: var(--p-color-grey-cold-200);
    --p-color-static-grey-background-grey: var(--p-color-grey-cold-300);
    --p-color-static-risk-filled: var(--p-color-orange-600);
    --p-color-static-risk-filled-white: var(--p-color-orange-600);
    --p-color-static-risk-filled-grey: var(--p-color-orange-600);
    --p-color-static-risk-unfilled: var(--p-color-orange-200);
    --p-color-static-risk-unfilled-white: var(--p-color-orange-200);
    --p-color-static-risk-unfilled-grey: var(--p-color-orange-300);
    --p-color-static-sustainability-filled: var(--p-color-purple-600);
    --p-color-static-sustainability-filled-white: var(--p-color-purple-600);
    --p-color-static-sustainability-filled-grey: var(--p-color-purple-600);
    --p-color-static-sustainability-unfilled: var(--p-color-purple-200);
    --p-color-static-sustainability-unfilled-white: var(--p-color-purple-200);
    --p-color-static-sustainability-unfilled-grey: var(--p-color-purple-300);
    --p-color-states-focus: var(--p-color-focus-1);
    --p-color-states-focus-white: var(--p-color-focus-1);
    --p-color-states-focus-grey: var(--p-color-focus-1);
    --p-color-states-scrim: var(--p-color-scrim-1);
    --p-color-states-scrim-white: var(--p-color-scrim-1);
    --p-color-states-scrim-grey: var(--p-color-scrim-1);
    --p-color-states-toggle-off: var(--p-color-grey-cold-400);
    --p-color-states-toggle-off-white: var(--p-color-grey-cold-400);
    --p-color-states-toggle-off-grey: var(--p-color-grey-cold-500);
    --p-color-states-toggle-off-hover: var(--p-color-grey-cold-300);
    --p-color-states-toggle-off-hover-white: var(--p-color-grey-cold-300);
    --p-color-states-toggle-off-hover-grey: var(--p-color-grey-cold-400);
    --p-color-surface-1: var(--p-color-grey-cold-100);
    --p-color-surface-1-white: var(--p-color-grey-cold-100);
    --p-color-surface-1-grey: var(--p-color-grey-cold-000);
    --p-color-surface-2: var(--p-color-grey-cold-000);
    --p-color-surface-2-white: var(--p-color-grey-cold-000);
    --p-color-surface-2-grey: var(--p-color-grey-cold-100);
    --p-color-surface-1-hover: var(--p-color-grey-cold-200);
    --p-color-surface-1-hover-white: var(--p-color-grey-cold-200);
    --p-color-surface-1-hover-grey: var(--p-color-grey-cold-200);
    --p-color-surface-2-hover: var(--p-color-grey-cold-200);
    --p-color-surface-2-hover-white: var(--p-color-grey-cold-200);
    --p-color-surface-2-hover-grey: var(--p-color-grey-cold-200);
    --p-color-surface-inverse: var(--p-color-purple-900);
    --p-color-surface-inverse-white: var(--p-color-purple-900);
    --p-color-surface-inverse-grey: var(--p-color-purple-900);
    --p-color-surface-inverse-hover: var(--p-color-purple-800);
    --p-color-surface-inverse-hover-white: var(--p-color-purple-800);
    --p-color-surface-inverse-hover-grey: var(--p-color-purple-800);
    --p-color-surface-inverse-pressed: var(--p-color-purple-700);
    --p-color-surface-inverse-pressed-white: var(--p-color-purple-700);
    --p-color-surface-inverse-pressed-grey: var(--p-color-purple-700);
    --p-color-surface-selected: var(--p-color-purple-600);
    --p-color-surface-selected-white: var(--p-color-purple-600);
    --p-color-surface-selected-grey: var(--p-color-purple-600);
    --p-color-surface-selected-hover: var(--p-color-purple-700);
    --p-color-surface-selected-hover-white: var(--p-color-purple-700);
    --p-color-surface-selected-hover-grey: var(--p-color-purple-700);
    --p-color-surface-selected-pressed: var(--p-color-purple-800);
    --p-color-surface-selected-pressed-white: var(--p-color-purple-800);
    --p-color-surface-selected-pressed-grey: var(--p-color-purple-800);
    --p-color-surface-selected-active: var(--p-color-purple-800);
    --p-color-surface-selected-active-white: var(--p-color-purple-800);
    --p-color-surface-selected-active-grey: var(--p-color-purple-800);
    --p-color-surface-error: var(--p-color-red-200);
    --p-color-surface-error-white: var(--p-color-red-200);
    --p-color-surface-error-grey: var(--p-color-red-200);
    --p-color-surface-success: var(--p-color-green-200);
    --p-color-surface-success-white: var(--p-color-green-200);
    --p-color-surface-success-grey: var(--p-color-green-200);
    --p-color-surface-warning: var(--p-color-yellow-200);
    --p-color-surface-warning-white: var(--p-color-yellow-200);
    --p-color-surface-warning-grey: var(--p-color-yellow-200);
    --p-color-surface-info: var(--p-color-purple-200);
    --p-color-surface-info-white: var(--p-color-purple-200);
    --p-color-surface-info-grey: var(--p-color-purple-200);
    --p-color-surface-neutral: var(--p-color-grey-cold-100);
    --p-color-surface-neutral-white: var(--p-color-grey-cold-000);
    --p-color-surface-neutral-grey: var(--p-color-grey-cold-100);
    --p-color-surface-static: var(--p-color-grey-cold-000);
    --p-color-surface-static-white: var(--p-color-grey-cold-000);
    --p-color-surface-static-grey: var(--p-color-grey-cold-000);
    --p-color-stroke-strong: var(--p-color-purple-900);
    --p-color-stroke-strong-white: var(--p-color-purple-900);
    --p-color-stroke-strong-grey: var(--p-color-purple-900);
    --p-color-stroke-strong-hover: var(--p-color-purple-800);
    --p-color-stroke-strong-hover-white: var(--p-color-purple-800);
    --p-color-stroke-strong-hover-grey: var(--p-color-purple-800);
    --p-color-stroke-strong-pressed: var(--p-color-purple-700);
    --p-color-stroke-strong-pressed-white: var(--p-color-purple-700);
    --p-color-stroke-strong-pressed-grey: var(--p-color-purple-700);
    --p-color-stroke-0: var(--p-color-grey-cold-300);
    --p-color-stroke-0-white: var(--p-color-grey-cold-300);
    --p-color-stroke-0-grey: var(--p-color-grey-cold-400);
    --p-color-stroke-1: var(--p-color-grey-cold-400);
    --p-color-stroke-1-white: var(--p-color-grey-cold-400);
    --p-color-stroke-1-grey: var(--p-color-grey-cold-300);
    --p-color-stroke-2: var(--p-color-grey-cold-300);
    --p-color-stroke-2-white: var(--p-color-grey-cold-300);
    --p-color-stroke-2-grey: var(--p-color-grey-cold-400);
    --p-color-stroke-on-white: var(--p-color-grey-cold-300);
    --p-color-stroke-on-white-white: var(--p-color-grey-cold-300);
    --p-color-stroke-on-white-grey: var(--p-color-grey-cold-300);
    --p-color-stroke-subtle-0: var(--p-color-grey-cold-200);
    --p-color-stroke-subtle-0-white: var(--p-color-grey-cold-200);
    --p-color-stroke-subtle-0-grey: var(--p-color-grey-cold-300);
    --p-color-stroke-subtle-1: var(--p-color-grey-cold-300);
    --p-color-stroke-subtle-1-white: var(--p-color-grey-cold-300);
    --p-color-stroke-subtle-1-grey: var(--p-color-grey-cold-200);
    --p-color-stroke-subtle-2: var(--p-color-grey-cold-200);
    --p-color-stroke-subtle-2-white: var(--p-color-grey-cold-200);
    --p-color-stroke-subtle-2-grey: var(--p-color-grey-cold-300);
    --p-color-stroke-subtle-on-white: var(--p-color-grey-cold-200);
    --p-color-stroke-subtle-on-white-white: var(--p-color-grey-cold-200);
    --p-color-stroke-subtle-on-white-grey: var(--p-color-grey-cold-200);
    --p-color-stroke-on-color: var(--p-color-purple-100);
    --p-color-stroke-on-color-white: var(--p-color-purple-100);
    --p-color-stroke-on-color-grey: var(--p-color-purple-100);
    --p-color-stroke-interactive: var(--p-color-purple-600);
    --p-color-stroke-interactive-white: var(--p-color-purple-600);
    --p-color-stroke-interactive-grey: var(--p-color-purple-600);
    --p-color-stroke-interactive-hover: var(--p-color-purple-700);
    --p-color-stroke-interactive-hover-white: var(--p-color-purple-700);
    --p-color-stroke-interactive-hover-grey: var(--p-color-purple-700);
    --p-color-stroke-interactive-pressed: var(--p-color-purple-800);
    --p-color-stroke-interactive-pressed-white: var(--p-color-purple-800);
    --p-color-stroke-interactive-pressed-grey: var(--p-color-purple-800);
    --p-color-stroke-selected: var(--p-color-purple-700);
    --p-color-stroke-selected-white: var(--p-color-purple-700);
    --p-color-stroke-selected-grey: var(--p-color-purple-700);
    --p-color-stroke-selected-hover: var(--p-color-purple-800);
    --p-color-stroke-selected-hover-white: var(--p-color-purple-800);
    --p-color-stroke-selected-hover-grey: var(--p-color-purple-800);
    --p-color-stroke-selected-pressed: var(--p-color-purple-900);
    --p-color-stroke-selected-pressed-white: var(--p-color-purple-900);
    --p-color-stroke-selected-pressed-grey: var(--p-color-purple-900);
    --p-color-stroke-disabled: var(--p-color-grey-cold-400);
    --p-color-stroke-disabled-white: var(--p-color-grey-cold-400);
    --p-color-stroke-disabled-grey: var(--p-color-grey-cold-500);
    --p-color-stroke-error: var(--p-color-red-600);
    --p-color-stroke-error-white: var(--p-color-red-600);
    --p-color-stroke-error-grey: var(--p-color-red-600);
    --p-color-stroke-success: var(--p-color-green-600);
    --p-color-stroke-success-white: var(--p-color-green-600);
    --p-color-stroke-success-grey: var(--p-color-green-600);
    --p-color-stroke-warning: var(--p-color-yellow-600);
    --p-color-stroke-warning-white: var(--p-color-yellow-600);
    --p-color-stroke-warning-grey: var(--p-color-yellow-600);
    --p-outline: 2px solid var(--p-color-states-focus);
    --p-outline-offset: 2px;
  }

  [data-theme="kron-dark"] {
    --p-color-background: var(--p-color-grey-cold-1000);
    --p-color-background-white: var(--p-color-grey-cold-1000);
    --p-color-background-grey: var(--p-color-grey-cold-1000);
    --p-color-background-hover: var(--p-color-grey-cold-900);
    --p-color-background-hover-white: var(--p-color-grey-cold-900);
    --p-color-background-hover-grey: var(--p-color-grey-cold-800);
    --p-color-background-pressed: var(--p-color-grey-cold-800);
    --p-color-background-pressed-white: var(--p-color-grey-cold-800);
    --p-color-background-pressed-grey: var(--p-color-grey-cold-700);
    --p-color-background-active: var(--p-color-red-400);
    --p-color-background-active-white: var(--p-color-red-400);
    --p-color-background-active-grey: var(--p-color-red-400);
    --p-color-background-disabled: var(--p-color-grey-cold-800);
    --p-color-background-disabled-white: var(--p-color-grey-cold-800);
    --p-color-background-disabled-grey: var(--p-color-grey-cold-700);
    --p-color-background-selected: var(--p-color-purple-300);
    --p-color-background-selected-white: var(--p-color-purple-300);
    --p-color-background-selected-grey: var(--p-color-purple-300);
    --p-color-background-selected-hover: var(--p-color-purple-200);
    --p-color-background-selected-hover-white: var(--p-color-purple-200);
    --p-color-background-selected-hover-grey: var(--p-color-purple-200);
    --p-color-background-selected-pressed: var(--p-color-purple-100);
    --p-color-background-selected-pressed-white: var(--p-color-purple-100);
    --p-color-background-selected-pressed-grey: var(--p-color-purple-100);
    --p-color-text-primary: var(--p-color-purple-100);
    --p-color-text-primary-white: var(--p-color-purple-100);
    --p-color-text-primary-grey: var(--p-color-purple-100);
    --p-color-text-primary-hover: var(--p-color-purple-200);
    --p-color-text-primary-hover-white: var(--p-color-purple-200);
    --p-color-text-primary-hover-grey: var(--p-color-purple-200);
    --p-color-text-primary-pressed: var(--p-color-purple-300);
    --p-color-text-primary-pressed-white: var(--p-color-purple-300);
    --p-color-text-primary-pressed-grey: var(--p-color-purple-300);
    --p-color-text-primary-active: var(--p-color-purple-300);
    --p-color-text-primary-active-white: var(--p-color-purple-300);
    --p-color-text-primary-active-grey: var(--p-color-purple-300);
    --p-color-text-interactive: var(--p-color-purple-200);
    --p-color-text-interactive-white: var(--p-color-purple-200);
    --p-color-text-interactive-grey: var(--p-color-purple-200);
    --p-color-text-interactive-hover: var(--p-color-purple-400);
    --p-color-text-interactive-hover-white: var(--p-color-purple-400);
    --p-color-text-interactive-hover-grey: var(--p-color-purple-400);
    --p-color-text-interactive-pressed: var(--p-color-purple-300);
    --p-color-text-interactive-pressed-white: var(--p-color-purple-300);
    --p-color-text-interactive-pressed-grey: var(--p-color-purple-300);
    --p-color-text-interactive-active: var(--p-color-purple-300);
    --p-color-text-interactive-active-white: var(--p-color-purple-300);
    --p-color-text-interactive-active-grey: var(--p-color-purple-300);
    --p-color-text-selected: var(--p-color-purple-300);
    --p-color-text-selected-white: var(--p-color-purple-300);
    --p-color-text-selected-grey: var(--p-color-purple-300);
    --p-color-text-selected-hover: var(--p-color-purple-200);
    --p-color-text-selected-hover-white: var(--p-color-purple-200);
    --p-color-text-selected-hover-grey: var(--p-color-purple-200);
    --p-color-text-selected-pressed: var(--p-color-purple-100);
    --p-color-text-selected-pressed-white: var(--p-color-purple-100);
    --p-color-text-selected-pressed-grey: var(--p-color-purple-100);
    --p-color-text-secondary: var(--p-color-grey-cold-300);
    --p-color-text-secondary-white: var(--p-color-grey-cold-300);
    --p-color-text-secondary-grey: var(--p-color-grey-cold-300);
    --p-color-text-placeholder: var(--p-color-grey-cold-400);
    --p-color-text-placeholder-white: var(--p-color-grey-cold-400);
    --p-color-text-placeholder-grey: var(--p-color-grey-cold-400);
    --p-color-text-on-color: var(--p-color-purple-900);
    --p-color-text-on-color-white: var(--p-color-purple-900);
    --p-color-text-on-color-grey: var(--p-color-purple-900);
    --p-color-text-disabled: var(--p-color-grey-cold-700);
    --p-color-text-disabled-white: var(--p-color-grey-cold-700);
    --p-color-text-disabled-grey: var(--p-color-grey-cold-700);
    --p-color-text-error: var(--p-color-red-400);
    --p-color-text-alert: var(--p-color-grey-cold-100);
    --p-color-text-alert-white: var(--p-color-grey-cold-100);
    --p-color-text-alert-grey: var(--p-color-grey-cold-100);
    --p-color-text-on-brand: var(--p-color-purple-900);
    --p-color-text-on-brand-white: var(--p-color-purple-900);
    --p-color-text-on-brand-grey: var(--p-color-purple-900);
    --p-color-text-on-error: var(--p-color-red-200);
    --p-color-text-on-info: var(--p-color-purple-100);
    --p-color-text-on-warning: var(--p-color-yellow-100);
    --p-color-text-on-success: var(--p-color-green-100);
    --p-color-icon-primary: var(--p-color-purple-100);
    --p-color-icon-primary-white: var(--p-color-purple-100);
    --p-color-icon-primary-grey: var(--p-color-purple-100);
    --p-color-icon-primary-hover: var(--p-color-purple-200);
    --p-color-icon-primary-hover-white: var(--p-color-purple-200);
    --p-color-icon-primary-hover-grey: var(--p-color-purple-200);
    --p-color-icon-primary-active: var(--p-color-purple-300);
    --p-color-icon-primary-active-white: var(--p-color-purple-300);
    --p-color-icon-primary-active-grey: var(--p-color-purple-300);
    --p-color-icon-primary-pressed: var(--p-color-purple-300);
    --p-color-icon-primary-pressed-white: var(--p-color-purple-300);
    --p-color-icon-primary-pressed-grey: var(--p-color-purple-300);
    --p-color-icon-interactive: var(--p-color-purple-200);
    --p-color-icon-interactive-white: var(--p-color-purple-200);
    --p-color-icon-interactive-grey: var(--p-color-purple-200);
    --p-color-icon-interactive-hover: var(--p-color-purple-400);
    --p-color-icon-interactive-hover-white: var(--p-color-purple-400);
    --p-color-icon-interactive-hover-grey: var(--p-color-purple-400);
    --p-color-icon-interactive-pressed: var(--p-color-purple-300);
    --p-color-icon-interactive-pressed-white: var(--p-color-purple-300);
    --p-color-icon-interactive-pressed-grey: var(--p-color-purple-300);
    --p-color-icon-interactive-active: var(--p-color-purple-300);
    --p-color-icon-interactive-active-white: var(--p-color-purple-300);
    --p-color-icon-interactive-active-grey: var(--p-color-purple-300);
    --p-color-icon-on-color: var(--p-color-purple-900);
    --p-color-icon-on-color-white: var(--p-color-purple-900);
    --p-color-icon-on-color-grey: var(--p-color-purple-900);
    --p-color-icon-disabled: var(--p-color-grey-cold-700);
    --p-color-icon-disabled-white: var(--p-color-grey-cold-700);
    --p-color-icon-disabled-grey: var(--p-color-grey-cold-700);
    --p-color-icon-error: var(--p-color-red-400);
    --p-color-icon-error-white: var(--p-color-red-400);
    --p-color-icon-error-grey: var(--p-color-red-400);
    --p-color-icon-success: var(--p-color-green-400);
    --p-color-icon-success-white: var(--p-color-green-400);
    --p-color-icon-success-grey: var(--p-color-green-400);
    --p-color-icon-warning: var(--p-color-yellow-400);
    --p-color-icon-warning-white: var(--p-color-yellow-400);
    --p-color-icon-warning-grey: var(--p-color-yellow-400);
    --p-color-icon-info: var(--p-color-purple-400);
    --p-color-icon-info-white: var(--p-color-purple-400);
    --p-color-icon-info-grey: var(--p-color-purple-400);
    --p-color-icon-neutral: var(--p-color-grey-cold-100);
    --p-color-icon-neutral-white: var(--p-color-grey-cold-100);
    --p-color-icon-neutral-grey: var(--p-color-grey-cold-100);
    --p-color-icon-on-brand: var(--p-color-purple-900);
    --p-color-icon-on-brand-white: var(--p-color-purple-900);
    --p-color-icon-on-brand-grey: var(--p-color-purple-900);
    --p-color-icon-on-error: var(--p-color-red-200);
    --p-color-icon-on-info: var(--p-color-purple-100);
    --p-color-icon-on-warning: var(--p-color-yellow-100);
    --p-color-icon-on-success: var(--p-color-green-100);
    --p-color-button-brand-fill: var(--p-color-purple-400);
    --p-color-button-brand-fill-white: var(--p-color-purple-400);
    --p-color-button-brand-fill-grey: var(--p-color-purple-400);
    --p-color-button-brand-fill-hover: var(--p-color-purple-300);
    --p-color-button-brand-fill-hover-white: var(--p-color-purple-300);
    --p-color-button-brand-fill-hover-grey: var(--p-color-purple-300);
    --p-color-button-brand-fill-pressed: var(--p-color-purple-200);
    --p-color-button-brand-fill-pressed-white: var(--p-color-purple-200);
    --p-color-button-brand-fill-pressed-grey: var(--p-color-purple-200);
    --p-color-button-brand-fill-active: var(--p-color-purple-200);
    --p-color-button-brand-fill-active-white: var(--p-color-purple-200);
    --p-color-button-brand-fill-active-grey: var(--p-color-purple-200);
    --p-color-button-action-fill: var(--p-color-purple-200);
    --p-color-button-action-fill-white: var(--p-color-purple-200);
    --p-color-button-action-fill-grey: var(--p-color-purple-200);
    --p-color-button-action-fill-hover: var(--p-color-purple-400);
    --p-color-button-action-fill-hover-white: var(--p-color-purple-400);
    --p-color-button-action-fill-hover-grey: var(--p-color-purple-400);
    --p-color-button-action-fill-pressed: var(--p-color-purple-300);
    --p-color-button-action-fill-pressed-white: var(--p-color-purple-300);
    --p-color-button-action-fill-pressed-grey: var(--p-color-purple-300);
    --p-color-button-action-fill-active: var(--p-color-purple-300);
    --p-color-button-action-fill-active-white: var(--p-color-purple-300);
    --p-color-button-action-fill-active-grey: var(--p-color-purple-300);
    --p-color-button-disabled: var(--p-color-grey-cold-500);
    --p-color-button-disabled-white: var(--p-color-grey-cold-500);
    --p-color-button-disabled-grey: var(--p-color-grey-cold-600);
    --p-color-graphics-illustration-primary: var(--p-color-red-400);
    --p-color-graphics-illustration-primary-white: var(--p-color-red-400);
    --p-color-graphics-illustration-primary-grey: var(--p-color-red-400);
    --p-color-graphics-illustration-detail: var(--p-color-logo-red);
    --p-color-graphics-illustration-detail-white: var(--p-color-logo-red);
    --p-color-graphics-illustration-detail-grey: var(--p-color-logo-red);
    --p-color-graphics-illustration-base: var(--p-color-purple-100);
    --p-color-graphics-illustration-base-white: var(--p-color-purple-100);
    --p-color-graphics-illustration-base-grey: var(--p-color-purple-100);
    --p-color-graphics-illustration-white: var(--p-color-grey-cold-1000);
    --p-color-graphics-illustration-white-white: var(--p-color-grey-cold-1000);
    --p-color-graphics-illustration-white-grey: var(--p-color-grey-cold-1000);
    --p-color-graphics-storebrand-icon-detail: var(--p-color-logo-red);
    --p-color-graphics-storebrand-icon-detail-white: var(--p-color-logo-red);
    --p-color-graphics-storebrand-icon-detail-grey: var(--p-color-logo-red);
    --p-color-graphics-storebrand-icon-outline: var(--p-color-red-200);
    --p-color-graphics-storebrand-icon-outline-white: var(--p-color-red-200);
    --p-color-graphics-storebrand-icon-outline-grey: var(--p-color-red-200);
    --p-color-static-brand-foreground: var(--p-color-purple-400);
    --p-color-static-brand-foreground-white: var(--p-color-purple-400);
    --p-color-static-brand-foreground-grey: var(--p-color-purple-400);
    --p-color-static-brand-background: var(--p-color-purple-800);
    --p-color-static-brand-background-white: var(--p-color-purple-800);
    --p-color-static-brand-background-grey: var(--p-color-purple-800);
    --p-color-static-orange-foreground: var(--p-color-orange-400);
    --p-color-static-orange-foreground-white: var(--p-color-orange-400);
    --p-color-static-orange-foreground-grey: var(--p-color-orange-400);
    --p-color-static-orange-background: var(--p-color-orange-800);
    --p-color-static-orange-background-white: var(--p-color-orange-800);
    --p-color-static-orange-background-grey: var(--p-color-orange-700);
    --p-color-static-purple-foreground: var(--p-color-purple-400);
    --p-color-static-purple-foreground-white: var(--p-color-purple-400);
    --p-color-static-purple-foreground-grey: var(--p-color-purple-400);
    --p-color-static-purple-background: var(--p-color-purple-800);
    --p-color-static-purple-background-white: var(--p-color-purple-800);
    --p-color-static-purple-background-grey: var(--p-color-purple-700);
    --p-color-static-red-foreground: var(--p-color-red-400);
    --p-color-static-red-foreground-white: var(--p-color-red-400);
    --p-color-static-red-foreground-grey: var(--p-color-red-400);
    --p-color-static-red-background: var(--p-color-red-800);
    --p-color-static-red-background-white: var(--p-color-red-800);
    --p-color-static-red-background-grey: var(--p-color-red-800);
    --p-color-static-grey-foreground: var(--p-color-grey-cold-400);
    --p-color-static-grey-foreground-white: var(--p-color-grey-cold-400);
    --p-color-static-grey-foreground-grey: var(--p-color-grey-cold-400);
    --p-color-static-grey-background: var(--p-color-grey-cold-800);
    --p-color-static-grey-background-white: var(--p-color-grey-cold-800);
    --p-color-static-grey-background-grey: var(--p-color-grey-cold-700);
    --p-color-static-risk-filled: var(--p-color-orange-300);
    --p-color-static-risk-filled-white: var(--p-color-orange-300);
    --p-color-static-risk-filled-grey: var(--p-color-orange-300);
    --p-color-static-risk-unfilled: var(--p-color-orange-pale-800);
    --p-color-static-risk-unfilled-white: var(--p-color-orange-pale-800);
    --p-color-static-risk-unfilled-grey: var(--p-color-orange-pale-800);
    --p-color-static-sustainability-filled: var(--p-color-purple-300);
    --p-color-static-sustainability-filled-white: var(--p-color-purple-300);
    --p-color-static-sustainability-filled-grey: var(--p-color-purple-300);
    --p-color-static-sustainability-unfilled: var(--p-color-purple-pale-800);
    --p-color-static-sustainability-unfilled-white: var(--p-color-purple-pale-800);
    --p-color-static-sustainability-unfilled-grey: var(--p-color-purple-pale-800);
    --p-color-states-focus: var(--p-color-focus-1);
    --p-color-states-focus-white: var(--p-color-focus-1);
    --p-color-states-focus-grey: var(--p-color-focus-1);
    --p-color-states-scrim: var(--p-color-scrim-1);
    --p-color-states-scrim-white: var(--p-color-scrim-1);
    --p-color-states-scrim-grey: var(--p-color-scrim-1);
    --p-color-states-toggle-off: var(--p-color-grey-cold-800);
    --p-color-states-toggle-off-white: var(--p-color-grey-cold-800);
    --p-color-states-toggle-off-grey: var(--p-color-grey-cold-500);
    --p-color-states-toggle-off-hover: var(--p-color-grey-cold-700);
    --p-color-states-toggle-off-hover-white: var(--p-color-grey-cold-700);
    --p-color-states-toggle-off-hover-grey: var(--p-color-grey-cold-600);
    --p-color-surface-1: var(--p-color-grey-cold-900);
    --p-color-surface-1-white: var(--p-color-grey-cold-900);
    --p-color-surface-1-grey: var(--p-color-grey-cold-900);
    --p-color-surface-2: var(--p-color-grey-cold-800);
    --p-color-surface-2-white: var(--p-color-grey-cold-800);
    --p-color-surface-2-grey: var(--p-color-grey-cold-800);
    --p-color-surface-1-hover: var(--p-color-grey-cold-800);
    --p-color-surface-1-hover-white: var(--p-color-grey-cold-800);
    --p-color-surface-1-hover-grey: var(--p-color-grey-cold-800);
    --p-color-surface-2-hover: var(--p-color-grey-cold-800);
    --p-color-surface-2-hover-white: var(--p-color-grey-cold-800);
    --p-color-surface-2-hover-grey: var(--p-color-grey-cold-800);
    --p-color-surface-inverse: var(--p-color-purple-100);
    --p-color-surface-inverse-white: var(--p-color-purple-100);
    --p-color-surface-inverse-grey: var(--p-color-purple-100);
    --p-color-surface-inverse-hover: var(--p-color-purple-200);
    --p-color-surface-inverse-hover-white: var(--p-color-purple-200);
    --p-color-surface-inverse-hover-grey: var(--p-color-purple-200);
    --p-color-surface-inverse-pressed: var(--p-color-purple-300);
    --p-color-surface-inverse-pressed-white: var(--p-color-purple-300);
    --p-color-surface-inverse-pressed-grey: var(--p-color-purple-300);
    --p-color-surface-selected: var(--p-color-purple-400);
    --p-color-surface-selected-white: var(--p-color-purple-400);
    --p-color-surface-selected-grey: var(--p-color-purple-400);
    --p-color-surface-selected-hover: var(--p-color-purple-300);
    --p-color-surface-selected-hover-white: var(--p-color-purple-300);
    --p-color-surface-selected-hover-grey: var(--p-color-purple-300);
    --p-color-surface-selected-pressed: var(--p-color-purple-200);
    --p-color-surface-selected-pressed-white: var(--p-color-purple-200);
    --p-color-surface-selected-pressed-grey: var(--p-color-purple-200);
    --p-color-surface-selected-active: var(--p-color-purple-200);
    --p-color-surface-selected-active-white: var(--p-color-purple-200);
    --p-color-surface-selected-active-grey: var(--p-color-purple-200);
    --p-color-surface-error: var(--p-color-red-800);
    --p-color-surface-error-white: var(--p-color-red-800);
    --p-color-surface-error-grey: var(--p-color-red-800);
    --p-color-surface-success: var(--p-color-green-800);
    --p-color-surface-success-white: var(--p-color-green-800);
    --p-color-surface-success-grey: var(--p-color-green-800);
    --p-color-surface-warning: var(--p-color-yellow-800);
    --p-color-surface-warning-white: var(--p-color-yellow-800);
    --p-color-surface-warning-grey: var(--p-color-yellow-800);
    --p-color-surface-info: var(--p-color-purple-800);
    --p-color-surface-info-white: var(--p-color-purple-800);
    --p-color-surface-info-grey: var(--p-color-purple-800);
    --p-color-surface-neutral: var(--p-color-grey-cold-900);
    --p-color-surface-neutral-white: var(--p-color-grey-cold-1000);
    --p-color-surface-neutral-grey: var(--p-color-grey-cold-900);
    --p-color-surface-static: var(--p-color-grey-cold-1000);
    --p-color-surface-static-white: var(--p-color-grey-cold-1000);
    --p-color-surface-static-grey: var(--p-color-grey-cold-1000);
    --p-color-stroke-strong: var(--p-color-purple-100);
    --p-color-stroke-strong-white: var(--p-color-purple-100);
    --p-color-stroke-strong-grey: var(--p-color-purple-100);
    --p-color-stroke-strong-hover: var(--p-color-purple-200);
    --p-color-stroke-strong-hover-white: var(--p-color-purple-200);
    --p-color-stroke-strong-hover-grey: var(--p-color-purple-200);
    --p-color-stroke-strong-pressed: var(--p-color-purple-300);
    --p-color-stroke-strong-pressed-white: var(--p-color-purple-300);
    --p-color-stroke-strong-pressed-grey: var(--p-color-purple-300);
    --p-color-stroke-0: var(--p-color-grey-cold-700);
    --p-color-stroke-0-white: var(--p-color-grey-cold-700);
    --p-color-stroke-0-grey: var(--p-color-grey-cold-600);
    --p-color-stroke-1: var(--p-color-grey-cold-600);
    --p-color-stroke-1-white: var(--p-color-grey-cold-600);
    --p-color-stroke-1-grey: var(--p-color-grey-cold-700);
    --p-color-stroke-2: var(--p-color-grey-cold-700);
    --p-color-stroke-2-white: var(--p-color-grey-cold-700);
    --p-color-stroke-2-grey: var(--p-color-grey-cold-600);
    --p-color-stroke-on-white: var(--p-color-grey-cold-700);
    --p-color-stroke-on-white-white: var(--p-color-grey-cold-700);
    --p-color-stroke-on-white-grey: var(--p-color-grey-cold-700);
    --p-color-stroke-subtle-0: var(--p-color-grey-cold-800);
    --p-color-stroke-subtle-0-white: var(--p-color-grey-cold-800);
    --p-color-stroke-subtle-0-grey: var(--p-color-grey-cold-700);
    --p-color-stroke-subtle-1: var(--p-color-grey-cold-700);
    --p-color-stroke-subtle-1-white: var(--p-color-grey-cold-700);
    --p-color-stroke-subtle-1-grey: var(--p-color-grey-cold-800);
    --p-color-stroke-subtle-2: var(--p-color-grey-cold-800);
    --p-color-stroke-subtle-2-white: var(--p-color-grey-cold-800);
    --p-color-stroke-subtle-2-grey: var(--p-color-grey-cold-700);
    --p-color-stroke-subtle-on-white: var(--p-color-grey-cold-800);
    --p-color-stroke-subtle-on-white-white: var(--p-color-grey-cold-800);
    --p-color-stroke-subtle-on-white-grey: var(--p-color-grey-cold-800);
    --p-color-stroke-on-color: var(--p-color-purple-900);
    --p-color-stroke-on-color-white: var(--p-color-purple-900);
    --p-color-stroke-on-color-grey: var(--p-color-purple-900);
    --p-color-stroke-interactive: var(--p-color-purple-400);
    --p-color-stroke-interactive-white: var(--p-color-purple-400);
    --p-color-stroke-interactive-grey: var(--p-color-purple-400);
    --p-color-stroke-interactive-hover: var(--p-color-purple-300);
    --p-color-stroke-interactive-hover-white: var(--p-color-purple-300);
    --p-color-stroke-interactive-hover-grey: var(--p-color-purple-300);
    --p-color-stroke-interactive-pressed: var(--p-color-purple-200);
    --p-color-stroke-interactive-pressed-white: var(--p-color-purple-200);
    --p-color-stroke-interactive-pressed-grey: var(--p-color-purple-200);
    --p-color-stroke-selected: var(--p-color-purple-300);
    --p-color-stroke-selected-white: var(--p-color-purple-300);
    --p-color-stroke-selected-grey: var(--p-color-purple-300);
    --p-color-stroke-selected-hover: var(--p-color-purple-200);
    --p-color-stroke-selected-hover-white: var(--p-color-purple-200);
    --p-color-stroke-selected-hover-grey: var(--p-color-purple-200);
    --p-color-stroke-selected-pressed: var(--p-color-purple-100);
    --p-color-stroke-selected-pressed-white: var(--p-color-purple-100);
    --p-color-stroke-selected-pressed-grey: var(--p-color-purple-100);
    --p-color-stroke-disabled: var(--p-color-grey-cold-600);
    --p-color-stroke-disabled-white: var(--p-color-grey-cold-600);
    --p-color-stroke-disabled-grey: var(--p-color-grey-cold-500);
    --p-color-stroke-error: var(--p-color-red-400);
    --p-color-stroke-error-white: var(--p-color-red-400);
    --p-color-stroke-error-grey: var(--p-color-red-400);
    --p-color-stroke-success: var(--p-color-green-400);
    --p-color-stroke-success-white: var(--p-color-green-400);
    --p-color-stroke-success-grey: var(--p-color-green-400);
    --p-color-stroke-warning: var(--p-color-yellow-400);
    --p-color-stroke-warning-white: var(--p-color-yellow-400);
    --p-color-stroke-warning-grey: var(--p-color-yellow-400);
    --p-outline: 2px solid var(--p-color-states-focus);
    --p-outline-offset: 2px;
  }

  a {
    color: var(--p-color-text-interactive);
    text-underline-offset: 2px;
    text-decoration: underline;
  }

  a:hover {
    color: var(--p-color-text-interactive-hover);
  }

  a:focus-visible {
    outline: var(--p-outline);
  }

  @media (min-width: 600px) {
    :-webkit-any(.p, .font-paragraph, .font-body) {
      font-size: 1.125rem;
      line-height: 1.625rem;
    }
  }

  :-moz-any(.p, .font-paragraph, .font-body) {
    color: var(--p-color-text-primary);
    font-family: Storebrand Text, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.375rem;
  }

  @media (min-width: 600px) {
    :-moz-any(.p, .font-paragraph, .font-body) {
      font-size: 1.125rem;
      line-height: 1.625rem;
    }
  }

  :is(.p, .font-paragraph, .font-body) {
    color: var(--p-color-text-primary);
    font-family: Storebrand Text, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.375rem;
  }

  @media (min-width: 600px) {
    :is(.p, .font-paragraph, .font-body) {
      font-size: 1.125rem;
      line-height: 1.625rem;
    }
  }

  :where(h1) {
    color: var(--p-color-text-primary);
    font-family: Storebrand Display, sans-serif;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 2.25rem;
  }

  @media (min-width: 600px) {
    :where(h1) {
      font-size: 2.5rem;
      line-height: 3.25rem;
    }

    :-webkit-any(.h1, .font-heading-1, p.font-heading-1) {
      font-size: 2.5rem;
      line-height: 3.25rem;
    }
  }

  :-moz-any(.h1, .font-heading-1, p.font-heading-1) {
    color: var(--p-color-text-primary);
    font-family: Storebrand Display, sans-serif;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 2.25rem;
  }

  @media (min-width: 600px) {
    :-moz-any(.h1, .font-heading-1, p.font-heading-1) {
      font-size: 2.5rem;
      line-height: 3.25rem;
    }
  }

  :is(.h1, .font-heading-1, p.font-heading-1) {
    color: var(--p-color-text-primary);
    font-family: Storebrand Display, sans-serif;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 2.25rem;
  }

  @media (min-width: 600px) {
    :is(.h1, .font-heading-1, p.font-heading-1) {
      font-size: 2.5rem;
      line-height: 3.25rem;
    }
  }

  :where(h2) {
    color: var(--p-color-text-primary);
    font-family: Storebrand Display, sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 2rem;
  }

  @media (min-width: 600px) {
    :where(h2) {
      font-size: 2rem;
      line-height: 2.5rem;
    }

    :-webkit-any(.h2, .font-heading-2, p.font-heading-2) {
      font-size: 2rem;
      line-height: 2.5rem;
    }
  }

  :-moz-any(.h2, .font-heading-2, p.font-heading-2) {
    color: var(--p-color-text-primary);
    font-family: Storebrand Display, sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 2rem;
  }

  @media (min-width: 600px) {
    :-moz-any(.h2, .font-heading-2, p.font-heading-2) {
      font-size: 2rem;
      line-height: 2.5rem;
    }
  }

  :is(.h2, .font-heading-2, p.font-heading-2) {
    color: var(--p-color-text-primary);
    font-family: Storebrand Display, sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 2rem;
  }

  @media (min-width: 600px) {
    :is(.h2, .font-heading-2, p.font-heading-2) {
      font-size: 2rem;
      line-height: 2.5rem;
    }
  }

  :where(h3) {
    color: var(--p-color-text-primary);
    font-family: Storebrand Display, sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.75rem;
  }

  @media (min-width: 600px) {
    :where(h3) {
      font-size: 1.5rem;
      line-height: 2rem;
    }

    :-webkit-any(.h3, .font-heading-3, p.font-heading-3) {
      font-size: 1.5rem;
      line-height: 2rem;
    }
  }

  :-moz-any(.h3, .font-heading-3, p.font-heading-3) {
    color: var(--p-color-text-primary);
    font-family: Storebrand Display, sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.75rem;
  }

  @media (min-width: 600px) {
    :-moz-any(.h3, .font-heading-3, p.font-heading-3) {
      font-size: 1.5rem;
      line-height: 2rem;
    }
  }

  :is(.h3, .font-heading-3, p.font-heading-3) {
    color: var(--p-color-text-primary);
    font-family: Storebrand Display, sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.75rem;
  }

  @media (min-width: 600px) {
    :is(.h3, .font-heading-3, p.font-heading-3) {
      font-size: 1.5rem;
      line-height: 2rem;
    }
  }

  :where(h4) {
    color: var(--p-color-text-primary);
    font-family: Storebrand Display, sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.75rem;
  }

  @media (min-width: 600px) {
    :where(h4) {
      font-size: 1.5rem;
      line-height: 2rem;
    }

    :-webkit-any(.h4, .font-heading-4, p.font-heading-4) {
      font-size: 1.5rem;
      line-height: 2rem;
    }
  }

  :-moz-any(.h4, .font-heading-4, p.font-heading-4) {
    color: var(--p-color-text-primary);
    font-family: Storebrand Display, sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.75rem;
  }

  @media (min-width: 600px) {
    :-moz-any(.h4, .font-heading-4, p.font-heading-4) {
      font-size: 1.5rem;
      line-height: 2rem;
    }
  }

  :is(.h4, .font-heading-4, p.font-heading-4) {
    color: var(--p-color-text-primary);
    font-family: Storebrand Display, sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.75rem;
  }

  @media (min-width: 600px) {
    :is(.h4, .font-heading-4, p.font-heading-4) {
      font-size: 1.5rem;
      line-height: 2rem;
    }
  }

  :where(h5) {
    color: var(--p-color-text-primary);
    font-family: Storebrand Display, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5rem;
  }

  @media (min-width: 600px) {
    :where(h5) {
      font-size: 1.25rem;
      line-height: 1.75rem;
    }

    :-webkit-any(.h5, .font-heading-5, p.font-heading-5) {
      font-size: 1.25rem;
      line-height: 1.75rem;
    }
  }

  :-moz-any(.h5, .font-heading-5, p.font-heading-5) {
    color: var(--p-color-text-primary);
    font-family: Storebrand Display, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5rem;
  }

  @media (min-width: 600px) {
    :-moz-any(.h5, .font-heading-5, p.font-heading-5) {
      font-size: 1.25rem;
      line-height: 1.75rem;
    }
  }

  :is(.h5, .font-heading-5, p.font-heading-5) {
    color: var(--p-color-text-primary);
    font-family: Storebrand Display, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5rem;
  }

  @media (min-width: 600px) {
    :is(.h5, .font-heading-5, p.font-heading-5) {
      font-size: 1.25rem;
      line-height: 1.75rem;
    }

    :-webkit-any(.ingress, .font-ingress, .font-large, .label, .font-label) {
      font-size: 1.25rem;
      line-height: 1.75rem;
    }
  }

  :-moz-any(.ingress, .font-ingress, .font-large, .label, .font-label) {
    color: var(--p-color-text-primary);
    font-family: Storebrand Text, sans-serif;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.625rem;
  }

  @media (min-width: 600px) {
    :-moz-any(.ingress, .font-ingress, .font-large, .label, .font-label) {
      font-size: 1.25rem;
      line-height: 1.75rem;
    }
  }

  :is(.ingress, .font-ingress, .font-large, .label, .font-label) {
    color: var(--p-color-text-primary);
    font-family: Storebrand Text, sans-serif;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.625rem;
  }

  @media (min-width: 600px) {
    :is(.ingress, .font-ingress, .font-large, .label, .font-label) {
      font-size: 1.25rem;
      line-height: 1.75rem;
    }

    :-webkit-any(.display, .font-display, p.font-display) {
      font-size: 4rem;
      line-height: 113%;
    }
  }

  :-moz-any(.display, .font-display, p.font-display) {
    color: var(--p-color-text-primary);
    font-family: Storebrand Display, sans-serif;
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 122%;
  }

  @media (min-width: 600px) {
    :-moz-any(.display, .font-display, p.font-display) {
      font-size: 4rem;
      line-height: 113%;
    }
  }

  :is(.display, .font-display, p.font-display) {
    color: var(--p-color-text-primary);
    font-family: Storebrand Display, sans-serif;
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 122%;
  }

  @media (min-width: 600px) {
    :is(.display, .font-display, p.font-display) {
      font-size: 4rem;
      line-height: 113%;
    }

    :-webkit-any(.font-large-demibold, .font-body-large-demibold, .font-body-lg-demibold) {
      font-size: 1.25rem;
      line-height: 140%;
    }
  }

  :-moz-any(.font-large-demibold, .font-body-large-demibold, .font-body-lg-demibold) {
    color: var(--p-color-text-primary);
    font-family: Storebrand Text, sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 144%;
  }

  @media (min-width: 600px) {
    :-moz-any(.font-large-demibold, .font-body-large-demibold, .font-body-lg-demibold) {
      font-size: 1.25rem;
      line-height: 140%;
    }
  }

  :is(.font-large-demibold, .font-body-large-demibold, .font-body-lg-demibold) {
    color: var(--p-color-text-primary);
    font-family: Storebrand Text, sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 144%;
  }

  @media (min-width: 600px) {
    :is(.font-large-demibold, .font-body-large-demibold, .font-body-lg-demibold) {
      font-size: 1.25rem;
      line-height: 140%;
    }

    :-webkit-any(.font-large, .font-body-large, .font-body-lg) {
      font-size: 1.25rem;
      line-height: 140%;
    }
  }

  :-moz-any(.font-large, .font-body-large, .font-body-lg) {
    color: var(--p-color-text-primary);
    font-family: Storebrand Text, sans-serif;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 144%;
  }

  @media (min-width: 600px) {
    :-moz-any(.font-large, .font-body-large, .font-body-lg) {
      font-size: 1.25rem;
      line-height: 140%;
    }
  }

  :is(.font-large, .font-body-large, .font-body-lg) {
    color: var(--p-color-text-primary);
    font-family: Storebrand Text, sans-serif;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 144%;
  }

  @media (min-width: 600px) {
    :is(.font-large, .font-body-large, .font-body-lg) {
      font-size: 1.25rem;
      line-height: 140%;
    }

    :-webkit-any(.font-alert-title, .font-body-demibold) {
      font-size: 1.125rem;
    }
  }

  :-moz-any(.font-alert-title, .font-body-demibold) {
    color: var(--p-color-text-primary);
    font-family: Storebrand Text, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 150%;
  }

  @media (min-width: 600px) {
    :-moz-any(.font-alert-title, .font-body-demibold) {
      font-size: 1.125rem;
    }
  }

  :is(.font-alert-title, .font-body-demibold) {
    color: var(--p-color-text-primary);
    font-family: Storebrand Text, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 150%;
  }

  @media (min-width: 600px) {
    :is(.font-alert-title, .font-body-demibold) {
      font-size: 1.125rem;
    }
  }

  .font-body-italic {
    color: var(--p-color-text-primary);
    font-family: Storebrand Text, sans-serif;
    font-size: 1rem;
    font-style: italic;
    font-weight: 400;
    line-height: 150%;
  }

  @media (min-width: 600px) {
    .font-body-italic {
      font-size: 1.125rem;
    }

    :-webkit-any(.font-small, .font-body-small, .font-body-sm, .font-small-link, .font-body-small-link, .font-body-sm-link) {
      font-size: 1rem;
      line-height: 1.375rem;
    }
  }

  :-moz-any(.font-small, .font-body-small, .font-body-sm, .font-small-link, .font-body-small-link, .font-body-sm-link) {
    color: var(--p-color-text-primary);
    font-family: Storebrand Text, sans-serif;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.25rem;
  }

  @media (min-width: 600px) {
    :-moz-any(.font-small, .font-body-small, .font-body-sm, .font-small-link, .font-body-small-link, .font-body-sm-link) {
      font-size: 1rem;
      line-height: 1.375rem;
    }
  }

  :is(.font-small, .font-body-small, .font-body-sm, .font-small-link, .font-body-small-link, .font-body-sm-link) {
    color: var(--p-color-text-primary);
    font-family: Storebrand Text, sans-serif;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.25rem;
  }

  @media (min-width: 600px) {
    :is(.font-small, .font-body-small, .font-body-sm, .font-small-link, .font-body-small-link, .font-body-sm-link) {
      font-size: 1rem;
      line-height: 1.375rem;
    }

    :-webkit-any(.font-small-demibold, .font-sm-demibold, .font-body-small-demibold) {
      font-size: 1rem;
      line-height: 1.375rem;
    }
  }

  :-moz-any(.font-small-demibold, .font-sm-demibold, .font-body-small-demibold) {
    color: var(--p-color-text-primary);
    font-family: Storebrand Text, sans-serif;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.25rem;
  }

  @media (min-width: 600px) {
    :-moz-any(.font-small-demibold, .font-sm-demibold, .font-body-small-demibold) {
      font-size: 1rem;
      line-height: 1.375rem;
    }
  }

  :is(.font-small-demibold, .font-sm-demibold, .font-body-small-demibold) {
    color: var(--p-color-text-primary);
    font-family: Storebrand Text, sans-serif;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.25rem;
  }

  @media (min-width: 600px) {
    :is(.font-small-demibold, .font-sm-demibold, .font-body-small-demibold) {
      font-size: 1rem;
      line-height: 1.375rem;
    }

    :-webkit-any(.subtitle, .font-subtitle) {
      font-size: 1.25rem;
      line-height: 1.75rem;
    }
  }

  :-moz-any(.subtitle, .font-subtitle) {
    color: var(--p-color-text-primary);
    font-family: Storebrand Text, sans-serif;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.375rem;
  }

  @media (min-width: 600px) {
    :-moz-any(.subtitle, .font-subtitle) {
      font-size: 1.25rem;
      line-height: 1.75rem;
    }
  }

  :is(.subtitle, .font-subtitle) {
    color: var(--p-color-text-primary);
    font-family: Storebrand Text, sans-serif;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.375rem;
  }

  @media (min-width: 600px) {
    :is(.subtitle, .font-subtitle) {
      font-size: 1.25rem;
      line-height: 1.75rem;
    }

    :-webkit-any(.overline, .font-overline) {
      font-size: 1rem;
      line-height: 1.375rem;
    }
  }

  :-moz-any(.overline, .font-overline) {
    color: var(--p-color-text-primary);
    font-family: Storebrand Text, sans-serif;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.25rem;
  }

  @media (min-width: 600px) {
    :-moz-any(.overline, .font-overline) {
      font-size: 1rem;
      line-height: 1.375rem;
    }
  }

  :is(.overline, .font-overline) {
    color: var(--p-color-text-primary);
    font-family: Storebrand Text, sans-serif;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.25rem;
  }

  @media (min-width: 600px) {
    :is(.overline, .font-overline) {
      font-size: 1rem;
      line-height: 1.375rem;
    }

    :-webkit-any(.title, .font-title) {
      font-size: 1.5rem;
      line-height: 1.75rem;
    }
  }

  :-moz-any(.title, .font-title) {
    color: var(--p-color-text-primary);
    font-family: Storebrand Text, sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.375rem;
  }

  @media (min-width: 600px) {
    :-moz-any(.title, .font-title) {
      font-size: 1.5rem;
      line-height: 1.75rem;
    }
  }

  :is(.title, .font-title) {
    color: var(--p-color-text-primary);
    font-family: Storebrand Text, sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.375rem;
  }

  @media (min-width: 600px) {
    :is(.title, .font-title) {
      font-size: 1.5rem;
      line-height: 1.75rem;
    }

    :-webkit-any(.button, .font-button, .font-button-large, .font-button-lg) {
      font-size: 1.125rem;
    }
  }

  :-moz-any(.button, .font-button, .font-button-large, .font-button-lg) {
    color: var(--p-color-text-primary);
    font-family: Storebrand Text, sans-serif;
    font-size: 1rem;
    font-weight: 500;
  }

  @media (min-width: 600px) {
    :-moz-any(.button, .font-button, .font-button-large, .font-button-lg) {
      font-size: 1.125rem;
    }
  }

  :is(.button, .font-button, .font-button-large, .font-button-lg) {
    color: var(--p-color-text-primary);
    font-family: Storebrand Text, sans-serif;
    font-size: 1rem;
    font-weight: 500;
  }

  @media (min-width: 600px) {
    :is(.button, .font-button, .font-button-large, .font-button-lg) {
      font-size: 1.125rem;
    }

    :-webkit-any(.font-button-medium, .font-button-md) {
      font-size: 1rem;
    }
  }

  :-moz-any(.font-button-medium, .font-button-md) {
    color: var(--p-color-text-primary);
    font-family: Storebrand Text, sans-serif;
    font-size: .875rem;
    font-weight: 500;
  }

  @media (min-width: 600px) {
    :-moz-any(.font-button-medium, .font-button-md) {
      font-size: 1rem;
    }
  }

  :is(.font-button-medium, .font-button-md) {
    color: var(--p-color-text-primary);
    font-family: Storebrand Text, sans-serif;
    font-size: .875rem;
    font-weight: 500;
  }

  @media (min-width: 600px) {
    :is(.font-button-medium, .font-button-md) {
      font-size: 1rem;
    }

    :-webkit-any(.font-button-small, .font-button-sm) {
      font-size: .875rem;
    }
  }

  :-moz-any(.font-button-small, .font-button-sm) {
    color: var(--p-color-text-primary);
    font-family: Storebrand Text, sans-serif;
    font-size: .75rem;
    font-weight: 500;
  }

  @media (min-width: 600px) {
    :-moz-any(.font-button-small, .font-button-sm) {
      font-size: .875rem;
    }
  }

  :is(.font-button-small, .font-button-sm) {
    color: var(--p-color-text-primary);
    font-family: Storebrand Text, sans-serif;
    font-size: .75rem;
    font-weight: 500;
  }

  @media (min-width: 600px) {
    :is(.font-button-small, .font-button-sm) {
      font-size: .875rem;
    }
  }

  .font-button-mobile {
    color: var(--p-color-text-primary);
    font-family: Storebrand Text, sans-serif;
    font-size: 1rem;
    font-weight: 500;
  }

  .font-button-small {
    color: var(--p-color-text-primary);
    font-family: Storebrand Text, sans-serif;
    font-size: .875rem;
    font-weight: 500;
  }

  @media (min-width: 600px) {
    :-webkit-any(.hint, .font-hint, .font-caption, .font-details) {
      font-size: .875rem;
      line-height: 1.125rem;
    }
  }

  :-moz-any(.hint, .font-hint, .font-caption, .font-details) {
    color: var(--p-color-text-secondary);
    font-family: Storebrand Text, sans-serif;
    font-size: .75rem;
    font-weight: 400;
    line-height: 1rem;
  }

  @media (min-width: 600px) {
    :-moz-any(.hint, .font-hint, .font-caption, .font-details) {
      font-size: .875rem;
      line-height: 1.125rem;
    }
  }

  :is(.hint, .font-hint, .font-caption, .font-details) {
    color: var(--p-color-text-secondary);
    font-family: Storebrand Text, sans-serif;
    font-size: .75rem;
    font-weight: 400;
    line-height: 1rem;
  }

  @media (min-width: 600px) {
    :is(.hint, .font-hint, .font-caption, .font-details) {
      font-size: .875rem;
      line-height: 1.125rem;
    }

    :-webkit-any(.font-caption-demibold, .font-details-demibold) {
      font-size: .875rem;
      line-height: 1.125rem;
    }
  }

  :-moz-any(.font-caption-demibold, .font-details-demibold) {
    color: var(--p-color-text-secondary);
    font-family: Storebrand Text, sans-serif;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1rem;
  }

  @media (min-width: 600px) {
    :-moz-any(.font-caption-demibold, .font-details-demibold) {
      font-size: .875rem;
      line-height: 1.125rem;
    }
  }

  :is(.font-caption-demibold, .font-details-demibold) {
    color: var(--p-color-text-secondary);
    font-family: Storebrand Text, sans-serif;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1rem;
  }

  @media (min-width: 600px) {
    :is(.font-caption-demibold, .font-details-demibold) {
      font-size: .875rem;
      line-height: 1.125rem;
    }

    :-webkit-any(.key-statistic-1, .font-key-statistic-1) {
      font-size: 2rem;
      line-height: 2.5rem;
    }
  }

  :-moz-any(.key-statistic-1, .font-key-statistic-1) {
    color: var(--p-color-text-primary);
    font-family: Storebrand Display, sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 2rem;
  }

  @media (min-width: 600px) {
    :-moz-any(.key-statistic-1, .font-key-statistic-1) {
      font-size: 2rem;
      line-height: 2.5rem;
    }
  }

  :is(.key-statistic-1, .font-key-statistic-1) {
    color: var(--p-color-text-primary);
    font-family: Storebrand Display, sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 2rem;
  }

  @media (min-width: 600px) {
    :is(.key-statistic-1, .font-key-statistic-1) {
      font-size: 2rem;
      line-height: 2.5rem;
    }

    :-webkit-any(.key-statistic-2, .font-key-statistic-2) {
      font-size: 1.5rem;
      line-height: 2rem;
    }
  }

  :-moz-any(.key-statistic-2, .font-key-statistic-2) {
    color: var(--p-color-text-primary);
    font-family: Storebrand Display, sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.75rem;
  }

  @media (min-width: 600px) {
    :-moz-any(.key-statistic-2, .font-key-statistic-2) {
      font-size: 1.5rem;
      line-height: 2rem;
    }
  }

  :is(.key-statistic-2, .font-key-statistic-2) {
    color: var(--p-color-text-primary);
    font-family: Storebrand Display, sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.75rem;
  }

  @media (min-width: 600px) {
    :is(.key-statistic-2, .font-key-statistic-2) {
      font-size: 1.5rem;
      line-height: 2rem;
    }

    :-webkit-any(.key-statistic-3, .font-key-statistic-3) {
      font-size: 1.25rem;
      line-height: 1.75rem;
    }
  }

  :-moz-any(.key-statistic-3, .font-key-statistic-3) {
    color: var(--p-color-text-primary);
    font-family: Storebrand Display, sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.625rem;
  }

  @media (min-width: 600px) {
    :-moz-any(.key-statistic-3, .font-key-statistic-3) {
      font-size: 1.25rem;
      line-height: 1.75rem;
    }
  }

  :is(.key-statistic-3, .font-key-statistic-3) {
    color: var(--p-color-text-primary);
    font-family: Storebrand Display, sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.625rem;
  }

  @media (min-width: 600px) {
    :is(.key-statistic-3, .font-key-statistic-3) {
      font-size: 1.25rem;
      line-height: 1.75rem;
    }
  }

  .font-weight-400 {
    font-weight: 400;
  }

  .font-weight-500 {
    font-weight: 500;
  }

  .font-weight-600 {
    font-weight: 600;
  }

  .font-weight-700 {
    font-weight: 700;
  }

  .font-style-italic {
    font-style: italic;
  }

  .text-underline {
    text-decoration: underline;
  }

  :root, :host {
    --p-z-index-base: 0;
    --p-z-index-above: 1;
    --p-z-index-below: -1;
    --p-z-index-input: calc(var(--p-z-index-base)  + var(--p-z-index-above));
    --p-z-index-tooltip: calc(var(--p-z-index-input)  + var(--p-z-index-above));
    --p-z-index-popover: calc(var(--p-z-index-tooltip)  + var(--p-z-index-above));
    --p-z-index-dropdown: calc(var(--p-z-index-popover)  + var(--p-z-index-above));
    --p-z-index-navbar-menu: calc(var(--p-z-index-dropdown)  + var(--p-z-index-above));
    --p-z-index-toast: calc(var(--p-z-index-navbar-menu)  + var(--p-z-index-above));
    --p-z-index-dialog: calc(var(--p-z-index-toast)  + var(--p-z-index-above));
    --p-z-index-modal: calc(var(--p-z-index-dialog)  + var(--p-z-index-above));
  }

  .grid-container {
    --grid-columns: 12;
    --grid-gap: 2rem;
    --grid-max-width: 1128px;
    --grid-span: 12;
    --grid-start: auto;
    column-gap: var(--grid-gap);
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    max-width: var(--grid-max-width);
    width: 100%;
    margin: 0 auto;
    display: grid;
  }

  .grid-container .grid-item {
    grid-column: var(--grid-start) / span var(--grid-span);
  }

  @media screen and (min-width: 992px) {
    .grid-container .grid-item.lg_cols-1 {
      --grid-span: 1;
    }

    .grid-container .grid-item.lg_cols-2 {
      --grid-span: 2;
    }

    .grid-container .grid-item.lg_cols-3 {
      --grid-span: 3;
    }

    .grid-container .grid-item.lg_cols-4 {
      --grid-span: 4;
    }

    .grid-container .grid-item.lg_cols-5 {
      --grid-span: 5;
    }

    .grid-container .grid-item.lg_cols-6 {
      --grid-span: 6;
    }

    .grid-container .grid-item.lg_cols-7 {
      --grid-span: 7;
    }

    .grid-container .grid-item.lg_cols-8 {
      --grid-span: 8;
    }

    .grid-container .grid-item.lg_cols-9 {
      --grid-span: 9;
    }

    .grid-container .grid-item.lg_cols-10 {
      --grid-span: 10;
    }

    .grid-container .grid-item.lg_cols-11 {
      --grid-span: 11;
    }

    .grid-container .grid-item.lg_cols-12 {
      --grid-span: 12;
    }

    .grid-container .grid-item.lg_off-1 {
      --grid-start: 1;
    }

    .grid-container .grid-item.lg_off-2 {
      --grid-start: 2;
    }

    .grid-container .grid-item.lg_off-3 {
      --grid-start: 3;
    }

    .grid-container .grid-item.lg_off-4 {
      --grid-start: 4;
    }

    .grid-container .grid-item.lg_off-5 {
      --grid-start: 5;
    }

    .grid-container .grid-item.lg_off-6 {
      --grid-start: 6;
    }

    .grid-container .grid-item.lg_off-7 {
      --grid-start: 7;
    }

    .grid-container .grid-item.lg_off-8 {
      --grid-start: 8;
    }

    .grid-container .grid-item.lg_off-9 {
      --grid-start: 9;
    }

    .grid-container .grid-item.lg_off-10 {
      --grid-start: 10;
    }

    .grid-container .grid-item.lg_off-11 {
      --grid-start: 11;
    }

    .grid-container .grid-item.lg_off-12 {
      --grid-start: 12;
    }
  }

  @media screen and (max-width: 991px) and (min-width: 768px) {
    .grid-container {
      --grid-columns: 8;
      --grid-span: 8;
    }

    .grid-container .grid-item.md_cols-1 {
      --grid-span: 1;
    }

    .grid-container .grid-item.md_cols-2 {
      --grid-span: 2;
    }

    .grid-container .grid-item.md_cols-3 {
      --grid-span: 3;
    }

    .grid-container .grid-item.md_cols-4 {
      --grid-span: 4;
    }

    .grid-container .grid-item.md_cols-5 {
      --grid-span: 5;
    }

    .grid-container .grid-item.md_cols-6 {
      --grid-span: 6;
    }

    .grid-container .grid-item.md_cols-7 {
      --grid-span: 7;
    }

    .grid-container .grid-item.md_cols-8 {
      --grid-span: 8;
    }

    .grid-container .grid-item.md_off-1 {
      --grid-start: 1;
    }

    .grid-container .grid-item.md_off-2 {
      --grid-start: 2;
    }

    .grid-container .grid-item.md_off-3 {
      --grid-start: 3;
    }

    .grid-container .grid-item.md_off-4 {
      --grid-start: 4;
    }

    .grid-container .grid-item.md_off-5 {
      --grid-start: 5;
    }

    .grid-container .grid-item.md_off-6 {
      --grid-start: 6;
    }

    .grid-container .grid-item.md_off-7 {
      --grid-start: 7;
    }

    .grid-container .grid-item.md_off-8 {
      --grid-start: 8;
    }
  }

  @media screen and (max-width: 767px) {
    .grid-container {
      --grid-columns: 4;
      --grid-gap: 1rem;
      --grid-span: 4;
    }

    .grid-container .grid-item.sm_cols-1 {
      --grid-span: 1;
    }

    .grid-container .grid-item.sm_cols-2 {
      --grid-span: 2;
    }

    .grid-container .grid-item.sm_cols-3 {
      --grid-span: 3;
    }

    .grid-container .grid-item.sm_cols-4 {
      --grid-span: 4;
    }

    .grid-container .grid-item.sm_off-1 {
      --grid-start: 1;
    }

    .grid-container .grid-item.sm_off-2 {
      --grid-start: 2;
    }

    .grid-container .grid-item.sm_off-3 {
      --grid-start: 3;
    }

    .grid-container .grid-item.sm_off-4 {
      --grid-start: 4;
    }
  }

  * {
    font-synthesis: none;
    margin: 0;
  }

  html {
    font-size: 100%;
  }

  body {
    background: var(--p-color-background);
    color: var(--p-color-text-primary);
    font-family: Storebrand Text, sans-serif;
  }
}

@layer theme {
  :root, :host {
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --spacing-4: 4px;
    --spacing-8: 8px;
    --spacing-12: 12px;
    --spacing-16: 16px;
    --container-standard: 600px;
  }
}

@layer base, components;

@layer utilities {
  .visible {
    visibility: visible;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .container {
    width: 100%;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .mx-auto {
    margin-inline: auto;
  }

  .my-16 {
    margin-block: var(--spacing-16);
  }

  .mr-8 {
    margin-right: var(--spacing-8);
  }

  .mb-12 {
    margin-bottom: var(--spacing-12);
  }

  .mb-16 {
    margin-bottom: var(--spacing-16);
  }

  .ml-8 {
    margin-left: var(--spacing-8);
  }

  .contents {
    display: contents;
  }

  .flex {
    display: flex;
  }

  .max-w-\[110px\] {
    max-width: 110px;
  }

  .max-w-standard {
    max-width: var(--container-standard);
  }

  .flex-grow {
    flex-grow: 1;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .flex-col {
    flex-direction: column;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .items-center {
    align-items: center;
  }

  .gap-4 {
    gap: var(--spacing-4);
  }

  .gap-12 {
    gap: var(--spacing-12);
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .text-center {
    text-align: center;
  }

  .capitalize {
    text-transform: capitalize;
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}