feat(skin): add Playbook-aligned breakpoint LESS variables

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

Author: Copilot

packages/skin/dist/variables/variables.less

@@ -13,6 +13,15 @@
 @_screen-size-XL3: 1680px;
 @_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;
+
 @_page-grid-max-width: 1584px;
 @_page-grid-number-cols-small: 8;
 @_page-grid-number-cols-large: 16;

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

@@ -13,6 +13,15 @@
 @_screen-size-XL3: 1680px;
 @_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;
+
 @_page-grid-max-width: 1584px;
 @_page-grid-number-cols-small: 8;
 @_page-grid-number-cols-large: 16;