@marioschmidt/design-system-tokens 1.3.7 → 1.3.8

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

@@ -3,6 +3,7 @@
     "Text": {
       "Brand": {
         "textColorBrand": {
+          "key": "{Semantic.Text.Brand.textColorBrand}",
           "$value": "#174482",
           "value": "#174482",
           "type": "color",
@@ -41,7 +42,8 @@
               "variableId": "VariableID:16107:27"
             },
             "$type": "color",
-            "comment": "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."
+            "comment": "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.",
+            "key": "{Semantic.Text.Brand.textColorBrand}"
           },
           "name": "textColorBrand",
           "attributes": {},
@@ -53,6 +55,7 @@
           ]
         },
         "textColorBrandLightOnly": {
+          "key": "{Semantic.Text.Brand.textColorBrandLightOnly}",
           "$value": "#174482",
           "value": "#174482",
           "type": "color",
@@ -91,7 +94,8 @@
               "variableId": "VariableID:16107:27"
             },
             "$type": "color",
-            "comment": "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."
+            "comment": "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.",
+            "key": "{Semantic.Text.Brand.textColorBrandLightOnly}"
           },
           "name": "textColorBrandLightOnly",
           "attributes": {},
@@ -105,6 +109,7 @@
       },
       "Standard": {
         "textColorPrimary": {
+          "key": "{Semantic.Text.Standard.textColorPrimary}",
           "$value": "#222628",
           "value": "#222628",
           "type": "color",
@@ -143,7 +148,8 @@
               "variableId": "VariableID:588:1977"
             },
             "$type": "color",
-            "comment": "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."
+            "comment": "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.",
+            "key": "{Semantic.Text.Standard.textColorPrimary}"
           },
           "name": "textColorPrimary",
           "attributes": {},
@@ -155,6 +161,7 @@
           ]
         },
         "textColorSecondary": {
+          "key": "{Semantic.Text.Standard.textColorSecondary}",
           "$value": "#565A5F",
           "value": "#565A5F",
           "type": "color",
@@ -193,7 +200,8 @@
               "variableId": "VariableID:3912:4271"
             },
             "$type": "color",
-            "comment": "Secondary text color for static supporting content (e.g., captions, timestamps, meta information, descriptions). Behavior: Dynamic — adapts between light and dark mode. Brand-specific."
+            "comment": "Secondary text color for static supporting content (e.g., captions, timestamps, meta information, descriptions). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.",
+            "key": "{Semantic.Text.Standard.textColorSecondary}"
           },
           "name": "textColorSecondary",
           "attributes": {},
@@ -205,6 +213,7 @@
           ]
         },
         "textColorTertiary": {
+          "key": "{Semantic.Text.Standard.textColorTertiary}",
           "$value": "#6E787C",
           "value": "#6E787C",
           "type": "color",
@@ -243,7 +252,8 @@
               "variableId": "VariableID:21692:48910"
             },
             "$type": "color",
-            "comment": "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."
+            "comment": "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.",
+            "key": "{Semantic.Text.Standard.textColorTertiary}"
           },
           "name": "textColorTertiary",
           "attributes": {},
@@ -257,6 +267,7 @@
       },
       "Heading": {
         "kickerTextColor": {
+          "key": "{Semantic.Text.Heading.kickerTextColor}",
           "$value": "#6A91CF",
           "value": "#6A91CF",
           "type": "color",
@@ -295,7 +306,8 @@
               "variableId": "VariableID:21692:48286"
             },
             "$type": "color",
-            "comment": "Kicker text color for category labels above headlines on standard surface backgrounds. Behavior: Dynamic — adapts between light and dark mode. Brand-specific."
+            "comment": "Kicker text color for category labels above headlines on standard surface backgrounds. Behavior: Dynamic — adapts between light and dark mode. Brand-specific.",
+            "key": "{Semantic.Text.Heading.kickerTextColor}"
           },
           "name": "kickerTextColor",
           "attributes": {},
@@ -307,6 +319,7 @@
           ]
         },
         "headlineTextColor": {
+          "key": "{Semantic.Text.Heading.headlineTextColor}",
           "$value": "#0C2F61",
           "value": "#0C2F61",
           "type": "color",
@@ -345,7 +358,8 @@
               "variableId": "VariableID:16107:28"
             },
             "$type": "color",
-            "comment": "Headline text color for article titles and major headings. Behavior: Dynamic — adapts between light and dark mode. Brand-specific."
+            "comment": "Headline text color for article titles and major headings. Behavior: Dynamic — adapts between light and dark mode. Brand-specific.",
+            "key": "{Semantic.Text.Heading.headlineTextColor}"
           },
           "name": "headlineTextColor",
           "attributes": {},
@@ -359,6 +373,7 @@
       },
       "OnSolid": {
         "textColorOnImage": {
+          "key": "{Semantic.Text.OnSolid.textColorOnImage}",
           "$value": "#FFFFFF",
           "value": "#FFFFFF",
           "type": "color",
@@ -397,7 +412,8 @@
               "variableId": "VariableID:588:1978"
             },
             "$type": "color",
-            "comment": "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."
+            "comment": "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.",
+            "key": "{Semantic.Text.OnSolid.textColorOnImage}"
           },
           "name": "textColorOnImage",
           "attributes": {},
@@ -409,6 +425,7 @@
           ]
         },
         "textColorSecondaryOnDark": {
+          "key": "{Semantic.Text.OnSolid.textColorSecondaryOnDark}",
           "$value": "#DDE1E2",
           "value": "#DDE1E2",
           "type": "color",
@@ -447,7 +464,8 @@
               "variableId": "VariableID:2881:1765"
             },
             "$type": "color",
-            "comment": "Secondary text on dark solid surfaces, mode-independent. Behavior: Static — same value in light and dark mode."
+            "comment": "Secondary text on dark solid surfaces, mode-independent. Behavior: Static — same value in light and dark mode.",
+            "key": "{Semantic.Text.OnSolid.textColorSecondaryOnDark}"
           },
           "name": "textColorSecondaryOnDark",
           "attributes": {},
@@ -459,6 +477,7 @@
           ]
         },
         "textColorPrimaryOnLight": {
+          "key": "{Semantic.Text.OnSolid.textColorPrimaryOnLight}",
           "$value": "#222628",
           "value": "#222628",
           "type": "color",
@@ -497,7 +516,8 @@
               "variableId": "VariableID:588:1977"
             },
             "$type": "color",
-            "comment": "Primary text on light solid surfaces, mode-independent (e.g., text on light colored backgrounds). Behavior: Static — same value in light and dark mode."
+            "comment": "Primary text on light solid surfaces, mode-independent (e.g., text on light colored backgrounds). Behavior: Static — same value in light and dark mode.",
+            "key": "{Semantic.Text.OnSolid.textColorPrimaryOnLight}"
           },
           "name": "textColorPrimaryOnLight",
           "attributes": {},
@@ -509,6 +529,7 @@
           ]
         },
         "kickerTextColorOnDark": {
+          "key": "{Semantic.Text.OnSolid.kickerTextColorOnDark}",
           "$value": "rgba(255, 255, 255, 0.8)",
           "value": "rgba(255, 255, 255, 0.8)",
           "type": "color",
@@ -547,7 +568,8 @@
               "variableId": "VariableID:17385:14801"
             },
             "$type": "color",
-            "comment": "Applied to kicker or meta text on dark colored backgrounds to maintain high legibility. Behavior: Constant — always uses semi-transparent white for consistent readability."
+            "comment": "Applied to kicker or meta text on dark colored backgrounds to maintain high legibility. Behavior: Constant — always uses semi-transparent white for consistent readability.",
+            "key": "{Semantic.Text.OnSolid.kickerTextColorOnDark}"
           },
           "name": "kickerTextColorOnDark",
           "attributes": {},
@@ -559,6 +581,7 @@
           ]
         },
         "kickerTextColorOnLight": {
+          "key": "{Semantic.Text.OnSolid.kickerTextColorOnLight}",
           "$value": "rgba(0, 0, 0, 0.7)",
           "value": "rgba(0, 0, 0, 0.7)",
           "type": "color",
@@ -597,7 +620,8 @@
               "variableId": "VariableID:16894:98370"
             },
             "$type": "color",
-            "comment": "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."
+            "comment": "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.",
+            "key": "{Semantic.Text.OnSolid.kickerTextColorOnLight}"
           },
           "name": "kickerTextColorOnLight",
           "attributes": {},
@@ -609,6 +633,7 @@
           ]
         },
         "textColorPrimaryOnDark": {
+          "key": "{Semantic.Text.OnSolid.textColorPrimaryOnDark}",
           "$value": "#FFFFFF",
           "value": "#FFFFFF",
           "type": "color",
@@ -647,7 +672,8 @@
               "variableId": "VariableID:588:1978"
             },
             "$type": "color",
-            "comment": "Primary text on dark solid surfaces, mode-independent (e.g., button labels on dark buttons). Behavior: Static — same value in light and dark mode."
+            "comment": "Primary text on dark solid surfaces, mode-independent (e.g., button labels on dark buttons). Behavior: Static — same value in light and dark mode.",
+            "key": "{Semantic.Text.OnSolid.textColorPrimaryOnDark}"
           },
           "name": "textColorPrimaryOnDark",
           "attributes": {},
@@ -659,6 +685,7 @@
           ]
         },
         "textColorSecondaryOnLight": {
+          "key": "{Semantic.Text.OnSolid.textColorSecondaryOnLight}",
           "$value": "#565A5F",
           "value": "#565A5F",
           "type": "color",
@@ -697,7 +724,8 @@
               "variableId": "VariableID:3912:4271"
             },
             "$type": "color",
-            "comment": "Secondary text on light solid surfaces, mode-independent (e.g., secondary text on light colored backgrounds). Behavior: Static — same value in light and dark mode."
+            "comment": "Secondary text on light solid surfaces, mode-independent (e.g., secondary text on light colored backgrounds). Behavior: Static — same value in light and dark mode.",
+            "key": "{Semantic.Text.OnSolid.textColorSecondaryOnLight}"
           },
           "name": "textColorSecondaryOnLight",
           "attributes": {},
@@ -711,6 +739,7 @@
       },
       "Interactive": {
         "textColorIdle": {
+          "key": "{Semantic.Text.Interactive.textColorIdle}",
           "$value": "#345EA0",
           "value": "#345EA0",
           "type": "color",
@@ -749,7 +778,8 @@
               "variableId": "VariableID:18489:25069"
             },
             "$type": "color",
-            "comment": "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."
+            "comment": "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.",
+            "key": "{Semantic.Text.Interactive.textColorIdle}"
           },
           "name": "textColorIdle",
           "attributes": {},
@@ -761,6 +791,7 @@
           ]
         },
         "textColorDisabled": {
+          "key": "{Semantic.Text.Interactive.textColorDisabled}",
           "$value": "#8FACDB",
           "value": "#8FACDB",
           "type": "color",
@@ -799,7 +830,8 @@
               "variableId": "VariableID:21692:48285"
             },
             "$type": "color",
-            "comment": "Text color for disabled elements (e.g., inactive button labels, disabled input text/links). Behavior: Dynamic — adapts between light and dark mode. Brand-specific."
+            "comment": "Text color for disabled elements (e.g., inactive button labels, disabled input text/links). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.",
+            "key": "{Semantic.Text.Interactive.textColorDisabled}"
           },
           "name": "textColorDisabled",
           "attributes": {},
@@ -811,6 +843,7 @@
           ]
         },
         "textColorHover": {
+          "key": "{Semantic.Text.Interactive.textColorHover}",
           "$value": "#0B2647",
           "value": "#0B2647",
           "type": "color",
@@ -849,7 +882,8 @@
               "variableId": "VariableID:21764:1044"
             },
             "$type": "color",
-            "comment": "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."
+            "comment": "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.",
+            "key": "{Semantic.Text.Interactive.textColorHover}"
           },
           "name": "textColorHover",
           "attributes": {},
@@ -861,6 +895,7 @@
           ]
         },
         "textColorActive": {
+          "key": "{Semantic.Text.Interactive.textColorActive}",
           "$value": "#0B2647",
           "value": "#0B2647",
           "type": "color",
@@ -899,7 +934,8 @@
               "variableId": "VariableID:21764:1044"
             },
             "$type": "color",
-            "comment": "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."
+            "comment": "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.",
+            "key": "{Semantic.Text.Interactive.textColorActive}"
           },
           "name": "textColorActive",
           "attributes": {},
@@ -913,6 +949,7 @@
       },
       "Inverse": {
         "textColorPrimaryInverse": {
+          "key": "{Semantic.Text.Inverse.textColorPrimaryInverse}",
           "$value": "#D6E1F2",
           "value": "#D6E1F2",
           "type": "color",
@@ -951,7 +988,8 @@
               "variableId": "VariableID:21692:48287"
             },
             "$type": "color",
-            "comment": "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."
+            "comment": "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.",
+            "key": "{Semantic.Text.Inverse.textColorPrimaryInverse}"
           },
           "name": "textColorPrimaryInverse",
           "attributes": {},
@@ -963,6 +1001,7 @@
           ]
         },
         "textColorSecondaryInverse": {
+          "key": "{Semantic.Text.Inverse.textColorSecondaryInverse}",
           "$value": "#8FACDB",
           "value": "#8FACDB",
           "type": "color",
@@ -1001,7 +1040,8 @@
               "variableId": "VariableID:21692:48285"
             },
             "$type": "color",
-            "comment": "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."
+            "comment": "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.",
+            "key": "{Semantic.Text.Inverse.textColorSecondaryInverse}"
           },
           "name": "textColorSecondaryInverse",
           "attributes": {},
@@ -1013,6 +1053,7 @@
           ]
         },
         "textColorInverseHighContrast": {
+          "key": "{Semantic.Text.Inverse.textColorInverseHighContrast}",
           "$value": "#FFFFFF",
           "value": "#FFFFFF",
           "type": "color",
@@ -1051,7 +1092,8 @@
               "variableId": "VariableID:588:1978"
             },
             "$type": "color",
-            "comment": "High contrast inverse text for maximum readability on inverted surfaces (e.g., white text on dark buttons). Behavior: Inverted — swaps light and dark values."
+            "comment": "High contrast inverse text for maximum readability on inverted surfaces (e.g., white text on dark buttons). Behavior: Inverted — swaps light and dark values.",
+            "key": "{Semantic.Text.Inverse.textColorInverseHighContrast}"
           },
           "name": "textColorInverseHighContrast",
           "attributes": {},
@@ -1065,6 +1107,7 @@
       },
       "Feedback": {
         "textColorSuccess": {
+          "key": "{Semantic.Text.Feedback.textColorSuccess}",
           "$value": "#006E3E",
           "value": "#006E3E",
           "type": "color",
@@ -1103,7 +1146,8 @@
               "variableId": "VariableID:9697:16953"
             },
             "$type": "color",
-            "comment": "Success text color for confirmation messages and positive feedback. Behavior: Dynamic — adapts between light and dark mode."
+            "comment": "Success text color for confirmation messages and positive feedback. Behavior: Dynamic — adapts between light and dark mode.",
+            "key": "{Semantic.Text.Feedback.textColorSuccess}"
           },
           "name": "textColorSuccess",
           "attributes": {},
@@ -1115,6 +1159,7 @@
           ]
         },
         "textColorError": {
+          "key": "{Semantic.Text.Feedback.textColorError}",
           "$value": "#C10000",
           "value": "#C10000",
           "type": "color",
@@ -1153,7 +1198,8 @@
               "variableId": "VariableID:2580:18750"
             },
             "$type": "color",
-            "comment": "Error text color for error messages and validation feedback. Behavior: Dynamic — adapts between light and dark mode."
+            "comment": "Error text color for error messages and validation feedback. Behavior: Dynamic — adapts between light and dark mode.",
+            "key": "{Semantic.Text.Feedback.textColorError}"
           },
           "name": "textColorError",
           "attributes": {},
@@ -1165,6 +1211,7 @@
           ]
         },
         "textColorWarning": {
+          "key": "{Semantic.Text.Feedback.textColorWarning}",
           "$value": "#9E4401",
           "value": "#9E4401",
           "type": "color",
@@ -1203,7 +1250,8 @@
               "variableId": "VariableID:21678:1561"
             },
             "$type": "color",
-            "comment": "Warning text color for caution messages and alerts. Behavior: Dynamic — adapts between light and dark mode."
+            "comment": "Warning text color for caution messages and alerts. Behavior: Dynamic — adapts between light and dark mode.",
+            "key": "{Semantic.Text.Feedback.textColorWarning}"
           },
           "name": "textColorWarning",
           "attributes": {},
@@ -1219,6 +1267,7 @@
     "Background": {
       "Standard": {
         "bgColorPrimary": {
+          "key": "{Semantic.Background.Standard.bgColorPrimary}",
           "$value": "#FFFFFF",
           "value": "#FFFFFF",
           "type": "color",
@@ -1257,7 +1306,8 @@
               "variableId": "VariableID:588:1978"
             },
             "$type": "color",
-            "comment": "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."
+            "comment": "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.",
+            "key": "{Semantic.Background.Standard.bgColorPrimary}"
           },
           "name": "bgColorPrimary",
           "attributes": {},
@@ -1269,6 +1319,7 @@
           ]
         },
         "bgColorDisabled": {
+          "key": "{Semantic.Background.Standard.bgColorDisabled}",
           "$value": "#EFF1F5",
           "value": "#EFF1F5",
           "type": "color",
@@ -1307,7 +1358,8 @@
               "variableId": "VariableID:16104:163546"
             },
             "$type": "color",
-            "comment": "Background color for disabled interactive elements (e.g., inactive buttons, disabled inputs). Behavior: Dynamic — adapts between light and dark mode. Brand-specific."
+            "comment": "Background color for disabled interactive elements (e.g., inactive buttons, disabled inputs). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.",
+            "key": "{Semantic.Background.Standard.bgColorDisabled}"
           },
           "name": "bgColorDisabled",
           "attributes": {},
@@ -1319,6 +1371,7 @@
           ]
         },
         "bgColorSecondary": {
+          "key": "{Semantic.Background.Standard.bgColorSecondary}",
           "$value": "#EFF1F5",
           "value": "#EFF1F5",
           "type": "color",
@@ -1357,7 +1410,8 @@
               "variableId": "VariableID:16104:163546"
             },
             "$type": "color",
-            "comment": "Secondary background for elevated containers (e.g., cards on primary background, sidebar panels). Behavior: Dynamic — adapts between light and dark mode. Brand-specific."
+            "comment": "Secondary background for elevated containers (e.g., cards on primary background, sidebar panels). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.",
+            "key": "{Semantic.Background.Standard.bgColorSecondary}"
           },
           "name": "bgColorSecondary",
           "attributes": {},
@@ -1369,6 +1423,7 @@
           ]
         },
         "bgColorPrimaryConstDark": {
+          "key": "{Semantic.Background.Standard.bgColorPrimaryConstDark}",
           "$value": "#0B2647",
           "value": "#0B2647",
           "type": "color",
@@ -1407,7 +1462,8 @@
               "variableId": "VariableID:21764:1044"
             },
             "$type": "color",
-            "comment": "Dark background that remains constant regardless of color mode (e.g. media containers). Behavior: Static — same value in light and dark mode. Brand-specific."
+            "comment": "Dark background that remains constant regardless of color mode (e.g. media containers). Behavior: Static — same value in light and dark mode. Brand-specific.",
+            "key": "{Semantic.Background.Standard.bgColorPrimaryConstDark}"
           },
           "name": "bgColorPrimaryConstDark",
           "attributes": {},
@@ -1419,6 +1475,7 @@
           ]
         },
         "bgColorQuaternary": {
+          "key": "{Semantic.Background.Standard.bgColorQuaternary}",
           "$value": "#C3C9DB",
           "value": "#C3C9DB",
           "type": "color",
@@ -1457,7 +1514,8 @@
               "variableId": "VariableID:16104:163547"
             },
             "$type": "color",
-            "comment": "Quaternary background for fourth-level elements (e.g., pressed states, nested backgrounds). Behavior: Dynamic — adapts between light and dark mode. Brand-specific."
+            "comment": "Quaternary background for fourth-level elements (e.g., pressed states, nested backgrounds). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.",
+            "key": "{Semantic.Background.Standard.bgColorQuaternary}"
           },
           "name": "bgColorQuaternary",
           "attributes": {},
@@ -1469,6 +1527,7 @@
           ]
         },
         "bgColorTertiary": {
+          "key": "{Semantic.Background.Standard.bgColorTertiary}",
           "$value": "#D6E1F2",
           "value": "#D6E1F2",
           "type": "color",
@@ -1507,7 +1566,8 @@
               "variableId": "VariableID:21692:48287"
             },
             "$type": "color",
-            "comment": "Tertiary background for third-level containers (e.g., input fields, nested cards, hover states). Behavior: Dynamic — adapts between light and dark mode. Brand-specific."
+            "comment": "Tertiary background for third-level containers (e.g., input fields, nested cards, hover states). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.",
+            "key": "{Semantic.Background.Standard.bgColorTertiary}"
           },
           "name": "bgColorTertiary",
           "attributes": {},
@@ -1519,6 +1579,7 @@
           ]
         },
         "bgColorPrimaryConstLight": {
+          "key": "{Semantic.Background.Standard.bgColorPrimaryConstLight}",
           "$value": "#FFFFFF",
           "value": "#FFFFFF",
           "type": "color",
@@ -1557,7 +1618,8 @@
               "variableId": "VariableID:588:1978"
             },
             "$type": "color",
-            "comment": "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."
+            "comment": "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.",
+            "key": "{Semantic.Background.Standard.bgColorPrimaryConstLight}"
           },
           "name": "bgColorPrimaryConstLight",
           "attributes": {},
@@ -1569,6 +1631,7 @@
           ]
         },
         "bgColorQuintenary": {
+          "key": "{Semantic.Background.Standard.bgColorQuintenary}",
           "$value": "#6A91CF",
           "value": "#6A91CF",
           "type": "color",
@@ -1607,7 +1670,8 @@
               "variableId": "VariableID:21692:48286"
             },
             "$type": "color",
-            "comment": "Quintenary background for fifth-level elements and high-contrast utility surfaces. Behavior: Dynamic — adapts between light and dark mode. Brand-specific."
+            "comment": "Quintenary background for fifth-level elements and high-contrast utility surfaces. Behavior: Dynamic — adapts between light and dark mode. Brand-specific.",
+            "key": "{Semantic.Background.Standard.bgColorQuintenary}"
           },
           "name": "bgColorQuintenary",
           "attributes": {},
@@ -1621,6 +1685,7 @@
       },
       "Brand": {
         "bgColorBrandLightOnly": {
+          "key": "{Semantic.Background.Brand.bgColorBrandLightOnly}",
           "$value": "#174482",
           "value": "#174482",
           "type": "color",
@@ -1659,7 +1724,8 @@
               "variableId": "VariableID:16107:27"
             },
             "$type": "color",
-            "comment": "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."
+            "comment": "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.",
+            "key": "{Semantic.Background.Brand.bgColorBrandLightOnly}"
           },
           "name": "bgColorBrandLightOnly",
           "attributes": {},
@@ -1671,6 +1737,7 @@
           ]
         },
         "bgColorBrandSolid": {
+          "key": "{Semantic.Background.Brand.bgColorBrandSolid}",
           "$value": "#174482",
           "value": "#174482",
           "type": "color",
@@ -1709,7 +1776,8 @@
               "variableId": "VariableID:16107:27"
             },
             "$type": "color",
-            "comment": "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."
+            "comment": "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.",
+            "key": "{Semantic.Background.Brand.bgColorBrandSolid}"
           },
           "name": "bgColorBrandSolid",
           "attributes": {},
@@ -1721,6 +1789,7 @@
           ]
         },
         "bgColorBrandSolidHover": {
+          "key": "{Semantic.Background.Brand.bgColorBrandSolidHover}",
           "$value": "#0C2F61",
           "value": "#0C2F61",
           "type": "color",
@@ -1759,7 +1828,8 @@
               "variableId": "VariableID:16107:28"
             },
             "$type": "color",
-            "comment": "Solid brand background for hover interactions (e.g., CTA button hover). Behavior: Static — same value in light and dark mode. Brand-specific."
+            "comment": "Solid brand background for hover interactions (e.g., CTA button hover). Behavior: Static — same value in light and dark mode. Brand-specific.",
+            "key": "{Semantic.Background.Brand.bgColorBrandSolidHover}"
           },
           "name": "bgColorBrandSolidHover",
           "attributes": {},
@@ -1771,6 +1841,7 @@
           ]
         },
         "bgColorBrandSolidActive": {
+          "key": "{Semantic.Background.Brand.bgColorBrandSolidActive}",
           "$value": "#091C2E",
           "value": "#091C2E",
           "type": "color",
@@ -1809,7 +1880,8 @@
               "variableId": "VariableID:16107:29"
             },
             "$type": "color",
-            "comment": "Solid brand background for active/pressed state (e.g., CTA button pressed). Behavior: Static — same value in light and dark mode. Brand-specific."
+            "comment": "Solid brand background for active/pressed state (e.g., CTA button pressed). Behavior: Static — same value in light and dark mode. Brand-specific.",
+            "key": "{Semantic.Background.Brand.bgColorBrandSolidActive}"
           },
           "name": "bgColorBrandSolidActive",
           "attributes": {},
@@ -1821,6 +1893,7 @@
           ]
         },
         "bgColorBrandTint": {
+          "key": "{Semantic.Background.Brand.bgColorBrandTint}",
           "$value": "#D6E1F2",
           "value": "#D6E1F2",
           "type": "color",
@@ -1859,7 +1932,8 @@
               "variableId": "VariableID:21692:48287"
             },
             "$type": "color",
-            "comment": "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."
+            "comment": "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.",
+            "key": "{Semantic.Background.Brand.bgColorBrandTint}"
           },
           "name": "bgColorBrandTint",
           "attributes": {},
@@ -1871,6 +1945,7 @@
           ]
         },
         "bgColorBrandTintHover": {
+          "key": "{Semantic.Background.Brand.bgColorBrandTintHover}",
           "$value": "#C3C9DB",
           "value": "#C3C9DB",
           "type": "color",
@@ -1909,7 +1984,8 @@
               "variableId": "VariableID:16104:163547"
             },
             "$type": "color",
-            "comment": "Subtle brand tint background for hover state (e.g., secondary button hover). Behavior: Dynamic — adapts between light and dark mode. Brand-specific."
+            "comment": "Subtle brand tint background for hover state (e.g., secondary button hover). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.",
+            "key": "{Semantic.Background.Brand.bgColorBrandTintHover}"
           },
           "name": "bgColorBrandTintHover",
           "attributes": {},
@@ -1923,6 +1999,7 @@
       },
       "Inverse": {
         "bgColorPrimaryInverse": {
+          "key": "{Semantic.Background.Inverse.bgColorPrimaryInverse}",
           "$value": "#0B2647",
           "value": "#0B2647",
           "type": "color",
@@ -1961,7 +2038,8 @@
               "variableId": "VariableID:21764:1044"
             },
             "$type": "color",
-            "comment": "nverted primary background for contrast sections (e.g., dark header on light page, footer). Behavior: Inverted — swaps light and dark values. Brand-specific."
+            "comment": "nverted primary background for contrast sections (e.g., dark header on light page, footer). Behavior: Inverted — swaps light and dark values. Brand-specific.",
+            "key": "{Semantic.Background.Inverse.bgColorPrimaryInverse}"
           },
           "name": "bgColorPrimaryInverse",
           "attributes": {},
@@ -1973,6 +2051,7 @@
           ]
         },
         "bgColorTertiaryInverse": {
+          "key": "{Semantic.Background.Inverse.bgColorTertiaryInverse}",
           "$value": "#113B72",
           "value": "#113B72",
           "type": "color",
@@ -2011,7 +2090,8 @@
               "variableId": "VariableID:21764:1045"
             },
             "$type": "color",
-            "comment": "Inverted tertiary background for nested contrast elements (e.g., code blocks, nested menus). Behavior: Inverted — swaps light and dark values. Brand-specific."
+            "comment": "Inverted tertiary background for nested contrast elements (e.g., code blocks, nested menus). Behavior: Inverted — swaps light and dark values. Brand-specific.",
+            "key": "{Semantic.Background.Inverse.bgColorTertiaryInverse}"
           },
           "name": "bgColorTertiaryInverse",
           "attributes": {},
@@ -2023,6 +2103,7 @@
           ]
         },
         "bgColorQuaternaryInverse": {
+          "key": "{Semantic.Background.Inverse.bgColorQuaternaryInverse}",
           "$value": "#174482",
           "value": "#174482",
           "type": "color",
@@ -2061,7 +2142,8 @@
               "variableId": "VariableID:16107:27"
             },
             "$type": "color",
-            "comment": "Inverted quaternary background for subtle contrast distinctions. Behavior: Inverted — swaps light and dark values. Brand-specific."
+            "comment": "Inverted quaternary background for subtle contrast distinctions. Behavior: Inverted — swaps light and dark values. Brand-specific.",
+            "key": "{Semantic.Background.Inverse.bgColorQuaternaryInverse}"
           },
           "name": "bgColorQuaternaryInverse",
           "attributes": {},
@@ -2073,6 +2155,7 @@
           ]
         },
         "bgColorSecondaryInverse": {
+          "key": "{Semantic.Background.Inverse.bgColorSecondaryInverse}",
           "$value": "#0C2F61",
           "value": "#0C2F61",
           "type": "color",
@@ -2111,7 +2194,8 @@
               "variableId": "VariableID:16107:28"
             },
             "$type": "color",
-            "comment": "Inverted secondary background for elevated contrast elements (e.g., tooltips, popovers). Behavior: Inverted — swaps light and dark values. Brand-specific."
+            "comment": "Inverted secondary background for elevated contrast elements (e.g., tooltips, popovers). Behavior: Inverted — swaps light and dark values. Brand-specific.",
+            "key": "{Semantic.Background.Inverse.bgColorSecondaryInverse}"
           },
           "name": "bgColorSecondaryInverse",
           "attributes": {},
@@ -2123,6 +2207,7 @@
           ]
         },
         "bgColorQuintenaryInverse": {
+          "key": "{Semantic.Background.Inverse.bgColorQuintenaryInverse}",
           "$value": "#6A91CF",
           "value": "#6A91CF",
           "type": "color",
@@ -2161,7 +2246,8 @@
               "variableId": "VariableID:21692:48286"
             },
             "$type": "color",
-            "comment": "Inverted quintenary background for high-contrast inverse elements. Behavior: Inverted — swaps light and dark values. Brand-specific."
+            "comment": "Inverted quintenary background for high-contrast inverse elements. Behavior: Inverted — swaps light and dark values. Brand-specific.",
+            "key": "{Semantic.Background.Inverse.bgColorQuintenaryInverse}"
           },
           "name": "bgColorQuintenaryInverse",
           "attributes": {},
@@ -2175,6 +2261,7 @@
       },
       "Success": {
         "bgColorSuccessTint": {
+          "key": "{Semantic.Background.Success.bgColorSuccessTint}",
           "$value": "#DEF7E6",
           "value": "#DEF7E6",
           "type": "color",
@@ -2213,7 +2300,8 @@
               "variableId": "VariableID:21692:44618"
             },
             "$type": "color",
-            "comment": "Success feedback background for positive states (e.g., success message background, validated field). Behavior: Dynamic — adapts between light and dark mode."
+            "comment": "Success feedback background for positive states (e.g., success message background, validated field). Behavior: Dynamic — adapts between light and dark mode.",
+            "key": "{Semantic.Background.Success.bgColorSuccessTint}"
           },
           "name": "bgColorSuccessTint",
           "attributes": {},
@@ -2225,6 +2313,7 @@
           ]
         },
         "bgColorSuccessSolid": {
+          "key": "{Semantic.Background.Success.bgColorSuccessSolid}",
           "$value": "#158751",
           "value": "#158751",
           "type": "color",
@@ -2263,7 +2352,8 @@
               "variableId": "VariableID:21692:44617"
             },
             "$type": "color",
-            "comment": "Solid success background for positive actions (e.g., confirm button, success badge). Behavior: Static — same value in light and dark mode."
+            "comment": "Solid success background for positive actions (e.g., confirm button, success badge). Behavior: Static — same value in light and dark mode.",
+            "key": "{Semantic.Background.Success.bgColorSuccessSolid}"
           },
           "name": "bgColorSuccessSolid",
           "attributes": {},
@@ -2275,6 +2365,7 @@
           ]
         },
         "bgColorSuccessSolidHover": {
+          "key": "{Semantic.Background.Success.bgColorSuccessSolidHover}",
           "$value": "#006E3E",
           "value": "#006E3E",
           "type": "color",
@@ -2313,7 +2404,8 @@
               "variableId": "VariableID:9697:16953"
             },
             "$type": "color",
-            "comment": "Solid success background for hover state (e.g., confirm button hover). Behavior: Static — same value in light and dark mode."
+            "comment": "Solid success background for hover state (e.g., confirm button hover). Behavior: Static — same value in light and dark mode.",
+            "key": "{Semantic.Background.Success.bgColorSuccessSolidHover}"
           },
           "name": "bgColorSuccessSolidHover",
           "attributes": {},
@@ -2325,6 +2417,7 @@
           ]
         },
         "bgColorSuccessTintHover": {
+          "key": "{Semantic.Background.Success.bgColorSuccessTintHover}",
           "$value": "#B9EFCD",
           "value": "#B9EFCD",
           "type": "color",
@@ -2363,7 +2456,8 @@
               "variableId": "VariableID:2812:809"
             },
             "$type": "color",
-            "comment": "Success feedback background for hover state (e.g., success notification hover). Behavior: Dynamic — adapts between light and dark mode."
+            "comment": "Success feedback background for hover state (e.g., success notification hover). Behavior: Dynamic — adapts between light and dark mode.",
+            "key": "{Semantic.Background.Success.bgColorSuccessTintHover}"
           },
           "name": "bgColorSuccessTintHover",
           "attributes": {},
@@ -2375,6 +2469,7 @@
           ]
         },
         "bgColorSuccessSolidActive": {
+          "key": "{Semantic.Background.Success.bgColorSuccessSolidActive}",
           "$value": "#0D5232",
           "value": "#0D5232",
           "type": "color",
@@ -2413,7 +2508,8 @@
               "variableId": "VariableID:21692:7217"
             },
             "$type": "color",
-            "comment": "Solid success background for active/pressed state (e.g., confirm button pressed). Behavior: Static — same value in light and dark mode."
+            "comment": "Solid success background for active/pressed state (e.g., confirm button pressed). Behavior: Static — same value in light and dark mode.",
+            "key": "{Semantic.Background.Success.bgColorSuccessSolidActive}"
           },
           "name": "bgColorSuccessSolidActive",
           "attributes": {},
@@ -2427,6 +2523,7 @@
       },
       "GradientStops": {
         "bgColorTertiaryGradientStop": {
+          "key": "{Semantic.Background.GradientStops.bgColorTertiaryGradientStop}",
           "$value": "rgba(214, 225, 242, 0)",
           "value": "rgba(214, 225, 242, 0)",
           "type": "color",
@@ -2465,7 +2562,8 @@
               "variableId": "VariableID:21936:345692"
             },
             "$type": "color",
-            "comment": "Gradient stop color for tertiary background transitions. Behavior: Dynamic — adapts between light and dark mode. Brand-specific."
+            "comment": "Gradient stop color for tertiary background transitions. Behavior: Dynamic — adapts between light and dark mode. Brand-specific.",
+            "key": "{Semantic.Background.GradientStops.bgColorTertiaryGradientStop}"
           },
           "name": "bgColorTertiaryGradientStop",
           "attributes": {},
@@ -2477,6 +2575,7 @@
           ]
         },
         "bgColorPrimaryGradientStop": {
+          "key": "{Semantic.Background.GradientStops.bgColorPrimaryGradientStop}",
           "$value": "rgba(255, 255, 255, 0)",
           "value": "rgba(255, 255, 255, 0)",
           "type": "color",
@@ -2515,7 +2614,8 @@
               "variableId": "VariableID:21160:123382"
             },
             "$type": "color",
-            "comment": "Gradient stop color for primary background fade effects (e.g., scroll shadows, content fade-outs). Behavior: Dynamic — adapts between light and dark mode."
+            "comment": "Gradient stop color for primary background fade effects (e.g., scroll shadows, content fade-outs). Behavior: Dynamic — adapts between light and dark mode.",
+            "key": "{Semantic.Background.GradientStops.bgColorPrimaryGradientStop}"
           },
           "name": "bgColorPrimaryGradientStop",
           "attributes": {},
@@ -2527,6 +2627,7 @@
           ]
         },
         "bgColorSecondaryGradientStop": {
+          "key": "{Semantic.Background.GradientStops.bgColorSecondaryGradientStop}",
           "$value": "rgba(239, 241, 245, 0)",
           "value": "rgba(239, 241, 245, 0)",
           "type": "color",
@@ -2565,7 +2666,8 @@
               "variableId": "VariableID:21936:345683"
             },
             "$type": "color",
-            "comment": "Gradient stop color for secondary background transitions. Behavior: Dynamic — adapts between light and dark mode. Brand-specific."
+            "comment": "Gradient stop color for secondary background transitions. Behavior: Dynamic — adapts between light and dark mode. Brand-specific.",
+            "key": "{Semantic.Background.GradientStops.bgColorSecondaryGradientStop}"
           },
           "name": "bgColorSecondaryGradientStop",
           "attributes": {},
@@ -2579,6 +2681,7 @@
       },
       "Overlay": {
         "overlayScrimBlackConst": {
+          "key": "{Semantic.Background.Overlay.overlayScrimBlackConst}",
           "$value": "rgba(0, 0, 0, 0.7)",
           "value": "rgba(0, 0, 0, 0.7)",
           "type": "color",
@@ -2617,7 +2720,8 @@
               "variableId": "VariableID:16894:98370"
             },
             "$type": "color",
-            "comment": "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."
+            "comment": "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.",
+            "key": "{Semantic.Background.Overlay.overlayScrimBlackConst}"
           },
           "name": "overlayScrimBlackConst",
           "attributes": {},
@@ -2629,6 +2733,7 @@
           ]
         },
         "overlayScrimWhiteConst": {
+          "key": "{Semantic.Background.Overlay.overlayScrimWhiteConst}",
           "$value": "rgba(255, 255, 255, 0.7)",
           "value": "rgba(255, 255, 255, 0.7)",
           "type": "color",
@@ -2667,7 +2772,8 @@
               "variableId": "VariableID:16914:22437"
             },
             "$type": "color",
-            "comment": "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."
+            "comment": "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.",
+            "key": "{Semantic.Background.Overlay.overlayScrimWhiteConst}"
           },
           "name": "overlayScrimWhiteConst",
           "attributes": {},
@@ -2681,6 +2787,7 @@
       },
       "Error": {
         "bgColorErrorTint": {
+          "key": "{Semantic.Background.Error.bgColorErrorTint}",
           "$value": "#FFECEC",
           "value": "#FFECEC",
           "type": "color",
@@ -2719,7 +2826,8 @@
               "variableId": "VariableID:21692:48826"
             },
             "$type": "color",
-            "comment": "Error feedback background for error states (e.g., error message background, invalid field highlight). Behavior: Dynamic — adapts between light and dark mode."
+            "comment": "Error feedback background for error states (e.g., error message background, invalid field highlight). Behavior: Dynamic — adapts between light and dark mode.",
+            "key": "{Semantic.Background.Error.bgColorErrorTint}"
           },
           "name": "bgColorErrorTint",
           "attributes": {},
@@ -2731,6 +2839,7 @@
           ]
         },
         "bgColorErrorTintHover": {
+          "key": "{Semantic.Background.Error.bgColorErrorTintHover}",
           "$value": "#FFDADA",
           "value": "#FFDADA",
           "type": "color",
@@ -2769,7 +2878,8 @@
               "variableId": "VariableID:21678:1559"
             },
             "$type": "color",
-            "comment": "Error feedback background for hover state (e.g., error notification hover). Behavior: Dynamic — adapts between light and dark mode."
+            "comment": "Error feedback background for hover state (e.g., error notification hover). Behavior: Dynamic — adapts between light and dark mode.",
+            "key": "{Semantic.Background.Error.bgColorErrorTintHover}"
           },
           "name": "bgColorErrorTintHover",
           "attributes": {},
@@ -2781,6 +2891,7 @@
           ]
         },
         "bgColorErrorSolid": {
+          "key": "{Semantic.Background.Error.bgColorErrorSolid}",
           "$value": "#C10000",
           "value": "#C10000",
           "type": "color",
@@ -2819,7 +2930,8 @@
               "variableId": "VariableID:2580:18750"
             },
             "$type": "color",
-            "comment": "Solid error background for critical actions (e.g., delete button, error badge). Behavior: Static — same value in light and dark mode."
+            "comment": "Solid error background for critical actions (e.g., delete button, error badge). Behavior: Static — same value in light and dark mode.",
+            "key": "{Semantic.Background.Error.bgColorErrorSolid}"
           },
           "name": "bgColorErrorSolid",
           "attributes": {},
@@ -2831,6 +2943,7 @@
           ]
         },
         "bgColorErrorSolidHover": {
+          "key": "{Semantic.Background.Error.bgColorErrorSolidHover}",
           "$value": "#930000",
           "value": "#930000",
           "type": "color",
@@ -2869,7 +2982,8 @@
               "variableId": "VariableID:21692:48824"
             },
             "$type": "color",
-            "comment": "Solid error background for hover state (e.g., destructive button hover). Behavior: Static — same value in light and dark mode."
+            "comment": "Solid error background for hover state (e.g., destructive button hover). Behavior: Static — same value in light and dark mode.",
+            "key": "{Semantic.Background.Error.bgColorErrorSolidHover}"
           },
           "name": "bgColorErrorSolidHover",
           "attributes": {},
@@ -2883,6 +2997,7 @@
       },
       "Warning": {
         "bgColorWarningTint": {
+          "key": "{Semantic.Background.Warning.bgColorWarningTint}",
           "$value": "#FFEDDF",
           "value": "#FFEDDF",
           "type": "color",
@@ -2921,7 +3036,8 @@
               "variableId": "VariableID:21692:7207"
             },
             "$type": "color",
-            "comment": "Warning feedback background for caution states (e.g., warning banner, attention indicators). Behavior: Dynamic — adapts between light and dark mode."
+            "comment": "Warning feedback background for caution states (e.g., warning banner, attention indicators). Behavior: Dynamic — adapts between light and dark mode.",
+            "key": "{Semantic.Background.Warning.bgColorWarningTint}"
           },
           "name": "bgColorWarningTint",
           "attributes": {},
@@ -2933,6 +3049,7 @@
           ]
         },
         "bgColorWarningTintHover": {
+          "key": "{Semantic.Background.Warning.bgColorWarningTintHover}",
           "$value": "#FEDBC1",
           "value": "#FEDBC1",
           "type": "color",
@@ -2971,7 +3088,8 @@
               "variableId": "VariableID:21678:1564"
             },
             "$type": "color",
-            "comment": "Warning feedback background for hover state. Behavior: Dynamic — adapts between light and dark mode."
+            "comment": "Warning feedback background for hover state. Behavior: Dynamic — adapts between light and dark mode.",
+            "key": "{Semantic.Background.Warning.bgColorWarningTintHover}"
           },
           "name": "bgColorWarningTintHover",
           "attributes": {},
@@ -2983,6 +3101,7 @@
           ]
         },
         "bgColorWarningSolid": {
+          "key": "{Semantic.Background.Warning.bgColorWarningSolid}",
           "$value": "#FD8227",
           "value": "#FD8227",
           "type": "color",
@@ -3021,7 +3140,8 @@
               "variableId": "VariableID:2496:18724"
             },
             "$type": "color",
-            "comment": "Solid warning background for caution indicators (e.g., warning badge, alert background). Behavior: Static — same value in light and dark mode."
+            "comment": "Solid warning background for caution indicators (e.g., warning badge, alert background). Behavior: Static — same value in light and dark mode.",
+            "key": "{Semantic.Background.Warning.bgColorWarningSolid}"
           },
           "name": "bgColorWarningSolid",
           "attributes": {},
@@ -3033,6 +3153,7 @@
           ]
         },
         "bgColorWarningSolidHover": {
+          "key": "{Semantic.Background.Warning.bgColorWarningSolidHover}",
           "$value": "#EF6702",
           "value": "#EF6702",
           "type": "color",
@@ -3071,7 +3192,8 @@
               "variableId": "VariableID:21692:7208"
             },
             "$type": "color",
-            "comment": "Solid warning background for hover state. Behavior: Static — same value in light and dark mode."
+            "comment": "Solid warning background for hover state. Behavior: Static — same value in light and dark mode.",
+            "key": "{Semantic.Background.Warning.bgColorWarningSolidHover}"
           },
           "name": "bgColorWarningSolidHover",
           "attributes": {},
@@ -3087,6 +3209,7 @@
     "Border": {
       "Standard": {
         "borderColorDefault": {
+          "key": "{Semantic.Border.Standard.borderColorDefault}",
           "$value": "#C3C9DB",
           "value": "#C3C9DB",
           "type": "color",
@@ -3125,7 +3248,8 @@
               "variableId": "VariableID:16104:163547"
             },
             "$type": "color",
-            "comment": "Default border color for static containers and separators (e.g., card borders, section dividers). Behavior: Dynamic — adapts between light and dark mode. Brand-specific."
+            "comment": "Default border color for static containers and separators (e.g., card borders, section dividers). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.",
+            "key": "{Semantic.Border.Standard.borderColorDefault}"
           },
           "name": "borderColorDefault",
           "attributes": {},
@@ -3137,6 +3261,7 @@
           ]
         },
         "borderColorSubtle": {
+          "key": "{Semantic.Border.Standard.borderColorSubtle}",
           "$value": "#D6E1F2",
           "value": "#D6E1F2",
           "type": "color",
@@ -3175,7 +3300,8 @@
               "variableId": "VariableID:21692:48287"
             },
             "$type": "color",
-            "comment": "Subtle low-contrast border for soft static separations (e.g., list separators, subtle dividers). Behavior: Dynamic — adapts between light and dark mode. Brand-specific."
+            "comment": "Subtle low-contrast border for soft static separations (e.g., list separators, subtle dividers). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.",
+            "key": "{Semantic.Border.Standard.borderColorSubtle}"
           },
           "name": "borderColorSubtle",
           "attributes": {},
@@ -3187,6 +3313,7 @@
           ]
         },
         "borderColorExtraStrong": {
+          "key": "{Semantic.Border.Standard.borderColorExtraStrong}",
           "$value": "#0B2647",
           "value": "#0B2647",
           "type": "color",
@@ -3225,7 +3352,8 @@
               "variableId": "VariableID:21764:1044"
             },
             "$type": "color",
-            "comment": "Extra strong border for maximum static contrast (e.g., critical sections, strong separations). Behavior: Dynamic — adapts between light and dark mode. Brand-specific."
+            "comment": "Extra strong border for maximum static contrast (e.g., critical sections, strong separations). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.",
+            "key": "{Semantic.Border.Standard.borderColorExtraStrong}"
           },
           "name": "borderColorExtraStrong",
           "attributes": {},
@@ -3237,6 +3365,7 @@
           ]
         },
         "borderColorStrong": {
+          "key": "{Semantic.Border.Standard.borderColorStrong}",
           "$value": "#4676C3",
           "value": "#4676C3",
           "type": "color",
@@ -3275,7 +3404,8 @@
               "variableId": "VariableID:21692:48284"
             },
             "$type": "color",
-            "comment": "Strong border for static emphasis (e.g., highlighted sections, important containers). Behavior: Dynamic — adapts between light and dark mode. Brand-specific."
+            "comment": "Strong border for static emphasis (e.g., highlighted sections, important containers). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.",
+            "key": "{Semantic.Border.Standard.borderColorStrong}"
           },
           "name": "borderColorStrong",
           "attributes": {},
@@ -3289,6 +3419,7 @@
       },
       "OnSolid": {
         "borderColorSubtleOnDark": {
+          "key": "{Semantic.Border.OnSolid.borderColorSubtleOnDark}",
           "$value": "#113B72",
           "value": "#113B72",
           "type": "color",
@@ -3327,7 +3458,8 @@
               "variableId": "VariableID:21764:1045"
             },
             "$type": "color",
-            "comment": "Subtle border on dark solid backgrounds (e.g., subtle dividers on dark UI). Behavior: Static — same value in light and dark mode. Brand-specific."
+            "comment": "Subtle border on dark solid backgrounds (e.g., subtle dividers on dark UI). Behavior: Static — same value in light and dark mode. Brand-specific.",
+            "key": "{Semantic.Border.OnSolid.borderColorSubtleOnDark}"
           },
           "name": "borderColorSubtleOnDark",
           "attributes": {},
@@ -3339,6 +3471,7 @@
           ]
         },
         "borderColorDefaultOnDark": {
+          "key": "{Semantic.Border.OnSolid.borderColorDefaultOnDark}",
           "$value": "#345EA0",
           "value": "#345EA0",
           "type": "color",
@@ -3377,7 +3510,8 @@
               "variableId": "VariableID:18489:25069"
             },
             "$type": "color",
-            "comment": "Default border on dark solid backgrounds. Behavior: Static — same value in light and dark mode. Brand-specific."
+            "comment": "Default border on dark solid backgrounds. Behavior: Static — same value in light and dark mode. Brand-specific.",
+            "key": "{Semantic.Border.OnSolid.borderColorDefaultOnDark}"
           },
           "name": "borderColorDefaultOnDark",
           "attributes": {},
@@ -3389,6 +3523,7 @@
           ]
         },
         "borderColorSubtleOnLight": {
+          "key": "{Semantic.Border.OnSolid.borderColorSubtleOnLight}",
           "$value": "#D6E1F2",
           "value": "#D6E1F2",
           "type": "color",
@@ -3427,7 +3562,8 @@
               "variableId": "VariableID:21692:48287"
             },
             "$type": "color",
-            "comment": "Subtle border on light solid backgrounds. Behavior: Static — same value in light and dark mode. Brand-specific."
+            "comment": "Subtle border on light solid backgrounds. Behavior: Static — same value in light and dark mode. Brand-specific.",
+            "key": "{Semantic.Border.OnSolid.borderColorSubtleOnLight}"
           },
           "name": "borderColorSubtleOnLight",
           "attributes": {},
@@ -3439,6 +3575,7 @@
           ]
         },
         "borderColorDefaultOnLight": {
+          "key": "{Semantic.Border.OnSolid.borderColorDefaultOnLight}",
           "$value": "#C3C9DB",
           "value": "#C3C9DB",
           "type": "color",
@@ -3477,7 +3614,8 @@
               "variableId": "VariableID:16104:163547"
             },
             "$type": "color",
-            "comment": "Default border on light solid backgrounds. Behavior: Static — same value in light and dark mode. Brand-specific."
+            "comment": "Default border on light solid backgrounds. Behavior: Static — same value in light and dark mode. Brand-specific.",
+            "key": "{Semantic.Border.OnSolid.borderColorDefaultOnLight}"
           },
           "name": "borderColorDefaultOnLight",
           "attributes": {},
@@ -3491,6 +3629,7 @@
       },
       "Feedback": {
         "borderColorSuccess": {
+          "key": "{Semantic.Border.Feedback.borderColorSuccess}",
           "$value": "#006E3E",
           "value": "#006E3E",
           "type": "color",
@@ -3529,7 +3668,8 @@
               "variableId": "VariableID:9697:16953"
             },
             "$type": "color",
-            "comment": "Success border for valid states (e.g., validated input, successful upload). Behavior: Dynamic — adapts between light and dark mode."
+            "comment": "Success border for valid states (e.g., validated input, successful upload). Behavior: Dynamic — adapts between light and dark mode.",
+            "key": "{Semantic.Border.Feedback.borderColorSuccess}"
           },
           "name": "borderColorSuccess",
           "attributes": {},
@@ -3541,6 +3681,7 @@
           ]
         },
         "borderColorError": {
+          "key": "{Semantic.Border.Feedback.borderColorError}",
           "$value": "#DD0000",
           "value": "#DD0000",
           "type": "color",
@@ -3579,7 +3720,8 @@
               "variableId": "VariableID:539:2239"
             },
             "$type": "color",
-            "comment": "Error border for invalid states (e.g., form validation error, required field indicator). Behavior: Dynamic — adapts between light and dark mode."
+            "comment": "Error border for invalid states (e.g., form validation error, required field indicator). Behavior: Dynamic — adapts between light and dark mode.",
+            "key": "{Semantic.Border.Feedback.borderColorError}"
           },
           "name": "borderColorError",
           "attributes": {},
@@ -3591,6 +3733,7 @@
           ]
         },
         "borderColorWarning": {
+          "key": "{Semantic.Border.Feedback.borderColorWarning}",
           "$value": "#C65502",
           "value": "#C65502",
           "type": "color",
@@ -3629,7 +3772,8 @@
               "variableId": "VariableID:21678:1562"
             },
             "$type": "color",
-            "comment": "Warning border for caution states (e.g., field warning, attention required). Behavior: Dynamic — adapts between light and dark mode."
+            "comment": "Warning border for caution states (e.g., field warning, attention required). Behavior: Dynamic — adapts between light and dark mode.",
+            "key": "{Semantic.Border.Feedback.borderColorWarning}"
           },
           "name": "borderColorWarning",
           "attributes": {},
@@ -3643,6 +3787,7 @@
       },
       "Interactive": {
         "borderColorDisabled": {
+          "key": "{Semantic.Border.Interactive.borderColorDisabled}",
           "$value": "#D6E1F2",
           "value": "#D6E1F2",
           "type": "color",
@@ -3681,7 +3826,8 @@
               "variableId": "VariableID:21692:48287"
             },
             "$type": "color",
-            "comment": "Border color for disabled elements (e.g., disabled input borders, inactive containers). Behavior: Dynamic — adapts between light and dark mode. Brand-specific."
+            "comment": "Border color for disabled elements (e.g., disabled input borders, inactive containers). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.",
+            "key": "{Semantic.Border.Interactive.borderColorDisabled}"
           },
           "name": "borderColorDisabled",
           "attributes": {},
@@ -3693,6 +3839,7 @@
           ]
         },
         "borderColorSelected": {
+          "key": "{Semantic.Border.Interactive.borderColorSelected}",
           "$value": "#174482",
           "value": "#174482",
           "type": "color",
@@ -3731,7 +3878,8 @@
               "variableId": "VariableID:16107:27"
             },
             "$type": "color",
-            "comment": "Border for selected elements (e.g., selected checkbox, active tab indicator). Behavior: Dynamic — adapts between light and dark mode. Brand-specific."
+            "comment": "Border for selected elements (e.g., selected checkbox, active tab indicator). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.",
+            "key": "{Semantic.Border.Interactive.borderColorSelected}"
           },
           "name": "borderColorSelected",
           "attributes": {},
@@ -3743,6 +3891,7 @@
           ]
         },
         "borderColorActive": {
+          "key": "{Semantic.Border.Interactive.borderColorActive}",
           "$value": "#174482",
           "value": "#174482",
           "type": "color",
@@ -3781,7 +3930,8 @@
               "variableId": "VariableID:16107:27"
             },
             "$type": "color",
-            "comment": "Border for active elements (e.g., active tab indicator). Behavior: Dynamic — adapts between light and dark mode. Brand-specific."
+            "comment": "Border for active elements (e.g., active tab indicator). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.",
+            "key": "{Semantic.Border.Interactive.borderColorActive}"
           },
           "name": "borderColorActive",
           "attributes": {},
@@ -3793,6 +3943,7 @@
           ]
         },
         "borderColorIdle": {
+          "key": "{Semantic.Border.Interactive.borderColorIdle}",
           "$value": "#6A91CF",
           "value": "#6A91CF",
           "type": "color",
@@ -3831,7 +3982,8 @@
               "variableId": "VariableID:21692:48286"
             },
             "$type": "color",
-            "comment": "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."
+            "comment": "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.",
+            "key": "{Semantic.Border.Interactive.borderColorIdle}"
           },
           "name": "borderColorIdle",
           "attributes": {},
@@ -3845,6 +3997,7 @@
       },
       "Inverse": {
         "borderColorDefaultInverse": {
+          "key": "{Semantic.Border.Inverse.borderColorDefaultInverse}",
           "$value": "#345EA0",
           "value": "#345EA0",
           "type": "color",
@@ -3883,7 +4036,8 @@
               "variableId": "VariableID:18489:25069"
             },
             "$type": "color",
-            "comment": "Default border on inverted surfaces. Behavior: Inverted — swaps light and dark values. Brand-specific."
+            "comment": "Default border on inverted surfaces. Behavior: Inverted — swaps light and dark values. Brand-specific.",
+            "key": "{Semantic.Border.Inverse.borderColorDefaultInverse}"
           },
           "name": "borderColorDefaultInverse",
           "attributes": {},
@@ -3895,6 +4049,7 @@
           ]
         },
         "borderColorSubtleInverse": {
+          "key": "{Semantic.Border.Inverse.borderColorSubtleInverse}",
           "$value": "#113B72",
           "value": "#113B72",
           "type": "color",
@@ -3933,7 +4088,8 @@
               "variableId": "VariableID:21764:1045"
             },
             "$type": "color",
-            "comment": "Subtle border on inverted surfaces (e.g., subtle separators in dark sections). Behavior: Inverted — swaps light and dark values. Brand-specific."
+            "comment": "Subtle border on inverted surfaces (e.g., subtle separators in dark sections). Behavior: Inverted — swaps light and dark values. Brand-specific.",
+            "key": "{Semantic.Border.Inverse.borderColorSubtleInverse}"
           },
           "name": "borderColorSubtleInverse",
           "attributes": {},
@@ -3947,6 +4103,7 @@
       },
       "Brand": {
         "borderColorBrand": {
+          "key": "{Semantic.Border.Brand.borderColorBrand}",
           "$value": "#174482",
           "value": "#174482",
           "type": "color",
@@ -3985,7 +4142,8 @@
               "variableId": "VariableID:16107:27"
             },
             "$type": "color",
-            "comment": "Brand-colored border for emphasis (e.g., active tabs, selected items, brand highlights). Behavior: Dynamic — adapts between light and dark mode. Brand-specific."
+            "comment": "Brand-colored border for emphasis (e.g., active tabs, selected items, brand highlights). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.",
+            "key": "{Semantic.Border.Brand.borderColorBrand}"
           },
           "name": "borderColorBrand",
           "attributes": {},
@@ -3997,6 +4155,7 @@
           ]
         },
         "borderColorBrandLightOnly": {
+          "key": "{Semantic.Border.Brand.borderColorBrandLightOnly}",
           "$value": "#174482",
           "value": "#174482",
           "type": "color",
@@ -4035,7 +4194,8 @@
               "variableId": "VariableID:16107:27"
             },
             "$type": "color",
-            "comment": "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."
+            "comment": "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.",
+            "key": "{Semantic.Border.Brand.borderColorBrandLightOnly}"
           },
           "name": "borderColorBrandLightOnly",
           "attributes": {},
@@ -4047,6 +4207,7 @@
           ]
         },
         "borderColorBrandConst": {
+          "key": "{Semantic.Border.Brand.borderColorBrandConst}",
           "$value": "#174482",
           "value": "#174482",
           "type": "color",
@@ -4085,7 +4246,8 @@
               "variableId": "VariableID:16107:27"
             },
             "$type": "color",
-            "comment": "Brand border that remains constant regardless of color mode. Behavior: Static — same value in light and dark mode. Brand-specific."
+            "comment": "Brand border that remains constant regardless of color mode. Behavior: Static — same value in light and dark mode. Brand-specific.",
+            "key": "{Semantic.Border.Brand.borderColorBrandConst}"
           },
           "name": "borderColorBrandConst",
           "attributes": {},
@@ -4099,6 +4261,7 @@
       },
       "Utilities": {
         "borderColorNoContrast": {
+          "key": "{Semantic.Border.Utilities.borderColorNoContrast}",
           "$value": "#FFFFFF",
           "value": "#FFFFFF",
           "type": "color",
@@ -4137,7 +4300,8 @@
               "variableId": "VariableID:588:1978"
             },
             "$type": "color",
-            "comment": "Zero-contrast border matching surface color (e.g., invisible borders for layout, spacing helpers). Behavior: Dynamic — adapts between light and dark mode. Brand-specific."
+            "comment": "Zero-contrast border matching surface color (e.g., invisible borders for layout, spacing helpers). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.",
+            "key": "{Semantic.Border.Utilities.borderColorNoContrast}"
           },
           "name": "borderColorNoContrast",
           "attributes": {},
@@ -4153,6 +4317,7 @@
     "Icon": {
       "Interactive": {
         "iconColorIdle": {
+          "key": "{Semantic.Icon.Interactive.iconColorIdle}",
           "$value": "#345EA0",
           "value": "#345EA0",
           "type": "color",
@@ -4191,7 +4356,8 @@
               "variableId": "VariableID:18489:25069"
             },
             "$type": "color",
-            "comment": "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."
+            "comment": "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.",
+            "key": "{Semantic.Icon.Interactive.iconColorIdle}"
           },
           "name": "iconColorIdle",
           "attributes": {},
@@ -4203,6 +4369,7 @@
           ]
         },
         "iconColorDisabled": {
+          "key": "{Semantic.Icon.Interactive.iconColorDisabled}",
           "$value": "#8FACDB",
           "value": "#8FACDB",
           "type": "color",
@@ -4241,7 +4408,8 @@
               "variableId": "VariableID:21692:48285"
             },
             "$type": "color",
-            "comment": "Icon color for disabled elements (e.g., inactive button icons, disabled controls). Behavior: Dynamic — adapts between light and dark mode. Brand-specific."
+            "comment": "Icon color for disabled elements (e.g., inactive button icons, disabled controls). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.",
+            "key": "{Semantic.Icon.Interactive.iconColorDisabled}"
           },
           "name": "iconColorDisabled",
           "attributes": {},
@@ -4253,6 +4421,7 @@
           ]
         },
         "iconColorHover": {
+          "key": "{Semantic.Icon.Interactive.iconColorHover}",
           "$value": "#0B2647",
           "value": "#0B2647",
           "type": "color",
@@ -4291,7 +4460,8 @@
               "variableId": "VariableID:21764:1044"
             },
             "$type": "color",
-            "comment": "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."
+            "comment": "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.",
+            "key": "{Semantic.Icon.Interactive.iconColorHover}"
           },
           "name": "iconColorHover",
           "attributes": {},
@@ -4303,6 +4473,7 @@
           ]
         },
         "iconColorActive": {
+          "key": "{Semantic.Icon.Interactive.iconColorActive}",
           "$value": "#0B2647",
           "value": "#0B2647",
           "type": "color",
@@ -4341,7 +4512,8 @@
               "variableId": "VariableID:21764:1044"
             },
             "$type": "color",
-            "comment": "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."
+            "comment": "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.",
+            "key": "{Semantic.Icon.Interactive.iconColorActive}"
           },
           "name": "iconColorActive",
           "attributes": {},
@@ -4355,6 +4527,7 @@
       },
       "OnSolid": {
         "iconColorSecondaryOnLight": {
+          "key": "{Semantic.Icon.OnSolid.iconColorSecondaryOnLight}",
           "$value": "#565A5F",
           "value": "#565A5F",
           "type": "color",
@@ -4393,7 +4566,8 @@
               "variableId": "VariableID:3912:4271"
             },
             "$type": "color",
-            "comment": "Secondary icon on light solid surfaces. Behavior: Static — same value in light and dark mode."
+            "comment": "Secondary icon on light solid surfaces. Behavior: Static — same value in light and dark mode.",
+            "key": "{Semantic.Icon.OnSolid.iconColorSecondaryOnLight}"
           },
           "name": "iconColorSecondaryOnLight",
           "attributes": {},
@@ -4405,6 +4579,7 @@
           ]
         },
         "iconColorPrimaryOnDark": {
+          "key": "{Semantic.Icon.OnSolid.iconColorPrimaryOnDark}",
           "$value": "#FFFFFF",
           "value": "#FFFFFF",
           "type": "color",
@@ -4443,7 +4618,8 @@
               "variableId": "VariableID:588:1978"
             },
             "$type": "color",
-            "comment": "Primary icon on dark solid surfaces (e.g., icons on dark buttons, player controls). Behavior: Static — same value in light and dark mode."
+            "comment": "Primary icon on dark solid surfaces (e.g., icons on dark buttons, player controls). Behavior: Static — same value in light and dark mode.",
+            "key": "{Semantic.Icon.OnSolid.iconColorPrimaryOnDark}"
           },
           "name": "iconColorPrimaryOnDark",
           "attributes": {},
@@ -4455,6 +4631,7 @@
           ]
         },
         "iconColorSecondaryOnDark": {
+          "key": "{Semantic.Icon.OnSolid.iconColorSecondaryOnDark}",
           "$value": "#DDE1E2",
           "value": "#DDE1E2",
           "type": "color",
@@ -4493,7 +4670,8 @@
               "variableId": "VariableID:2881:1765"
             },
             "$type": "color",
-            "comment": "Secondary icon on dark solid surfaces. Behavior: Static — same value in light and dark mode."
+            "comment": "Secondary icon on dark solid surfaces. Behavior: Static — same value in light and dark mode.",
+            "key": "{Semantic.Icon.OnSolid.iconColorSecondaryOnDark}"
           },
           "name": "iconColorSecondaryOnDark",
           "attributes": {},
@@ -4505,6 +4683,7 @@
           ]
         },
         "iconColorPrimaryOnLight": {
+          "key": "{Semantic.Icon.OnSolid.iconColorPrimaryOnLight}",
           "$value": "#222628",
           "value": "#222628",
           "type": "color",
@@ -4543,7 +4722,8 @@
               "variableId": "VariableID:588:1977"
             },
             "$type": "color",
-            "comment": "Primary icon on light solid surfaces. Behavior: Static — same value in light and dark mode."
+            "comment": "Primary icon on light solid surfaces. Behavior: Static — same value in light and dark mode.",
+            "key": "{Semantic.Icon.OnSolid.iconColorPrimaryOnLight}"
           },
           "name": "iconColorPrimaryOnLight",
           "attributes": {},
@@ -4555,6 +4735,7 @@
           ]
         },
         "iconColorConstOnImage": {
+          "key": "{Semantic.Icon.OnSolid.iconColorConstOnImage}",
           "$value": "#FFFFFF",
           "value": "#FFFFFF",
           "type": "color",
@@ -4593,7 +4774,8 @@
               "variableId": "VariableID:588:1978"
             },
             "$type": "color",
-            "comment": "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."
+            "comment": "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.",
+            "key": "{Semantic.Icon.OnSolid.iconColorConstOnImage}"
           },
           "name": "iconColorConstOnImage",
           "attributes": {},
@@ -4607,6 +4789,7 @@
       },
       "Feedback": {
         "iconColorSuccess": {
+          "key": "{Semantic.Icon.Feedback.iconColorSuccess}",
           "$value": "#006E3E",
           "value": "#006E3E",
           "type": "color",
@@ -4645,7 +4828,8 @@
               "variableId": "VariableID:9697:16953"
             },
             "$type": "color",
-            "comment": "Success icon color for success indicators (e.g., checkmark icon, completion indicator). Behavior: Dynamic — adapts between light and dark mode."
+            "comment": "Success icon color for success indicators (e.g., checkmark icon, completion indicator). Behavior: Dynamic — adapts between light and dark mode.",
+            "key": "{Semantic.Icon.Feedback.iconColorSuccess}"
           },
           "name": "iconColorSuccess",
           "attributes": {},
@@ -4657,6 +4841,7 @@
           ]
         },
         "iconColorError": {
+          "key": "{Semantic.Icon.Feedback.iconColorError}",
           "$value": "#C10000",
           "value": "#C10000",
           "type": "color",
@@ -4695,7 +4880,8 @@
               "variableId": "VariableID:2580:18750"
             },
             "$type": "color",
-            "comment": "Error icon color for error indicators (e.g., error badge icon, validation error icon). Behavior: Dynamic — adapts between light and dark mode."
+            "comment": "Error icon color for error indicators (e.g., error badge icon, validation error icon). Behavior: Dynamic — adapts between light and dark mode.",
+            "key": "{Semantic.Icon.Feedback.iconColorError}"
           },
           "name": "iconColorError",
           "attributes": {},
@@ -4707,6 +4893,7 @@
           ]
         },
         "iconColorWarning": {
+          "key": "{Semantic.Icon.Feedback.iconColorWarning}",
           "$value": "#9E4401",
           "value": "#9E4401",
           "type": "color",
@@ -4745,7 +4932,8 @@
               "variableId": "VariableID:21678:1561"
             },
             "$type": "color",
-            "comment": "Warning icon color for caution indicators (e.g., warning triangle, alert icon). Behavior: Dynamic — adapts between light and dark mode."
+            "comment": "Warning icon color for caution indicators (e.g., warning triangle, alert icon). Behavior: Dynamic — adapts between light and dark mode.",
+            "key": "{Semantic.Icon.Feedback.iconColorWarning}"
           },
           "name": "iconColorWarning",
           "attributes": {},
@@ -4759,6 +4947,7 @@
       },
       "Brand": {
         "iconColorBrand": {
+          "key": "{Semantic.Icon.Brand.iconColorBrand}",
           "$value": "#174482",
           "value": "#174482",
           "type": "color",
@@ -4797,7 +4986,8 @@
               "variableId": "VariableID:16107:27"
             },
             "$type": "color",
-            "comment": "Brand-colored icon for emphasis (e.g., featured icons, brand indicators). Behavior: Dynamic — adapts between light and dark mode. Brand-specific."
+            "comment": "Brand-colored icon for emphasis (e.g., featured icons, brand indicators). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.",
+            "key": "{Semantic.Icon.Brand.iconColorBrand}"
           },
           "name": "iconColorBrand",
           "attributes": {},
@@ -4809,6 +4999,7 @@
           ]
         },
         "iconColorBrandLightOnly": {
+          "key": "{Semantic.Icon.Brand.iconColorBrandLightOnly}",
           "$value": "#174482",
           "value": "#174482",
           "type": "color",
@@ -4847,7 +5038,8 @@
               "variableId": "VariableID:16107:27"
             },
             "$type": "color",
-            "comment": "Brand icon color in light mode, neutral white in dark mode. Behavior: Dynamic — adapts between light and dark mode. Brand-specific."
+            "comment": "Brand icon color in light mode, neutral white in dark mode. Behavior: Dynamic — adapts between light and dark mode. Brand-specific.",
+            "key": "{Semantic.Icon.Brand.iconColorBrandLightOnly}"
           },
           "name": "iconColorBrandLightOnly",
           "attributes": {},
@@ -4861,6 +5053,7 @@
       },
       "Standard": {
         "iconColorPrimary": {
+          "key": "{Semantic.Icon.Standard.iconColorPrimary}",
           "$value": "#222628",
           "value": "#222628",
           "type": "color",
@@ -4899,7 +5092,8 @@
               "variableId": "VariableID:588:1977"
             },
             "$type": "color",
-            "comment": "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."
+            "comment": "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.",
+            "key": "{Semantic.Icon.Standard.iconColorPrimary}"
           },
           "name": "iconColorPrimary",
           "attributes": {},
@@ -4911,6 +5105,7 @@
           ]
         },
         "iconColorSecondary": {
+          "key": "{Semantic.Icon.Standard.iconColorSecondary}",
           "$value": "#565A5F",
           "value": "#565A5F",
           "type": "color",
@@ -4949,7 +5144,8 @@
               "variableId": "VariableID:3912:4271"
             },
             "$type": "color",
-            "comment": "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."
+            "comment": "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.",
+            "key": "{Semantic.Icon.Standard.iconColorSecondary}"
           },
           "name": "iconColorSecondary",
           "attributes": {},
@@ -4961,6 +5157,7 @@
           ]
         },
         "iconColorTertiary": {
+          "key": "{Semantic.Icon.Standard.iconColorTertiary}",
           "$value": "#6E787C",
           "value": "#6E787C",
           "type": "color",
@@ -4999,7 +5196,8 @@
               "variableId": "VariableID:21692:48910"
             },
             "$type": "color",
-            "comment": "Tertiary icon color for static de-emphasized icons (e.g., subtle indicators, background icons).  Behavior: Dynamic — adapts between light and dark mode. Brand-specific."
+            "comment": "Tertiary icon color for static de-emphasized icons (e.g., subtle indicators, background icons).  Behavior: Dynamic — adapts between light and dark mode. Brand-specific.",
+            "key": "{Semantic.Icon.Standard.iconColorTertiary}"
           },
           "name": "iconColorTertiary",
           "attributes": {},
@@ -5013,6 +5211,7 @@
       },
       "Inverse": {
         "iconColorPrimaryInverse": {
+          "key": "{Semantic.Icon.Inverse.iconColorPrimaryInverse}",
           "$value": "#D6E1F2",
           "value": "#D6E1F2",
           "type": "color",
@@ -5051,7 +5250,8 @@
               "variableId": "VariableID:21692:48287"
             },
             "$type": "color",
-            "comment": "Primary icon on inverted/contrast backgrounds. Behavior: Inverted — swaps light and dark values. Brand-specific."
+            "comment": "Primary icon on inverted/contrast backgrounds. Behavior: Inverted — swaps light and dark values. Brand-specific.",
+            "key": "{Semantic.Icon.Inverse.iconColorPrimaryInverse}"
           },
           "name": "iconColorPrimaryInverse",
           "attributes": {},
@@ -5063,6 +5263,7 @@
           ]
         },
         "iconColorSecondaryInverse": {
+          "key": "{Semantic.Icon.Inverse.iconColorSecondaryInverse}",
           "$value": "#8FACDB",
           "value": "#8FACDB",
           "type": "color",
@@ -5101,7 +5302,8 @@
               "variableId": "VariableID:21692:48285"
             },
             "$type": "color",
-            "comment": "Secondary icon on inverted/contrast backgrounds. Behavior: Inverted — swaps light and dark values. Brand-specific."
+            "comment": "Secondary icon on inverted/contrast backgrounds. Behavior: Inverted — swaps light and dark values. Brand-specific.",
+            "key": "{Semantic.Icon.Inverse.iconColorSecondaryInverse}"
           },
           "name": "iconColorSecondaryInverse",
           "attributes": {},
@@ -5113,6 +5315,7 @@
           ]
         },
         "iconColorInverseHighContrast": {
+          "key": "{Semantic.Icon.Inverse.iconColorInverseHighContrast}",
           "$value": "#FFFFFF",
           "value": "#FFFFFF",
           "type": "color",
@@ -5151,7 +5354,8 @@
               "variableId": "VariableID:588:1978"
             },
             "$type": "color",
-            "comment": "High contrast inverse icon for maximum visibility on inverted surfaces. Behavior: Inverted — swaps light and dark values."
+            "comment": "High contrast inverse icon for maximum visibility on inverted surfaces. Behavior: Inverted — swaps light and dark values.",
+            "key": "{Semantic.Icon.Inverse.iconColorInverseHighContrast}"
           },
           "name": "iconColorInverseHighContrast",
           "attributes": {},
@@ -5166,6 +5370,7 @@
     },
     "LayerOpacity": {
       "layerOpacity05": {
+        "key": "{Semantic.LayerOpacity.layerOpacity05}",
         "$value": 0.05,
         "value": 5,
         "type": "float",
@@ -5204,7 +5409,8 @@
             "variableId": "VariableID:18489:24615"
           },
           "$type": "opacity",
-          "comment": "Layer opacity value at 5% for transparency effects (e.g., overlays, fade effects). Behavior: Static — same value in light and dark mode."
+          "comment": "Layer opacity value at 5% for transparency effects (e.g., overlays, fade effects). Behavior: Static — same value in light and dark mode.",
+          "key": "{Semantic.LayerOpacity.layerOpacity05}"
         },
         "name": "layerOpacity05",
         "attributes": {},
@@ -5215,6 +5421,7 @@
         ]
       },
       "layerOpacity10": {
+        "key": "{Semantic.LayerOpacity.layerOpacity10}",
         "$value": 0.1,
         "value": 10,
         "type": "float",
@@ -5253,7 +5460,8 @@
             "variableId": "VariableID:18489:24616"
           },
           "$type": "opacity",
-          "comment": "Layer opacity value at 10% for transparency effects (e.g., overlays, fade effects). Behavior: Static — same value in light and dark mode."
+          "comment": "Layer opacity value at 10% for transparency effects (e.g., overlays, fade effects). Behavior: Static — same value in light and dark mode.",
+          "key": "{Semantic.LayerOpacity.layerOpacity10}"
         },
         "name": "layerOpacity10",
         "attributes": {},
@@ -5264,6 +5472,7 @@
         ]
       },
       "layerOpacity20": {
+        "key": "{Semantic.LayerOpacity.layerOpacity20}",
         "$value": 0.2,
         "value": 20,
         "type": "float",
@@ -5302,7 +5511,8 @@
             "variableId": "VariableID:18489:24829"
           },
           "$type": "opacity",
-          "comment": "Layer opacity value at 20% for transparency effects (e.g., overlays, fade effects). Behavior: Static — same value in light and dark mode."
+          "comment": "Layer opacity value at 20% for transparency effects (e.g., overlays, fade effects). Behavior: Static — same value in light and dark mode.",
+          "key": "{Semantic.LayerOpacity.layerOpacity20}"
         },
         "name": "layerOpacity20",
         "attributes": {},
@@ -5313,6 +5523,7 @@
         ]
       },
       "layerOpacity30": {
+        "key": "{Semantic.LayerOpacity.layerOpacity30}",
         "$value": 0.3,
         "value": 30,
         "type": "float",
@@ -5351,7 +5562,8 @@
             "variableId": "VariableID:18489:25044"
           },
           "$type": "opacity",
-          "comment": "Layer opacity value at 30% for transparency effects (e.g., overlays, fade effects). Behavior: Static — same value in light and dark mode."
+          "comment": "Layer opacity value at 30% for transparency effects (e.g., overlays, fade effects). Behavior: Static — same value in light and dark mode.",
+          "key": "{Semantic.LayerOpacity.layerOpacity30}"
         },
         "name": "layerOpacity30",
         "attributes": {},
@@ -5362,6 +5574,7 @@
         ]
       },
       "layerOpacity40": {
+        "key": "{Semantic.LayerOpacity.layerOpacity40}",
         "$value": 0.4,
         "value": 40,
         "type": "float",
@@ -5400,7 +5613,8 @@
             "variableId": "VariableID:18489:24830"
           },
           "$type": "opacity",
-          "comment": "Layer opacity value at 40% for transparency effects (e.g., overlays, fade effects). Behavior: Static — same value in light and dark mode."
+          "comment": "Layer opacity value at 40% for transparency effects (e.g., overlays, fade effects). Behavior: Static — same value in light and dark mode.",
+          "key": "{Semantic.LayerOpacity.layerOpacity40}"
         },
         "name": "layerOpacity40",
         "attributes": {},
@@ -5411,6 +5625,7 @@
         ]
       },
       "layerOpacity50": {
+        "key": "{Semantic.LayerOpacity.layerOpacity50}",
         "$value": 0.5,
         "value": 50,
         "type": "float",
@@ -5449,7 +5664,8 @@
             "variableId": "VariableID:18489:25045"
           },
           "$type": "opacity",
-          "comment": "Layer opacity value at 50% for transparency effects (e.g., overlays, fade effects). Behavior: Static — same value in light and dark mode."
+          "comment": "Layer opacity value at 50% for transparency effects (e.g., overlays, fade effects). Behavior: Static — same value in light and dark mode.",
+          "key": "{Semantic.LayerOpacity.layerOpacity50}"
         },
         "name": "layerOpacity50",
         "attributes": {},
@@ -5460,6 +5676,7 @@
         ]
       },
       "layerOpacity60": {
+        "key": "{Semantic.LayerOpacity.layerOpacity60}",
         "$value": 0.6,
         "value": 60,
         "type": "float",
@@ -5498,7 +5715,8 @@
             "variableId": "VariableID:18489:24961"
           },
           "$type": "opacity",
-          "comment": "Layer opacity value at 60% for transparency effects (e.g., overlays, fade effects). Behavior: Static — same value in light and dark mode."
+          "comment": "Layer opacity value at 60% for transparency effects (e.g., overlays, fade effects). Behavior: Static — same value in light and dark mode.",
+          "key": "{Semantic.LayerOpacity.layerOpacity60}"
         },
         "name": "layerOpacity60",
         "attributes": {},
@@ -5509,6 +5727,7 @@
         ]
       },
       "layerOpacity70": {
+        "key": "{Semantic.LayerOpacity.layerOpacity70}",
         "$value": 0.7,
         "value": 70,
         "type": "float",
@@ -5547,7 +5766,8 @@
             "variableId": "VariableID:18489:25047"
           },
           "$type": "opacity",
-          "comment": "Layer opacity value at 70% for transparency effects (e.g., overlays, fade effects). Behavior: Static — same value in light and dark mode."
+          "comment": "Layer opacity value at 70% for transparency effects (e.g., overlays, fade effects). Behavior: Static — same value in light and dark mode.",
+          "key": "{Semantic.LayerOpacity.layerOpacity70}"
         },
         "name": "layerOpacity70",
         "attributes": {},
@@ -5558,6 +5778,7 @@
         ]
       },
       "layerOpacity80": {
+        "key": "{Semantic.LayerOpacity.layerOpacity80}",
         "$value": 0.8,
         "value": 80,
         "type": "float",
@@ -5596,7 +5817,8 @@
             "variableId": "VariableID:18489:24962"
           },
           "$type": "opacity",
-          "comment": "Layer opacity value at 80% for transparency effects (e.g., overlays, fade effects). Behavior: Static — same value in light and dark mode."
+          "comment": "Layer opacity value at 80% for transparency effects (e.g., overlays, fade effects). Behavior: Static — same value in light and dark mode.",
+          "key": "{Semantic.LayerOpacity.layerOpacity80}"
         },
         "name": "layerOpacity80",
         "attributes": {},
@@ -5607,6 +5829,7 @@
         ]
       },
       "layerOpacity90": {
+        "key": "{Semantic.LayerOpacity.layerOpacity90}",
         "$value": 0.9,
         "value": 90,
         "type": "float",
@@ -5645,7 +5868,8 @@
             "variableId": "VariableID:18489:25043"
           },
           "$type": "opacity",
-          "comment": "Layer opacity value at 90% for transparency effects (e.g., overlays, fade effects). Behavior: Static — same value in light and dark mode."
+          "comment": "Layer opacity value at 90% for transparency effects (e.g., overlays, fade effects). Behavior: Static — same value in light and dark mode.",
+          "key": "{Semantic.LayerOpacity.layerOpacity90}"
         },
         "name": "layerOpacity90",
         "attributes": {},
@@ -5656,6 +5880,7 @@
         ]
       },
       "layerOpacity100": {
+        "key": "{Semantic.LayerOpacity.layerOpacity100}",
         "$value": 1,
         "value": 100,
         "type": "float",
@@ -5694,7 +5919,8 @@
             "variableId": "VariableID:18489:24963"
           },
           "$type": "opacity",
-          "comment": "Layer opacity value at 100% for transparency effects (e.g., overlays, fade effects). Behavior: Static — same value in light and dark mode."
+          "comment": "Layer opacity value at 100% for transparency effects (e.g., overlays, fade effects). Behavior: Static — same value in light and dark mode.",
+          "key": "{Semantic.LayerOpacity.layerOpacity100}"
         },
         "name": "layerOpacity100",
         "attributes": {},
@@ -5705,6 +5931,7 @@
         ]
       },
       "layerOpacity00": {
+        "key": "{Semantic.LayerOpacity.layerOpacity00}",
         "$value": 0,
         "value": 0,
         "type": "float",
@@ -5743,7 +5970,8 @@
             "variableId": "VariableID:18489:25046"
           },
           "$type": "opacity",
-          "comment": "Layer opacity value at 00% for transparency effects (e.g., overlays, fade effects). Behavior: Static — same value in light and dark mode."
+          "comment": "Layer opacity value at 00% for transparency effects (e.g., overlays, fade effects). Behavior: Static — same value in light and dark mode.",
+          "key": "{Semantic.LayerOpacity.layerOpacity00}"
         },
         "name": "layerOpacity00",
         "attributes": {},