@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;
  --hds-posten-colors-darker-red: #4a1011;
  --hds-posten-colors-dark-red: #980000;
  --hds-posten-colors-light-red: #ffb5af;
  --hds-posten-colors-lighter-red: #fff5f0;
  --hds-posten-colors-signature-red-hover: #ca201c;
  --hds-posten-colors-light-red-hover: #ffa199;
  --hds-bring-colors-signature-green: #56b529;
  --hds-bring-colors-darker-green: #002f19;
  --hds-bring-colors-dark-green: #00643a;
  --hds-bring-colors-light-green: #b5e099;
  --hds-bring-colors-lighter-green: #f1f7e9;
  --hds-bring-colors-signature-green-hover: #6ec943;
  --hds-bring-colors-light-green-hover: #d3e593;
  --hds-ui-colors-black: #000000;
  --hds-ui-colors-dark-grey: #6e6e6e;
  --hds-ui-colors-grey: #d6d6d6;
  --hds-ui-colors-light-grey-stroke: #e4e4e4;
  --hds-ui-colors-light-grey-fill: #f2f2f2;
  --hds-ui-colors-white: #ffffff;
  --hds-ui-colors-warning-yellow: #fdbb2f;
  --hds-ui-colors-warning-yellow-stroke: #d68000;
  --hds-ui-colors-warning-yellow-light-fill: #fff5e0;
  --hds-ui-colors-warning-yellow-hover: #ffc340;
  --hds-ui-colors-black-hover: #1e1e1e;
  --hds-dark-mode-colors-obsidian: #121212; /* Base color for dark mode */
  --hds-dark-mode-colors-coal: #252525; /* Background on none-clickable cards */
  --hds-dark-mode-colors-dusk: #2c2c2c; /* Fill inputfields, checkbox, radio buttons, toogles */
  --hds-dark-mode-colors-spider: #333333; /* Clickable cards or tiles */
  --hds-dark-mode-colors-ash: #999999; /* 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: 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-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: 500;
  --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;
}
: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: 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: 700;
  --hds-font-weight-h1: 700;
  --hds-font-weight-h2: 500;
  --hds-colors-signature: #e32d22;
  --hds-colors-darker: #4a1011;
  --hds-colors-dark: #980000;
  --hds-colors-light: #ffb5af;
  --hds-colors-lighter: #fff5f0;
  --hds-colors-signature-hover: #ca201c;
  --hds-colors-light-hover: #ffa199;
  --hds-button-colors-text: #ffffff;
  --hds-link-colors-text: #000000;
  --hds-link-colors-underline: #e32d22;
  --hds-link-colors-hover: #980000;
  --hds-link-colors-underline-hover: #980000;
}
.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;
  --hds-colors-darker: #002f19;
  --hds-colors-dark: #00643a;
  --hds-colors-light: #b5e099;
  --hds-colors-lighter: #f1f7e9;
  --hds-colors-signature-hover: #6ec943;
  --hds-colors-light-hover: #d3e593;
  --hds-button-colors-text: #000000;
  --hds-link-colors-text: #000000;
  --hds-link-colors-underline: #56b529;
  --hds-link-colors-hover: #00643a;
  --hds-link-colors-underline-hover: #00643a;
}