@marioschmidt/design-system-tokens 1.1.0 → 1.2.1

package/dist/scss/brands/bild/semantic/color/colormode-dark.scss

@@ -1,6 +1,6 @@
 // Do not edit directly, this file was auto-generated.
 //
-// BILD Design System Tokens v1.1.0
+// BILD Design System Tokens v1.2.1
 // Generated by Style Dictionary v4.2.0
 //
 // Copyright (c) 2026 Axel Springer Deutschland GmbH
@@ -12,118 +12,127 @@
 // ============================================
 
 // Semantic - Text - Brand
-// 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.
+// Brand-colored text for emphasis and highlights (e.g., highlighted keywords, brand callouts, promotional text). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
 $text-color-brand: #F75849;
-// 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.
+// Brand text color in light mode, neutral white in dark mode (e.g., subtle brand accents that shouldn't be vibrant in dark). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
 $text-color-brand-light-only: #FFFFFF;
 
 // Semantic - Text - Standard
-// 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.
+// Primary text color for static content like body copy and labels (e.g., article text, titles, form labels). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
 $text-color-primary: #DDE1E2;
-// 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.
+// Secondary text color for static supporting content (e.g., captions, timestamps, meta information, descriptions). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
 $text-color-secondary: #A6ABB0;
-// 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.
+// Tertiary text color for static de-emphasized content (e.g., placeholder text, helper text, footnotes). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
 $text-color-tertiary: #8C9196;
 
 // Semantic - Text - 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 for category labels above headlines on standard surface backgrounds. Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
 $kicker-text-color: #8C9196;
-// 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 text color for article titles and major headings. Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
 $headline-text-color: #FFFFFF;
 
 // Semantic - Text - OnSolid
-// 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.
+// Text color for content overlaid on images, mode-independent (e.g., image captions, teaser headlines on photos). Behavior: Static — same value in light and dark mode.
 $text-color-on-image: #FFFFFF;
-// Fixed inverse label tone applied where white or bright text must always appear, regardless of theme. Behavior: Constant — remains bright neutral in both Light and Dark mode. L&D:093
+// Secondary text on dark solid surfaces, mode-independent. Behavior: Static — same value in light and dark mode.
 $text-color-secondary-on-dark: #DDE1E2;
-// 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.
+// Primary text on light solid surfaces, mode-independent (e.g., text on light colored backgrounds). Behavior: Static — same value in light and dark mode.
 $text-color-primary-on-light: #222628;
 // 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: rgba(255, 255, 255, 0.8);
 // 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-light: rgba(0, 0, 0, 0.7);
-// Used for text displayed on dark surfaces to ensure maximum legibility and contrast. Behavior: Constant — always light neutral to guarantee accessibility on dark backgrounds.
+// Primary text on dark solid surfaces, mode-independent (e.g., button labels on dark buttons). Behavior: Static — same value in light and dark mode.
 $text-color-primary-on-dark: #FFFFFF;
 
 // Semantic - Text - Interactive
-// Primary label color used for labels, badges, or tag text on light backgrounds. Ensures strong readability and visual hierarchy. Behavior: Dynamic — dark neutral in Light mode, light neutral in Dark mode. L: 015 D:093
+// Default text color for interactive/clickable elements in idle state (e.g., text links, navigation items, clickable labels). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
 $text-color-idle: #A6ABB0;
-// Disabled label tone indicating inactive or unavailable states in UI elements. Behavior: Dynamic — lighter gray in Light mode, darker neutral in Dark mode. L:085 D:035
+// Text color for disabled elements (e.g., inactive button labels, disabled input text/links). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
 $text-color-disabled: #565A5F;
+// Text color for interactive/clickable elements on hover (e.g., link hover, navigation item hover). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
 $text-color-hover: #F2F4F5;
+// Text color for interactive/clickable elements in active or visited state (e.g., visited links, active navigation item, current page). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
 $text-color-active: #F2F4F5;
 
 // Semantic - Text - Inverse
-// Inverse text color used on opposing surfaces (e.g., white text on red or dark backgrounds). Behavior: Dynamic — alternates between light and dark mode.
+// Primary static text on inverted/contrast backgrounds (e.g., body text in dark sections, footer copy). Not for interactive elements. Behavior: Inverted — swaps light and dark values. Brand-specific.
 $text-color-primary-inverse: #222628;
+// Secondary static text on inverted/contrast backgrounds (e.g., meta info in dark sections). Not for interactive elements. Behavior: Inverted — swaps light and dark values. Brand-specific.
 $text-color-secondary-inverse: #565A5F;
+// High contrast inverse text for maximum readability on inverted surfaces (e.g., white text on dark buttons). Behavior: Inverted — swaps light and dark values.
 $text-color-inverse-high-contrast: #222628;
 
 // Semantic - Text - Feedback
-// 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.
+// Success text color for confirmation messages and positive feedback. Behavior: Dynamic — adapts between light and dark mode.
 $text-color-success: #00C373;
-// Used for strong warnings, errors, or destructive action labels. Behavior: Constant — red color remains unchanged between Light and Dark mode for visibility and recognition.
+// Error text color for error messages and validation feedback. Behavior: Dynamic — adapts between light and dark mode.
 $text-color-error: #FF8989;
-// Represents medium attention states, often used in warnings or pending states. Behavior: Constant — same orange tone across Light and Dark mode.
+// Warning text color for caution messages and alerts. Behavior: Dynamic — adapts between light and dark mode.
 $text-color-warning: #FD8227;
 
 // Semantic - Background - Standard
-// 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.
+// Primary background color for main surfaces and page backgrounds (e.g., page background, primary containers). Behavior: Dynamic — adapts between light and dark mode. Brand-specific in dark mode.
 $bg-color-primary: #222628;
-// 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.
+// Background color for disabled interactive elements (e.g., inactive buttons, disabled inputs). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
 $bg-color-disabled: #2C3133;
-// 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.
+// Secondary background for elevated containers (e.g., cards on primary background, sidebar panels). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
 $bg-color-secondary: #2C3133;
-// A fixed dark surface tone used for dark overlays or nested dark sections inside light layouts. Behavior: Constant — identical across Light and Dark mode.
+// Dark background that remains constant regardless of color mode (e.g. media containers). Behavior: Static — same value in light and dark mode. Brand-specific.
 $bg-color-primary-const-dark: #222628;
-// 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.
+// Quaternary background for fourth-level elements (e.g., pressed states, nested backgrounds). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
 $bg-color-quaternary: #40464D;
-// 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.
+// Tertiary background for third-level containers (e.g., input fields, nested cards, hover states). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
 $bg-color-tertiary: #343C41;
-// Use this on elements that must maintain the white color even in dark mode.
+// Light background that remains constant regardless of color mode (e.g., fixed white elements). Behavior: Static — same value in light and dark mode. Brand-specific.
 $bg-color-primary-const-light: #FFFFFF;
+// Quintenary background for fifth-level elements and high-contrast utility surfaces. Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
 $bg-color-quintenary: #8C9196;
 
 // Semantic - Background - Brand
-// 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.
+// Brand background in light mode, neutral white in dark mode (e.g., accent elements that shouldn't be vibrant in dark). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
 $bg-color-brand-light-only: #FFFFFF;
-// 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.
+// Solid brand background for primary CTAs and brand-emphasized elements (e.g., primary buttons, badges). Behavior: Static — same value in light and dark mode. Brand-specific.
 $bg-color-brand-solid: #DD0000;
+// Solid brand background for hover interactions (e.g., CTA button hover). Behavior: Static — same value in light and dark mode. Brand-specific.
 $bg-color-brand-solid-hover: #C10000;
+// Solid brand background for active/pressed state (e.g., CTA button pressed). Behavior: Static — same value in light and dark mode. Brand-specific.
 $bg-color-brand-solid-active: #930000;
+// Subtle brand tint background for soft brand presence (e.g., notification backgrounds, selected list items). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
 $bg-color-brand-tint: #680000;
+// Subtle brand tint background for hover state (e.g., secondary button hover). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
 $bg-color-brand-tint-hover: #930000;
 
 // Semantic - Background - Inverse
-// 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.
+// nverted primary background for contrast sections (e.g., dark header on light page, footer). Behavior: Inverted — swaps light and dark values. Brand-specific.
 $bg-color-primary-inverse: #FFFFFF;
-// 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.
+// Inverted tertiary background for nested contrast elements (e.g., code blocks, nested menus). Behavior: Inverted — swaps light and dark values. Brand-specific.
 $bg-color-tertiary-inverse: #DDE1E2;
-// Inverse of the quartenary surface, used for background reversals in mixed-layout areas. Behavior: Dynamic — inverts between dark and light tones depending on mode.
+// Inverted quaternary background for subtle contrast distinctions. Behavior: Inverted — swaps light and dark values. Brand-specific.
 $bg-color-quaternary-inverse: #C4C9CF;
-// 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.
+// Inverted secondary background for elevated contrast elements (e.g., tooltips, popovers). Behavior: Inverted — swaps light and dark values. Brand-specific.
 $bg-color-secondary-inverse: #F2F4F5;
-// Inverse of the quartenary surface, used for background reversals in mixed-layout areas. Behavior: Dynamic — inverts between dark and light tones depending on mode.
+// Inverted quintenary background for high-contrast inverse elements. Behavior: Inverted — swaps light and dark values. Brand-specific.
 $bg-color-quintenary-inverse: #8C9196;
 
 // Semantic - Background - Success
-// 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.
+// Success feedback background for positive states (e.g., success message background, validated field). Behavior: Dynamic — adapts between light and dark mode.
 $bg-color-success-tint: #052013;
-// 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. L&D:070
+// Solid success background for positive actions (e.g., confirm button, success badge). Behavior: Static — same value in light and dark mode.
 $bg-color-success-solid: #158751;
-// Secondary success tone used for secondary states. Maintains the same color in both Light and Dark mode for clarity. L&D: green40
+// Solid success background for hover state (e.g., confirm button hover). Behavior: Static — same value in light and dark mode.
 $bg-color-success-solid-hover: #006E3E;
-// 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.
+// Success feedback background for hover state (e.g., success notification hover). Behavior: Dynamic — adapts between light and dark mode.
 $bg-color-success-tint-hover: #093822;
-// Secondary success tone used for secondary states. Maintains the same color in both Light and Dark mode for clarity. L&D: green40
+// Solid success background for active/pressed state (e.g., confirm button pressed). Behavior: Static — same value in light and dark mode.
 $bg-color-success-solid-active: #0D5232;
 
 // Semantic - Background - GradientStops
-// Represents tertiary-level gradient background. Currently used on skeletons.
+// Gradient stop color for tertiary background transitions. Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
 $bg-color-tertiary-gradient-stop: rgba(52, 60, 65, 0);
-// 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.
+// Gradient stop color for primary background fade effects (e.g., scroll shadows, content fade-outs). Behavior: Dynamic — adapts between light and dark mode.
 $bg-color-primary-gradient-stop: rgba(34, 38, 40, 0);
-// Used for secondary surface gradients or subtle depth layers across backgrounds. Behavior: Dynamic — adapts to mode brightness for smooth gradient transitions.
+// Gradient stop color for secondary background transitions. Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
 $bg-color-secondary-gradient-stop: rgba(44, 49, 51, 0);
 
 // Semantic - Background - Overlay
@@ -133,111 +142,131 @@ $overlay-scrim-black-const: rgba(0, 0, 0, 0.7);
 $overlay-scrim-white-const: rgba(255, 255, 255, 0.7);
 
 // Semantic - Background - Error
+// Error feedback background for error states (e.g., error message background, invalid field highlight). Behavior: Dynamic — adapts between light and dark mode.
 $bg-color-error-tint: #410000;
+// Error feedback background for hover state (e.g., error notification hover). Behavior: Dynamic — adapts between light and dark mode.
 $bg-color-error-tint-hover: #680000;
+// Solid error background for critical actions (e.g., delete button, error badge). Behavior: Static — same value in light and dark mode.
 $bg-color-error-solid: #C10000;
+// Solid error background for hover state (e.g., destructive button hover). Behavior: Static — same value in light and dark mode.
 $bg-color-error-solid-hover: #930000;
 
 // Semantic - Background - Warning
+// Warning feedback background for caution states (e.g., warning banner, attention indicators). Behavior: Dynamic — adapts between light and dark mode.
 $bg-color-warning-tint: #2F1400;
+// Warning feedback background for hover state. Behavior: Dynamic — adapts between light and dark mode.
 $bg-color-warning-tint-hover: #522301;
+// Solid warning background for caution indicators (e.g., warning badge, alert background). Behavior: Static — same value in light and dark mode.
 $bg-color-warning-solid: #FD8227;
+// Solid warning background for hover state. Behavior: Static — same value in light and dark mode.
 $bg-color-warning-solid-hover: #EF6702;
 
 // Semantic - Border - Standard
-// Medium-emphasis border color for standard outlines, input fields, or separators that require visible yet non-dominant contrast. Behavior: Dynamic - adjusts to maintain legibility in Light and Dark themes. L:085 D:045
+// Default border color for static containers and separators (e.g., card borders, section dividers). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
 $border-color-default: #565A5F;
-// Used for subtle dividers and low-emphasis borders in neutral areas (e.g., card outlines, input containers). Dynamic - light gray 093 in Light mode, dark gray 035 in Dark mode.
+// Subtle low-contrast border for soft static separations (e.g., list separators, subtle dividers). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
 $border-color-subtle: #343C41;
-// High-emphasis border color for clear delineation between surfaces (e.g., focus rings, high-contrast UI zones). Behavior: Dynamic — light surfaces use a darker neutral, dark surfaces a light neutral tone. L:015 D:100
+// Extra strong border for maximum static contrast (e.g., critical sections, strong separations). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
 $border-color-extra-strong: #FFFFFF;
-// High-emphasis border color for clear delineation between surfaces (e.g., focus rings, high-contrast UI zones). Behavior: Dynamic — light surfaces use a darker neutral, dark surfaces a light neutral tone. L:015 D:100
+// Strong border for static emphasis (e.g., highlighted sections, important containers). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
 $border-color-strong: #6E787C;
 
 // Semantic - Border - OnSolid
-// Applies to UI elements that must visually remain the same regardless of theme (e.g., brand containers, static illustrations). Identical tone across Light and Dark mode. L&D: 093
+// Subtle border on dark solid backgrounds (e.g., subtle dividers on dark UI). Behavior: Static — same value in light and dark mode. Brand-specific.
 $border-color-subtle-on-dark: #343C41;
-// Medium-emphasis border color for standard outlines, input fields, or separators that require visible yet non-dominant contrast. Behavior: Dynamic - adjusts to maintain legibility in Light and Dark themes. L:085 D:045
+// Default border on dark solid backgrounds. Behavior: Static — same value in light and dark mode. Brand-specific.
 $border-color-default-on-dark: #565A5F;
-// Applies to UI elements that must visually remain the same regardless of theme (e.g., brand containers, static illustrations). Identical tone across Light and Dark mode. L&D: 093
+// Subtle border on light solid backgrounds. Behavior: Static — same value in light and dark mode. Brand-specific.
 $border-color-subtle-on-light: #DDE1E2;
-// Medium-emphasis border color for standard outlines, input fields, or separators that require visible yet non-dominant contrast. Behavior: Dynamic - adjusts to maintain legibility in Light and Dark themes. L:085 D:045
+// Default border on light solid backgrounds. Behavior: Static — same value in light and dark mode. Brand-specific.
 $border-color-default-on-light: #C4C9CF;
 
 // Semantic - Border - Feedback
-// Used for success states and validation borders (e.g., input success outlines or confirmation frames). Behavior: Constant — same success tone across modes for consistent feedback semantics.
+// Success border for valid states (e.g., validated input, successful upload). Behavior: Dynamic — adapts between light and dark mode.
 $border-color-success: #00C373;
-// Defines border color for warning and error-related components, typically used for input validation or caution zones. Behavior: Constant — retains the same red warning tone in both Light and Dark modes.
+// Error border for invalid states (e.g., form validation error, required field indicator). Behavior: Dynamic — adapts between light and dark mode.
 $border-color-error: #FF8989;
+// Warning border for caution states (e.g., field warning, attention required). Behavior: Dynamic — adapts between light and dark mode.
 $border-color-warning: #FD8227;
-$border-color-info: #565A5F;
 
 // Semantic - Border - Interactive
-// Applied to disabled states of primary elements (e.g., buttons, inputs) to visually reduce emphasis and indicate inactivity.
+// Border color for disabled elements (e.g., disabled input borders, inactive containers). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
 $border-color-disabled: #343C41;
-$border-color-focus: #C4C9CF;
+// Border for selected elements (e.g., selected checkbox, active tab indicator). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
+$border-color-selected: #C4C9CF;
+// Border for active elements (e.g., active tab indicator). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
 $border-color-active: #F75849;
-// High-emphasis border color for clear delineation between surfaces (e.g., focus rings, high-contrast UI zones). Behavior: Dynamic — light surfaces use a darker neutral, dark surfaces a light neutral tone. L:015 D:100
+// Default border color for interactive elements in idle state (e.g., input fields, buttons, selectable items). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
 $border-color-idle: #6E787C;
 
 // Semantic - Border - Inverse
+// Default border on inverted surfaces. Behavior: Inverted — swaps light and dark values. Brand-specific.
 $border-color-default-inverse: #C4C9CF;
+// Subtle border on inverted surfaces (e.g., subtle separators in dark sections). Behavior: Inverted — swaps light and dark values. Brand-specific.
 $border-color-subtle-inverse: #DDE1E2;
 
 // Semantic - Border - Brand
+// Brand-colored border for emphasis (e.g., active tabs, selected items, brand highlights). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
 $border-color-brand: #F75849;
+// Brand border in light mode, neutral white in dark mode (e.g., accent borders that shouldn't be vibrant in dark). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
 $border-color-brand-light-only: #FFFFFF;
+// Brand border that remains constant regardless of color mode. Behavior: Static — same value in light and dark mode. Brand-specific.
 $border-color-brand-const: #DD0000;
 
 // Semantic - Border - Utilities
+// Zero-contrast border matching surface color (e.g., invisible borders for layout, spacing helpers). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
 $border-color-no-contrast: #222628;
 
 // Semantic - Icon - Interactive
-// Primary icon color on primary surfaces.
+// Default icon color for interactive/clickable icons in idle state (e.g., icon buttons, navigation icons, action icons). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
 $icon-color-idle: #A6ABB0;
-// Disabled label tone indicating inactive or unavailable states in UI elements. Behavior: Dynamic — lighter gray in Light mode, darker neutral in Dark mode. L:085 D:035
+// Icon color for disabled elements (e.g., inactive button icons, disabled controls). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
 $icon-color-disabled: #565A5F;
+// Icon color for interactive/clickable icons on hover (e.g., icon button hover, navigation icon hover). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
 $icon-color-hover: #F2F4F5;
+// Icon color for interactive/clickable icons in active or selected state (e.g., active navigation, selected action). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
 $icon-color-active: #F2F4F5;
 
 // Semantic - Icon - OnSolid
-// Used for icons that must remain visually consistent regardless of mode (e.g.,  icons that are on surfaces that don't change color). Identical tone in both Light and Dark mode.
+// Secondary icon on light solid surfaces. Behavior: Static — same value in light and dark mode.
 $icon-color-secondary-on-light: #565A5F;
-// Used for text displayed on dark surfaces to ensure maximum legibility and contrast. Behavior: Constant — always light neutral to guarantee accessibility on dark backgrounds.
+// Primary icon on dark solid surfaces (e.g., icons on dark buttons, player controls). Behavior: Static — same value in light and dark mode.
 $icon-color-primary-on-dark: #FFFFFF;
-// Fixed inverse label tone applied where white or bright text must always appear, regardless of theme. Behavior: Constant — remains bright neutral in both Light and Dark mode. L&D:093
+// Secondary icon on dark solid surfaces. Behavior: Static — same value in light and dark mode.
 $icon-color-secondary-on-dark: #DDE1E2;
-// 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.
+// Primary icon on light solid surfaces. Behavior: Static — same value in light and dark mode.
 $icon-color-primary-on-light: #222628;
-// 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.
+// Icon color for elements overlaid on images (e.g., play button on video thumbnail). Mode-independent. Behavior: Static — same value in light and dark mode.
 $icon-color-const-on-image: #FFFFFF;
 
 // Semantic - Icon - Feedback
-// Represents success or confirmation icons (e.g., checkmarks, completion indicators). Behavior: Constant - same success green tone across Light and Dark mode.
+// Success icon color for success indicators (e.g., checkmark icon, completion indicator). Behavior: Dynamic — adapts between light and dark mode.
 $icon-color-success: #00C373;
-// Used for strong warnings, errors, or destructive action labels. Behavior: Constant — red color remains unchanged between Light and Dark mode for visibility and recognition.
+// Error icon color for error indicators (e.g., error badge icon, validation error icon). Behavior: Dynamic — adapts between light and dark mode.
 $icon-color-error: #FF8989;
-// Represents medium attention states, often used in warnings or pending states. Behavior: Constant — same orange tone across Light and Dark mode.
+// Warning icon color for caution indicators (e.g., warning triangle, alert icon). Behavior: Dynamic — adapts between light and dark mode.
 $icon-color-warning: #FD8227;
 
 // Semantic - Icon - Brand
-// 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.
+// Brand-colored icon for emphasis (e.g., featured icons, brand indicators). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
 $icon-color-brand: #F75849;
-// 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.
+// Brand icon color in light mode, neutral white in dark mode. Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
 $icon-color-brand-light-only: #FFFFFF;
 
 // Semantic - Icon - Standard
-// 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.
+// Primary icon color for static/decorative icons (e.g., section icons, illustrative icons, status indicators). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
 $icon-color-primary: #DDE1E2;
-// 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.
+// Secondary icon color for static supporting icons (e.g., metadata icons, decorative icons, list markers). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
 $icon-color-secondary: #A6ABB0;
-// 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.
+// Tertiary icon color for static de-emphasized icons (e.g., subtle indicators, background icons).  Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
 $icon-color-tertiary: #8C9196;
 
 // Semantic - Icon - Inverse
-// Inverse text color used on opposing surfaces (e.g., white text on red or dark backgrounds). Behavior: Dynamic — alternates between light and dark mode.
+// Primary icon on inverted/contrast backgrounds. Behavior: Inverted — swaps light and dark values. Brand-specific.
 $icon-color-primary-inverse: #222628;
+// Secondary icon on inverted/contrast backgrounds. Behavior: Inverted — swaps light and dark values. Brand-specific.
 $icon-color-secondary-inverse: #565A5F;
+// High contrast inverse icon for maximum visibility on inverted surfaces. Behavior: Inverted — swaps light and dark values.
 $icon-color-inverse-high-contrast: #222628;
 
 // Semantic - LayerOpacity