:root {
  --sd-color-primary-100: 236 241 244;
  --sd-color-primary-200: 226 233 239;
  --sd-color-primary-300: 200 214 225;
  --sd-color-primary-400: 147 174 196;
  --sd-color-primary-500: 67 114 152;
  --sd-color-primary-600: 0 63 114;
  --sd-color-primary-700: 0 49 88;
  --sd-color-primary-800: 0 25 45;
  --sd-color-primary: 0 63 114;
  --sd-color-accent-100: 234 202 202;
  --sd-color-accent-200: 223 175 175;
  --sd-color-accent-300: 213 149 149;
  --sd-color-accent-400: 189 89 89;
  --sd-color-accent-500: 185 79 79;
  --sd-color-accent-550: 177 59 59;
  --sd-color-accent-600: 166 31 31;
  --sd-color-accent-700: 122 0 0;
  --sd-color-accent-800: 97 0 0;
  --sd-color-accent: 189 89 89;
  --sd-color-neutral-100: 247 246 246;
  --sd-color-neutral-200: 234 233 233;
  --sd-color-neutral-300: 220 218 217;
  --sd-color-neutral-400: 199 195 194;
  --sd-color-neutral-500: 177 173 173;
  --sd-color-neutral-600: 139 136 135;
  --sd-color-neutral-700: 107 105 104;
  --sd-color-neutral-800: 84 82 82;
  --sd-color-black: 24 24 24;
  --sd-color-white: 255 255 255;

  /* skin variables for Attrax */
  --skin-color-primary: rgb(var(--sd-color-primary-600));
  --skin-color-primary-light: rgb(var(--sd-color-primary-500));
  --skin-color-primary-lighter: rgb(var(--sd-color-primary-100));
  --skin-color-primary-shade: rgb(var(--sd-color-primary-800));
  --skin-color-primary-shade-inverted: rgb(var(--sd-color-primary-400));
  --skin-color-accent: rgb(var(--sd-color-accent-400));
  --skin-color-accent-light: rgb(var(--sd-color-accent-300));
  --skin-color-accent-shade: rgb(var(--sd-color-accent-500));
  --skin-color-secondary: rgb(var(--sd-color-neutral-400));
  --skin-color-secondary-light: rgb(var(--sd-color-neutral-200));
  --skin-color-secondary-lighter: rgb(var(--sd-color-neutral-100));
  --skin-color-text: rgb(var(--sd-color-black));
  --skin-color-text-inverted: rgb(var(--sd-color-white));
  --skin-color-primary-inverted: rgb(var(--sd-color-white));
  --skin-color-primary-light-inverted: var(--skin-color-white);
  --skin-color-accent-inverted: var(--skin-color-white);
  --skin-color-white: rgb(var(--sd-color-white));
  --skin-font-family-primary: 'Sero Regular', 'Arial', sans-serif;
  --component-teaser-box-color-headline: var(--skin-color-accent);
  --component-breadcrumb-color-text: var(--skin-color-primary);
  --component-slider-color-pagination-active: var(--skin-color-primary);
  --component-slider-color-pagination-active-background: var(--skin-color-primary);
  --component-navigation-element-color-active-text: var(--skin-color-accent);
  --component-link-button-cta-color-background-hover: var(--skin-color-primary);
  --component-link-button-cta-color-background-active: var(--skin-color-primary);
  --component-link-button-cta-color-background: var(--skin-color-primary);
  --component-sticky-toolbar-item-color-icon-active: var(--skin-color-primary);
  --component-button-secondary-color-background: #83898e;
  --component-button-secondary-color-border: #83898e;
  --component-button-secondary-color-background-active: #83898e;
  --component-button-secondary-color-background-hover: #83898e;
  --component-button-secondary-color-text: var(--ui-color-white);
  --component-button-secondary-color-icon: var(--ui-color-white);
  --component-superteaser-content-color-background: transparent;
}