feat(skin): use CSS variable references for breakpoint LESS variables

Co-authored-by: LuLaValva <26027232+LuLaValva@users.noreply.github.com>

Author: Copilot

packages/skin/dist/variables/variables.less

@@ -14,13 +14,13 @@
 @_screen-size-XL4: 1920px;
 
 // Playbook breakpoints - these align with the CSS custom property values (--breakpoint-*)
-@breakpoint-extra-small: 320px;
-@breakpoint-small: 512px;
-@breakpoint-medium: 600px;
-@breakpoint-large: 800px;
-@breakpoint-extra-large: 1100px;
-@breakpoint-extra-large-2: 1400px;
-@breakpoint-extra-large-3: 1920px;
+@breakpoint-extra-small: var(--breakpoint-extra-small);
+@breakpoint-small: var(--breakpoint-small);
+@breakpoint-medium: var(--breakpoint-medium);
+@breakpoint-large: var(--breakpoint-large);
+@breakpoint-extra-large: var(--breakpoint-extra-large);
+@breakpoint-extra-large-2: var(--breakpoint-extra-large-2);
+@breakpoint-extra-large-3: var(--breakpoint-extra-large-3);
 
 @_page-grid-max-width: 1584px;
 @_page-grid-number-cols-small: 8;

packages/skin/src/sass/variables/variables.less

@@ -14,13 +14,13 @@
 @_screen-size-XL4: 1920px;
 
 // Playbook breakpoints - these align with the CSS custom property values (--breakpoint-*)
-@breakpoint-extra-small: 320px;
-@breakpoint-small: 512px;
-@breakpoint-medium: 600px;
-@breakpoint-large: 800px;
-@breakpoint-extra-large: 1100px;
-@breakpoint-extra-large-2: 1400px;
-@breakpoint-extra-large-3: 1920px;
+@breakpoint-extra-small: var(--breakpoint-extra-small);
+@breakpoint-small: var(--breakpoint-small);
+@breakpoint-medium: var(--breakpoint-medium);
+@breakpoint-large: var(--breakpoint-large);
+@breakpoint-extra-large: var(--breakpoint-extra-large);
+@breakpoint-extra-large-2: var(--breakpoint-extra-large-2);
+@breakpoint-extra-large-3: var(--breakpoint-extra-large-3);
 
 @_page-grid-max-width: 1584px;
 @_page-grid-number-cols-small: 8;