@marioschmidt/design-system-components 1.0.79 → 1.2.0

package/dist/www/css/sportbild/theme.css

@@ -1,12 +1,12 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.0.79
+ * BILD Design System Tokens v1.2.0
  * Generated by Style Dictionary v4.2.0
  *
  * Brand: Sportbild | Bundle: Theme (Color tokens + Effects for light/dark mode)
  *
- * Copyright (c) 2025 Axel Springer Deutschland GmbH
+ * Copyright (c) 2026 Axel Springer Deutschland GmbH
  * Proprietary and confidential. All rights reserved.
  *
  * Documentation: https://github.com/UXWizard25/vv-token-test-v3/blob/main/packages/tokens/docs/css.md
@@ -20,99 +20,162 @@
      SEMANTIC
      ============================================ */
 
-  /* Semantic - Text */
-  --text-color-accent-constant: var(--color-spobi-blue-29, #174482);
-  --text-color-primary: var(--color-neutral-15, #232629);
-  --text-color-muted: var(--color-neutral-45, #666B70);
-  --text-color-primary-inverse: var(--color-neutral-93, #E9ECEF);
-  --text-color-primary-constant: var(--color-neutral-15, #232629);
-  --text-color-success-constant: var(--color-green-40, #006E3E);
-  --text-color-primary-inverse-constant: var(--color-neutral-93, #E9ECEF);
-  --text-color-secondary: var(--color-neutral-60, #8C9196);
-  --text-color-attention-high: var(--color-bild-red-50, #DD0000);
-  --text-color-accent: var(--color-spobi-blue-29, #174482);
-  --text-color-attention-medium: var(--color-orange-67, #FD8227);
-  --text-color-on-dark-surface: var(--color-neutral-100, #FFFFFF);
-
-  /* Semantic - Surface */
-  --surface-color-primary: var(--color-neutral-100, #FFFFFF);
-  --surface-color-secondary: var(--color-spobi-blue-98, #F7F9FD);
-  --surface-color-primary-inverse: var(--color-spobi-blue-10, #081828);
-  --surface-color-primary-constant-light: var(--color-neutral-100, #FFFFFF);
-  --surface-color-primary-constant-dark: var(--color-spobi-blue-10, #081828);
-  --surface-color-quartenary: var(--color-neutral-85, #CED4DA);
-  --surface-color-success: var(--color-green-93, #CEF4E4);
-  --surface-color-tertiary: var(--color-spobi-blue-81, #BDCADB);
-  --surface-color-tertiary-gradient-stop: rgba(233, 236, 239, 0);
-  --surface-color-tertiary-inverse: var(--color-spobi-blue-29, #174482);
-  --surface-color-primary-gradient-stop: rgba(255, 255, 255, 0);
-  --surface-color-secondary-gradient-stop: rgba(242, 244, 245, 0);
-  --surface-color-quartenary-inverse: var(--color-neutral-35, #4B525A);
-
-  /* Semantic - Heading */
-  --kicker-text-color-on-surface: var(--color-neutral-60, #8C9196);
-  --headline-color-primary: var(--color-spobi-blue-16, #0A2750);
-  --headline-color-white-const: var(--color-neutral-100, #FFFFFF);
-  --kicker-text-color-on-red: var(--color-neutral-100, #FFFFFF);
-  --kicker-text-color-on-dark-bg: var(--alpha-white-80, rgba(255, 255, 255, 0.8));
-  --kicker-text-color-on-bright-bg: var(--alpha-black-70, rgba(0, 0, 0, 0.7));
-
-  /* Semantic - State */
-  --color-secondary-active: var(--color-neutral-15, #232629);
-  --color-primary-active: var(--color-spobi-blue-29, #174482);
-  --color-secondary-disabled: var(--color-neutral-93, #E9ECEF);
-  --color-primary-disabled: var(--color-neutral-96, #F2F4F5);
-  --color-secondary-active-inverse: var(--color-neutral-96, #F2F4F5);
-  --color-tertiary-active: var(--color-green-70, #00C373);
-  --color-tertiary-disabled: var(--color-neutral-60, #8C9196);
-
-  /* Semantic - Border */
-  --border-color-medium-contrast: var(--color-neutral-85, #CED4DA);
-  --border-color-low-contrast: var(--color-neutral-93, #E9ECEF);
-  --border-color-high-contrast: var(--color-neutral-15, #232629);
-  --border-color-low-contrast-constant: var(--color-neutral-93, #E9ECEF);
-  --border-color-success: var(--color-green-70, #00C373);
-  --border-color-warning: var(--color-bild-red-50, #DD0000);
-  --border-color-primary-disabled: var(--color-neutral-96, #F2F4F5);
-  --border-color-secondary-disabled: var(--color-neutral-93, #E9ECEF);
-
-  /* Semantic - Core */
-  --core-color-primary: var(--color-spobi-blue-16, #0A2750);
-  --core-color-secondary: var(--color-neutral-100, #FFFFFF);
-  --core-color-tertiary: var(--color-spobi-blue-10, #081828);
-  --core-color-secondary-constant: var(--color-neutral-100, #FFFFFF);
-  --core-color-tertiary-constant: var(--color-spobi-blue-10, #081828);
-
-  /* Semantic - Icon */
-  --icon-color-primary: var(--color-neutral-35, #4B525A);
-  --icon-color-inverse: var(--color-neutral-85, #CED4DA);
-  --icon-color-secondary-constant: var(--color-neutral-60, #8C9196);
-  --icon-color-constant-on-dark: var(--color-neutral-96, #F2F4F5);
-  --icon-color-primary-constant: var(--color-neutral-35, #4B525A);
-  --icon-color-success: var(--color-green-70, #00C373);
-
-  /* Semantic - Label */
-  --label-color-primary: var(--color-neutral-15, #232629);
-  --label-color-secondary: var(--color-neutral-35, #4B525A);
-  --label-color-disabled: var(--color-neutral-85, #CED4DA);
-  --label-color-primary-constant: var(--color-neutral-15, #232629);
-  --label-color-primary-inverse-constant: var(--color-neutral-93, #E9ECEF);
-  --label-color-tertiary: var(--color-neutral-60, #8C9196);
-  --label-color-primary-inverse: var(--color-neutral-93, #E9ECEF);
-
-  /* Semantic - Attention */
-  --attention-color-high: var(--color-bild-red-50, #DD0000);
-  --accent-color-primary: var(--color-spobi-blue-29, #174482);
-  --attention-color-medium: var(--color-orange-67, #FD8227);
-  --attention-color-low: var(--color-yellow-80, #FFBF00);
-  --accent-color-primary-constant: var(--color-spobi-blue-29, #174482);
-  --attention-color-success-primary: var(--color-green-70, #00C373);
-  --attention-color-extra-low: var(--color-neutral-100, #FFFFFF);
-  --attention-color-success-secondary: var(--color-green-40, #006E3E);
-
-  /* Semantic - Overlay */
-  --overlay-scrim-black: var(--alpha-black-70, rgba(0, 0, 0, 0.7));
-  --overlay-scrim-white: var(--alpha-white-70, rgba(255, 255, 255, 0.7));
+  /* Semantic - Text - Brand */
+  --text-color-brand: var(--color-spobi-blue-30, #174482);
+  --text-color-brand-light-only: var(--color-spobi-blue-30, #174482);
+
+  /* Semantic - Text - Standard */
+  --text-color-primary: var(--color-neutral-15, #222628);
+  --text-color-secondary: var(--color-neutral-40, #565A5F);
+  --text-color-tertiary: var(--color-neutral-50, #6E787C);
+
+  /* Semantic - Text - Heading */
+  --kicker-text-color: var(--color-spobi-blue-60, #6A91CF);
+  --headline-text-color: var(--color-spobi-blue-20, #0C2F61);
+
+  /* Semantic - Text - OnSolid */
+  --text-color-on-image: var(--color-neutral-100, #FFFFFF);
+  --text-color-secondary-on-dark: var(--color-neutral-90, #DDE1E2);
+  --text-color-primary-on-light: var(--color-neutral-15, #222628);
+  --kicker-text-color-on-dark: var(--color-neutral-100-a-80, rgba(255, 255, 255, 0.8));
+  --kicker-text-color-on-light: var(--color-neutral-0-a-70, rgba(0, 0, 0, 0.7));
+  --text-color-primary-on-dark: var(--color-neutral-100, #FFFFFF);
+
+  /* Semantic - Text - Interactive */
+  --text-color-idle: var(--color-spobi-blue-40, #345EA0);
+  --text-color-disabled: var(--color-spobi-blue-70, #8FACDB);
+  --text-color-hover: var(--color-spobi-blue-15, #0B2647);
+  --text-color-active: var(--color-spobi-blue-15, #0B2647);
+
+  /* Semantic - Text - Inverse */
+  --text-color-primary-inverse: var(--color-spobi-blue-90, #D6E1F2);
+  --text-color-secondary-inverse: var(--color-spobi-blue-70, #8FACDB);
+  --text-color-inverse-high-contrast: var(--color-neutral-100, #FFFFFF);
+
+  /* Semantic - Text - Feedback */
+  --text-color-success: var(--color-green-40, #006E3E);
+  --text-color-error: var(--color-bild-red-40, #C10000);
+  --text-color-warning: var(--color-orange-40, #9E4401);
+
+  /* Semantic - Background - Standard */
+  --bg-color-primary: var(--color-neutral-100, #FFFFFF);
+  --bg-color-disabled: var(--color-spobi-blue-95, #EFF1F5);
+  --bg-color-secondary: var(--color-spobi-blue-95, #EFF1F5);
+  --bg-color-primary-const-dark: var(--color-spobi-blue-15, #0B2647);
+  --bg-color-quaternary: var(--color-spobi-blue-80, #C3C9DB);
+  --bg-color-tertiary: var(--color-spobi-blue-90, #D6E1F2);
+  --bg-color-primary-const-light: var(--color-neutral-100, #FFFFFF);
+  --bg-color-quintenary: var(--color-spobi-blue-60, #6A91CF);
+
+  /* Semantic - Background - Brand */
+  --bg-color-brand-light-only: var(--color-spobi-blue-30, #174482);
+  --bg-color-brand-solid: var(--color-spobi-blue-30, #174482);
+  --bg-color-brand-solid-hover: var(--color-spobi-blue-20, #0C2F61);
+  --bg-color-brand-solid-active: var(--color-spobi-blue-10, #091C2E);
+  --bg-color-brand-tint: var(--color-spobi-blue-90, #D6E1F2);
+  --bg-color-brand-tint-hover: var(--color-spobi-blue-80, #C3C9DB);
+
+  /* Semantic - Background - Inverse */
+  --bg-color-primary-inverse: var(--color-spobi-blue-15, #0B2647);
+  --bg-color-tertiary-inverse: var(--color-spobi-blue-25, #113B72);
+  --bg-color-quaternary-inverse: var(--color-spobi-blue-30, #174482);
+  --bg-color-secondary-inverse: var(--color-spobi-blue-20, #0C2F61);
+  --bg-color-quintenary-inverse: var(--color-spobi-blue-60, #6A91CF);
+
+  /* Semantic - Background - Success */
+  --bg-color-success-tint: var(--color-green-95, #DEF7E6);
+  --bg-color-success-solid: var(--color-green-50, #158751);
+  --bg-color-success-solid-hover: var(--color-green-40, #006E3E);
+  --bg-color-success-tint-hover: var(--color-green-90, #B9EFCD);
+  --bg-color-success-solid-active: var(--color-green-30, #0D5232);
+
+  /* Semantic - Background - GradientStops */
+  --bg-color-tertiary-gradient-stop: var(--color-spobi-blue-90-a-0, rgba(214, 225, 242, 0));
+  --bg-color-primary-gradient-stop: var(--color-neutral-100-a-0, rgba(255, 255, 255, 0));
+  --bg-color-secondary-gradient-stop: var(--color-spobi-blue-95-a-0, rgba(239, 241, 245, 0));
+
+  /* Semantic - Background - Overlay */
+  --overlay-scrim-black-const: var(--color-neutral-0-a-70, rgba(0, 0, 0, 0.7));
+  --overlay-scrim-white-const: var(--color-neutral-100-a-70, rgba(255, 255, 255, 0.7));
+
+  /* Semantic - Background - Error */
+  --bg-color-error-tint: var(--color-bild-red-95, #FFECEC);
+  --bg-color-error-tint-hover: var(--color-bild-red-90, #FFDADA);
+  --bg-color-error-solid: var(--color-bild-red-40, #C10000);
+  --bg-color-error-solid-hover: var(--color-bild-red-30, #930000);
+
+  /* Semantic - Background - Warning */
+  --bg-color-warning-tint: var(--color-orange-95, #FFEDDF);
+  --bg-color-warning-tint-hover: var(--color-orange-90, #FEDBC1);
+  --bg-color-warning-solid: var(--color-orange-70, #FD8227);
+  --bg-color-warning-solid-hover: var(--color-orange-60, #EF6702);
+
+  /* Semantic - Border - Standard */
+  --border-color-default: var(--color-spobi-blue-80, #C3C9DB);
+  --border-color-subtle: var(--color-spobi-blue-90, #D6E1F2);
+  --border-color-extra-strong: var(--color-spobi-blue-15, #0B2647);
+  --border-color-strong: var(--color-spobi-blue-50, #4676C3);
+
+  /* Semantic - Border - OnSolid */
+  --border-color-subtle-on-dark: var(--color-spobi-blue-25, #113B72);
+  --border-color-default-on-dark: var(--color-spobi-blue-40, #345EA0);
+  --border-color-subtle-on-light: var(--color-spobi-blue-90, #D6E1F2);
+  --border-color-default-on-light: var(--color-spobi-blue-80, #C3C9DB);
+
+  /* Semantic - Border - Feedback */
+  --border-color-success: var(--color-green-40, #006E3E);
+  --border-color-error: var(--color-bild-red-50, #DD0000);
+  --border-color-warning: var(--color-orange-50, #C65502);
+
+  /* Semantic - Border - Interactive */
+  --border-color-disabled: var(--color-spobi-blue-90, #D6E1F2);
+  --border-color-selected: var(--color-spobi-blue-30, #174482);
+  --border-color-active: var(--color-spobi-blue-30, #174482);
+  --border-color-idle: var(--color-spobi-blue-60, #6A91CF);
+
+  /* Semantic - Border - Inverse */
+  --border-color-default-inverse: var(--color-spobi-blue-40, #345EA0);
+  --border-color-subtle-inverse: var(--color-spobi-blue-25, #113B72);
+
+  /* Semantic - Border - Brand */
+  --border-color-brand: var(--color-spobi-blue-30, #174482);
+  --border-color-brand-light-only: var(--color-spobi-blue-30, #174482);
+  --border-color-brand-const: var(--color-spobi-blue-30, #174482);
+
+  /* Semantic - Border - Utilities */
+  --border-color-no-contrast: var(--color-neutral-100, #FFFFFF);
+
+  /* Semantic - Icon - Interactive */
+  --icon-color-idle: var(--color-spobi-blue-40, #345EA0);
+  --icon-color-disabled: var(--color-spobi-blue-70, #8FACDB);
+  --icon-color-hover: var(--color-spobi-blue-15, #0B2647);
+  --icon-color-active: var(--color-spobi-blue-15, #0B2647);
+
+  /* Semantic - Icon - OnSolid */
+  --icon-color-secondary-on-light: var(--color-neutral-40, #565A5F);
+  --icon-color-primary-on-dark: var(--color-neutral-100, #FFFFFF);
+  --icon-color-secondary-on-dark: var(--color-neutral-90, #DDE1E2);
+  --icon-color-primary-on-light: var(--color-neutral-15, #222628);
+  --icon-color-const-on-image: var(--color-neutral-100, #FFFFFF);
+
+  /* Semantic - Icon - Feedback */
+  --icon-color-success: var(--color-green-40, #006E3E);
+  --icon-color-error: var(--color-bild-red-40, #C10000);
+  --icon-color-warning: var(--color-orange-40, #9E4401);
+
+  /* Semantic - Icon - Brand */
+  --icon-color-brand: var(--color-spobi-blue-30, #174482);
+  --icon-color-brand-light-only: var(--color-spobi-blue-30, #174482);
+
+  /* Semantic - Icon - Standard */
+  --icon-color-primary: var(--color-neutral-15, #222628);
+  --icon-color-secondary: var(--color-neutral-40, #565A5F);
+  --icon-color-tertiary: var(--color-neutral-50, #6E787C);
+
+  /* Semantic - Icon - Inverse */
+  --icon-color-primary-inverse: var(--color-spobi-blue-90, #D6E1F2);
+  --icon-color-secondary-inverse: var(--color-spobi-blue-70, #8FACDB);
+  --icon-color-inverse-high-contrast: var(--color-neutral-100, #FFFFFF);
 
   /* Semantic - LayerOpacity */
   --layer-opacity-05: var(--opacity-05, 0.05);
@@ -138,99 +201,162 @@
      SEMANTIC
      ============================================ */
 
-  /* Semantic - Text */
-  --text-color-accent-constant: var(--color-spobi-blue-29, #174482);
-  --text-color-primary: var(--color-neutral-93, #E9ECEF);
-  --text-color-muted: var(--color-neutral-85, #CED4DA);
-  --text-color-primary-inverse: var(--color-neutral-15, #232629);
-  --text-color-primary-constant: var(--color-neutral-15, #232629);
-  --text-color-success-constant: var(--color-green-40, #006E3E);
-  --text-color-primary-inverse-constant: var(--color-neutral-93, #E9ECEF);
-  --text-color-secondary: var(--color-neutral-60, #8C9196);
-  --text-color-attention-high: var(--color-bild-red-50, #DD0000);
-  --text-color-accent: var(--color-spobi-blue-98, #F7F9FD);
-  --text-color-attention-medium: var(--color-orange-67, #FD8227);
-  --text-color-on-dark-surface: var(--color-neutral-100, #FFFFFF);
-
-  /* Semantic - Surface */
-  --surface-color-primary: var(--color-spobi-blue-10, #081828);
-  --surface-color-secondary: var(--color-spobi-blue-16, #0A2750);
-  --surface-color-primary-inverse: var(--color-neutral-100, #FFFFFF);
-  --surface-color-primary-constant-light: var(--color-neutral-100, #FFFFFF);
-  --surface-color-primary-constant-dark: var(--color-spobi-blue-10, #081828);
-  --surface-color-quartenary: var(--color-neutral-35, #4B525A);
-  --surface-color-success: var(--color-green-93, #CEF4E4);
-  --surface-color-tertiary: var(--color-spobi-blue-29, #174482);
-  --surface-color-tertiary-gradient-stop: rgba(52, 60, 65, 0);
-  --surface-color-tertiary-inverse: var(--color-spobi-blue-81, #BDCADB);
-  --surface-color-primary-gradient-stop: rgba(35, 38, 41, 0);
-  --surface-color-secondary-gradient-stop: rgba(44, 49, 56, 0);
-  --surface-color-quartenary-inverse: var(--color-neutral-85, #CED4DA);
-
-  /* Semantic - Heading */
-  --kicker-text-color-on-surface: var(--color-neutral-60, #8C9196);
-  --headline-color-primary: var(--color-neutral-100, #FFFFFF);
-  --headline-color-white-const: var(--color-neutral-100, #FFFFFF);
-  --kicker-text-color-on-red: var(--color-neutral-100, #FFFFFF);
-  --kicker-text-color-on-dark-bg: var(--alpha-white-80, rgba(255, 255, 255, 0.8));
-  --kicker-text-color-on-bright-bg: var(--alpha-black-70, rgba(0, 0, 0, 0.7));
-
-  /* Semantic - State */
-  --color-secondary-active: var(--color-neutral-96, #F2F4F5);
-  --color-primary-active: var(--color-spobi-blue-29, #174482);
-  --color-secondary-disabled: var(--color-neutral-35, #4B525A);
-  --color-primary-disabled: var(--color-neutral-25, #343C41);
-  --color-secondary-active-inverse: var(--color-neutral-15, #232629);
-  --color-tertiary-active: var(--color-green-70, #00C373);
-  --color-tertiary-disabled: var(--color-neutral-45, #666B70);
-
-  /* Semantic - Border */
-  --border-color-medium-contrast: var(--color-neutral-45, #666B70);
-  --border-color-low-contrast: var(--color-neutral-35, #4B525A);
-  --border-color-high-contrast: var(--color-neutral-100, #FFFFFF);
-  --border-color-low-contrast-constant: var(--color-neutral-93, #E9ECEF);
+  /* Semantic - Text - Brand */
+  --text-color-brand: var(--color-spobi-blue-60, #6A91CF);
+  --text-color-brand-light-only: var(--color-neutral-100, #FFFFFF);
+
+  /* Semantic - Text - Standard */
+  --text-color-primary: var(--color-spobi-blue-90, #D6E1F2);
+  --text-color-secondary: var(--color-spobi-blue-70, #8FACDB);
+  --text-color-tertiary: var(--color-spobi-blue-60, #6A91CF);
+
+  /* Semantic - Text - Heading */
+  --kicker-text-color: var(--color-spobi-blue-60, #6A91CF);
+  --headline-text-color: var(--color-neutral-100, #FFFFFF);
+
+  /* Semantic - Text - OnSolid */
+  --text-color-on-image: var(--color-neutral-100, #FFFFFF);
+  --text-color-secondary-on-dark: var(--color-neutral-90, #DDE1E2);
+  --text-color-primary-on-light: var(--color-neutral-15, #222628);
+  --kicker-text-color-on-dark: var(--color-neutral-100-a-80, rgba(255, 255, 255, 0.8));
+  --kicker-text-color-on-light: var(--color-neutral-0-a-70, rgba(0, 0, 0, 0.7));
+  --text-color-primary-on-dark: var(--color-neutral-100, #FFFFFF);
+
+  /* Semantic - Text - Interactive */
+  --text-color-idle: var(--color-spobi-blue-70, #8FACDB);
+  --text-color-disabled: var(--color-spobi-blue-40, #345EA0);
+  --text-color-hover: var(--color-spobi-blue-95, #EFF1F5);
+  --text-color-active: var(--color-spobi-blue-95, #EFF1F5);
+
+  /* Semantic - Text - Inverse */
+  --text-color-primary-inverse: var(--color-neutral-15, #222628);
+  --text-color-secondary-inverse: var(--color-neutral-40, #565A5F);
+  --text-color-inverse-high-contrast: var(--color-neutral-15, #222628);
+
+  /* Semantic - Text - Feedback */
+  --text-color-success: var(--color-green-70, #00C373);
+  --text-color-error: var(--color-bild-red-70, #FF8989);
+  --text-color-warning: var(--color-orange-70, #FD8227);
+
+  /* Semantic - Background - Standard */
+  --bg-color-primary: var(--color-spobi-blue-15, #0B2647);
+  --bg-color-disabled: var(--color-spobi-blue-20, #0C2F61);
+  --bg-color-secondary: var(--color-spobi-blue-20, #0C2F61);
+  --bg-color-primary-const-dark: var(--color-spobi-blue-15, #0B2647);
+  --bg-color-quaternary: var(--color-spobi-blue-30, #174482);
+  --bg-color-tertiary: var(--color-spobi-blue-25, #113B72);
+  --bg-color-primary-const-light: var(--color-neutral-100, #FFFFFF);
+  --bg-color-quintenary: var(--color-spobi-blue-60, #6A91CF);
+
+  /* Semantic - Background - Brand */
+  --bg-color-brand-light-only: var(--color-neutral-100, #FFFFFF);
+  --bg-color-brand-solid: var(--color-spobi-blue-30, #174482);
+  --bg-color-brand-solid-hover: var(--color-spobi-blue-20, #0C2F61);
+  --bg-color-brand-solid-active: var(--color-spobi-blue-10, #091C2E);
+  --bg-color-brand-tint: var(--color-spobi-blue-20, #0C2F61);
+  --bg-color-brand-tint-hover: var(--color-spobi-blue-30, #174482);
+
+  /* Semantic - Background - Inverse */
+  --bg-color-primary-inverse: var(--color-neutral-100, #FFFFFF);
+  --bg-color-tertiary-inverse: var(--color-spobi-blue-90, #D6E1F2);
+  --bg-color-quaternary-inverse: var(--color-spobi-blue-80, #C3C9DB);
+  --bg-color-secondary-inverse: var(--color-spobi-blue-95, #EFF1F5);
+  --bg-color-quintenary-inverse: var(--color-spobi-blue-60, #6A91CF);
+
+  /* Semantic - Background - Success */
+  --bg-color-success-tint: var(--color-green-10, #052013);
+  --bg-color-success-solid: var(--color-green-50, #158751);
+  --bg-color-success-solid-hover: var(--color-green-40, #006E3E);
+  --bg-color-success-tint-hover: var(--color-green-20, #093822);
+  --bg-color-success-solid-active: var(--color-green-30, #0D5232);
+
+  /* Semantic - Background - GradientStops */
+  --bg-color-tertiary-gradient-stop: var(--color-spobi-blue-25-a-0, rgba(17, 59, 114, 0));
+  --bg-color-primary-gradient-stop: var(--color-spobi-blue-15-a-0, rgba(11, 38, 71, 0));
+  --bg-color-secondary-gradient-stop: var(--color-spobi-blue-20-a-0, rgba(12, 47, 97, 0));
+
+  /* Semantic - Background - Overlay */
+  --overlay-scrim-black-const: var(--color-neutral-0-a-70, rgba(0, 0, 0, 0.7));
+  --overlay-scrim-white-const: var(--color-neutral-100-a-70, rgba(255, 255, 255, 0.7));
+
+  /* Semantic - Background - Error */
+  --bg-color-error-tint: var(--color-bild-red-10, #410000);
+  --bg-color-error-tint-hover: var(--color-bild-red-20, #680000);
+  --bg-color-error-solid: var(--color-bild-red-40, #C10000);
+  --bg-color-error-solid-hover: var(--color-bild-red-30, #930000);
+
+  /* Semantic - Background - Warning */
+  --bg-color-warning-tint: var(--color-orange-10, #2F1400);
+  --bg-color-warning-tint-hover: var(--color-orange-20, #522301);
+  --bg-color-warning-solid: var(--color-orange-70, #FD8227);
+  --bg-color-warning-solid-hover: var(--color-orange-60, #EF6702);
+
+  /* Semantic - Border - Standard */
+  --border-color-default: var(--color-spobi-blue-40, #345EA0);
+  --border-color-subtle: var(--color-spobi-blue-25, #113B72);
+  --border-color-extra-strong: var(--color-neutral-100, #FFFFFF);
+  --border-color-strong: var(--color-spobi-blue-50, #4676C3);
+
+  /* Semantic - Border - OnSolid */
+  --border-color-subtle-on-dark: var(--color-spobi-blue-25, #113B72);
+  --border-color-default-on-dark: var(--color-spobi-blue-40, #345EA0);
+  --border-color-subtle-on-light: var(--color-spobi-blue-90, #D6E1F2);
+  --border-color-default-on-light: var(--color-spobi-blue-80, #C3C9DB);
+
+  /* Semantic - Border - Feedback */
   --border-color-success: var(--color-green-70, #00C373);
-  --border-color-warning: var(--color-bild-red-50, #DD0000);
-  --border-color-primary-disabled: var(--color-neutral-25, #343C41);
-  --border-color-secondary-disabled: var(--color-neutral-35, #4B525A);
-
-  /* Semantic - Core */
-  --core-color-primary: var(--color-spobi-blue-16, #0A2750);
-  --core-color-secondary: var(--color-spobi-blue-10, #081828);
-  --core-color-tertiary: var(--color-neutral-100, #FFFFFF);
-  --core-color-secondary-constant: var(--color-neutral-100, #FFFFFF);
-  --core-color-tertiary-constant: var(--color-spobi-blue-10, #081828);
-
-  /* Semantic - Icon */
-  --icon-color-primary: var(--color-neutral-60, #8C9196);
-  --icon-color-inverse: var(--color-neutral-35, #4B525A);
-  --icon-color-secondary-constant: var(--color-neutral-60, #8C9196);
-  --icon-color-constant-on-dark: var(--color-neutral-96, #F2F4F5);
-  --icon-color-primary-constant: var(--color-neutral-35, #4B525A);
+  --border-color-error: var(--color-bild-red-70, #FF8989);
+  --border-color-warning: var(--color-orange-70, #FD8227);
+
+  /* Semantic - Border - Interactive */
+  --border-color-disabled: var(--color-spobi-blue-25, #113B72);
+  --border-color-selected: var(--color-spobi-blue-70, #8FACDB);
+  --border-color-active: var(--color-spobi-blue-60, #6A91CF);
+  --border-color-idle: var(--color-spobi-blue-50, #4676C3);
+
+  /* Semantic - Border - Inverse */
+  --border-color-default-inverse: var(--color-spobi-blue-80, #C3C9DB);
+  --border-color-subtle-inverse: var(--color-spobi-blue-90, #D6E1F2);
+
+  /* Semantic - Border - Brand */
+  --border-color-brand: var(--color-spobi-blue-60, #6A91CF);
+  --border-color-brand-light-only: var(--color-neutral-100, #FFFFFF);
+  --border-color-brand-const: var(--color-spobi-blue-30, #174482);
+
+  /* Semantic - Border - Utilities */
+  --border-color-no-contrast: var(--color-spobi-blue-15, #0B2647);
+
+  /* Semantic - Icon - Interactive */
+  --icon-color-idle: var(--color-spobi-blue-70, #8FACDB);
+  --icon-color-disabled: var(--color-spobi-blue-40, #345EA0);
+  --icon-color-hover: var(--color-spobi-blue-95, #EFF1F5);
+  --icon-color-active: var(--color-spobi-blue-95, #EFF1F5);
+
+  /* Semantic - Icon - OnSolid */
+  --icon-color-secondary-on-light: var(--color-neutral-40, #565A5F);
+  --icon-color-primary-on-dark: var(--color-neutral-100, #FFFFFF);
+  --icon-color-secondary-on-dark: var(--color-neutral-90, #DDE1E2);
+  --icon-color-primary-on-light: var(--color-neutral-15, #222628);
+  --icon-color-const-on-image: var(--color-neutral-100, #FFFFFF);
+
+  /* Semantic - Icon - Feedback */
   --icon-color-success: var(--color-green-70, #00C373);
+  --icon-color-error: var(--color-bild-red-70, #FF8989);
+  --icon-color-warning: var(--color-orange-70, #FD8227);
+
+  /* Semantic - Icon - Brand */
+  --icon-color-brand: var(--color-spobi-blue-60, #6A91CF);
+  --icon-color-brand-light-only: var(--color-neutral-100, #FFFFFF);
+
+  /* Semantic - Icon - Standard */
+  --icon-color-primary: var(--color-spobi-blue-90, #D6E1F2);
+  --icon-color-secondary: var(--color-spobi-blue-70, #8FACDB);
+  --icon-color-tertiary: var(--color-spobi-blue-60, #6A91CF);
 
-  /* Semantic - Label */
-  --label-color-primary: var(--color-neutral-93, #E9ECEF);
-  --label-color-secondary: var(--color-neutral-85, #CED4DA);
-  --label-color-disabled: var(--color-neutral-35, #4B525A);
-  --label-color-primary-constant: var(--color-neutral-15, #232629);
-  --label-color-primary-inverse-constant: var(--color-neutral-93, #E9ECEF);
-  --label-color-tertiary: var(--color-neutral-60, #8C9196);
-  --label-color-primary-inverse: var(--color-neutral-15, #232629);
-
-  /* Semantic - Attention */
-  --attention-color-high: var(--color-bild-red-50, #DD0000);
-  --accent-color-primary: var(--color-spobi-blue-98, #F7F9FD);
-  --attention-color-medium: var(--color-orange-67, #FD8227);
-  --attention-color-low: var(--color-yellow-80, #FFBF00);
-  --accent-color-primary-constant: var(--color-spobi-blue-29, #174482);
-  --attention-color-success-primary: var(--color-green-70, #00C373);
-  --attention-color-extra-low: var(--color-neutral-25, #343C41);
-  --attention-color-success-secondary: var(--color-green-40, #006E3E);
-
-  /* Semantic - Overlay */
-  --overlay-scrim-black: var(--alpha-black-70, rgba(0, 0, 0, 0.7));
-  --overlay-scrim-white: var(--alpha-white-70, rgba(255, 255, 255, 0.7));
+  /* Semantic - Icon - Inverse */
+  --icon-color-primary-inverse: var(--color-neutral-15, #222628);
+  --icon-color-secondary-inverse: var(--color-neutral-40, #565A5F);
+  --icon-color-inverse-high-contrast: var(--color-neutral-15, #222628);
 
   /* Semantic - LayerOpacity */
   --layer-opacity-05: var(--opacity-05, 0.05);
@@ -255,25 +381,21 @@
    DROPSHADOWSOFT
    ============================================ */
 
-/* Broad and soft shadows with low contrast. Best for cards, sheets, or subtle surface separation. */
 [data-color-brand="sportbild"][data-theme="light"] .shadow-soft-sm,
 :host([data-color-brand="sportbild"][data-theme="light"]) .shadow-soft-sm {
   box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.04), 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
 }
 
-/* Broad and soft shadows with low contrast. Best for cards, sheets, or subtle surface separation. */
 [data-color-brand="sportbild"][data-theme="light"] .shadow-soft-md,
 :host([data-color-brand="sportbild"][data-theme="light"]) .shadow-soft-md {
   box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.03), 0px 4px 12px 0px rgba(0, 0, 0, 0.07);
 }
 
-/* Broad and soft shadows with low contrast. Best for cards, sheets, or subtle surface separation. */
 [data-color-brand="sportbild"][data-theme="light"] .shadow-soft-lg,
 :host([data-color-brand="sportbild"][data-theme="light"]) .shadow-soft-lg {
   box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.03), 0px 8px 16px 0px rgba(0, 0, 0, 0.07);
 }
 
-/* Broad and soft shadows with low contrast. Best for cards, sheets, or subtle surface separation. */
 [data-color-brand="sportbild"][data-theme="light"] .shadow-soft-xl,
 :host([data-color-brand="sportbild"][data-theme="light"]) .shadow-soft-xl {
   box-shadow: 0px 0px 64px 0px rgba(0, 0, 0, 0.05), 0px 16px 32px 0px rgba(0, 0, 0, 0.1);
@@ -284,28 +406,24 @@
    DROPSHADOWHARD
    ============================================ */
 
-/* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
 [data-color-brand="sportbild"][data-theme="light"] .shadow-hard-sm,
 :host([data-color-brand="sportbild"][data-theme="light"]) .shadow-hard-sm {
-  box-shadow: 0px 1px 2px 0px var(--alpha-black-20, rgba(0, 0, 0, 0.2)), 0px 1px 3px 1px var(--alpha-black-10, rgba(0, 0, 0, 0.1));
+  box-shadow: 0px 1px 2px 0px var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2)), 0px 1px 3px 1px var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
 }
 
-/* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
 [data-color-brand="sportbild"][data-theme="light"] .shadow-hard-md,
 :host([data-color-brand="sportbild"][data-theme="light"]) .shadow-hard-md {
-  box-shadow: 0px 4px 8px 0px var(--alpha-black-10, rgba(0, 0, 0, 0.1)), 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
+  box-shadow: 0px 4px 8px 0px var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1)), 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
 }
 
-/* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
 [data-color-brand="sportbild"][data-theme="light"] .shadow-hard-lg,
 :host([data-color-brand="sportbild"][data-theme="light"]) .shadow-hard-lg {
-  box-shadow: 0px 2px 3px 0px var(--alpha-black-20, rgba(0, 0, 0, 0.2)), 0px 6px 10px 4px var(--alpha-black-10, rgba(0, 0, 0, 0.1));
+  box-shadow: 0px 2px 3px 0px var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2)), 0px 6px 10px 4px var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
 }
 
-/* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
 [data-color-brand="sportbild"][data-theme="light"] .shadow-hard-xl,
 :host([data-color-brand="sportbild"][data-theme="light"]) .shadow-hard-xl {
-  box-shadow: 0px 4px 4px 0px var(--alpha-black-20, rgba(0, 0, 0, 0.2)), 0px 8px 12px 6px var(--alpha-black-10, rgba(0, 0, 0, 0.1));
+  box-shadow: 0px 4px 4px 0px var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2)), 0px 8px 12px 6px var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
 }
 
 /* Effects - Dark */
@@ -313,25 +431,21 @@
    DROPSHADOWSOFT
    ============================================ */
 
-/* Broad and soft shadows with low contrast. Best for cards, sheets, or subtle surface separation. */
 [data-color-brand="sportbild"][data-theme="dark"] .shadow-soft-sm,
 :host([data-color-brand="sportbild"][data-theme="dark"]) .shadow-soft-sm {
   box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.04), 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
 }
 
-/* Broad and soft shadows with low contrast. Best for cards, sheets, or subtle surface separation. */
 [data-color-brand="sportbild"][data-theme="dark"] .shadow-soft-md,
 :host([data-color-brand="sportbild"][data-theme="dark"]) .shadow-soft-md {
   box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.03), 0px 4px 12px 0px rgba(0, 0, 0, 0.07);
 }
 
-/* Broad and soft shadows with low contrast. Best for cards, sheets, or subtle surface separation. */
 [data-color-brand="sportbild"][data-theme="dark"] .shadow-soft-lg,
 :host([data-color-brand="sportbild"][data-theme="dark"]) .shadow-soft-lg {
   box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.03), 0px 8px 16px 0px rgba(0, 0, 0, 0.07);
 }
 
-/* Broad and soft shadows with low contrast. Best for cards, sheets, or subtle surface separation. */
 [data-color-brand="sportbild"][data-theme="dark"] .shadow-soft-xl,
 :host([data-color-brand="sportbild"][data-theme="dark"]) .shadow-soft-xl {
   box-shadow: 0px 0px 64px 0px rgba(0, 0, 0, 0.05), 0px 16px 32px 0px rgba(0, 0, 0, 0.1);
@@ -342,26 +456,22 @@
    DROPSHADOWHARD
    ============================================ */
 
-/* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
 [data-color-brand="sportbild"][data-theme="dark"] .shadow-hard-sm,
 :host([data-color-brand="sportbild"][data-theme="dark"]) .shadow-hard-sm {
-  box-shadow: 0px 1px 2px 0px var(--alpha-black-20, rgba(0, 0, 0, 0.2)), 0px 1px 3px 1px var(--alpha-black-10, rgba(0, 0, 0, 0.1));
+  box-shadow: 0px 1px 2px 0px var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2)), 0px 1px 3px 1px var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
 }
 
-/* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
 [data-color-brand="sportbild"][data-theme="dark"] .shadow-hard-md,
 :host([data-color-brand="sportbild"][data-theme="dark"]) .shadow-hard-md {
-  box-shadow: 0px 4px 8px 0px var(--alpha-black-10, rgba(0, 0, 0, 0.1)), 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
+  box-shadow: 0px 4px 8px 0px var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1)), 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
 }
 
-/* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
 [data-color-brand="sportbild"][data-theme="dark"] .shadow-hard-lg,
 :host([data-color-brand="sportbild"][data-theme="dark"]) .shadow-hard-lg {
-  box-shadow: 0px 2px 3px 0px var(--alpha-black-20, rgba(0, 0, 0, 0.2)), 0px 6px 10px 4px var(--alpha-black-10, rgba(0, 0, 0, 0.1));
+  box-shadow: 0px 2px 3px 0px var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2)), 0px 6px 10px 4px var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
 }
 
-/* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
 [data-color-brand="sportbild"][data-theme="dark"] .shadow-hard-xl,
 :host([data-color-brand="sportbild"][data-theme="dark"]) .shadow-hard-xl {
-  box-shadow: 0px 4px 4px 0px var(--alpha-black-20, rgba(0, 0, 0, 0.2)), 0px 8px 12px 6px var(--alpha-black-10, rgba(0, 0, 0, 0.1));
+  box-shadow: 0px 4px 4px 0px var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2)), 0px 8px 12px 6px var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
 }