@marioschmidt/design-system-tokens 1.0.22 → 1.0.24

package/dist/css/brands/sportbild/semantic/color/colormode-light.css

@@ -1,316 +1,208 @@
 /**
  * colormode-light.css
- * Generiert am: 2025-11-24T20:37:10.030Z
+ * Generiert am: 2025-11-24T21:40:51.323Z
  * Nicht manuell bearbeiten!
  */
 
 :root {
   /* ============================================
-     COMPONENT
+     SEMANTIC
      ============================================ */
 
-  /* Component - Alert */
+  /* Semantic - Text */
   /**
-   * On marketing offer surfaces this variable is usually not used. The alertSurfaceConstant variables should be used. This token changes color between light and dark modes. L:100 / D:025
+   * Applies to text elements requiring fixed brand color usage (e.g., permanent links, brand slogans on constant backgrounds).
+Behavior: Constant — maintains identical red tone across Light and Dark mode.
    */
-  --alert-surface-color: #FFFFFF;
+  --text-color-accent-constant: #DD0000;
   /**
-   * On marketing offer surfaces this variable is  used.
+   * Main text color used for body copy and all primary textual content. Ensures optimal readability and contrast on standard surfaces.
+Behavior: Dynamic — switches between dark text on light backgrounds and light text on dark backgrounds.
    */
-  --alert-surface-color-constant: #FFFFFF;
-
-  /* Component - Avatar */
+  --text-color-primary: #232629;
   /**
-   * 09-2025 css --article-author-name-color
+   * Muted text tone for subtle information, timestamps, or inactive text elements.
+Behavior: Dynamic — adjusts between mid-gray in Light mode and lighter gray in Dark mode.
    */
-  --avatar-label-color: #232629;
+  --text-color-muted: #666B70;
   /**
-   * 09-2025 css --article-author-name-color
+   * Inverse text color used on opposing surfaces (e.g., white text on red or dark backgrounds).
+Behavior: Dynamic — alternates between light and dark mode.
    */
-  --avatar-label-color-hover: #DD0000;
-
-  /* Component - Breadcrumb */
+  --text-color-primary-inverse: #E9ECEF;
   /**
-   * Use this token on breadcrumbs that are in their default idle state. This token changes color between light and dark modes. L:035 / D:096
+   * Used when primary text color must remain fixed regardless of mode (e.g., on light constant backgrounds).
+Behavior: Constant — same tone across Light and Dark mode.
    */
-  --breadcrumb-text-color-idle: #4B525A;
+  --text-color-primary-constant: #232629;
   /**
-   * Use this token on breadcrumbs that the user's pointer is hovering on or clicked on. This token changes color between light and dark modes. L:015 / D:100
+   * Used for positive or success-related messages (e.g., “Saved”, “Success”, or confirmation text) on success surface colors.
+Behavior: Constant — green tone remains consistent across both modes.
    */
-  --breadcrumb-text-color-hover: #232629;
-
-  /* Component - BreakingNews */
-  --breaking-news-title-surface-color: #FD8227;
-  --breaking-news-surface-color: #232629;
-  --breaking-news-text-content-color: #FFFFFF;
-  --breaking-news-top-title-text-color: #1C1C1C;
-  --breaking-news-bottom-title-text-color: #1C1C1C;
-
-  /* Component - Button */
-  --button-live-ticker-load-new-surface-color: #FFFFFF;
-  --button-live-ticker-load-new-label-color: #8C9196;
-
-  /* Component - Button - Ghost */
-  --button-ghost-bg-color-hover: #CED4DA;
-
-  /* Component - Button - Primary */
-  --button-primary-brand-bg-color-idle: #DD0000;
-  --button-primary-brand-bg-color-hover: #AF0002;
-  --button-primary-label-color: #FFFFFF;
-  --button-primary-success-color-idle: #18995C;
-  --button-primary-success-color-hover: #006E3E;
+  --text-color-success-constant: #006E3E;
   /**
-   * Use this variable on the neutral color primary button. Tone changes between light and dark mode. Light mode Bild & SpoBi: Tone 015 ; Dark mode Bild & SpoBi: Tone 100
+   * Fixed inverse tone for text that always appears on dark surfaces (e.g., hero headlines or persistent dark cards).
+Behavior: Constant — unchanged across modes.
    */
-  --button-primary-neutral-bg-color-idle: #232629;
-  --button-primary-neutral-bg-color-hover: #4B525A;
-
-  /* Component - Button - Secondary */
-  --button-secondary-bg-color-hover: #CED4DA;
-  --button-secondary-label-color: #4B525A;
-  --button-secondary-bg-color-idle: #E9ECEF;
-
-  /* Component - Button - Tertiary */
-  --button-tertiary-label-color: #4B525A;
-  --button-tertiary-border-color-idle: #CED4DA;
-  --button-tertiary-border-color-hover: #4B525A;
-  --button-tertiary-success-bg-color-hover: #CEF4E4;
-  --button-tertiary-success-border-color: #18995C;
-
-  /* Component - Card */
-  --card-surface-bg-color: #FFFFFF;
-
-  /* Component - Chips */
-  --chips-bg-color-hover: #AF0002;
-  --chips-label-color-hover: #FFFFFF;
-  --chips-bg-color-active: #DD0000;
-  --chips-bg-color-idle: #E9ECEF;
-  --chips-label-color-idle: #232629;
-
-  /* Component - Dropdown */
-  --dropdown-bg-color-hover: #F2F4F5;
-  --dropdown-bg-color-idle: #FFFFFF;
-
-  /* Component - Empties */
-  --empties-bg-color: #F2F4F5;
-  --empties-logo-color: #CED4DA;
-
-  /* Component - Foldout */
-  --foldout-label-color-active: #DD0000;
-  --foldout-label-color-idle: #4B525A;
-
-  /* Component - Gallery */
-  --app-image-lightbox-gallery-bg-color: #000000;
-
-  /* Component - Hey */
-  --hey-fav-input-field-surface-color: #E9ECEF;
-  --hey-text-color: #4B525A;
-  --hey-icon-util-color: #4B525A;
+  --text-color-primary-inverse-constant: #E9ECEF;
   /**
-   * This is the most used color for separators across Bild products.
+   * Secondary text color used for supportive information, subtitles, and less prominent text.
+Behavior: Dynamic — adapts between neutral tones to maintain proper contrast per theme. In 2025 css it is called figure meta.
    */
-  --hey-separator-color: #CED4DA;
-  --hey-drawer-surface-color: #F2F4F5;
-
-  /* Component - InputField */
-  --input-field-border-color-idle: #CED4DA;
-  --input-field-border-color-active: #4B525A;
-  --input-field-border-color-dark: #8C9196;
-  --input-field-border-color-dark-active: #232629;
-  --input-field-bg-color-dark-low-contrast: #343C41;
-  --input-field-bg-color-dark-medium-contrast: #4B525A;
-  --input-field-bg-color-dark-high-contrast: #E9ECEF;
-
-  /* Component - Kicker - Partner */
-  --kicker-fitbook-bg-color: #FF97B7;
-  --kicker-petbook-bg-color: #B9DB91;
-  --kicker-myhomebook-bg-color: #66CCCC;
-  --kicker-travelbook-bg-color: #8EF0ED;
-  --kicker-techbook-bg-color: #93E4FF;
-  --kicker-kaufberater-bg-color: #55476E;
-  --kicker-cobi-bg-color: #DC231C;
-  --kicker-aubi-bg-color: #F00000;
-  --kicker-spobi-bg-color: #174482;
-  --kicker-bz-bg-color: #E3001B;
-
-  /* Component - Kicker - Standard */
-  --kicker-bg-color-on-surface: #DD0000;
-
-  /* Component - Mediaplayer */
-  --vid-player-controls-autoplay-button-bg-color: rgba(0, 0, 0, 0.20000000298023224);
+  --text-color-secondary: #8C9196;
   /**
-   * This variable is used for hover states of video player control buttons.
+   * Used for strong warnings, errors, or destructive action labels.
+Behavior: Constant — red color remains unchanged between Light and Dark mode for visibility and recognition.
    */
-  --vid-player-control-buttons-bg-hover-color: rgba(221, 0, 0, 0.800000011920929);
-  --vid-player-control-buttons-bg-color-hover: rgba(0, 0, 0, 0.20000000298023224);
-  --vid-player-overlay-scrim-color: rgba(0, 0, 0, 0.5);
-  --audio-player-play-button-bg-color: rgba(255, 255, 255, 0.30000001192092896);
-  --vid-player-tooltip-bg-color: rgba(0, 0, 0, 0.699999988079071);
-  --vid-player-control-buttons-bg-color-pressed: rgba(0, 0, 0, 0.05000000074505806);
-  --vid-player-progress-bar-preload-bg-color: rgba(255, 255, 255, 0.30000001192092896);
-  --vid-player-unmute-button-bg-color: rgba(0, 0, 0, 0.20000000298023224);
-  --vid-player-unmute-button-bg-color-hover: rgba(0, 0, 0, 0.3499999940395355);
-
-  /* Component - Menu */
-  --menu-surface-color: #FFFFFF;
+  --text-color-attention-high: #DD0000;
   /**
-   * Used on a thin part at the top of header in navigation menu.
+   * Accent text color used for links, interactive text, or highlighted key words. Changes from a red in light mode to a white in dark mode.
    */
-  --menu-scrolled-surface-gradient-color: rgba(255, 255, 255, 0.949999988079071);
-  --menu-link-lane-surface-color: #FFFFFF;
-  --menu-link-lane-label-color: #4B525A;
-  --menu-link-lane-label-color-active: #232629;
-  --app-top-bar-surface-color: #FFFFFF;
-  --app-top-bar-icon-color: #4B525A;
-  --app-top-bar-text-color-primary: #232629;
-  --app-tob-bar-tab-nav-bottom-border: #E9ECEF;
-  --app-tob-bar-tab-nav-bottom-border-active: #DD0000;
-
-  /* Component - MenuItem */
-  --menu-item-border-color-active: #DD0000;
-  --menu-item-label-color-primary: #4B525A;
-  --menu-item-label-color-primary-active: #232629;
+  --text-color-accent: #DD0000;
   /**
-   * The variable can be used on secondary menus that many times show up on dedicated home pages specific to a topic. The menu labels are often times using the color white across color modes.
+   * Represents medium attention states, often used in warnings or pending states.
+Behavior: Constant — same orange tone across Light and Dark mode.
    */
-  --menu-item-label-color-secondary: #FFFFFF;
-
-  /* Component - Newsticker */
-  --news-ticker-timestamp-color: #8C9196;
-  --news-ticker-badge-icons-color: #8C9196;
+  --text-color-attention-medium: #FD8227;
+  /**
+   * Used for text displayed on dark surfaces to ensure maximum legibility and contrast.
+Behavior: Constant — always light neutral to guarantee accessibility on dark backgrounds.
+   */
+  --text-color-on-dark-surface: #FFFFFF;
 
-  /* Component - Pagination */
-  --pagination-element-color-default: #CED4DA;
-  --pagination-element-color-active: #DD0000;
+  /* Semantic - Surface */
   /**
-   * Use this on gallery slider pagination elements. This can also be applied to hover states of those elements.
+   * Primary surface color used for main backgrounds and large layout areas (e.g., page background, primary containers).
+Behavior: Dynamic — adapts between light and dark surface tokens to maintain legibility and hierarchy.
    */
-  --gallery-pagination-element-active-opacity: 100px;
+  --surface-color-primary: #FFFFFF;
   /**
-   * Used as the background surface color scroll bars. Found on components that vertically or horizontally stack elements.
+   * Used for secondary surface layers such as cards, panels, or nested containers that need to differentiate themselves from the primary surface. .
+Behavior: Dynamic — adapts brightness level based on mode for appropriate depth contrast.
    */
-  --scroll-bar-track-bg-color: rgba(0, 0, 0, 0.10000000149011612);
+  --surface-color-secondary: #F2F4F5;
   /**
-   * Use on the scroll bar interactive element which shows where the scroll view is positioned inside the full extent of the scrolling space.
+   * Inverse of the primary surface, used when Light and Dark surfaces are swapped (e.g., inverse cards or elevated sections).
+Behavior: Dynamic — switches between dark and light values depending on mode.
    */
-  --scroll-bar-thumb-bg-color: #8C9196;
-
-  /* Component - PartnerLinks */
+  --surface-color-primary-inverse: #232629;
   /**
-   * !do not use! these variables have been deprecated and multitext link buttons are now classified as partner buttons.
+   * A fixed light surface tone used when a consistent light background is required (e.g., light panels within dark layouts).
+Behavior: Constant — remains the same in both modes.
    */
-  --partner-links-border-color-idle: #CED4DA;
+  --surface-color-primary-constant-light: #FFFFFF;
   /**
-   * !do not use! these variables have been deprecated and multitext link buttons are now classified as partner buttons.
+   * A fixed dark surface tone used for dark overlays or nested dark sections inside light layouts.
+Behavior: Constant — identical across Light and Dark mode.
    */
-  --partner-links-border-color-active: #232629;
+  --surface-color-primary-constant-dark: #232629;
   /**
-   * !do not use! these variables have been deprecated and multitext link buttons are now classified as partner buttons.
+   * HIghtest elevation surface color, typically used for grouping or background accents to differentiate themselves from all previous surface color options. Uses corresponding light/dark tones for consistent layering.
    */
-  --partner-links-bg-color-idle: #FFFFFF;
+  --surface-color-quartenary: #CED4DA;
   /**
-   * !do not use! these variables have been deprecated and multitext link buttons are now classified as partner buttons.
+   * Success-related background used for positive notifications, confirmation surfaces, or success banners.
+Behavior: Constant — remains the same across Light and Dark mode to ensure brand alignment.
    */
-  --partner-links-bg-color-active: #E9ECEF;
+  --surface-color-success: #CEF4E4;
   /**
-   * !do not use! these variables have been deprecated and multitext link buttons are now classified as partner buttons.
+   * Tertiary background layer for inner containers, grouped content, or subtle elevation steps  that need to differentiate themselves from the primary and secondary surfaces.
+Behavior: Dynamic — switches between light and dark tertiary tones.
    */
-  --partner-links-container-border-color: #CED4DA;
-
-  /* Component - Selection */
+  --surface-color-tertiary: #E9ECEF;
   /**
-   * Checkboxes and Radio buttons use this variable for their border.
+   * Represents tertiary-level gradient background.
+Currently used on skeletons.
    */
-  --selection-border-color: #4B525A;
-
-  /* Component - Slider */
+  --surface-color-tertiary-gradient-stop: rgba(233, 236, 239, 0);
   /**
-   * When users hover on gallery slider buttons the opacity changes to 90%.
+   * Inverse tertiary background, applied when Light and Dark surfaces are reversed (e.g., dark-on-light cards).
+Behavior: Dynamic — swaps values between modes for contrast preservation.
    */
-  --slider-button-opacity: 90px;
+  --surface-color-tertiary-inverse: #343C41;
   /**
-   * This variable is used on audio player slider bars. It references a pure white with 35% opacity.
+   * Defines the end stops for primary surface gradients, creating visual depth or elevation. Used next to sliders buttons and slider container edges for fading out content. Behavior: Dynamic — light gradients in Light mode, dark gradients in Dark mode.
    */
-  --slider-track-bg-color: rgba(255, 255, 255, 0.3499999940395355);
-
-  /* Component - SocialShareButton */
-  --social-share-button-label-color-default: #FFFFFF;
-  --social-share-button-label-color-active: #FFFFFF;
-  --social-share-button-bg-color-active: #343C41;
-  --social-share-button-bg-color-default: #4B525A;
-
-  /* Component - Subheader */
-  --subheaders-color: #232629;
-
-  /* Component - Tab */
-  --tab-bg-color-hover: #E9ECEF;
-  --tab-label-color-active: #343C41;
-  --tab-label-color-default: #4B525A;
-  --app-bottom-tab-bar-bg-color: #FFFFFF;
-
-  /* Component - Teaser */
+  --surface-color-primary-gradient-stop: rgba(255, 255, 255, 0);
   /**
-   * When users hover over graphical teasers the image reduces opacity to 80%.
+   * Used for secondary surface gradients or subtle depth layers across backgrounds.
+Behavior: Dynamic — adapts to mode brightness for smooth gradient transitions.
    */
-  --teaser-hover-opacity: 80px;
-  --teaser-title-background-gradient-start: rgba(0, 0, 0, 0.699999988079071);
-  --teaser-title-background-gradient-stop: rgba(0, 0, 0, 0);
-
-  /* Component - TextLink */
-  --text-link-color-secondary: #8C9196;
-  --text-link-color-secondary-active: #232629;
-  --text-link-color-primary: #232629;
+  --surface-color-secondary-gradient-stop: rgba(242, 244, 245, 0);
+  /**
+   * Inverse of the quartenary surface, used for background reversals in mixed-layout areas.
+Behavior: Dynamic — inverts between dark and light tones depending on mode.
+   */
+  --surface-color-quartenary-inverse: #4B525A;
 
-  /* Component - _DSysDoc */
+  /* Semantic - Heading */
   /**
-   * This variable is only for use in Figma's Design System File. It is automating some of the content in documentation pages.
+   * Used for kicker text and category labels placed directly on standard surface backgrounds.
+Behavior: Dynamic — adjusts between red for Light and a neutral tone in Dark modes.
    */
-  --dsys-docs-label-text-surface-color-primary-primitive-name: BILD100;
+  --kicker-text-color-on-surface: #DD0000;
   /**
-   * This is currently for use in this design system's documentation texts. It is a text string made for being used in light and dark mode documentation texts.
+   * Primary color for headings and display typography. Ensures clear hierarchy and optimal readability on main surfaces. Adapds it´s color based on the brand mode for brand recognition.
+Behavior: Dynamic — dark text in Light mode, light text in Dark mode.
    */
-  --dsys-docs-label-text-color-mode: (Light Mode);
-  --ds-doc-spacing-item-bg-color: rgba(221, 0, 0, 0.10000000149011612);
-  --ds-doc-spacing-item-border-color: rgba(221, 0, 0, 0.5);
-
-
-  /* ============================================
-     SEMANTIC
-     ============================================ */
-
-  /* Semantic - Attention */
+  --headline-color-primary: #232629;
   /**
-   * High-level attention color used for errors, destructive actions, and critical alerts (e.g., delete actions, error states). Remains red in both Light and Dark mode for immediate recognition.
+   * Fixed white heading color used on dark or colored backgrounds (e.g., hero sections, banners) that remain constant across modes.
+Behavior: Constant — remains white in both Light and Dark mode.
    */
-  --attention-color-high: #DD0000;
+  --headline-color-white-const: #FFFFFF;
   /**
-   * Primary accent color used to emphasize interactive or highlight elements such as links, selection states, or focus indicators. Adapts in Darkmode to a fully white tone.
+   * Specialized kicker color for use on red or brand-colored backgrounds (e.g., red kicker bg within teaser cards).
+Behavior: Constant — remains consistent across light and darkmode.
    */
-  --accent-color-primary: #DD0000;
+  --kicker-text-color-on-red: #FFFFFF;
   /**
-   * Medium-level attention tone representing stronger caution or intermediate alert states. Commonly applied in warning messages. Constant — identical in both modes.
+   * Applied to kicker or meta text on dark colored backgrounds to maintain high legibility.
+Behavior: Constant — always uses semi-transparent white for consistent readability.
    */
-  --attention-color-medium: #FD8227;
+  --kicker-text-color-on-dark-bg: rgba(255, 255, 255, 0.800000011920929);
   /**
-   * Low-level warning or attention tone, typically used for informational or cautionary messages. Same yellow tone across Light and Dark to maintain recognition.
+   * Used for kicker text placed on bright or light colored backgrounds. Ensures balanced contrast without harsh visual dominance.
+Behavior: Constant — remains semi-transparent black across both modes.
    */
-  --attention-color-low: #FFBF00;
+  --kicker-text-color-on-bright-bg: rgba(0, 0, 0, 0.699999988079071);
+
+  /* Semantic - State */
   /**
-   * Used for accent highlights that must remain visually consistent across themes (e.g., brand identifiers, logos, or fixed emphasis areas). Color value does not change between Light and Dark mode.
+   * Defines the active state color for secondary actions (e.g., secondary buttons, tabs, or toggles).
+Behavior: Dynamic — light gray in Light mode and bright gray in Dark mode to maintain perceptual balance.
    */
-  --accent-color-primary-constant: #DD0000;
+  --color-secondary-active: #232629;
   /**
-   * Primary success color used to indicate positive states, confirmations, or completed actions (e.g., success banners, icons, or badges). Remains the same across modes to ensure recognizability and consistency.
+   * Used to represent the active or pressed state of primary actions such as tabs or links.
+Behavior: Constant — identical value across modes for consistent interaction feedback.
    */
-  --attention-color-success-primary: #00C373;
+  --color-primary-active: #DD0000;
   /**
-   * Very low-contrast background tone used for information or system-neutral surfaces, often for tooltips or quiet information highlights. Dynamic — light neutral in Light mode and dark neutral in Dark mode.
+   * Used for disabled secondary elements, ensuring reduced visual prominence while maintaining legibility.
+Behavior: Dynamic — adapts neutral tones based on theme brightness.
    */
-  --attention-color-extra-low: #FFFFFF;
+  --color-secondary-disabled: #E9ECEF;
   /**
-   * Secondary success tone used for secondary states. Maintains the same color in both Light and Dark mode for clarity.
+   * Defines the disabled color for primary components (e.g., disabled primary buttons, inputs). Reduces emphasis and contrast to signal inactivity.
+Behavior: Dynamic — slightly lighter in Light mode and darker in Dark mode to remain visually accessible.
    */
-  --attention-color-success-secondary: #006E3E;
+  --color-primary-disabled: #F2F4F5;
+  /**
+   * Inverse variant of the secondary active state, applied on dark backgrounds or inverse layouts.
+Behavior: Dynamic — switches between bright and dark tones depending on the background.
+   */
+  --color-secondary-active-inverse: #F2F4F5;
+  /**
+   * Represents active or pressed states for tertiary elements (e.g., link highlights, icons, or subtle interactive surfaces).
+Behavior: Constant — uses the same green success tone across Light and Dark mode.
+   */
+  --color-tertiary-active: #00C373;
+  /**
+   * Represents disabled states for tertiary levels, maintaining subtle visibility without drawing attention.
+Behavior: Dynamic — adjusts between gray tones for Light and Dark mode consistency.
+   */
+  --color-tertiary-disabled: #8C9196;
 
   /* Semantic - Border */
   /**
@@ -389,38 +281,6 @@ Behavior: Constant — retains the same red warning tone in both Light and Dark
    */
   --goliani-test-color: #00FFF2;
 
-  /* Semantic - Heading */
-  /**
-   * Used for kicker text and category labels placed directly on standard surface backgrounds.
-Behavior: Dynamic — adjusts between red for Light and a neutral tone in Dark modes.
-   */
-  --kicker-text-color-on-surface: #DD0000;
-  /**
-   * Primary color for headings and display typography. Ensures clear hierarchy and optimal readability on main surfaces. Adapds it´s color based on the brand mode for brand recognition.
-Behavior: Dynamic — dark text in Light mode, light text in Dark mode.
-   */
-  --headline-color-primary: #232629;
-  /**
-   * Fixed white heading color used on dark or colored backgrounds (e.g., hero sections, banners) that remain constant across modes.
-Behavior: Constant — remains white in both Light and Dark mode.
-   */
-  --headline-color-white-const: #FFFFFF;
-  /**
-   * Specialized kicker color for use on red or brand-colored backgrounds (e.g., red kicker bg within teaser cards).
-Behavior: Constant — remains consistent across light and darkmode.
-   */
-  --kicker-text-color-on-red: #FFFFFF;
-  /**
-   * Applied to kicker or meta text on dark colored backgrounds to maintain high legibility.
-Behavior: Constant — always uses semi-transparent white for consistent readability.
-   */
-  --kicker-text-color-on-dark-bg: rgba(255, 255, 255, 0.800000011920929);
-  /**
-   * Used for kicker text placed on bright or light colored backgrounds. Ensures balanced contrast without harsh visual dominance.
-Behavior: Constant — remains semi-transparent black across both modes.
-   */
-  --kicker-text-color-on-bright-bg: rgba(0, 0, 0, 0.699999988079071);
-
   /* Semantic - Icon */
   /**
    * Primary icon color on primary surfaces.
@@ -488,192 +348,332 @@ Behavior: Dynamic — switches between light and dark.
    */
   --label-color-primary-inverse: #E9ECEF;
 
-  /* Semantic - LayerOpacity */
-  --layer-opacity05: 5px;
-  --layer-opacity10: 10px;
-  --layer-opacity20: 20px;
-  --layer-opacity30: 30px;
-  --layer-opacity40: 40px;
-  --layer-opacity50: 50px;
-  --layer-opacity60: 60px;
-  --layer-opacity70: 70px;
-  --layer-opacity80: 80px;
-  --layer-opacity90: 90px;
-  --layer-opacity100: 100px;
-  --layer-opacity00: 0px;
-
-  /* Semantic - Overlay */
+  /* Semantic - Attention */
   /**
-   * A semi-transparent black overlay used to dim background content when modals, drawers, or dialogs are active. Identical opacity and tone in both Light and Dark mode to ensure consistent overlay depth.
+   * High-level attention color used for errors, destructive actions, and critical alerts (e.g., delete actions, error states). Remains red in both Light and Dark mode for immediate recognition.
    */
-  --overlay-scrim-black: rgba(0, 0, 0, 0.699999988079071);
+  --attention-color-high: #DD0000;
   /**
-   * A semi-transparent white overlay used to brighten or fade background layers, often applied behind bottom sheets or temporary panels.
-Behavior: Constant — same opacity level across modes to preserve uniform layering behavior.
+   * Primary accent color used to emphasize interactive or highlight elements such as links, selection states, or focus indicators. Adapts in Darkmode to a fully white tone.
    */
-  --overlay-scrim-white: rgba(255, 255, 255, 0.699999988079071);
-
-  /* Semantic - State */
+  --accent-color-primary: #DD0000;
   /**
-   * Defines the active state color for secondary actions (e.g., secondary buttons, tabs, or toggles).
-Behavior: Dynamic — light gray in Light mode and bright gray in Dark mode to maintain perceptual balance.
+   * Medium-level attention tone representing stronger caution or intermediate alert states. Commonly applied in warning messages. Constant — identical in both modes.
    */
-  --color-secondary-active: #232629;
+  --attention-color-medium: #FD8227;
   /**
-   * Used to represent the active or pressed state of primary actions such as tabs or links.
-Behavior: Constant — identical value across modes for consistent interaction feedback.
+   * Low-level warning or attention tone, typically used for informational or cautionary messages. Same yellow tone across Light and Dark to maintain recognition.
    */
-  --color-primary-active: #DD0000;
+  --attention-color-low: #FFBF00;
   /**
-   * Used for disabled secondary elements, ensuring reduced visual prominence while maintaining legibility.
-Behavior: Dynamic — adapts neutral tones based on theme brightness.
+   * Used for accent highlights that must remain visually consistent across themes (e.g., brand identifiers, logos, or fixed emphasis areas). Color value does not change between Light and Dark mode.
    */
-  --color-secondary-disabled: #E9ECEF;
+  --accent-color-primary-constant: #DD0000;
   /**
-   * Defines the disabled color for primary components (e.g., disabled primary buttons, inputs). Reduces emphasis and contrast to signal inactivity.
-Behavior: Dynamic — slightly lighter in Light mode and darker in Dark mode to remain visually accessible.
+   * Primary success color used to indicate positive states, confirmations, or completed actions (e.g., success banners, icons, or badges). Remains the same across modes to ensure recognizability and consistency.
    */
-  --color-primary-disabled: #F2F4F5;
+  --attention-color-success-primary: #00C373;
   /**
-   * Inverse variant of the secondary active state, applied on dark backgrounds or inverse layouts.
-Behavior: Dynamic — switches between bright and dark tones depending on the background.
+   * Very low-contrast background tone used for information or system-neutral surfaces, often for tooltips or quiet information highlights. Dynamic — light neutral in Light mode and dark neutral in Dark mode.
    */
-  --color-secondary-active-inverse: #F2F4F5;
+  --attention-color-extra-low: #FFFFFF;
   /**
-   * Represents active or pressed states for tertiary elements (e.g., link highlights, icons, or subtle interactive surfaces).
-Behavior: Constant — uses the same green success tone across Light and Dark mode.
+   * Secondary success tone used for secondary states. Maintains the same color in both Light and Dark mode for clarity.
    */
-  --color-tertiary-active: #00C373;
+  --attention-color-success-secondary: #006E3E;
+
+  /* Semantic - Overlay */
   /**
-   * Represents disabled states for tertiary levels, maintaining subtle visibility without drawing attention.
-Behavior: Dynamic — adjusts between gray tones for Light and Dark mode consistency.
+   * A semi-transparent black overlay used to dim background content when modals, drawers, or dialogs are active. Identical opacity and tone in both Light and Dark mode to ensure consistent overlay depth.
    */
-  --color-tertiary-disabled: #8C9196;
+  --overlay-scrim-black: rgba(0, 0, 0, 0.699999988079071);
+  /**
+   * A semi-transparent white overlay used to brighten or fade background layers, often applied behind bottom sheets or temporary panels.
+Behavior: Constant — same opacity level across modes to preserve uniform layering behavior.
+   */
+  --overlay-scrim-white: rgba(255, 255, 255, 0.699999988079071);
 
-  /* Semantic - Surface */
+  /* Semantic - LayerOpacity */
+  --layer-opacity05: 5px;
+  --layer-opacity10: 10px;
+  --layer-opacity20: 20px;
+  --layer-opacity30: 30px;
+  --layer-opacity40: 40px;
+  --layer-opacity50: 50px;
+  --layer-opacity60: 60px;
+  --layer-opacity70: 70px;
+  --layer-opacity80: 80px;
+  --layer-opacity90: 90px;
+  --layer-opacity100: 100px;
+  --layer-opacity00: 0px;
+
+
+  /* ============================================
+     COMPONENT
+     ============================================ */
+
+  /* Component - Subheader */
+  --subheaders-color: #232629;
+
+  /* Component - Breadcrumb */
   /**
-   * Primary surface color used for main backgrounds and large layout areas (e.g., page background, primary containers).
-Behavior: Dynamic — adapts between light and dark surface tokens to maintain legibility and hierarchy.
+   * Use this token on breadcrumbs that are in their default idle state. This token changes color between light and dark modes. L:035 / D:096
    */
-  --surface-color-primary: #FFFFFF;
+  --breadcrumb-text-color-idle: #4B525A;
   /**
-   * Used for secondary surface layers such as cards, panels, or nested containers that need to differentiate themselves from the primary surface. .
-Behavior: Dynamic — adapts brightness level based on mode for appropriate depth contrast.
+   * Use this token on breadcrumbs that the user's pointer is hovering on or clicked on. This token changes color between light and dark modes. L:015 / D:100
    */
-  --surface-color-secondary: #F2F4F5;
+  --breadcrumb-text-color-hover: #232629;
+
+  /* Component - BreakingNews */
+  --breaking-news-title-surface-color: #FD8227;
+  --breaking-news-surface-color: #232629;
+  --breaking-news-text-content-color: #FFFFFF;
+  --breaking-news-top-title-text-color: #1C1C1C;
+  --breaking-news-bottom-title-text-color: #1C1C1C;
+
+  /* Component - Menu */
+  --menu-surface-color: #FFFFFF;
   /**
-   * Inverse of the primary surface, used when Light and Dark surfaces are swapped (e.g., inverse cards or elevated sections).
-Behavior: Dynamic — switches between dark and light values depending on mode.
+   * Used on a thin part at the top of header in navigation menu.
    */
-  --surface-color-primary-inverse: #232629;
+  --menu-scrolled-surface-gradient-color: rgba(255, 255, 255, 0.949999988079071);
+  --menu-link-lane-surface-color: #FFFFFF;
+  --menu-link-lane-label-color: #4B525A;
+  --menu-link-lane-label-color-active: #232629;
+  --app-top-bar-surface-color: #FFFFFF;
+  --app-top-bar-icon-color: #4B525A;
+  --app-top-bar-text-color-primary: #232629;
+  --app-tob-bar-tab-nav-bottom-border: #E9ECEF;
+  --app-tob-bar-tab-nav-bottom-border-active: #DD0000;
+
+  /* Component - PartnerLinks */
   /**
-   * A fixed light surface tone used when a consistent light background is required (e.g., light panels within dark layouts).
-Behavior: Constant — remains the same in both modes.
+   * !do not use! these variables have been deprecated and multitext link buttons are now classified as partner buttons.
    */
-  --surface-color-primary-constant-light: #FFFFFF;
+  --partner-links-border-color-idle: #CED4DA;
   /**
-   * A fixed dark surface tone used for dark overlays or nested dark sections inside light layouts.
-Behavior: Constant — identical across Light and Dark mode.
+   * !do not use! these variables have been deprecated and multitext link buttons are now classified as partner buttons.
    */
-  --surface-color-primary-constant-dark: #232629;
+  --partner-links-border-color-active: #232629;
   /**
-   * HIghtest elevation surface color, typically used for grouping or background accents to differentiate themselves from all previous surface color options. Uses corresponding light/dark tones for consistent layering.
+   * !do not use! these variables have been deprecated and multitext link buttons are now classified as partner buttons.
    */
-  --surface-color-quartenary: #CED4DA;
+  --partner-links-bg-color-idle: #FFFFFF;
   /**
-   * Success-related background used for positive notifications, confirmation surfaces, or success banners.
-Behavior: Constant — remains the same across Light and Dark mode to ensure brand alignment.
+   * !do not use! these variables have been deprecated and multitext link buttons are now classified as partner buttons.
    */
-  --surface-color-success: #CEF4E4;
+  --partner-links-bg-color-active: #E9ECEF;
   /**
-   * Tertiary background layer for inner containers, grouped content, or subtle elevation steps  that need to differentiate themselves from the primary and secondary surfaces.
-Behavior: Dynamic — switches between light and dark tertiary tones.
+   * !do not use! these variables have been deprecated and multitext link buttons are now classified as partner buttons.
    */
-  --surface-color-tertiary: #E9ECEF;
+  --partner-links-container-border-color: #CED4DA;
+
+  /* Component - SocialShareButton */
+  --social-share-button-label-color-default: #FFFFFF;
+  --social-share-button-label-color-active: #FFFFFF;
+  --social-share-button-bg-color-active: #343C41;
+  --social-share-button-bg-color-default: #4B525A;
+
+  /* Component - Button - Primary */
+  --button-primary-brand-bg-color-idle: #DD0000;
+  --button-primary-brand-bg-color-hover: #AF0002;
+  --button-primary-label-color: #FFFFFF;
+  --button-primary-success-color-idle: #18995C;
+  --button-primary-success-color-hover: #006E3E;
   /**
-   * Represents tertiary-level gradient background.
-Currently used on skeletons.
+   * Use this variable on the neutral color primary button. Tone changes between light and dark mode. Light mode Bild & SpoBi: Tone 015 ; Dark mode Bild & SpoBi: Tone 100
    */
-  --surface-color-tertiary-gradient-stop: rgba(233, 236, 239, 0);
+  --button-primary-neutral-bg-color-idle: #232629;
+  --button-primary-neutral-bg-color-hover: #4B525A;
+
+  /* Component - Button - Tertiary */
+  --button-tertiary-label-color: #4B525A;
+  --button-tertiary-border-color-idle: #CED4DA;
+  --button-tertiary-border-color-hover: #4B525A;
+  --button-tertiary-success-bg-color-hover: #CEF4E4;
+  --button-tertiary-success-border-color: #18995C;
+
+  /* Component - Button - Secondary */
+  --button-secondary-bg-color-hover: #CED4DA;
+  --button-secondary-label-color: #4B525A;
+  --button-secondary-bg-color-idle: #E9ECEF;
+
+  /* Component - Button */
+  --button-live-ticker-load-new-surface-color: #FFFFFF;
+  --button-live-ticker-load-new-label-color: #8C9196;
+
+  /* Component - Button - Ghost */
+  --button-ghost-bg-color-hover: #CED4DA;
+
+  /* Component - InputField */
+  --input-field-border-color-idle: #CED4DA;
+  --input-field-border-color-active: #4B525A;
+  --input-field-border-color-dark: #8C9196;
+  --input-field-border-color-dark-active: #232629;
+  --input-field-bg-color-dark-low-contrast: #343C41;
+  --input-field-bg-color-dark-medium-contrast: #4B525A;
+  --input-field-bg-color-dark-high-contrast: #E9ECEF;
+
+  /* Component - Dropdown */
+  --dropdown-bg-color-hover: #F2F4F5;
+  --dropdown-bg-color-idle: #FFFFFF;
+
+  /* Component - TextLink */
+  --text-link-color-secondary: #8C9196;
+  --text-link-color-secondary-active: #232629;
+  --text-link-color-primary: #232629;
+
+  /* Component - Tab */
+  --tab-bg-color-hover: #E9ECEF;
+  --tab-label-color-active: #343C41;
+  --tab-label-color-default: #4B525A;
+  --app-bottom-tab-bar-bg-color: #FFFFFF;
+
+  /* Component - MenuItem */
+  --menu-item-border-color-active: #DD0000;
+  --menu-item-label-color-primary: #4B525A;
+  --menu-item-label-color-primary-active: #232629;
   /**
-   * Inverse tertiary background, applied when Light and Dark surfaces are reversed (e.g., dark-on-light cards).
-Behavior: Dynamic — swaps values between modes for contrast preservation.
+   * The variable can be used on secondary menus that many times show up on dedicated home pages specific to a topic. The menu labels are often times using the color white across color modes.
    */
-  --surface-color-tertiary-inverse: #343C41;
+  --menu-item-label-color-secondary: #FFFFFF;
+
+  /* Component - Foldout */
+  --foldout-label-color-active: #DD0000;
+  --foldout-label-color-idle: #4B525A;
+
+  /* Component - Newsticker */
+  --news-ticker-timestamp-color: #8C9196;
+  --news-ticker-badge-icons-color: #8C9196;
+
+  /* Component - Alert */
   /**
-   * Defines the end stops for primary surface gradients, creating visual depth or elevation. Used next to sliders buttons and slider container edges for fading out content. Behavior: Dynamic — light gradients in Light mode, dark gradients in Dark mode.
+   * On marketing offer surfaces this variable is usually not used. The alertSurfaceConstant variables should be used. This token changes color between light and dark modes. L:100 / D:025
    */
-  --surface-color-primary-gradient-stop: rgba(255, 255, 255, 0);
+  --alert-surface-color: #FFFFFF;
   /**
-   * Used for secondary surface gradients or subtle depth layers across backgrounds.
-Behavior: Dynamic — adapts to mode brightness for smooth gradient transitions.
+   * On marketing offer surfaces this variable is  used.
    */
-  --surface-color-secondary-gradient-stop: rgba(242, 244, 245, 0);
+  --alert-surface-color-constant: #FFFFFF;
+
+  /* Component - Empties */
+  --empties-bg-color: #F2F4F5;
+  --empties-logo-color: #CED4DA;
+
+  /* Component - Chips */
+  --chips-bg-color-hover: #AF0002;
+  --chips-label-color-hover: #FFFFFF;
+  --chips-bg-color-active: #DD0000;
+  --chips-bg-color-idle: #E9ECEF;
+  --chips-label-color-idle: #232629;
+
+  /* Component - Card */
+  --card-surface-bg-color: #FFFFFF;
+
+  /* Component - Selection */
   /**
-   * Inverse of the quartenary surface, used for background reversals in mixed-layout areas.
-Behavior: Dynamic — inverts between dark and light tones depending on mode.
+   * Checkboxes and Radio buttons use this variable for their border.
    */
-  --surface-color-quartenary-inverse: #4B525A;
+  --selection-border-color: #4B525A;
 
-  /* Semantic - Text */
+  /* Component - _DSysDoc */
   /**
-   * Applies to text elements requiring fixed brand color usage (e.g., permanent links, brand slogans on constant backgrounds).
-Behavior: Constant — maintains identical red tone across Light and Dark mode.
+   * This variable is only for use in Figma's Design System File. It is automating some of the content in documentation pages.
    */
-  --text-color-accent-constant: #DD0000;
+  --dsys-docs-label-text-surface-color-primary-primitive-name: BILD100;
   /**
-   * Main text color used for body copy and all primary textual content. Ensures optimal readability and contrast on standard surfaces.
-Behavior: Dynamic — switches between dark text on light backgrounds and light text on dark backgrounds.
+   * This is currently for use in this design system's documentation texts. It is a text string made for being used in light and dark mode documentation texts.
    */
-  --text-color-primary: #232629;
+  --dsys-docs-label-text-color-mode: (Light Mode);
+  --ds-doc-spacing-item-bg-color: rgba(221, 0, 0, 0.10000000149011612);
+  --ds-doc-spacing-item-border-color: rgba(221, 0, 0, 0.5);
+
+  /* Component - Hey */
+  --hey-fav-input-field-surface-color: #E9ECEF;
+  --hey-text-color: #4B525A;
+  --hey-icon-util-color: #4B525A;
   /**
-   * Muted text tone for subtle information, timestamps, or inactive text elements.
-Behavior: Dynamic — adjusts between mid-gray in Light mode and lighter gray in Dark mode.
+   * This is the most used color for separators across Bild products.
    */
-  --text-color-muted: #666B70;
+  --hey-separator-color: #CED4DA;
+  --hey-drawer-surface-color: #F2F4F5;
+
+  /* Component - Pagination */
+  --pagination-element-color-default: #CED4DA;
+  --pagination-element-color-active: #DD0000;
   /**
-   * Inverse text color used on opposing surfaces (e.g., white text on red or dark backgrounds).
-Behavior: Dynamic — alternates between light and dark mode.
+   * Use this on gallery slider pagination elements. This can also be applied to hover states of those elements.
    */
-  --text-color-primary-inverse: #E9ECEF;
+  --gallery-pagination-element-active-opacity: 100px;
   /**
-   * Used when primary text color must remain fixed regardless of mode (e.g., on light constant backgrounds).
-Behavior: Constant — same tone across Light and Dark mode.
+   * Used as the background surface color scroll bars. Found on components that vertically or horizontally stack elements.
    */
-  --text-color-primary-constant: #232629;
+  --scroll-bar-track-bg-color: rgba(0, 0, 0, 0.10000000149011612);
   /**
-   * Used for positive or success-related messages (e.g., “Saved”, “Success”, or confirmation text) on success surface colors.
-Behavior: Constant — green tone remains consistent across both modes.
+   * Use on the scroll bar interactive element which shows where the scroll view is positioned inside the full extent of the scrolling space.
    */
-  --text-color-success-constant: #006E3E;
+  --scroll-bar-thumb-bg-color: #8C9196;
+
+  /* Component - Kicker - Standard */
+  --kicker-bg-color-on-surface: #DD0000;
+
+  /* Component - Kicker - Partner */
+  --kicker-fitbook-bg-color: #FF97B7;
+  --kicker-petbook-bg-color: #B9DB91;
+  --kicker-myhomebook-bg-color: #66CCCC;
+  --kicker-travelbook-bg-color: #8EF0ED;
+  --kicker-techbook-bg-color: #93E4FF;
+  --kicker-kaufberater-bg-color: #55476E;
+  --kicker-cobi-bg-color: #DC231C;
+  --kicker-aubi-bg-color: #F00000;
+  --kicker-spobi-bg-color: #174482;
+  --kicker-bz-bg-color: #E3001B;
+
+  /* Component - Teaser */
   /**
-   * Fixed inverse tone for text that always appears on dark surfaces (e.g., hero headlines or persistent dark cards).
-Behavior: Constant — unchanged across modes.
+   * When users hover over graphical teasers the image reduces opacity to 80%.
    */
-  --text-color-primary-inverse-constant: #E9ECEF;
+  --teaser-hover-opacity: 80px;
+  --teaser-title-background-gradient-start: rgba(0, 0, 0, 0.699999988079071);
+  --teaser-title-background-gradient-stop: rgba(0, 0, 0, 0);
+
+  /* Component - Slider */
   /**
-   * Secondary text color used for supportive information, subtitles, and less prominent text.
-Behavior: Dynamic — adapts between neutral tones to maintain proper contrast per theme. In 2025 css it is called figure meta.
+   * When users hover on gallery slider buttons the opacity changes to 90%.
    */
-  --text-color-secondary: #8C9196;
+  --slider-button-opacity: 90px;
   /**
-   * Used for strong warnings, errors, or destructive action labels.
-Behavior: Constant — red color remains unchanged between Light and Dark mode for visibility and recognition.
+   * This variable is used on audio player slider bars. It references a pure white with 35% opacity.
    */
-  --text-color-attention-high: #DD0000;
+  --slider-track-bg-color: rgba(255, 255, 255, 0.3499999940395355);
+
+  /* Component - Mediaplayer */
+  --vid-player-controls-autoplay-button-bg-color: rgba(0, 0, 0, 0.20000000298023224);
   /**
-   * Accent text color used for links, interactive text, or highlighted key words. Changes from a red in light mode to a white in dark mode.
+   * This variable is used for hover states of video player control buttons.
    */
-  --text-color-accent: #DD0000;
+  --vid-player-control-buttons-bg-hover-color: rgba(221, 0, 0, 0.800000011920929);
+  --vid-player-control-buttons-bg-color-hover: rgba(0, 0, 0, 0.20000000298023224);
+  --vid-player-overlay-scrim-color: rgba(0, 0, 0, 0.5);
+  --audio-player-play-button-bg-color: rgba(255, 255, 255, 0.30000001192092896);
+  --vid-player-tooltip-bg-color: rgba(0, 0, 0, 0.699999988079071);
+  --vid-player-control-buttons-bg-color-pressed: rgba(0, 0, 0, 0.05000000074505806);
+  --vid-player-progress-bar-preload-bg-color: rgba(255, 255, 255, 0.30000001192092896);
+  --vid-player-unmute-button-bg-color: rgba(0, 0, 0, 0.20000000298023224);
+  --vid-player-unmute-button-bg-color-hover: rgba(0, 0, 0, 0.3499999940395355);
+
+  /* Component - Avatar */
   /**
-   * Represents medium attention states, often used in warnings or pending states.
-Behavior: Constant — same orange tone across Light and Dark mode.
+   * 09-2025 css --article-author-name-color
    */
-  --text-color-attention-medium: #FD8227;
+  --avatar-label-color: #232629;
   /**
-   * Used for text displayed on dark surfaces to ensure maximum legibility and contrast.
-Behavior: Constant — always light neutral to guarantee accessibility on dark backgrounds.
+   * 09-2025 css --article-author-name-color
    */
-  --text-color-on-dark-surface: #FFFFFF;
+  --avatar-label-color-hover: #DD0000;
+
+  /* Component - Gallery */
+  --app-image-lightbox-gallery-bg-color: #000000;
 
 }