Vanilla CSS

/* This code was generated by a tool. Any changes made directly to this file will be lost when the code is regenerated. */
/* Based on ADS 2.1  */
/* Generated by ADS.Gen 0.1.1 on 2026-03-19T10:49:32.076Z */

:root,
:host {
  /* Color definitions */
  --color-basic-neutral-0: #ffffff;
  --color-basic-neutral-100: #f2f2f2;
  --color-basic-neutral-200: #e6e6e6;
  --color-basic-neutral-300: #cccccc;
  --color-basic-neutral-400: #b3b3b3;
  --color-basic-neutral-500: #757575;
  --color-basic-neutral-600: #4d4d4d;
  --color-basic-neutral-700: #333333;
  --color-basic-neutral-800: #1a1a1a;
  --color-basic-neutral-900: #000000;
  --color-basic-blue-light-100: #e5f4fd;
  --color-basic-blue-light-200: #cceafa;
  --color-basic-blue-light-300: #99d4f5;
  --color-basic-blue-light-400: #66bff1;
  --color-basic-blue-light-500: #33a9ec;
  --color-basic-blue-light-600: #0094e7;
  --color-basic-blue-light-700: #0074b5;
  --color-basic-blue-light-800: #00598b;
  --color-basic-blue-light-900: #0e2b61;
  --color-basic-blue-dark-100: #eff3fd;
  --color-basic-blue-dark-200: #d9e4f9;
  --color-basic-blue-dark-300: #b2c3e5;
  --color-basic-blue-dark-400: #8ba3d1;
  --color-basic-blue-dark-500: #6482bc;
  --color-basic-blue-dark-600: #3d62a8;
  --color-basic-blue-dark-700: #164194;
  --color-basic-blue-dark-800: #0f2b61;
  --color-basic-blue-dark-900: #0a1d42;
  --color-basic-steel-100: #f1f3f5;
  --color-basic-steel-200: #dde1e7;
  --color-basic-steel-300: #bec6d1;
  --color-basic-steel-400: #9eabbc;
  --color-basic-steel-500: #7a8aa1;
  --color-basic-steel-600: #344661;
  --color-basic-steel-700: #29374d;
  --color-basic-steel-800: #212c3d;
  --color-basic-steel-900: #161d29;
  --color-basic-violet-100: #eadaf5;
  --color-basic-violet-200: #ceb6de;
  --color-basic-violet-300: #b191c7;
  --color-basic-violet-400: #956db1;
  --color-basic-violet-500: #78489a;
  --color-basic-violet-600: #5c2483;
  --color-basic-violet-700: #4a1d69;
  --color-basic-violet-800: #38164f;
  --color-basic-violet-900: #250e34;
  --color-basic-green-100: #effbe7;
  --color-basic-green-200: #dff6d0;
  --color-basic-green-300: #bfeda0;
  --color-basic-green-400: #9ee571;
  --color-basic-green-500: #7edc41;
  --color-basic-green-600: #5ed312;
  --color-basic-green-700: #48a10e;
  --color-basic-green-800: #387f0b;
  --color-basic-green-900: #1c3e05;
  --color-basic-yellow-100: #fef9d2;
  --color-basic-yellow-200: #fdf988;
  --color-basic-yellow-300: #fce649;
  --color-basic-yellow-400: #ffd538;
  --color-basic-yellow-500: #ffca05;
  --color-basic-yellow-600: #d1a500;
  --color-basic-yellow-700: #997900;
  --color-basic-yellow-800: #665000;
  --color-basic-yellow-900: #332800;
  --color-basic-yellow-mkt: #f8e923;
  --color-basic-orange-100: #fff2e5;
  --color-basic-orange-200: #ffe4cc;
  --color-basic-orange-300: #ffc999;
  --color-basic-orange-400: #ffaf66;
  --color-basic-orange-500: #ff9433;
  --color-basic-orange-600: #ff7900;
  --color-basic-orange-700: #cc6300;
  --color-basic-orange-800: #994900;
  --color-basic-orange-900: #663000;
  --color-basic-red-100: #f9e8e8;
  --color-basic-red-200: #f3d1d1;
  --color-basic-red-300: #e8a2a3;
  --color-basic-red-400: #dc7474;
  --color-basic-red-500: #d14546;
  --color-basic-red-600: #c51718;
  --color-basic-red-700: #911112;
  --color-basic-red-800: #760e0e;
  --color-basic-red-900: #4f090a;
  --color-basic-b2b-100: #e8f7f3;
  --color-basic-b2b-200: #d2efe8;
  --color-basic-b2b-300: #a1dece;
  --color-basic-b2b-400: #73ceb7;
  --color-basic-b2b-500: #43bd9e;
  --color-basic-b2b-600: #389f84;
  --color-basic-b2b-700: #2c7d68;
  --color-basic-b2b-800: #215e4f;
  --color-basic-b2b-900: #174036;

  --color-semantic-text-headline-neutral: light-dark(#1a1a1aff, #ffffffff);
  --color-semantic-text-headline-neutral-on-dark: light-dark(
    #ffffffff,
    #000000ff
  );
  --color-semantic-text-headline-positive: light-dark(#387f0bff, #5ed312ff);
  --color-semantic-text-headline-warning: light-dark(#ff7900ff, #ff7900ff);
  --color-semantic-text-headline-negative: light-dark(#c51718ff, #e1b100ff);
  --color-semantic-text-body-neutral: light-dark(#333333ff, #e6e6e6ff);
  --color-semantic-text-body-neutral-on-dark: light-dark(#ffffffe6, #ffffffe6);
  --color-semantic-text-body-additional: light-dark(#757575ff, #b3b3b3ff);
  --color-semantic-text-body-disabled: light-dark(#757575ff, #e1b100ff);
  --color-semantic-text-body-positive: light-dark(#387f0bff, #5ed312ff);
  --color-semantic-text-body-warning: light-dark(#ff7900ff, #e1b100ff);
  --color-semantic-text-body-negative: light-dark(#c51718ff, #e1b100ff);
  --color-semantic-text-body-current-price: light-dark(#c51718ff, #dc7474ff);
  --color-semantic-text-body-original-price: light-dark(#757575ff, #b3b3b3ff);
  --color-semantic-availability-in-stock: light-dark(#387f0bff, #5ed312ff);
  --color-semantic-availability-for-order: light-dark(#164194ff, #b2c3e5ff);
  --color-semantic-account-bronze: light-dark(#994900ff, #e1b100ff);
  --color-semantic-account-silver: light-dark(#4d4d4dff, #e1b100ff);
  --color-semantic-account-gold: light-dark(#997900ff, #e1b100ff);
  --color-semantic-account-benefit: light-dark(#164194ff, #b2c3e5ff);
  --color-semantic-account-b2b: light-dark(#389f84ff, #e1b100ff);
  --color-semantic-account-isic: light-dark(#389f84ff, #e1b100ff);
  --color-semantic-account-alza-plus: light-dark(#ff7900ff, #ff7900ff);
  --color-semantic-account-alza-premium: light-dark(#911112ff, #e1b100ff);
  --color-semantic-link-primary: light-dark(#164194ff, #b2c3e5ff);
  --color-semantic-link-secondary: light-dark(#333333ff, #e6e6e6ff);
  --color-semantic-link-tertiary: light-dark(#757575ff, #b3b3b3ff);
  --color-semantic-link-positive: light-dark(#387f0bff, #5ed312ff);
  --color-semantic-link-negative: light-dark(#c51718ff, #e1b100ff);
  --color-semantic-background-primary: light-dark(#ffffffff, #333333ff);
  --color-semantic-background-secondary: light-dark(#f2f2f2ff, #1a1a1aff);
  --color-semantic-background-tertiary: light-dark(#e6e6e6ff, #000000ff);
  --color-semantic-background-dark: light-dark(#1a1a1aff, #e1b100ff);
  --color-semantic-background-disabled: light-dark(#e6e6e6ff, #e1b100ff);
  --color-semantic-background-selected: light-dark(#eff3fdff, #0a1d42ff);
  --color-semantic-background-dialog: light-dark(#000000cc, #000000e6);
  --color-semantic-background-positive-light: light-dark(#effbe7ff, #1c3e05ff);
  --color-semantic-background-positive-dark: light-dark(#5ed312ff, #5ed312ff);
  --color-semantic-background-negative-light: light-dark(#f9e8e8ff, #e1b100ff);
  --color-semantic-background-negative-dark: light-dark(#c51718ff, #c51718ff);
  --color-semantic-background-warning-light: light-dark(#fef9d2ff, #665000ff);
  --color-semantic-background-warning-dark: light-dark(#fce649ff, #e1b100ff);
  --color-semantic-background-brand-light: light-dark(#d9e4f9ff, #29374dff);
  --color-semantic-background-brand-dark: light-dark(#164194ff, #b2c3e5ff);
  --color-semantic-background-alza-plus: light-dark(#ff7900ff, #ff7900ff);
  --color-semantic-background-alza-plus-light: light-dark(#fff2e5ff, #663000ff);
  --color-semantic-border-neutral: light-dark(#00000029, #00000029);
  --color-semantic-border-brand: light-dark(#d9e4f9ff, #344661ff);
  --color-semantic-border-positive: light-dark(#bfeda0ff, #e1b100ff);
  --color-semantic-border-warning: light-dark(#ffd538ff, #997900ff);
  --color-semantic-border-negative: light-dark(#e8a2a3ff, #e1b100ff);
  --color-semantic-border-focused: light-dark(#3d62a8ff, #b2c3e5ff);
  --color-semantic-border-selected: light-dark(#164194ff, #b2c3e5ff);
  --color-semantic-border-alza-plus: light-dark(#ff7900ff, #994900ff);

  /* Spacing */
  --spacing: 0.25rem;
  --spacing-0: 0;
  --spacing-4: 0.25rem;
  --spacing-8: 0.5rem;
  --spacing-12: 0.75rem;
  --spacing-16: 1rem;
  --spacing-24: 1.5rem;
  --spacing-32: 2rem;
  --spacing-40: 2.5rem;
  --spacing-48: 3rem;
  --spacing-56: 3.5rem;
  --spacing-64: 4rem;
  --spacing-72: 4.5rem;
  --spacing-80: 5rem;

  /* Shadow definitions */
  --shadow-*: initial;
  --shadow-primary: 0px 1px 4px 0px rgba(0, 0, 0, 0.15);
  --shadow-clickable: 0px 1px 4px 0px rgba(0, 0, 0, 0.16);
  --shadow-hover: 0px 1px 8px 0px rgba(0, 0, 0, 0.32);
  --shadow-pressed: 0px 1px 1px 0px rgba(0, 0, 0, 0.1);

  /* Radius definitions */
  --radius-*: initial;
  --radius-4: 0.25rem;
  --radius-normal: 0.5rem;
  --radius-big: 1rem;
  --radius-full: calc(infinity * 1px);
}

/* Padding utility classes */
.padding-article-headline {
  padding-bottom: 2.5rem;
}
.padding-h1 {
  padding-bottom: 2rem;
}
.padding-h2 {
  padding-bottom: 1.5rem;
}
.padding-h3 {
  padding-bottom: 1.5rem;
}
.padding-h4 {
  padding-bottom: 1rem;
}
.padding-page-x {
  padding-left: 2rem;
  padding-right: 2rem;
}
.padding-page-y {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* Typography utility classes */
.typography-headline-article-headline {
  font-size: 2rem;
  font-weight: 700;
  line-height: 3rem;
}
.typography-headline-h1 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 2.25rem;
}
.typography-headline-h2 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.875rem;
}
.typography-headline-h3 {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.75rem;
}
.typography-headline-h4 {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3125rem;
}
.typography-body-big {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
}
.typography-body-normal {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.3125rem;
}
.typography-body-small {
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.125rem;
}