@postenbring/hedwig-tokens/tokens-output/css/tokens.css

Design tokens for [Hedwig Design System](https://github.com/bring/hedwig-design-system).

:root {
  --hds-posten-colors-signature-red: #e32d22; /* @deprecated Use the new color scheme instead */
  --hds-posten-colors-darker-red: #4a1011; /* @deprecated Use the new color scheme instead */
  --hds-posten-colors-dark-red: #980000; /* @deprecated Use the new color scheme instead */
  --hds-posten-colors-light-red: #ffb5af; /* @deprecated Use the new color scheme instead */
  --hds-posten-colors-lighter-red: #fff5f0; /* @deprecated Use the new color scheme instead */
  --hds-posten-colors-signature-red-hover: #ca201c; /* @deprecated Use the new color scheme instead */
  --hds-posten-colors-light-red-hover: #ffa199; /* @deprecated Use the new color scheme instead */
  --hds-bring-colors-signature-green: #56b529; /* @deprecated Use the new color scheme instead */
  --hds-bring-colors-darker-green: #002f19; /* @deprecated Use the new color scheme instead */
  --hds-bring-colors-dark-green: #00643a; /* @deprecated Use the new color scheme instead */
  --hds-bring-colors-light-green: #b5e099; /* @deprecated Use the new color scheme instead */
  --hds-bring-colors-lighter-green: #f1f7e9; /* @deprecated Use the new color scheme instead */
  --hds-bring-colors-signature-green-hover: #6ec943; /* @deprecated Use the new color scheme instead */
  --hds-bring-colors-light-green-hover: #d3e593; /* @deprecated Use the new color scheme instead */
  --hds-ui-colors-black: #000000; /* @deprecated Use the new color scheme instead */
  --hds-ui-colors-dark-grey: #6e6e6e; /* @deprecated Use the new color scheme instead */
  --hds-ui-colors-grey: #d6d6d6; /* @deprecated Use the new color scheme instead */
  --hds-ui-colors-light-grey-stroke: #e4e4e4; /* @deprecated Use the new color scheme instead */
  --hds-ui-colors-light-grey-fill: #f2f2f2; /* @deprecated Use the new color scheme instead */
  --hds-ui-colors-white: #ffffff; /* @deprecated Use the new color scheme instead */
  --hds-ui-colors-warning-yellow: #fdbb2f; /* @deprecated Use the new color scheme instead */
  --hds-ui-colors-warning-yellow-stroke: #d68000; /* @deprecated Use the new color scheme instead */
  --hds-ui-colors-warning-yellow-light-fill: #fff5e0; /* @deprecated Use the new color scheme instead */
  --hds-ui-colors-warning-yellow-hover: #ffc340; /* @deprecated Use the new color scheme instead */
  --hds-ui-colors-black-hover: #1e1e1e; /* @deprecated Use the new color scheme instead */
  --hds-dark-mode-colors-obsidian: #121212; /* @deprecated Use the new color scheme instead - Base color for dark mode */
  --hds-dark-mode-colors-coal: #252525; /* @deprecated Use the new color scheme instead - Background on none-clickable cards */
  --hds-dark-mode-colors-dusk: #2c2c2c; /* @deprecated Use the new color scheme instead - Fill inputfields, checkbox, radio buttons, toogles */
  --hds-dark-mode-colors-spider: #333333; /* @deprecated Use the new color scheme instead - Clickable cards or tiles */
  --hds-dark-mode-colors-ash: #999999; /* @deprecated Use the new color scheme instead - Default radio buttons, checkbox, label on inputsfields, toogle off  (background) */
  --hds-breakpoint-small: 460px; /* Larger mobile phones */
  --hds-breakpoint-medium: 720px; /* Most tablets */
  --hds-breakpoint-large: 940px; /* Smaller laptops and desktop monitors. This is where the navbar goes from the mobile version to the desktop version */
  --hds-breakpoint-xlarge: 1200px; /* Most modern laptops and desktop monitors */
  --hds-spacing-4: 4px;
  --hds-spacing-8: 8px;
  --hds-spacing-12: 12px;
  --hds-spacing-16: 16px;
  --hds-spacing-20: 20px;
  --hds-spacing-24: 24px;
  --hds-spacing-32: 32px;
  --hds-spacing-40: 40px;
  --hds-spacing-48: 48px;
  --hds-spacing-64: 64px;
  --hds-spacing-80: 80px;
  --hds-spacing-120: 120px;
  --hds-spacing-160: 160px;
  --hds-navbar-height: 112px;
  --hds-fonts-posten-sans: 'Posten Sans', Arial, sans-serif;
  --hds-fonts-posten-sans-bold: 'Posten Sans Bold', Arial, sans-serif;
  --hds-fonts-posten-sans-medium: 'Posten Sans Medium', Arial, sans-serif;
  --hds-fonts-posten-sans-regular: 'Posten Sans Regular', Arial, sans-serif;
  --hds-typography-posten-h1-display: 700 clamp(40px,calc(40px + (72 - 40) * ((100vw - 300px) / (1200 - 300))),72px)/clamp(56px,calc(56px + (80 - 56) * ((100vw - 300px) / (1200 - 300))),80px) 'Posten Sans', Arial, sans-serif;
  --hds-typography-posten-h1: 700 clamp(32px,calc(32px + (48 - 32) * ((100vw - 300px) / (1200 - 300))),48px)/clamp(40px,calc(40px + (56 - 40) * ((100vw - 300px) / (1200 - 300))),56px) 'Posten Sans', Arial, sans-serif;
  --hds-typography-posten-h2: 700 clamp(28px,calc(28px + (32 - 28) * ((100vw - 300px) / (1200 - 300))),32px)/clamp(36px,calc(36px + (40 - 36) * ((100vw - 300px) / (1200 - 300))),40px) 'Posten Sans', Arial, sans-serif;
  --hds-typography-bring-h1-display: 500 clamp(40px,calc(40px + (72 - 40) * ((100vw - 300px) / (1200 - 300))),72px)/clamp(56px,calc(56px + (80 - 56) * ((100vw - 300px) / (1200 - 300))),80px) 'Posten Sans', Arial, sans-serif;
  --hds-typography-bring-h1: 500 clamp(32px,calc(32px + (48 - 32) * ((100vw - 300px) / (1200 - 300))),48px)/clamp(40px,calc(40px + (56 - 40) * ((100vw - 300px) / (1200 - 300))),56px) 'Posten Sans', Arial, sans-serif;
  --hds-typography-bring-h2: 500 clamp(28px,calc(28px + (32 - 28) * ((100vw - 300px) / (1200 - 300))),32px)/clamp(36px,calc(36px + (40 - 36) * ((100vw - 300px) / (1200 - 300))),40px) 'Posten Sans', Arial, sans-serif;
  --hds-typography-h3: 400 clamp(22px,calc(22px + (24 - 22) * ((100vw - 300px) / (1200 - 300))),24px)/clamp(28px,calc(28px + (32 - 28) * ((100vw - 300px) / (1200 - 300))),32px) 'Posten Sans', Arial, sans-serif;
  --hds-typography-h3-title: 500 clamp(22px,calc(22px + (24 - 22) * ((100vw - 300px) / (1200 - 300))),24px)/clamp(28px,calc(28px + (32 - 28) * ((100vw - 300px) / (1200 - 300))),32px) 'Posten Sans', Arial, sans-serif;
  --hds-typography-body: 400 clamp(18px,calc(18px + (20 - 18) * ((100vw - 300px) / (1200 - 300))),20px)/clamp(26px,calc(26px + (28 - 26) * ((100vw - 300px) / (1200 - 300))),28px) 'Posten Sans', Arial, sans-serif;
  --hds-typography-body-title: 500 clamp(18px,calc(18px + (20 - 18) * ((100vw - 300px) / (1200 - 300))),20px)/clamp(26px,calc(26px + (28 - 26) * ((100vw - 300px) / (1200 - 300))),28px) 'Posten Sans', Arial, sans-serif;
  --hds-typography-body-small: 400 clamp(16px,calc(16px + (18 - 16) * ((100vw - 300px) / (1200 - 300))),18px)/clamp(24px,calc(24px + (26 - 24) * ((100vw - 300px) / (1200 - 300))),26px) 'Posten Sans', Arial, sans-serif;
  --hds-typography-body-small-title: 500 clamp(16px,calc(16px + (18 - 16) * ((100vw - 300px) / (1200 - 300))),18px)/clamp(24px,calc(24px + (26 - 24) * ((100vw - 300px) / (1200 - 300))),26px) 'Posten Sans', Arial, sans-serif;
  --hds-typography-technical: 400 clamp(14px,calc(14px + (16 - 14) * ((100vw - 300px) / (1200 - 300))),16px)/clamp(22px,calc(22px + (24 - 22) * ((100vw - 300px) / (1200 - 300))),24px) 'Posten Sans', Arial, sans-serif;
  --hds-typography-technical-title: 500 clamp(14px,calc(14px + (16 - 14) * ((100vw - 300px) / (1200 - 300))),16px)/clamp(22px,calc(22px + (24 - 22) * ((100vw - 300px) / (1200 - 300))),24px) 'Posten Sans', Arial, sans-serif;
  --hds-typography-caption: 400 13px/18px 'Posten Sans', Arial, sans-serif;
  --hds-typography-caption-title: 500 13px/18px 'Posten Sans', Arial, sans-serif;
  --hds-border-radius-8: 8px;
  --hds-border-radius-16: 16px;
  --hds-border-radius-24: 24px;
  --hds-border-radius-32: 32px;
  --hds-border-radius: 2px;
  --hds-stroke-default: 1px;
  --hds-stroke-thick: 2px;
  --hds-shadow-default: 0px 1px 5px 0px #00000022;
  --hds-micro-animation-easing-in: cubic-bezier(0.65, 0, 1, 0.1);
  --hds-micro-animation-easing-out: cubic-bezier(0, 0.45, 0.1, 1);
  --hds-micro-animation-easing-normal: cubic-bezier(0.45, 0.1, 0.65, 1);
  --hds-micro-animation-duration-quick: 0.130s;
  --hds-micro-animation-duration-normal: 0.300s;
  --hds-micro-animation-duration-slow: 0.700s;
  --hds-opacity-7: .07;
  --hds-opacity-10: .1;
  --hds-opacity-20: .2;
  --hds-opacity-50: .5;
  --hds-font-size-posten-h1-display: clamp(40px,calc(40px + (72 - 40) * ((100vw - 300px) / (1200 - 300))),72px);
  --hds-font-size-posten-h1-display-min: 40px;
  --hds-font-size-posten-h1-display-max: 72px;
  --hds-font-size-posten-h1: clamp(32px,calc(32px + (48 - 32) * ((100vw - 300px) / (1200 - 300))),48px);
  --hds-font-size-posten-h1-min: 32px;
  --hds-font-size-posten-h1-max: 48px;
  --hds-font-size-posten-h2: clamp(28px,calc(28px + (32 - 28) * ((100vw - 300px) / (1200 - 300))),32px);
  --hds-font-size-posten-h2-min: 28px;
  --hds-font-size-posten-h2-max: 32px;
  --hds-font-size-bring-h1-display: clamp(40px,calc(40px + (72 - 40) * ((100vw - 300px) / (1200 - 300))),72px);
  --hds-font-size-bring-h1-display-min: 40px;
  --hds-font-size-bring-h1-display-max: 72px;
  --hds-font-size-bring-h1: clamp(32px,calc(32px + (48 - 32) * ((100vw - 300px) / (1200 - 300))),48px);
  --hds-font-size-bring-h1-min: 32px;
  --hds-font-size-bring-h1-max: 48px;
  --hds-font-size-bring-h2: clamp(28px,calc(28px + (32 - 28) * ((100vw - 300px) / (1200 - 300))),32px);
  --hds-font-size-bring-h2-min: 28px;
  --hds-font-size-bring-h2-max: 32px;
  --hds-font-size-h3: clamp(22px,calc(22px + (24 - 22) * ((100vw - 300px) / (1200 - 300))),24px);
  --hds-font-size-h3-min: 22px;
  --hds-font-size-h3-max: 24px;
  --hds-font-size-h3-title: clamp(22px,calc(22px + (24 - 22) * ((100vw - 300px) / (1200 - 300))),24px);
  --hds-font-size-h3-title-min: 22px;
  --hds-font-size-h3-title-max: 24px;
  --hds-font-size-body: clamp(18px,calc(18px + (20 - 18) * ((100vw - 300px) / (1200 - 300))),20px);
  --hds-font-size-body-min: 18px;
  --hds-font-size-body-max: 20px;
  --hds-font-size-body-title: clamp(18px,calc(18px + (20 - 18) * ((100vw - 300px) / (1200 - 300))),20px);
  --hds-font-size-body-title-min: 18px;
  --hds-font-size-body-title-max: 20px;
  --hds-font-size-body-small: clamp(16px,calc(16px + (18 - 16) * ((100vw - 300px) / (1200 - 300))),18px);
  --hds-font-size-body-small-min: 16px;
  --hds-font-size-body-small-max: 18px;
  --hds-font-size-body-small-title: clamp(16px,calc(16px + (18 - 16) * ((100vw - 300px) / (1200 - 300))),18px);
  --hds-font-size-body-small-title-min: 16px;
  --hds-font-size-body-small-title-max: 18px;
  --hds-font-size-technical: clamp(14px,calc(14px + (16 - 14) * ((100vw - 300px) / (1200 - 300))),16px);
  --hds-font-size-technical-min: 14px;
  --hds-font-size-technical-max: 16px;
  --hds-font-size-technical-title: clamp(14px,calc(14px + (16 - 14) * ((100vw - 300px) / (1200 - 300))),16px);
  --hds-font-size-technical-title-min: 14px;
  --hds-font-size-technical-title-max: 16px;
  --hds-font-size-caption: 13px;
  --hds-font-size-caption-title: 13px;
  --hds-line-height-posten-h1-display: clamp(56px,calc(56px + (80 - 56) * ((100vw - 300px) / (1200 - 300))),80px);
  --hds-line-height-posten-h1-display-min: 56px;
  --hds-line-height-posten-h1-display-max: 80px;
  --hds-line-height-posten-h1: clamp(40px,calc(40px + (56 - 40) * ((100vw - 300px) / (1200 - 300))),56px);
  --hds-line-height-posten-h1-min: 40px;
  --hds-line-height-posten-h1-max: 56px;
  --hds-line-height-posten-h2: clamp(36px,calc(36px + (40 - 36) * ((100vw - 300px) / (1200 - 300))),40px);
  --hds-line-height-posten-h2-min: 36px;
  --hds-line-height-posten-h2-max: 40px;
  --hds-line-height-bring-h1-display: clamp(56px,calc(56px + (80 - 56) * ((100vw - 300px) / (1200 - 300))),80px);
  --hds-line-height-bring-h1-display-min: 56px;
  --hds-line-height-bring-h1-display-max: 80px;
  --hds-line-height-bring-h1: clamp(40px,calc(40px + (56 - 40) * ((100vw - 300px) / (1200 - 300))),56px);
  --hds-line-height-bring-h1-min: 40px;
  --hds-line-height-bring-h1-max: 56px;
  --hds-line-height-bring-h2: clamp(36px,calc(36px + (40 - 36) * ((100vw - 300px) / (1200 - 300))),40px);
  --hds-line-height-bring-h2-min: 36px;
  --hds-line-height-bring-h2-max: 40px;
  --hds-line-height-h3: clamp(28px,calc(28px + (32 - 28) * ((100vw - 300px) / (1200 - 300))),32px);
  --hds-line-height-h3-min: 28px;
  --hds-line-height-h3-max: 32px;
  --hds-line-height-h3-title: clamp(28px,calc(28px + (32 - 28) * ((100vw - 300px) / (1200 - 300))),32px);
  --hds-line-height-h3-title-min: 28px;
  --hds-line-height-h3-title-max: 32px;
  --hds-line-height-body: clamp(26px,calc(26px + (28 - 26) * ((100vw - 300px) / (1200 - 300))),28px);
  --hds-line-height-body-min: 26px;
  --hds-line-height-body-max: 28px;
  --hds-line-height-body-title: clamp(26px,calc(26px + (28 - 26) * ((100vw - 300px) / (1200 - 300))),28px);
  --hds-line-height-body-title-min: 26px;
  --hds-line-height-body-title-max: 28px;
  --hds-line-height-body-small: clamp(24px,calc(24px + (26 - 24) * ((100vw - 300px) / (1200 - 300))),26px);
  --hds-line-height-body-small-min: 24px;
  --hds-line-height-body-small-max: 26px;
  --hds-line-height-body-small-title: clamp(24px,calc(24px + (26 - 24) * ((100vw - 300px) / (1200 - 300))),26px);
  --hds-line-height-body-small-title-min: 24px;
  --hds-line-height-body-small-title-max: 26px;
  --hds-line-height-technical: clamp(22px,calc(22px + (24 - 22) * ((100vw - 300px) / (1200 - 300))),24px);
  --hds-line-height-technical-min: 22px;
  --hds-line-height-technical-max: 24px;
  --hds-line-height-technical-title: clamp(22px,calc(22px + (24 - 22) * ((100vw - 300px) / (1200 - 300))),24px);
  --hds-line-height-technical-title-min: 22px;
  --hds-line-height-technical-title-max: 24px;
  --hds-line-height-caption: 18px;
  --hds-line-height-caption-title: 18px;
  --hds-font-weight-posten-h1-display: 700;
  --hds-font-weight-posten-h1: 700;
  --hds-font-weight-posten-h2: 700;
  --hds-font-weight-bring-h1-display: 500;
  --hds-font-weight-bring-h1: 500;
  --hds-font-weight-bring-h2: 500;
  --hds-font-weight-h3: 400;
  --hds-font-weight-h3-title: 500;
  --hds-font-weight-body: 400;
  --hds-font-weight-body-title: 500;
  --hds-font-weight-body-small: 400;
  --hds-font-weight-body-small-title: 500;
  --hds-font-weight-technical: 400;
  --hds-font-weight-technical-title: 500;
  --hds-font-weight-caption: 400;
  --hds-font-weight-caption-title: 500;
}
@layer hds.theme.color-scheme.light {
:root, [data-color-scheme="light"] {
  --hds-colors-bring-bg-default: #FFFFFF;
  --hds-colors-bring-bg-tinted: #F1F7E9;
  --hds-colors-bring-surface-default: #F1F7E9;
  --hds-colors-bring-surface-tinted: #DDF1D0;
  --hds-colors-bring-surface-hover: #C6E7B1;
  --hds-colors-bring-surface-active: #B5E099;
  --hds-colors-bring-border-default: #56B529;
  --hds-colors-bring-border-strong: #00643A;
  --hds-colors-bring-text-subtle: #00643A;
  --hds-colors-bring-text-default: #002F19;
  --hds-colors-bring-base-default: #6EC943;
  --hds-colors-bring-base-hover: #56B529;
  --hds-colors-bring-base-active: #B5E099;
  --hds-colors-bring-base-contrast-default: #000000;
  --hds-colors-posten-bg-default: #FFFFFF;
  --hds-colors-posten-bg-tinted: #FFF5F0;
  --hds-colors-posten-surface-default: #FFF5F0;
  --hds-colors-posten-surface-tinted: #FFE3E0;
  --hds-colors-posten-surface-hover: #FCD3CF;
  --hds-colors-posten-surface-active: #FFB5AF;
  --hds-colors-posten-border-default: #E32D22;
  --hds-colors-posten-border-strong: #980000;
  --hds-colors-posten-text-subtle: #980000;
  --hds-colors-posten-text-default: #4A1011;
  --hds-colors-posten-base-default: #E32D22;
  --hds-colors-posten-base-hover: #CA201C;
  --hds-colors-posten-base-active: #980000;
  --hds-colors-posten-base-contrast-default: #FFFFFF;
  --hds-colors-neutral-bg-default: #FFFFFF;
  --hds-colors-neutral-bg-tinted: #F7F7F7;
  --hds-colors-neutral-surface-default: #FFFFFF;
  --hds-colors-neutral-surface-tinted: #F7F7F7;
  --hds-colors-neutral-surface-hover: #F2F2F2;
  --hds-colors-neutral-surface-active: #E6E6E6;
  --hds-colors-neutral-border-default: #D6D6D6;
  --hds-colors-neutral-border-strong: #666666;
  --hds-colors-neutral-text-subtle: #666666;
  --hds-colors-neutral-text-default: #000000;
  --hds-colors-neutral-base-default: #E6E6E6;
  --hds-colors-neutral-base-hover: #D6D6D6;
  --hds-colors-neutral-base-active: #C1C1C1;
  --hds-colors-neutral-base-contrast-default: #121212;
  --hds-colors-warning-surface-default: #FFF5E0;
  --hds-colors-warning-border-default: #D68000;
  --hds-colors-warning-border-strong: #666666;
  --hds-colors-warning-text-default: #121212;
  --hds-colors-warning-base-default: #FDBB2F;
  --hds-colors-warning-base-contrast-default: #121212;
  --hds-colors-success-surface-default: #F1F7E9;
  --hds-colors-success-border-default: #C6E7B1;
  --hds-colors-success-border-strong: #00643A;
  --hds-colors-success-text-default: #00643A;
  --hds-colors-success-base-default: #B5E099;
  --hds-colors-success-base-contrast-default: #002F19;
  --hds-colors-info-surface-default: #EFEEFF;
  --hds-colors-info-border-default: #C6C2FF;
  --hds-colors-info-border-strong: #7167FE;
  --hds-colors-info-text-default: #002CA3;
  --hds-colors-info-base-default: #FFF5E0;
  --hds-colors-info-base-contrast-default: #121212;
  --hds-colors-error-surface-default: #FFF5F0;
  --hds-colors-error-border-default: #FFB5AF;
  --hds-colors-error-border-strong: #980000;
  --hds-colors-error-text-default: #980000;
  --hds-colors-error-base-default: #980000;
  --hds-colors-error-base-contrast-default: #FFFFFF;
  color-scheme: light;
}}
@media (prefers-color-scheme: light) {
  [data-color-scheme="auto"] {
  --hds-colors-bring-bg-default: #FFFFFF;
  --hds-colors-bring-bg-tinted: #F1F7E9;
  --hds-colors-bring-surface-default: #F1F7E9;
  --hds-colors-bring-surface-tinted: #DDF1D0;
  --hds-colors-bring-surface-hover: #C6E7B1;
  --hds-colors-bring-surface-active: #B5E099;
  --hds-colors-bring-border-default: #56B529;
  --hds-colors-bring-border-strong: #00643A;
  --hds-colors-bring-text-subtle: #00643A;
  --hds-colors-bring-text-default: #002F19;
  --hds-colors-bring-base-default: #6EC943;
  --hds-colors-bring-base-hover: #56B529;
  --hds-colors-bring-base-active: #B5E099;
  --hds-colors-bring-base-contrast-default: #000000;
  --hds-colors-posten-bg-default: #FFFFFF;
  --hds-colors-posten-bg-tinted: #FFF5F0;
  --hds-colors-posten-surface-default: #FFF5F0;
  --hds-colors-posten-surface-tinted: #FFE3E0;
  --hds-colors-posten-surface-hover: #FCD3CF;
  --hds-colors-posten-surface-active: #FFB5AF;
  --hds-colors-posten-border-default: #E32D22;
  --hds-colors-posten-border-strong: #980000;
  --hds-colors-posten-text-subtle: #980000;
  --hds-colors-posten-text-default: #4A1011;
  --hds-colors-posten-base-default: #E32D22;
  --hds-colors-posten-base-hover: #CA201C;
  --hds-colors-posten-base-active: #980000;
  --hds-colors-posten-base-contrast-default: #FFFFFF;
  --hds-colors-neutral-bg-default: #FFFFFF;
  --hds-colors-neutral-bg-tinted: #F7F7F7;
  --hds-colors-neutral-surface-default: #FFFFFF;
  --hds-colors-neutral-surface-tinted: #F7F7F7;
  --hds-colors-neutral-surface-hover: #F2F2F2;
  --hds-colors-neutral-surface-active: #E6E6E6;
  --hds-colors-neutral-border-default: #D6D6D6;
  --hds-colors-neutral-border-strong: #666666;
  --hds-colors-neutral-text-subtle: #666666;
  --hds-colors-neutral-text-default: #000000;
  --hds-colors-neutral-base-default: #E6E6E6;
  --hds-colors-neutral-base-hover: #D6D6D6;
  --hds-colors-neutral-base-active: #C1C1C1;
  --hds-colors-neutral-base-contrast-default: #121212;
  --hds-colors-warning-surface-default: #FFF5E0;
  --hds-colors-warning-border-default: #D68000;
  --hds-colors-warning-border-strong: #666666;
  --hds-colors-warning-text-default: #121212;
  --hds-colors-warning-base-default: #FDBB2F;
  --hds-colors-warning-base-contrast-default: #121212;
  --hds-colors-success-surface-default: #F1F7E9;
  --hds-colors-success-border-default: #C6E7B1;
  --hds-colors-success-border-strong: #00643A;
  --hds-colors-success-text-default: #00643A;
  --hds-colors-success-base-default: #B5E099;
  --hds-colors-success-base-contrast-default: #002F19;
  --hds-colors-info-surface-default: #EFEEFF;
  --hds-colors-info-border-default: #C6C2FF;
  --hds-colors-info-border-strong: #7167FE;
  --hds-colors-info-text-default: #002CA3;
  --hds-colors-info-base-default: #FFF5E0;
  --hds-colors-info-base-contrast-default: #121212;
  --hds-colors-error-surface-default: #FFF5F0;
  --hds-colors-error-border-default: #FFB5AF;
  --hds-colors-error-border-strong: #980000;
  --hds-colors-error-text-default: #980000;
  --hds-colors-error-base-default: #980000;
  --hds-colors-error-base-contrast-default: #FFFFFF;
  color-scheme: light;
}}
@layer hds.theme.color-scheme.dark {
[data-color-scheme="dark"] {
  --hds-colors-bring-bg-default: #121212;
  --hds-colors-bring-bg-tinted: #222222;
  --hds-colors-bring-surface-default: #333333;
  --hds-colors-bring-surface-tinted: #002F19;
  --hds-colors-bring-surface-hover: #222222;
  --hds-colors-bring-surface-active: #3D3D3D;
  --hds-colors-bring-border-default: #56B529;
  --hds-colors-bring-border-strong: #C6E7B1;
  --hds-colors-bring-text-subtle: #C6E7B1;
  --hds-colors-bring-text-default: #F1F7E9;
  --hds-colors-bring-base-default: #6EC943;
  --hds-colors-bring-base-hover: #56B529;
  --hds-colors-bring-base-active: #B5E099;
  --hds-colors-bring-base-contrast-default: #000000;
  --hds-colors-posten-bg-default: #121212;
  --hds-colors-posten-bg-tinted: #222222;
  --hds-colors-posten-surface-default: #333333;
  --hds-colors-posten-surface-tinted: #4A1011;
  --hds-colors-posten-surface-hover: #222222;
  --hds-colors-posten-surface-active: #3D3D3D;
  --hds-colors-posten-border-default: #E32D22;
  --hds-colors-posten-border-strong: #FCD3CF;
  --hds-colors-posten-text-subtle: #FCD3CF;
  --hds-colors-posten-text-default: #FFF5F0;
  --hds-colors-posten-base-default: #E32D22;
  --hds-colors-posten-base-hover: #CA201C;
  --hds-colors-posten-base-active: #980000;
  --hds-colors-posten-base-contrast-default: #FFFFFF;
  --hds-colors-neutral-bg-default: #121212;
  --hds-colors-neutral-bg-tinted: #222222;
  --hds-colors-neutral-surface-default: #2C2C2C;
  --hds-colors-neutral-surface-tinted: #333333;
  --hds-colors-neutral-surface-hover: #3D3D3D;
  --hds-colors-neutral-surface-active: #666666;
  --hds-colors-neutral-border-default: #666666;
  --hds-colors-neutral-border-strong: #D6D6D6;
  --hds-colors-neutral-text-subtle: #D6D6D6;
  --hds-colors-neutral-text-default: #FFFFFF;
  --hds-colors-neutral-base-default: #222222;
  --hds-colors-neutral-base-hover: #3D3D3D;
  --hds-colors-neutral-base-active: #666666;
  --hds-colors-neutral-base-contrast-default: #F7F7F7;
  --hds-colors-warning-surface-default: #3D3D3D;
  --hds-colors-warning-border-default: #D68000;
  --hds-colors-warning-border-strong: #FDBB2F;
  --hds-colors-warning-text-default: #FFE2A3;
  --hds-colors-warning-base-default: #FDBB2F;
  --hds-colors-warning-base-contrast-default: #121212;
  --hds-colors-success-surface-default: #00643A;
  --hds-colors-success-border-default: #00643A;
  --hds-colors-success-border-strong: #C6E7B1;
  --hds-colors-success-text-default: #B5E099;
  --hds-colors-success-base-default: #B5E099;
  --hds-colors-success-base-contrast-default: #002F19;
  --hds-colors-info-surface-default: #3D3D3D;
  --hds-colors-info-border-default: #C6C2FF;
  --hds-colors-info-border-strong: #EFEEFF;
  --hds-colors-info-text-default: #C6C2FF;
  --hds-colors-info-base-default: #C6C2FF;
  --hds-colors-info-base-contrast-default: #121212;
  --hds-colors-error-surface-default: #4A1011;
  --hds-colors-error-border-default: #980000;
  --hds-colors-error-border-strong: #FFB5AF;
  --hds-colors-error-text-default: #FCD3CF;
  --hds-colors-error-base-default: #980000;
  --hds-colors-error-base-contrast-default: #FFFFFF;
  color-scheme: dark;
}}
@media (prefers-color-scheme: dark) {
  [data-color-scheme="auto"] {
  --hds-colors-bring-bg-default: #121212;
  --hds-colors-bring-bg-tinted: #222222;
  --hds-colors-bring-surface-default: #333333;
  --hds-colors-bring-surface-tinted: #002F19;
  --hds-colors-bring-surface-hover: #222222;
  --hds-colors-bring-surface-active: #3D3D3D;
  --hds-colors-bring-border-default: #56B529;
  --hds-colors-bring-border-strong: #C6E7B1;
  --hds-colors-bring-text-subtle: #C6E7B1;
  --hds-colors-bring-text-default: #F1F7E9;
  --hds-colors-bring-base-default: #6EC943;
  --hds-colors-bring-base-hover: #56B529;
  --hds-colors-bring-base-active: #B5E099;
  --hds-colors-bring-base-contrast-default: #000000;
  --hds-colors-posten-bg-default: #121212;
  --hds-colors-posten-bg-tinted: #222222;
  --hds-colors-posten-surface-default: #333333;
  --hds-colors-posten-surface-tinted: #4A1011;
  --hds-colors-posten-surface-hover: #222222;
  --hds-colors-posten-surface-active: #3D3D3D;
  --hds-colors-posten-border-default: #E32D22;
  --hds-colors-posten-border-strong: #FCD3CF;
  --hds-colors-posten-text-subtle: #FCD3CF;
  --hds-colors-posten-text-default: #FFF5F0;
  --hds-colors-posten-base-default: #E32D22;
  --hds-colors-posten-base-hover: #CA201C;
  --hds-colors-posten-base-active: #980000;
  --hds-colors-posten-base-contrast-default: #FFFFFF;
  --hds-colors-neutral-bg-default: #121212;
  --hds-colors-neutral-bg-tinted: #222222;
  --hds-colors-neutral-surface-default: #2C2C2C;
  --hds-colors-neutral-surface-tinted: #333333;
  --hds-colors-neutral-surface-hover: #3D3D3D;
  --hds-colors-neutral-surface-active: #666666;
  --hds-colors-neutral-border-default: #666666;
  --hds-colors-neutral-border-strong: #D6D6D6;
  --hds-colors-neutral-text-subtle: #D6D6D6;
  --hds-colors-neutral-text-default: #FFFFFF;
  --hds-colors-neutral-base-default: #222222;
  --hds-colors-neutral-base-hover: #3D3D3D;
  --hds-colors-neutral-base-active: #666666;
  --hds-colors-neutral-base-contrast-default: #F7F7F7;
  --hds-colors-warning-surface-default: #3D3D3D;
  --hds-colors-warning-border-default: #D68000;
  --hds-colors-warning-border-strong: #FDBB2F;
  --hds-colors-warning-text-default: #FFE2A3;
  --hds-colors-warning-base-default: #FDBB2F;
  --hds-colors-warning-base-contrast-default: #121212;
  --hds-colors-success-surface-default: #00643A;
  --hds-colors-success-border-default: #00643A;
  --hds-colors-success-border-strong: #C6E7B1;
  --hds-colors-success-text-default: #B5E099;
  --hds-colors-success-base-default: #B5E099;
  --hds-colors-success-base-contrast-default: #002F19;
  --hds-colors-info-surface-default: #3D3D3D;
  --hds-colors-info-border-default: #C6C2FF;
  --hds-colors-info-border-strong: #EFEEFF;
  --hds-colors-info-text-default: #C6C2FF;
  --hds-colors-info-base-default: #C6C2FF;
  --hds-colors-info-base-contrast-default: #121212;
  --hds-colors-error-surface-default: #4A1011;
  --hds-colors-error-border-default: #980000;
  --hds-colors-error-border-strong: #FFB5AF;
  --hds-colors-error-text-default: #FCD3CF;
  --hds-colors-error-base-default: #980000;
  --hds-colors-error-base-contrast-default: #FFFFFF;
  color-scheme: dark;
}}

@layer hds.theme.color {
[data-color="bring"], [data-color="bring"] [data-color-scheme] {
  --hds-colors-base-contrast-default: var(--hds-colors-bring-base-contrast-default);
  --hds-colors-base-active: var(--hds-colors-bring-base-active);
  --hds-colors-base-hover: var(--hds-colors-bring-base-hover);
  --hds-colors-base-default: var(--hds-colors-bring-base-default);
  --hds-colors-text-default: var(--hds-colors-bring-text-default);
  --hds-colors-text-subtle: var(--hds-colors-bring-text-subtle);
  --hds-colors-border-strong: var(--hds-colors-bring-border-strong);
  --hds-colors-border-default: var(--hds-colors-bring-border-default);
  --hds-colors-surface-active: var(--hds-colors-bring-surface-active);
  --hds-colors-surface-hover: var(--hds-colors-bring-surface-hover);
  --hds-colors-surface-tinted: var(--hds-colors-bring-surface-tinted);
  --hds-colors-surface-default: var(--hds-colors-bring-surface-default);
  --hds-colors-bg-tinted: var(--hds-colors-bring-bg-tinted);
  --hds-colors-bg-default: var(--hds-colors-bring-bg-default);
  --hds-typography-h1-display: 500 clamp(40px,calc(40px + (72 - 40) * ((100vw - 300px) / (1200 - 300))),72px)/clamp(56px,calc(56px + (80 - 56) * ((100vw - 300px) / (1200 - 300))),80px) 'Posten Sans', Arial, sans-serif;
  --hds-typography-h1: 500 clamp(32px,calc(32px + (48 - 32) * ((100vw - 300px) / (1200 - 300))),48px)/clamp(40px,calc(40px + (56 - 40) * ((100vw - 300px) / (1200 - 300))),56px) 'Posten Sans', Arial, sans-serif;
  --hds-typography-h2: 500 clamp(28px,calc(28px + (32 - 28) * ((100vw - 300px) / (1200 - 300))),32px)/clamp(36px,calc(36px + (40 - 36) * ((100vw - 300px) / (1200 - 300))),40px) 'Posten Sans', Arial, sans-serif;
}}

@layer hds.theme.color {
[data-color="posten"], [data-color="posten"] [data-color-scheme] {
  --hds-colors-base-contrast-default: var(--hds-colors-posten-base-contrast-default);
  --hds-colors-base-active: var(--hds-colors-posten-base-active);
  --hds-colors-base-hover: var(--hds-colors-posten-base-hover);
  --hds-colors-base-default: var(--hds-colors-posten-base-default);
  --hds-colors-text-default: var(--hds-colors-posten-text-default);
  --hds-colors-text-subtle: var(--hds-colors-posten-text-subtle);
  --hds-colors-border-strong: var(--hds-colors-posten-border-strong);
  --hds-colors-border-default: var(--hds-colors-posten-border-default);
  --hds-colors-surface-active: var(--hds-colors-posten-surface-active);
  --hds-colors-surface-hover: var(--hds-colors-posten-surface-hover);
  --hds-colors-surface-tinted: var(--hds-colors-posten-surface-tinted);
  --hds-colors-surface-default: var(--hds-colors-posten-surface-default);
  --hds-colors-bg-tinted: var(--hds-colors-posten-bg-tinted);
  --hds-colors-bg-default: var(--hds-colors-posten-bg-default);
  --hds-typography-h1-display: 700 clamp(40px,calc(40px + (72 - 40) * ((100vw - 300px) / (1200 - 300))),72px)/clamp(56px,calc(56px + (80 - 56) * ((100vw - 300px) / (1200 - 300))),80px) 'Posten Sans', Arial, sans-serif;
  --hds-typography-h1: 700 clamp(32px,calc(32px + (48 - 32) * ((100vw - 300px) / (1200 - 300))),48px)/clamp(40px,calc(40px + (56 - 40) * ((100vw - 300px) / (1200 - 300))),56px) 'Posten Sans', Arial, sans-serif;
  --hds-typography-h2: 700 clamp(28px,calc(28px + (32 - 28) * ((100vw - 300px) / (1200 - 300))),32px)/clamp(36px,calc(36px + (40 - 36) * ((100vw - 300px) / (1200 - 300))),40px) 'Posten Sans', Arial, sans-serif;
}}

@layer hds.theme.color {
[data-color="neutral"], [data-color="neutral"] [data-color-scheme] {
  --hds-colors-base-contrast-default: var(--hds-colors-neutral-base-contrast-default);
  --hds-colors-base-active: var(--hds-colors-neutral-base-active);
  --hds-colors-base-hover: var(--hds-colors-neutral-base-hover);
  --hds-colors-base-default: var(--hds-colors-neutral-base-default);
  --hds-colors-text-default: var(--hds-colors-neutral-text-default);
  --hds-colors-text-subtle: var(--hds-colors-neutral-text-subtle);
  --hds-colors-border-strong: var(--hds-colors-neutral-border-strong);
  --hds-colors-border-default: var(--hds-colors-neutral-border-default);
  --hds-colors-surface-active: var(--hds-colors-neutral-surface-active);
  --hds-colors-surface-hover: var(--hds-colors-neutral-surface-hover);
  --hds-colors-surface-tinted: var(--hds-colors-neutral-surface-tinted);
  --hds-colors-surface-default: var(--hds-colors-neutral-surface-default);
  --hds-colors-bg-tinted: var(--hds-colors-neutral-bg-tinted);
  --hds-colors-bg-default: var(--hds-colors-neutral-bg-default);

}}

@layer hds.theme.color {
[data-color="info"], [data-color="info"] [data-color-scheme] {
  --hds-colors-base-contrast-default: var(--hds-colors-info-base-contrast-default);
  --hds-colors-base-default: var(--hds-colors-info-base-default);
  --hds-colors-text-default: var(--hds-colors-info-text-default);
  --hds-colors-border-strong: var(--hds-colors-info-border-strong);
  --hds-colors-border-default: var(--hds-colors-info-border-default);
  --hds-colors-surface-default: var(--hds-colors-info-surface-default);

}}

@layer hds.theme.color {
[data-color="success"], [data-color="success"] [data-color-scheme] {
  --hds-colors-base-contrast-default: var(--hds-colors-success-base-contrast-default);
  --hds-colors-base-default: var(--hds-colors-success-base-default);
  --hds-colors-text-default: var(--hds-colors-success-text-default);
  --hds-colors-border-strong: var(--hds-colors-success-border-strong);
  --hds-colors-border-default: var(--hds-colors-success-border-default);
  --hds-colors-surface-default: var(--hds-colors-success-surface-default);

}}

@layer hds.theme.color {
[data-color="warning"], [data-color="warning"] [data-color-scheme] {
  --hds-colors-base-contrast-default: var(--hds-colors-warning-base-contrast-default);
  --hds-colors-base-default: var(--hds-colors-warning-base-default);
  --hds-colors-text-default: var(--hds-colors-warning-text-default);
  --hds-colors-border-strong: var(--hds-colors-warning-border-strong);
  --hds-colors-border-default: var(--hds-colors-warning-border-default);
  --hds-colors-surface-default: var(--hds-colors-warning-surface-default);

}}

@layer hds.theme.color {
[data-color="error"], [data-color="error"] [data-color-scheme] {
  --hds-colors-base-contrast-default: var(--hds-colors-error-base-contrast-default);
  --hds-colors-base-default: var(--hds-colors-error-base-default);
  --hds-colors-text-default: var(--hds-colors-error-text-default);
  --hds-colors-border-strong: var(--hds-colors-error-border-strong);
  --hds-colors-border-default: var(--hds-colors-error-border-default);
  --hds-colors-surface-default: var(--hds-colors-error-surface-default);

}}
:root, /* Default */
.hds-theme-posten {
  --hds-typography-h1-display: 700 clamp(40px,calc(40px + (72 - 40) * ((100vw - 300px) / (1200 - 300))),72px)/clamp(56px,calc(56px + (80 - 56) * ((100vw - 300px) / (1200 - 300))),80px) 'Posten Sans', Arial, sans-serif;
  --hds-typography-h1: 700 clamp(32px,calc(32px + (48 - 32) * ((100vw - 300px) / (1200 - 300))),48px)/clamp(40px,calc(40px + (56 - 40) * ((100vw - 300px) / (1200 - 300))),56px) 'Posten Sans', Arial, sans-serif;
  --hds-typography-h2: 700 clamp(28px,calc(28px + (32 - 28) * ((100vw - 300px) / (1200 - 300))),32px)/clamp(36px,calc(36px + (40 - 36) * ((100vw - 300px) / (1200 - 300))),40px) 'Posten Sans', Arial, sans-serif;
  --hds-font-size-h1-display: clamp(40px,calc(40px + (72 - 40) * ((100vw - 300px) / (1200 - 300))),72px);
  --hds-font-size-h1-display-min: 40px;
  --hds-font-size-h1-display-max: 72px;
  --hds-font-size-h1: clamp(32px,calc(32px + (48 - 32) * ((100vw - 300px) / (1200 - 300))),48px);
  --hds-font-size-h1-min: 32px;
  --hds-font-size-h1-max: 48px;
  --hds-font-size-h2: clamp(28px,calc(28px + (32 - 28) * ((100vw - 300px) / (1200 - 300))),32px);
  --hds-font-size-h2-min: 28px;
  --hds-font-size-h2-max: 32px;
  --hds-line-height-h1-display: clamp(56px,calc(56px + (80 - 56) * ((100vw - 300px) / (1200 - 300))),80px);
  --hds-line-height-h1-display-min: 56px;
  --hds-line-height-h1-display-max: 80px;
  --hds-line-height-h1: clamp(40px,calc(40px + (56 - 40) * ((100vw - 300px) / (1200 - 300))),56px);
  --hds-line-height-h1-min: 40px;
  --hds-line-height-h1-max: 56px;
  --hds-line-height-h2: clamp(36px,calc(36px + (40 - 36) * ((100vw - 300px) / (1200 - 300))),40px);
  --hds-line-height-h2-min: 36px;
  --hds-line-height-h2-max: 40px;
  --hds-font-weight-h1-display: 700;
  --hds-font-weight-h1: 700;
  --hds-font-weight-h2: 700;
  --hds-colors-signature: #e32d22; /* @deprecated Use the new color scheme instead */
  --hds-colors-darker: #4a1011; /* @deprecated Use the new color scheme instead */
  --hds-colors-dark: #980000; /* @deprecated Use the new color scheme instead */
  --hds-colors-light: #ffb5af; /* @deprecated Use the new color scheme instead */
  --hds-colors-lighter: #fff5f0; /* @deprecated Use the new color scheme instead */
  --hds-colors-signature-hover: #ca201c; /* @deprecated Use the new color scheme instead */
  --hds-colors-light-hover: #ffa199; /* @deprecated Use the new color scheme instead */
  --hds-button-colors-text: #ffffff; /* @deprecated Use the new color scheme instead */
  --hds-link-colors-text: #000000; /* @deprecated Use the new color scheme instead */
  --hds-link-colors-underline: #e32d22; /* @deprecated Use the new color scheme instead */
  --hds-link-colors-hover: #980000; /* @deprecated Use the new color scheme instead */
  --hds-link-colors-underline-hover: #980000; /* @deprecated Use the new color scheme instead */
}
.hds-theme-bring {
  --hds-typography-h1-display: 500 clamp(40px,calc(40px + (72 - 40) * ((100vw - 300px) / (1200 - 300))),72px)/clamp(56px,calc(56px + (80 - 56) * ((100vw - 300px) / (1200 - 300))),80px) 'Posten Sans', Arial, sans-serif;
  --hds-typography-h1: 500 clamp(32px,calc(32px + (48 - 32) * ((100vw - 300px) / (1200 - 300))),48px)/clamp(40px,calc(40px + (56 - 40) * ((100vw - 300px) / (1200 - 300))),56px) 'Posten Sans', Arial, sans-serif;
  --hds-typography-h2: 500 clamp(28px,calc(28px + (32 - 28) * ((100vw - 300px) / (1200 - 300))),32px)/clamp(36px,calc(36px + (40 - 36) * ((100vw - 300px) / (1200 - 300))),40px) 'Posten Sans', Arial, sans-serif;
  --hds-font-size-h1-display: clamp(40px,calc(40px + (72 - 40) * ((100vw - 300px) / (1200 - 300))),72px);
  --hds-font-size-h1-display-min: 40px;
  --hds-font-size-h1-display-max: 72px;
  --hds-font-size-h1: clamp(32px,calc(32px + (48 - 32) * ((100vw - 300px) / (1200 - 300))),48px);
  --hds-font-size-h1-min: 32px;
  --hds-font-size-h1-max: 48px;
  --hds-font-size-h2: clamp(28px,calc(28px + (32 - 28) * ((100vw - 300px) / (1200 - 300))),32px);
  --hds-font-size-h2-min: 28px;
  --hds-font-size-h2-max: 32px;
  --hds-line-height-h1-display: clamp(56px,calc(56px + (80 - 56) * ((100vw - 300px) / (1200 - 300))),80px);
  --hds-line-height-h1-display-min: 56px;
  --hds-line-height-h1-display-max: 80px;
  --hds-line-height-h1: clamp(40px,calc(40px + (56 - 40) * ((100vw - 300px) / (1200 - 300))),56px);
  --hds-line-height-h1-min: 40px;
  --hds-line-height-h1-max: 56px;
  --hds-line-height-h2: clamp(36px,calc(36px + (40 - 36) * ((100vw - 300px) / (1200 - 300))),40px);
  --hds-line-height-h2-min: 36px;
  --hds-line-height-h2-max: 40px;
  --hds-font-weight-h1-display: 500;
  --hds-font-weight-h1: 500;
  --hds-font-weight-h2: 500;
  --hds-colors-signature: #56b529; /* @deprecated Use the new color scheme instead */
  --hds-colors-darker: #002f19; /* @deprecated Use the new color scheme instead */
  --hds-colors-dark: #00643a; /* @deprecated Use the new color scheme instead */
  --hds-colors-light: #b5e099; /* @deprecated Use the new color scheme instead */
  --hds-colors-lighter: #f1f7e9; /* @deprecated Use the new color scheme instead */
  --hds-colors-signature-hover: #6ec943; /* @deprecated Use the new color scheme instead */
  --hds-colors-light-hover: #d3e593; /* @deprecated Use the new color scheme instead */
  --hds-button-colors-text: #000000; /* @deprecated Use the new color scheme instead */
  --hds-link-colors-text: #000000; /* @deprecated Use the new color scheme instead */
  --hds-link-colors-underline: #56b529; /* @deprecated Use the new color scheme instead */
  --hds-link-colors-hover: #00643a; /* @deprecated Use the new color scheme instead */
  --hds-link-colors-underline-hover: #00643a; /* @deprecated Use the new color scheme instead */
}