@x-plat/design-system 0.5.66 → 0.6.0

package/dist/components/index.css

@@ -2,307 +2,40 @@
 
 /* src/styles/style.css */
 :root {
-  --primitive-base-white: #FFFFFF;
-  --primitive-base-black: #000000;
-  --primitive-base-transparent: transparent;
-  --primitive-base-black-alpha-5: rgba(0, 0, 0, 0.05);
-  --primitive-base-black-alpha-10: rgba(0, 0, 0, 0.10);
-  --primitive-base-black-alpha-25: rgba(0, 0, 0, 0.25);
-  --primitive-base-black-alpha-50: rgba(0, 0, 0, 0.50);
-  --primitive-base-black-alpha-75: rgba(0, 0, 0, 0.75);
-  --primitive-base-white-alpha-5: rgba(255, 255, 255, 0.05);
-  --primitive-base-white-alpha-10: rgba(255, 255, 255, 0.10);
-  --primitive-base-white-alpha-25: rgba(255, 255, 255, 0.25);
-  --primitive-base-white-alpha-50: rgba(255, 255, 255, 0.50);
-  --primitive-base-white-alpha-75: rgba(255, 255, 255, 0.75);
-  --primitive-red-50: #FFF0F0;
-  --primitive-red-100: #FFDDDE;
-  --primitive-red-200: #FFC1C2;
-  --primitive-red-300: #FF9698;
-  --primitive-red-400: #FF5A5D;
-  --primitive-red-500: #FF272B;
-  --primitive-red-600: #F80409;
-  --primitive-red-700: #D40105;
-  --primitive-red-800: #AE0609;
-  --primitive-red-900: #900C0F;
-  --primitive-pink-50: #FFF4FE;
-  --primitive-pink-100: #FFE7FD;
-  --primitive-pink-200: #FFCFFA;
-  --primitive-pink-300: #FEA9F1;
-  --primitive-pink-400: #FD75E7;
-  --primitive-pink-500: #F553DA;
-  --primitive-pink-600: #D821B6;
-  --primitive-pink-700: #B31892;
-  --primitive-pink-800: #921676;
-  --primitive-pink-900: #781761;
-  --primitive-purple-50: #FBF6FE;
-  --primitive-purple-100: #F5EAFD;
-  --primitive-purple-200: #EDD8FC;
-  --primitive-purple-300: #E0BAF8;
-  --primitive-purple-400: #CD8DF3;
-  --primitive-purple-500: #B961EB;
-  --primitive-purple-600: #A541DC;
-  --primitive-purple-700: #9230C5;
-  --primitive-purple-800: #782B9E;
-  --primitive-purple-900: #62247F;
-  --primitive-deep-purple-50: #EDE7F6;
-  --primitive-deep-purple-100: #D1C4E9;
-  --primitive-deep-purple-200: #B39DDB;
-  --primitive-deep-purple-300: #9575CD;
-  --primitive-deep-purple-400: #7E57C2;
-  --primitive-deep-purple-500: #673AB7;
-  --primitive-deep-purple-600: #5E35B1;
-  --primitive-deep-purple-700: #4621A0;
-  --primitive-deep-purple-800: #290D7E;
-  --primitive-deep-purple-900: #1A0B5C;
-  --primitive-indigo-50: #E8EAF6;
-  --primitive-indigo-100: #C5CAE9;
-  --primitive-indigo-200: #9FA8DA;
-  --primitive-indigo-300: #7986CB;
-  --primitive-indigo-400: #5C6BC0;
-  --primitive-indigo-500: #3F51B5;
-  --primitive-indigo-600: #3949AB;
-  --primitive-indigo-700: #303F9F;
-  --primitive-indigo-800: #283593;
-  --primitive-indigo-900: #1A237E;
-  --primitive-blue-50: #F1F4FD;
-  --primitive-blue-100: #DFE7FA;
-  --primitive-blue-200: #C5D4F8;
-  --primitive-blue-300: #9EB8F2;
-  --primitive-blue-400: #7093EA;
-  --primitive-blue-500: #4D6DE3;
-  --primitive-blue-600: #3950D7;
-  --primitive-blue-700: #303EC5;
-  --primitive-blue-800: #2D35A0;
-  --primitive-blue-900: #29317F;
-  --primitive-light-blue-50: #EDF8FF;
-  --primitive-light-blue-100: #D7EDFF;
-  --primitive-light-blue-200: #B9E1FF;
-  --primitive-light-blue-300: #88D0FF;
-  --primitive-light-blue-400: #50B5FF;
-  --primitive-light-blue-500: #2893FF;
-  --primitive-light-blue-600: #1677FF;
-  --primitive-light-blue-700: #0A5CEB;
-  --primitive-light-blue-800: #0F4ABE;
-  --primitive-light-blue-900: #134295;
-  --primitive-cyan-50: #E0F7FA;
-  --primitive-cyan-100: #B2EBF2;
-  --primitive-cyan-200: #80DEEA;
-  --primitive-cyan-300: #4DD0E1;
-  --primitive-cyan-400: #26C6DA;
-  --primitive-cyan-500: #00BCD4;
-  --primitive-cyan-600: #00ACC1;
-  --primitive-cyan-700: #0097A7;
-  --primitive-cyan-800: #00838F;
-  --primitive-cyan-900: #006064;
-  --primitive-teal-50: #E0F2F1;
-  --primitive-teal-100: #B2DFDB;
-  --primitive-teal-200: #80CBC4;
-  --primitive-teal-300: #4DB6AC;
-  --primitive-teal-400: #26A69A;
-  --primitive-teal-500: #009688;
-  --primitive-teal-600: #00897B;
-  --primitive-teal-700: #00796B;
-  --primitive-teal-800: #00695C;
-  --primitive-teal-900: #004D40;
-  --primitive-green-50: #E5F6EA;
-  --primitive-green-100: #C1E7CC;
-  --primitive-green-200: #98D8AC;
-  --primitive-green-300: #6CCA8B;
-  --primitive-green-400: #47BE72;
-  --primitive-green-500: #10B259;
-  --primitive-green-600: #00A34F;
-  --primitive-green-700: #009143;
-  --primitive-green-800: #007F38;
-  --primitive-green-900: #006024;
-  --primitive-light-green-50: #F1F8E9;
-  --primitive-light-green-100: #DCEDC8;
-  --primitive-light-green-200: #C5E1A5;
-  --primitive-light-green-300: #AED581;
-  --primitive-light-green-400: #9CCC65;
-  --primitive-light-green-500: #8BC34A;
-  --primitive-light-green-600: #7CB342;
-  --primitive-light-green-700: #689F38;
-  --primitive-light-green-800: #558B2F;
-  --primitive-light-green-900: #33691E;
-  --primitive-lime-50: #F9FBE7;
-  --primitive-lime-100: #F0F4C3;
-  --primitive-lime-200: #E6EE9C;
-  --primitive-lime-300: #DCE775;
-  --primitive-lime-400: #D4E157;
-  --primitive-lime-500: #CDDC39;
-  --primitive-lime-600: #C0CA33;
-  --primitive-lime-700: #AFB42B;
-  --primitive-lime-800: #9E9D24;
-  --primitive-lime-900: #827717;
-  --primitive-yellow-50: #FFFDE7;
-  --primitive-yellow-100: #FFF9C4;
-  --primitive-yellow-200: #FFF6A9;
-  --primitive-yellow-300: #FFF280;
-  --primitive-yellow-400: #FFEE54;
-  --primitive-yellow-500: #FFE60C;
-  --primitive-yellow-600: #FDD835;
-  --primitive-yellow-700: #FBC02D;
-  --primitive-yellow-800: #F9A825;
-  --primitive-yellow-900: #F57F17;
-  --primitive-amber-50: #FFF8E1;
-  --primitive-amber-100: #FFECB3;
-  --primitive-amber-200: #FFE082;
-  --primitive-amber-300: #FFD54F;
-  --primitive-amber-400: #FFCA28;
-  --primitive-amber-500: #FFC107;
-  --primitive-amber-600: #FFB300;
-  --primitive-amber-700: #FFA000;
-  --primitive-amber-800: #FF8F00;
-  --primitive-amber-900: #FF6F00;
-  --primitive-orange-50: #FFF2DE;
-  --primitive-orange-100: #FFE0B2;
-  --primitive-orange-200: #FFCC80;
-  --primitive-orange-300: #FFB74D;
-  --primitive-orange-400: #FFA726;
-  --primitive-orange-500: #FF9800;
-  --primitive-orange-600: #FB8C00;
-  --primitive-orange-700: #F57C00;
-  --primitive-orange-800: #EF6C00;
-  --primitive-orange-900: #E65100;
-  --primitive-deep-orange-50: #FBE9E7;
-  --primitive-deep-orange-100: #FFCCBC;
-  --primitive-deep-orange-200: #FFAB91;
-  --primitive-deep-orange-300: #FF8A65;
-  --primitive-deep-orange-400: #FF7043;
-  --primitive-deep-orange-500: #FF5722;
-  --primitive-deep-orange-600: #F4511E;
-  --primitive-deep-orange-700: #E64A19;
-  --primitive-deep-orange-800: #D84315;
-  --primitive-deep-orange-900: #BF360C;
-  --primitive-brown-50: #F1EDEC;
-  --primitive-brown-100: #D7CCC8;
-  --primitive-brown-200: #BCAAA4;
-  --primitive-brown-300: #A1887F;
-  --primitive-brown-400: #8D6E63;
-  --primitive-brown-500: #795548;
-  --primitive-brown-600: #6D4C41;
-  --primitive-brown-700: #5D4037;
-  --primitive-brown-800: #4E342E;
-  --primitive-brown-900: #3E2723;
-  --primitive-neutral-50: #FAFAFA;
-  --primitive-neutral-100: #F5F5F5;
-  --primitive-neutral-200: #E5E5E5;
-  --primitive-neutral-300: #D4D4D4;
-  --primitive-neutral-400: #A1A1A1;
-  --primitive-neutral-500: #737373;
-  --primitive-neutral-600: #525252;
-  --primitive-neutral-700: #404040;
-  --primitive-neutral-800: #2F2F2F;
-  --primitive-neutral-900: #212121;
-  --primitive-blue-gray-50: #ECEFF1;
-  --primitive-blue-gray-100: #CFD8DC;
-  --primitive-blue-gray-200: #B0BEC5;
-  --primitive-blue-gray-300: #90A4AE;
-  --primitive-blue-gray-400: #78909C;
-  --primitive-blue-gray-500: #607D8B;
-  --primitive-blue-gray-600: #546E7A;
-  --primitive-blue-gray-700: #455A64;
-  --primitive-blue-gray-800: #37474F;
-  --primitive-blue-gray-900: #263238;
-}
-:root {
-  --spacing-size-0: 0;
-  --spacing-size-1: 4px;
-  --spacing-size-2: 8px;
-  --spacing-size-3: 12px;
-  --spacing-size-4: 16px;
-  --spacing-size-5: 20px;
-  --spacing-size-6: 24px;
-  --spacing-size-7: 28px;
-  --spacing-size-8: 32px;
-  --spacing-size-9: 36px;
-  --spacing-size-10: 40px;
-  --spacing-size-11: 48px;
-  --spacing-size-12: 64px;
-  --spacing-size-13: 80px;
-  --spacing-size-14: 96px;
-  --spacing-size-15: 120px;
-  --spacing-size-16: 160px;
-  --spacing-stroke-0: 0;
-  --spacing-stroke-1: 0.5px;
-  --spacing-stroke-2: 1px;
-  --spacing-stroke-3: 2px;
-  --spacing-stroke-4: 4px;
-  --spacing-stroke-5: 8px;
-  --spacing-stroke-6: 12px;
-}
-:root {
-  --spacing-brand-space-1: var(--spacing-size-1);
-  --spacing-brand-space-2: var(--spacing-size-2);
-  --spacing-brand-space-3: var(--spacing-size-3);
-  --spacing-brand-space-4: var(--spacing-size-4);
-  --spacing-brand-space-5: var(--spacing-size-5);
-  --spacing-brand-space-6: var(--spacing-size-6);
-  --spacing-brand-space-7: var(--spacing-size-7);
-  --spacing-brand-space-8: var(--spacing-size-8);
-  --spacing-brand-space-9: var(--spacing-size-9);
-  --spacing-brand-space-10: var(--spacing-size-10);
-  --spacing-brand-space-11: var(--spacing-size-11);
-  --spacing-brand-space-12: var(--spacing-size-12);
-  --spacing-brand-space-13: var(--spacing-size-13);
-  --spacing-brand-space-14: var(--spacing-size-14);
-  --spacing-brand-space-15: var(--spacing-size-15);
-  --spacing-brand-space-16: var(--spacing-size-16);
-  --spacing-brand-space-none: var(--spacing-size-0);
-  --spacing-brand-control-height-xs: var(--spacing-size-6);
-  --spacing-brand-control-height-sm: var(--spacing-size-8);
-  --spacing-brand-control-height-md: var(--spacing-size-10);
-  --spacing-brand-control-height-lg: var(--spacing-size-11);
-  --spacing-brand-radius-none: var(--spacing-size-0);
-  --spacing-brand-radius-sm: var(--spacing-size-1);
-  --spacing-brand-radius-md: var(--spacing-size-2);
-  --spacing-brand-radius-lg: var(--spacing-size-3);
-  --spacing-brand-radius-xl: var(--spacing-size-4);
-  --spacing-brand-radius-full: 9999px;
-  --spacing-brand-stroke-none: var(--spacing-stroke-0);
-  --spacing-brand-stroke-xs: var(--spacing-stroke-1);
-  --spacing-brand-stroke-sm: var(--spacing-stroke-2);
-  --spacing-brand-stroke-md: var(--spacing-stroke-3);
-  --spacing-brand-stroke-lg: var(--spacing-stroke-4);
-  --spacing-brand-stroke-xl: var(--spacing-stroke-5);
-  --spacing-brand-stroke-2xl: var(--spacing-stroke-6);
-}
-:root {
-  --spacing-space-1: var(--spacing-brand-space-1);
-  --spacing-space-2: var(--spacing-brand-space-2);
-  --spacing-space-3: var(--spacing-brand-space-3);
-  --spacing-space-4: var(--spacing-brand-space-4);
-  --spacing-space-5: var(--spacing-brand-space-5);
-  --spacing-space-6: var(--spacing-brand-space-6);
-  --spacing-space-7: var(--spacing-brand-space-7);
-  --spacing-space-8: var(--spacing-brand-space-8);
-  --spacing-space-9: var(--spacing-brand-space-9);
-  --spacing-space-10: var(--spacing-brand-space-10);
-  --spacing-space-11: var(--spacing-brand-space-11);
-  --spacing-space-12: var(--spacing-brand-space-12);
-  --spacing-space-13: var(--spacing-brand-space-13);
-  --spacing-space-14: var(--spacing-brand-space-14);
-  --spacing-space-15: var(--spacing-brand-space-15);
-  --spacing-space-16: var(--spacing-brand-space-16);
-  --spacing-space-none: var(--spacing-brand-space-none);
-  --spacing-control-height-xs: var(--spacing-brand-control-height-xs);
-  --spacing-control-height-sm: var(--spacing-brand-control-height-sm);
-  --spacing-control-height-md: var(--spacing-brand-control-height-md);
-  --spacing-control-height-lg: var(--spacing-brand-control-height-lg);
-  --spacing-radius-none: var(--spacing-brand-radius-none);
-  --spacing-radius-sm: var(--spacing-brand-radius-sm);
-  --spacing-radius-md: var(--spacing-brand-radius-md);
-  --spacing-radius-lg: var(--spacing-brand-radius-lg);
-  --spacing-radius-xl: var(--spacing-brand-radius-xl);
-  --spacing-radius-full: var(--spacing-brand-radius-full);
-  --spacing-stroke-none: var(--spacing-brand-stroke-none);
-  --spacing-stroke-xs: var(--spacing-brand-stroke-xs);
-  --spacing-stroke-sm: var(--spacing-brand-stroke-sm);
-  --spacing-stroke-md: var(--spacing-brand-stroke-md);
-  --spacing-stroke-lg: var(--spacing-brand-stroke-lg);
-  --spacing-stroke-xl: var(--spacing-brand-stroke-xl);
-  --spacing-stroke-2xl: var(--spacing-brand-stroke-2xl);
+  --spacing-space-1: 4px;
+  --spacing-space-2: 8px;
+  --spacing-space-3: 12px;
+  --spacing-space-4: 16px;
+  --spacing-space-5: 20px;
+  --spacing-space-6: 24px;
+  --spacing-space-7: 28px;
+  --spacing-space-8: 32px;
+  --spacing-space-9: 36px;
+  --spacing-space-10: 40px;
+  --spacing-space-11: 48px;
+  --spacing-space-12: 64px;
+  --spacing-space-13: 80px;
+  --spacing-space-14: 96px;
+  --spacing-space-15: 120px;
+  --spacing-space-16: 160px;
+  --spacing-space-none: 0;
+  --spacing-control-height-xs: 24px;
+  --spacing-control-height-sm: 32px;
+  --spacing-control-height-md: 40px;
+  --spacing-control-height-lg: 48px;
+  --spacing-radius-none: 0;
+  --spacing-radius-sm: 4px;
+  --spacing-radius-md: 8px;
+  --spacing-radius-lg: 12px;
+  --spacing-radius-xl: 16px;
+  --spacing-radius-full: 9999px;
+  --spacing-stroke-none: 0;
+  --spacing-stroke-xs: 0.5px;
+  --spacing-stroke-sm: 1px;
+  --spacing-stroke-md: 2px;
+  --spacing-stroke-lg: 4px;
+  --spacing-stroke-xl: 8px;
+  --spacing-stroke-2xl: 12px;
 }
 :root {
   --effects-opacity-0: 0;
@@ -340,140 +73,144 @@
   --semantic-shadow-overlay: var(--effects-brand-shadow-overlay);
 }
 :root {
-  --brand-primary-50: var(--primitive-blue-50);
-  --brand-primary-100: var(--primitive-blue-100);
-  --brand-primary-200: var(--primitive-blue-200);
-  --brand-primary-300: var(--primitive-blue-300);
-  --brand-primary-400: var(--primitive-blue-400);
-  --brand-primary-500: var(--primitive-blue-500);
-  --brand-primary-600: var(--primitive-blue-600);
-  --brand-primary-700: var(--primitive-blue-700);
-  --brand-primary-800: var(--primitive-blue-800);
-  --brand-primary-900: var(--primitive-blue-900);
-  --brand-secondary-50: var(--primitive-light-blue-50);
-  --brand-secondary-100: var(--primitive-light-blue-100);
-  --brand-secondary-200: var(--primitive-light-blue-200);
-  --brand-secondary-300: var(--primitive-light-blue-300);
-  --brand-secondary-400: var(--primitive-light-blue-400);
-  --brand-secondary-500: var(--primitive-light-blue-500);
-  --brand-secondary-600: var(--primitive-light-blue-600);
-  --brand-secondary-700: var(--primitive-light-blue-700);
-  --brand-secondary-800: var(--primitive-light-blue-800);
-  --brand-secondary-900: var(--primitive-light-blue-900);
-  --brand-neutral-50: var(--primitive-neutral-50);
-  --brand-neutral-100: var(--primitive-neutral-100);
-  --brand-neutral-200: var(--primitive-neutral-200);
-  --brand-neutral-300: var(--primitive-neutral-300);
-  --brand-neutral-400: var(--primitive-neutral-400);
-  --brand-neutral-500: var(--primitive-neutral-500);
-  --brand-neutral-600: var(--primitive-neutral-600);
-  --brand-neutral-700: var(--primitive-neutral-700);
-  --brand-neutral-800: var(--primitive-neutral-800);
-  --brand-neutral-900: var(--primitive-neutral-900);
-  --brand-base-white: var(--primitive-base-white);
-  --brand-base-black-alpha-10: var(--primitive-base-black-alpha-10);
-  --brand-base-black-alpha-25: var(--primitive-base-black-alpha-25);
-  --brand-categorical-1-100: var(--primitive-red-100);
-  --brand-categorical-1-200: var(--primitive-red-200);
-  --brand-categorical-1-300: var(--primitive-red-300);
-  --brand-categorical-1-400: var(--primitive-red-400);
-  --brand-categorical-1-500: var(--primitive-red-500);
-  --brand-categorical-1-600: var(--primitive-red-600);
-  --brand-categorical-2-100: var(--primitive-green-100);
-  --brand-categorical-2-200: var(--primitive-green-200);
-  --brand-categorical-2-300: var(--primitive-green-300);
-  --brand-categorical-2-400: var(--primitive-green-400);
-  --brand-categorical-2-500: var(--primitive-green-500);
-  --brand-categorical-2-600: var(--primitive-green-600);
-  --brand-categorical-3-100: var(--primitive-blue-100);
-  --brand-categorical-3-200: var(--primitive-blue-200);
-  --brand-categorical-3-300: var(--primitive-blue-300);
-  --brand-categorical-3-400: var(--primitive-blue-400);
-  --brand-categorical-3-500: var(--primitive-blue-500);
-  --brand-categorical-3-600: var(--primitive-blue-600);
-  --brand-categorical-4-100: var(--primitive-purple-100);
-  --brand-categorical-4-200: var(--primitive-purple-200);
-  --brand-categorical-4-300: var(--primitive-purple-300);
-  --brand-categorical-4-400: var(--primitive-purple-400);
-  --brand-categorical-4-500: var(--primitive-purple-500);
-  --brand-categorical-4-600: var(--primitive-purple-600);
-  --brand-categorical-5-100: var(--primitive-orange-100);
-  --brand-categorical-5-200: var(--primitive-orange-200);
-  --brand-categorical-5-300: var(--primitive-orange-300);
-  --brand-categorical-5-400: var(--primitive-orange-400);
-  --brand-categorical-5-500: var(--primitive-orange-500);
-  --brand-categorical-5-600: var(--primitive-orange-600);
-  --brand-categorical-6-100: var(--primitive-teal-100);
-  --brand-categorical-6-200: var(--primitive-teal-200);
-  --brand-categorical-6-300: var(--primitive-teal-300);
-  --brand-categorical-6-400: var(--primitive-teal-400);
-  --brand-categorical-6-500: var(--primitive-teal-500);
-  --brand-categorical-6-600: var(--primitive-teal-600);
-  --brand-categorical-7-100: var(--primitive-yellow-100);
-  --brand-categorical-7-200: var(--primitive-yellow-200);
-  --brand-categorical-7-300: var(--primitive-yellow-300);
-  --brand-categorical-7-400: var(--primitive-yellow-400);
-  --brand-categorical-7-500: var(--primitive-yellow-500);
-  --brand-categorical-7-600: var(--primitive-yellow-600);
-  --brand-categorical-8-100: var(--primitive-pink-100);
-  --brand-categorical-8-200: var(--primitive-pink-200);
-  --brand-categorical-8-300: var(--primitive-pink-300);
-  --brand-categorical-8-400: var(--primitive-pink-400);
-  --brand-categorical-8-500: var(--primitive-pink-500);
-  --brand-categorical-8-600: var(--primitive-pink-600);
+  --brand-primary-50: #F1F4FD;
+  --brand-primary-100: #DFE7FA;
+  --brand-primary-200: #C5D4F8;
+  --brand-primary-300: #9EB8F2;
+  --brand-primary-400: #7093EA;
+  --brand-primary-500: #4D6DE3;
+  --brand-primary-600: #3950D7;
+  --brand-primary-700: #303EC5;
+  --brand-primary-800: #2D35A0;
+  --brand-primary-900: #29317F;
+  --brand-secondary-50: #EDF8FF;
+  --brand-secondary-100: #D7EDFF;
+  --brand-secondary-200: #B9E1FF;
+  --brand-secondary-300: #88D0FF;
+  --brand-secondary-400: #50B5FF;
+  --brand-secondary-500: #2893FF;
+  --brand-secondary-600: #1677FF;
+  --brand-secondary-700: #0A5CEB;
+  --brand-secondary-800: #0F4ABE;
+  --brand-secondary-900: #134295;
+  --brand-neutral-50: #FAFAFA;
+  --brand-neutral-100: #F5F5F5;
+  --brand-neutral-200: #E5E5E5;
+  --brand-neutral-300: #D4D4D4;
+  --brand-neutral-400: #A1A1A1;
+  --brand-neutral-500: #737373;
+  --brand-neutral-600: #525252;
+  --brand-neutral-700: #404040;
+  --brand-neutral-800: #2F2F2F;
+  --brand-neutral-900: #212121;
+  --brand-base-white: #FFFFFF;
+  --brand-base-overlay-5: rgba(0, 0, 0, 0.05);
+  --brand-base-overlay-10: rgba(0, 0, 0, 0.10);
+  --brand-base-overlay-25: rgba(0, 0, 0, 0.25);
+  --brand-base-overlay-50: rgba(0, 0, 0, 0.50);
+  --brand-base-overlay-75: rgba(0, 0, 0, 0.75);
+  --brand-base-overlay-85: rgba(0, 0, 0, 0.85);
+  --brand-categorical-1-100: #FFDDDE;
+  --brand-categorical-1-200: #FFC1C2;
+  --brand-categorical-1-300: #FF9698;
+  --brand-categorical-1-400: #FF5A5D;
+  --brand-categorical-1-500: #FF272B;
+  --brand-categorical-1-600: #F80409;
+  --brand-categorical-2-100: #C1E7CC;
+  --brand-categorical-2-200: #98D8AC;
+  --brand-categorical-2-300: #6CCA8B;
+  --brand-categorical-2-400: #47BE72;
+  --brand-categorical-2-500: #10B259;
+  --brand-categorical-2-600: #00A34F;
+  --brand-categorical-3-100: #DFE7FA;
+  --brand-categorical-3-200: #C5D4F8;
+  --brand-categorical-3-300: #9EB8F2;
+  --brand-categorical-3-400: #7093EA;
+  --brand-categorical-3-500: #4D6DE3;
+  --brand-categorical-3-600: #3950D7;
+  --brand-categorical-4-100: #F5EAFD;
+  --brand-categorical-4-200: #EDD8FC;
+  --brand-categorical-4-300: #E0BAF8;
+  --brand-categorical-4-400: #CD8DF3;
+  --brand-categorical-4-500: #B961EB;
+  --brand-categorical-4-600: #A541DC;
+  --brand-categorical-5-100: #FFE0B2;
+  --brand-categorical-5-200: #FFCC80;
+  --brand-categorical-5-300: #FFB74D;
+  --brand-categorical-5-400: #FFA726;
+  --brand-categorical-5-500: #FF9800;
+  --brand-categorical-5-600: #FB8C00;
+  --brand-categorical-6-100: #B2DFDB;
+  --brand-categorical-6-200: #80CBC4;
+  --brand-categorical-6-300: #4DB6AC;
+  --brand-categorical-6-400: #26A69A;
+  --brand-categorical-6-500: #009688;
+  --brand-categorical-6-600: #00897B;
+  --brand-categorical-7-100: #FFF9C4;
+  --brand-categorical-7-200: #FFF6A9;
+  --brand-categorical-7-300: #FFF280;
+  --brand-categorical-7-400: #FFEE54;
+  --brand-categorical-7-500: #FFE60C;
+  --brand-categorical-7-600: #FDD835;
+  --brand-categorical-8-100: #FFE7FD;
+  --brand-categorical-8-200: #FFCFFA;
+  --brand-categorical-8-300: #FEA9F1;
+  --brand-categorical-8-400: #FD75E7;
+  --brand-categorical-8-500: #F553DA;
+  --brand-categorical-8-600: #D821B6;
 }
 :root {
-  --system-success-50: var(--primitive-green-50);
-  --system-success-100: var(--primitive-green-100);
-  --system-success-200: var(--primitive-green-200);
-  --system-success-300: var(--primitive-green-300);
-  --system-success-400: var(--primitive-green-400);
-  --system-success-500: var(--primitive-green-500);
-  --system-success-600: var(--primitive-green-600);
-  --system-success-700: var(--primitive-green-700);
-  --system-success-800: var(--primitive-green-800);
-  --system-success-900: var(--primitive-green-900);
-  --system-error-50: var(--primitive-red-50);
-  --system-error-100: var(--primitive-red-100);
-  --system-error-200: var(--primitive-red-200);
-  --system-error-300: var(--primitive-red-300);
-  --system-error-400: var(--primitive-red-400);
-  --system-error-500: var(--primitive-red-500);
-  --system-error-600: var(--primitive-red-600);
-  --system-error-700: var(--primitive-red-700);
-  --system-error-800: var(--primitive-red-800);
-  --system-error-900: var(--primitive-red-900);
-  --system-warning-50: var(--primitive-yellow-50);
-  --system-warning-100: var(--primitive-yellow-100);
-  --system-warning-200: var(--primitive-yellow-200);
-  --system-warning-300: var(--primitive-yellow-300);
-  --system-warning-400: var(--primitive-yellow-400);
-  --system-warning-500: var(--primitive-yellow-500);
-  --system-warning-600: var(--primitive-yellow-600);
-  --system-warning-700: var(--primitive-yellow-700);
-  --system-warning-800: var(--primitive-yellow-800);
-  --system-warning-900: var(--primitive-yellow-900);
-  --system-info-50: var(--primitive-blue-50);
-  --system-info-100: var(--primitive-blue-100);
-  --system-info-200: var(--primitive-blue-200);
-  --system-info-300: var(--primitive-blue-300);
-  --system-info-400: var(--primitive-blue-400);
-  --system-info-500: var(--primitive-blue-500);
-  --system-info-600: var(--primitive-blue-600);
-  --system-info-700: var(--primitive-blue-700);
-  --system-info-800: var(--primitive-blue-800);
-  --system-info-900: var(--primitive-blue-900);
-  --system-link-400: var(--primitive-deep-purple-400);
-  --system-link-500: var(--primitive-deep-purple-500);
-  --system-link-600: var(--primitive-deep-purple-600);
-  --system-link-700: var(--primitive-deep-purple-700);
+  --system-success-50: #E5F6EA;
+  --system-success-100: #C1E7CC;
+  --system-success-200: #98D8AC;
+  --system-success-300: #6CCA8B;
+  --system-success-400: #47BE72;
+  --system-success-500: #10B259;
+  --system-success-600: #00A34F;
+  --system-success-700: #009143;
+  --system-success-800: #007F38;
+  --system-success-900: #006024;
+  --system-error-50: #FFF0F0;
+  --system-error-100: #FFDDDE;
+  --system-error-200: #FFC1C2;
+  --system-error-300: #FF9698;
+  --system-error-400: #FF5A5D;
+  --system-error-500: #FF272B;
+  --system-error-600: #F80409;
+  --system-error-700: #D40105;
+  --system-error-800: #AE0609;
+  --system-error-900: #900C0F;
+  --system-warning-50: #FFFDE7;
+  --system-warning-100: #FFF9C4;
+  --system-warning-200: #FFF6A9;
+  --system-warning-300: #FFF280;
+  --system-warning-400: #FFEE54;
+  --system-warning-500: #FFE60C;
+  --system-warning-600: #FDD835;
+  --system-warning-700: #FBC02D;
+  --system-warning-800: #F9A825;
+  --system-warning-900: #F57F17;
+  --system-info-50: #F1F4FD;
+  --system-info-100: #DFE7FA;
+  --system-info-200: #C5D4F8;
+  --system-info-300: #9EB8F2;
+  --system-info-400: #7093EA;
+  --system-info-500: #4D6DE3;
+  --system-info-600: #3950D7;
+  --system-info-700: #303EC5;
+  --system-info-800: #2D35A0;
+  --system-info-900: #29317F;
+  --system-link-400: #7E57C2;
+  --system-link-500: #673AB7;
+  --system-link-600: #5E35B1;
+  --system-link-700: #4621A0;
 }
 :root {
-  --semantic-text-strong: var(--brand-neutral-900);
-  --semantic-text-subtle: var(--brand-neutral-700);
-  --semantic-text-muted: var(--brand-neutral-500);
-  --semantic-text-brand: var(--brand-primary-700);
-  --semantic-text-brand-secondary: var(--brand-secondary-700);
+  --semantic-text-primary: var(--brand-neutral-900);
+  --semantic-text-secondary: var(--brand-neutral-700);
+  --semantic-text-tertiary: var(--brand-neutral-400);
+  --semantic-text-brand-primary: var(--brand-primary-600);
+  --semantic-text-brand-secondary: var(--brand-secondary-600);
   --semantic-text-disabled: var(--brand-neutral-400);
   --semantic-text-inverse: var(--brand-base-white);
   --semantic-text-success: var(--system-success-700);
@@ -481,12 +218,12 @@
   --semantic-text-warning: var(--system-warning-700);
   --semantic-text-info: var(--system-info-700);
   --semantic-text-link: var(--system-link-700);
-  --semantic-text-sunday: var(--system-error-500);
-  --semantic-text-saturday: var(--system-info-500);
-  --semantic-surface-neutral-default: var(--brand-base-white);
-  --semantic-surface-neutral-subtle: var(--brand-neutral-50);
-  --semantic-surface-neutral-strong: var(--brand-neutral-300);
-  --semantic-surface-neutral-overlay: var(--brand-base-black-alpha-25);
+  --semantic-text-accent-red: var(--system-error-500);
+  --semantic-text-accent-blue: var(--system-info-500);
+  --semantic-surface-neutral-primary: var(--brand-base-white);
+  --semantic-surface-neutral-secondary: var(--brand-neutral-50);
+  --semantic-surface-neutral-tertiary: var(--brand-neutral-300);
+  --semantic-surface-neutral-inverse: var(--brand-neutral-900);
   --semantic-surface-neutral-disabled: var(--brand-neutral-200);
   --semantic-surface-brand-subtle: var(--brand-primary-50);
   --semantic-surface-brand-default: var(--brand-primary-600);
@@ -506,18 +243,18 @@
   --semantic-surface-info-subtle: var(--system-info-50);
   --semantic-surface-info-default: var(--system-info-600);
   --semantic-surface-info-strong: var(--system-info-700);
-  --semantic-border-default: var(--brand-neutral-200);
-  --semantic-border-subtle: var(--brand-neutral-100);
-  --semantic-border-strong: var(--brand-neutral-400);
+  --semantic-border-primary: var(--brand-neutral-200);
+  --semantic-border-secondary: var(--brand-neutral-100);
+  --semantic-border-tertiary: var(--brand-neutral-400);
   --semantic-border-disabled: var(--brand-neutral-300);
-  --semantic-border-brand: var(--brand-primary-600);
+  --semantic-border-brand-primary: var(--brand-primary-400);
   --semantic-border-brand-secondary: var(--brand-secondary-600);
   --semantic-border-success: var(--system-success-300);
   --semantic-border-error: var(--system-error-300);
   --semantic-border-warning: var(--system-warning-300);
   --semantic-border-info: var(--system-info-300);
-  --semantic-icon-strong: var(--brand-neutral-700);
-  --semantic-icon-subtle: var(--brand-neutral-500);
+  --semantic-icon-primary: var(--brand-neutral-700);
+  --semantic-icon-secondary: var(--brand-neutral-500);
   --semantic-icon-inverse: var(--brand-base-white);
   --semantic-icon-brand: var(--brand-primary-600);
   --semantic-icon-brand-secondary: var(--brand-secondary-600);
@@ -526,14 +263,11 @@
   --semantic-icon-warning: var(--system-warning-600);
   --semantic-icon-info: var(--system-info-600);
   --semantic-icon-disabled: var(--brand-neutral-300);
-  --semantic-emphasis-brand: var(--brand-primary-800);
-  --semantic-emphasis-brand-secondary: var(--brand-secondary-800);
-  --semantic-emphasis-success: var(--system-success-800);
-  --semantic-emphasis-error: var(--system-error-800);
-  --semantic-emphasis-warning: var(--system-warning-800);
-  --semantic-emphasis-info: var(--system-info-800);
-  --semantic-interaction-overlay-10: var(--brand-base-black-alpha-10);
-  --semantic-interaction-overlay-25: var(--brand-base-black-alpha-25);
+  --semantic-interaction-overlay-5: var(--brand-base-overlay-5);
+  --semantic-interaction-overlay-10: var(--brand-base-overlay-10);
+  --semantic-interaction-overlay-25: var(--brand-base-overlay-25);
+  --semantic-interaction-overlay-50: var(--brand-base-overlay-50);
+  --semantic-interaction-overlay-75: var(--brand-base-overlay-75);
   --semantic-interaction-focus-ring: var(--brand-primary-700);
 }
 :root {
@@ -571,16 +305,12 @@
   --semantic-categorical-8-text: var(--brand-categorical-8-600);
 }
 :root {
-  --typo-font-family-sans:
+  --typo-font-family-default:
     Pretendard,
     -apple-system,
     sans-serif;
-  --typo-font-family-serif:
-    Noto Serif KR,
-    Georgia,
-    serif;
-  --typo-font-family-suit:
-    SUIT,
+  --typo-font-family-brand:
+    Pretendard,
     -apple-system,
     sans-serif;
   --typo-weight-regular: 400;
@@ -593,96 +323,27 @@
   --typo-size-title-2: 24px;
   --typo-size-heading-1: 20px;
   --typo-size-heading-2: 18px;
-  --typo-size-compact-body-1: 17px;
-  --typo-size-compact-body-2: 15px;
-  --typo-size-compact-label-1: 14px;
-  --typo-size-compact-label-2: 12px;
-  --typo-size-compact-caption-1: 11px;
-  --typo-size-compact-caption-2: 11px;
-  --typo-size-default-body-1: 18px;
-  --typo-size-default-body-2: 17px;
-  --typo-size-default-label-1: 16px;
-  --typo-size-default-label-2: 14px;
-  --typo-size-default-caption-1: 13px;
-  --typo-size-default-caption-2: 12px;
-  --typo-size-airy-body-1: 20px;
-  --typo-size-airy-body-2: 19px;
-  --typo-size-airy-label-1: 18px;
-  --typo-size-airy-label-2: 16px;
-  --typo-size-airy-caption-1: 14px;
-  --typo-size-airy-caption-2: 13px;
+  --typo-size-body-1: 18px;
+  --typo-size-body-2: 17px;
+  --typo-size-label-1: 16px;
+  --typo-size-label-2: 14px;
+  --typo-size-caption-1: 13px;
+  --typo-size-caption-2: 12px;
   --typo-lh-display-1: 62px;
   --typo-lh-display-2: 48px;
   --typo-lh-title-1: 38px;
   --typo-lh-title-2: 34px;
-  --typo-lh-compact-heading-1: 26px;
-  --typo-lh-compact-heading-2: 24px;
-  --typo-lh-compact-body-1: 24px;
-  --typo-lh-compact-body-2: 22px;
-  --typo-lh-compact-label-1: 20px;
-  --typo-lh-compact-label-2: 18px;
-  --typo-lh-compact-caption-1: 16px;
-  --typo-lh-compact-caption-2: 16px;
-  --typo-lh-default-heading-1: 30px;
-  --typo-lh-default-heading-2: 28px;
-  --typo-lh-default-body-1: 26px;
-  --typo-lh-default-body-2: 24px;
-  --typo-lh-default-label-1: 24px;
-  --typo-lh-default-label-2: 22px;
-  --typo-lh-default-caption-1: 18px;
-  --typo-lh-default-caption-2: 18px;
-  --typo-lh-airy-heading-1: 34px;
-  --typo-lh-airy-heading-2: 32px;
-  --typo-lh-airy-body-1: 30px;
-  --typo-lh-airy-body-2: 28px;
-  --typo-lh-airy-label-1: 28px;
-  --typo-lh-airy-label-2: 26px;
-  --typo-lh-airy-caption-1: 22px;
-  --typo-lh-airy-caption-2: 20px;
+  --typo-lh-heading-1: 30px;
+  --typo-lh-heading-2: 28px;
+  --typo-lh-body-1: 26px;
+  --typo-lh-body-2: 24px;
+  --typo-lh-label-1: 24px;
+  --typo-lh-label-2: 22px;
+  --typo-lh-caption-1: 18px;
+  --typo-lh-caption-2: 18px;
   --typo-ls-tight: -0.02em;
   --typo-ls-normal: 0;
   --typo-ls-wide: 0.02em;
-  --typo-brand-font-family-font: var(--typo-font-family-sans);
-  --typo-brand-size-display-1: var(--typo-size-display-1);
-  --typo-brand-size-display-2: var(--typo-size-display-2);
-  --typo-brand-size-title-1: var(--typo-size-title-1);
-  --typo-brand-size-title-2: var(--typo-size-title-2);
-  --typo-brand-size-heading-1: var(--typo-size-heading-1);
-  --typo-brand-size-heading-2: var(--typo-size-heading-2);
-  --typo-brand-size-body-1: var(--typo-size-default-body-1);
-  --typo-brand-size-body-2: var(--typo-size-default-body-2);
-  --typo-brand-size-label-1: var(--typo-size-default-label-1);
-  --typo-brand-size-label-2: var(--typo-size-default-label-2);
-  --typo-brand-size-caption-1: var(--typo-size-default-caption-1);
-  --typo-brand-size-caption-2: var(--typo-size-default-caption-2);
-  --typo-brand-line-height-display-1: var(--typo-lh-display-1);
-  --typo-brand-line-height-display-2: var(--typo-lh-display-2);
-  --typo-brand-line-height-title-1: var(--typo-lh-title-1);
-  --typo-brand-line-height-title-2: var(--typo-lh-title-2);
-  --typo-brand-line-height-heading-1: var(--typo-lh-default-heading-1);
-  --typo-brand-line-height-heading-2: var(--typo-lh-default-heading-2);
-  --typo-brand-line-height-body-1: var(--typo-lh-default-body-1);
-  --typo-brand-line-height-body-2: var(--typo-lh-default-body-2);
-  --typo-brand-line-height-label-1: var(--typo-lh-default-label-1);
-  --typo-brand-line-height-label-2: var(--typo-lh-default-label-2);
-  --typo-brand-line-height-caption-1: var(--typo-lh-default-caption-1);
-  --typo-brand-line-height-caption-2: var(--typo-lh-default-caption-2);
-  --typo-brand-weight-regular: var(--typo-weight-regular);
-  --typo-brand-weight-medium: var(--typo-weight-medium);
-  --typo-brand-weight-semibold: var(--typo-weight-semibold);
-  --typo-brand-weight-bold: var(--typo-weight-bold);
-  --typo-brand-letter-spacing-display-1: var(--typo-ls-tight);
-  --typo-brand-letter-spacing-display-2: var(--typo-ls-tight);
-  --typo-brand-letter-spacing-title-1: var(--typo-ls-tight);
-  --typo-brand-letter-spacing-title-2: var(--typo-ls-tight);
-  --typo-brand-letter-spacing-heading-1: var(--typo-ls-tight);
-  --typo-brand-letter-spacing-heading-2: var(--typo-ls-tight);
-  --typo-brand-letter-spacing-body-1: var(--typo-ls-normal);
-  --typo-brand-letter-spacing-body-2: var(--typo-ls-normal);
-  --typo-brand-letter-spacing-label-1: var(--typo-ls-normal);
-  --typo-brand-letter-spacing-label-2: var(--typo-ls-wide);
-  --typo-brand-letter-spacing-caption-1: var(--typo-ls-wide);
-  --typo-brand-letter-spacing-caption-2: var(--typo-ls-wide);
 }
 @media (min-width: 768px) and (max-width: 1024px) {
   :root {
@@ -692,52 +353,24 @@
     --typo-size-title-2: 22px;
     --typo-size-heading-1: 19px;
     --typo-size-heading-2: 17px;
-    --typo-size-compact-body-1: 16px;
-    --typo-size-compact-body-2: 15px;
-    --typo-size-compact-label-1: 14px;
-    --typo-size-compact-label-2: 12px;
-    --typo-size-compact-caption-1: 11px;
-    --typo-size-compact-caption-2: 11px;
-    --typo-size-default-body-1: 17px;
-    --typo-size-default-body-2: 16px;
-    --typo-size-default-label-1: 16px;
-    --typo-size-default-label-2: 14px;
-    --typo-size-default-caption-1: 13px;
-    --typo-size-default-caption-2: 12px;
-    --typo-size-airy-body-1: 19px;
-    --typo-size-airy-body-2: 17px;
-    --typo-size-airy-label-1: 17px;
-    --typo-size-airy-label-2: 15px;
-    --typo-size-airy-caption-1: 14px;
-    --typo-size-airy-caption-2: 13px;
+    --typo-size-body-1: 17px;
+    --typo-size-body-2: 16px;
+    --typo-size-label-1: 15px;
+    --typo-size-label-2: 14px;
+    --typo-size-caption-1: 13px;
+    --typo-size-caption-2: 12px;
     --typo-lh-display-1: 52px;
     --typo-lh-display-2: 42px;
     --typo-lh-title-1: 36px;
     --typo-lh-title-2: 32px;
-    --typo-lh-compact-heading-1: 24px;
-    --typo-lh-compact-heading-2: 22px;
-    --typo-lh-compact-body-1: 24px;
-    --typo-lh-compact-body-2: 22px;
-    --typo-lh-compact-label-1: 20px;
-    --typo-lh-compact-label-2: 18px;
-    --typo-lh-compact-caption-1: 16px;
-    --typo-lh-compact-caption-2: 16px;
-    --typo-lh-default-heading-1: 28px;
-    --typo-lh-default-heading-2: 26px;
-    --typo-lh-default-body-1: 26px;
-    --typo-lh-default-body-2: 24px;
-    --typo-lh-default-label-1: 24px;
-    --typo-lh-default-label-2: 22px;
-    --typo-lh-default-caption-1: 18px;
-    --typo-lh-default-caption-2: 18px;
-    --typo-lh-airy-heading-1: 32px;
-    --typo-lh-airy-heading-2: 28px;
-    --typo-lh-airy-body-1: 30px;
-    --typo-lh-airy-body-2: 28px;
-    --typo-lh-airy-label-1: 28px;
-    --typo-lh-airy-label-2: 26px;
-    --typo-lh-airy-caption-1: 22px;
-    --typo-lh-airy-caption-2: 20px;
+    --typo-lh-heading-1: 28px;
+    --typo-lh-heading-2: 26px;
+    --typo-lh-body-1: 26px;
+    --typo-lh-body-2: 24px;
+    --typo-lh-label-1: 24px;
+    --typo-lh-label-2: 22px;
+    --typo-lh-caption-1: 18px;
+    --typo-lh-caption-2: 18px;
     --typo-ls-tight: -0.02em;
     --typo-ls-normal: 0;
     --typo-ls-wide: 0.02em;
@@ -751,173 +384,145 @@
     --typo-size-title-2: 20px;
     --typo-size-heading-1: 18px;
     --typo-size-heading-2: 17px;
-    --typo-size-compact-body-1: 16px;
-    --typo-size-compact-body-2: 13px;
-    --typo-size-compact-label-1: 14px;
-    --typo-size-compact-label-2: 12px;
-    --typo-size-compact-caption-1: 11px;
-    --typo-size-compact-caption-2: 11px;
-    --typo-size-default-body-1: 17px;
-    --typo-size-default-body-2: 14px;
-    --typo-size-default-label-1: 16px;
-    --typo-size-default-label-2: 14px;
-    --typo-size-default-caption-1: 13px;
-    --typo-size-default-caption-2: 12px;
-    --typo-size-airy-body-1: 19px;
-    --typo-size-airy-body-2: 16px;
-    --typo-size-airy-label-1: 16px;
-    --typo-size-airy-label-2: 14px;
-    --typo-size-airy-caption-1: 14px;
-    --typo-size-airy-caption-2: 13px;
+    --typo-size-body-1: 17px;
+    --typo-size-body-2: 16px;
+    --typo-size-label-1: 15px;
+    --typo-size-label-2: 14px;
+    --typo-size-caption-1: 13px;
+    --typo-size-caption-2: 12px;
     --typo-lh-display-1: 42px;
     --typo-lh-display-2: 38px;
     --typo-lh-title-1: 34px;
     --typo-lh-title-2: 30px;
-    --typo-lh-compact-heading-1: 24px;
-    --typo-lh-compact-heading-2: 22px;
-    --typo-lh-compact-body-1: 24px;
-    --typo-lh-compact-body-2: 22px;
-    --typo-lh-compact-label-1: 20px;
-    --typo-lh-compact-label-2: 18px;
-    --typo-lh-compact-caption-1: 16px;
-    --typo-lh-compact-caption-2: 16px;
-    --typo-lh-default-heading-1: 28px;
-    --typo-lh-default-heading-2: 26px;
-    --typo-lh-default-body-1: 26px;
-    --typo-lh-default-body-2: 24px;
-    --typo-lh-default-label-1: 24px;
-    --typo-lh-default-label-2: 22px;
-    --typo-lh-default-caption-1: 18px;
-    --typo-lh-default-caption-2: 18px;
-    --typo-lh-airy-heading-1: 32px;
-    --typo-lh-airy-heading-2: 28px;
-    --typo-lh-airy-body-1: 30px;
-    --typo-lh-airy-body-2: 28px;
-    --typo-lh-airy-label-1: 28px;
-    --typo-lh-airy-label-2: 26px;
-    --typo-lh-airy-caption-1: 22px;
-    --typo-lh-airy-caption-2: 20px;
+    --typo-lh-heading-1: 28px;
+    --typo-lh-heading-2: 26px;
+    --typo-lh-body-1: 26px;
+    --typo-lh-body-2: 24px;
+    --typo-lh-label-1: 24px;
+    --typo-lh-label-2: 22px;
+    --typo-lh-caption-1: 18px;
+    --typo-lh-caption-2: 18px;
     --typo-ls-tight: -0.01em;
     --typo-ls-normal: 0;
     --typo-ls-wide: 0.02em;
   }
 }
 :root {
-  --semantic-typo-display-1-b-font: var(--typo-brand-font-family-font);
-  --semantic-typo-display-1-b-size: var(--typo-brand-size-display-1);
-  --semantic-typo-display-1-b-lh: var(--typo-brand-line-height-display-1);
-  --semantic-typo-display-1-b-weight: var(--typo-brand-weight-bold);
-  --semantic-typo-display-1-b-ls: var(--typo-brand-letter-spacing-display-1);
-  --semantic-typo-display-1-sb-font: var(--typo-brand-font-family-font);
-  --semantic-typo-display-1-sb-size: var(--typo-brand-size-display-1);
-  --semantic-typo-display-1-sb-lh: var(--typo-brand-line-height-display-1);
-  --semantic-typo-display-1-sb-weight: var(--typo-brand-weight-semibold);
-  --semantic-typo-display-1-sb-ls: var(--typo-brand-letter-spacing-display-1);
-  --semantic-typo-display-2-b-font: var(--typo-brand-font-family-font);
-  --semantic-typo-display-2-b-size: var(--typo-brand-size-display-2);
-  --semantic-typo-display-2-b-lh: var(--typo-brand-line-height-display-2);
-  --semantic-typo-display-2-b-weight: var(--typo-brand-weight-bold);
-  --semantic-typo-display-2-b-ls: var(--typo-brand-letter-spacing-display-2);
-  --semantic-typo-display-2-sb-font: var(--typo-brand-font-family-font);
-  --semantic-typo-display-2-sb-size: var(--typo-brand-size-display-2);
-  --semantic-typo-display-2-sb-lh: var(--typo-brand-line-height-display-2);
-  --semantic-typo-display-2-sb-weight: var(--typo-brand-weight-semibold);
-  --semantic-typo-display-2-sb-ls: var(--typo-brand-letter-spacing-display-2);
-  --semantic-typo-title-1-sb-font: var(--typo-brand-font-family-font);
-  --semantic-typo-title-1-sb-size: var(--typo-brand-size-title-1);
-  --semantic-typo-title-1-sb-lh: var(--typo-brand-line-height-title-1);
-  --semantic-typo-title-1-sb-weight: var(--typo-brand-weight-semibold);
-  --semantic-typo-title-1-sb-ls: var(--typo-brand-letter-spacing-title-1);
-  --semantic-typo-title-1-m-font: var(--typo-brand-font-family-font);
-  --semantic-typo-title-1-m-size: var(--typo-brand-size-title-1);
-  --semantic-typo-title-1-m-lh: var(--typo-brand-line-height-title-1);
-  --semantic-typo-title-1-m-weight: var(--typo-brand-weight-medium);
-  --semantic-typo-title-1-m-ls: var(--typo-brand-letter-spacing-title-1);
-  --semantic-typo-title-2-sb-font: var(--typo-brand-font-family-font);
-  --semantic-typo-title-2-sb-size: var(--typo-brand-size-title-2);
-  --semantic-typo-title-2-sb-lh: var(--typo-brand-line-height-title-2);
-  --semantic-typo-title-2-sb-weight: var(--typo-brand-weight-semibold);
-  --semantic-typo-title-2-sb-ls: var(--typo-brand-letter-spacing-title-2);
-  --semantic-typo-title-2-m-font: var(--typo-brand-font-family-font);
-  --semantic-typo-title-2-m-size: var(--typo-brand-size-title-2);
-  --semantic-typo-title-2-m-lh: var(--typo-brand-line-height-title-2);
-  --semantic-typo-title-2-m-weight: var(--typo-brand-weight-medium);
-  --semantic-typo-title-2-m-ls: var(--typo-brand-letter-spacing-title-2);
-  --semantic-typo-heading-1-sb-font: var(--typo-brand-font-family-font);
-  --semantic-typo-heading-1-sb-size: var(--typo-brand-size-heading-1);
-  --semantic-typo-heading-1-sb-lh: var(--typo-brand-line-height-heading-1);
-  --semantic-typo-heading-1-sb-weight: var(--typo-brand-weight-semibold);
-  --semantic-typo-heading-1-sb-ls: var(--typo-brand-letter-spacing-heading-1);
-  --semantic-typo-heading-1-m-font: var(--typo-brand-font-family-font);
-  --semantic-typo-heading-1-m-size: var(--typo-brand-size-heading-1);
-  --semantic-typo-heading-1-m-lh: var(--typo-brand-line-height-heading-1);
-  --semantic-typo-heading-1-m-weight: var(--typo-brand-weight-medium);
-  --semantic-typo-heading-1-m-ls: var(--typo-brand-letter-spacing-heading-1);
-  --semantic-typo-heading-2-m-font: var(--typo-brand-font-family-font);
-  --semantic-typo-heading-2-m-size: var(--typo-brand-size-heading-2);
-  --semantic-typo-heading-2-m-lh: var(--typo-brand-line-height-heading-2);
-  --semantic-typo-heading-2-m-weight: var(--typo-brand-weight-medium);
-  --semantic-typo-heading-2-m-ls: var(--typo-brand-letter-spacing-heading-2);
-  --semantic-typo-body-1-sb-font: var(--typo-brand-font-family-font);
-  --semantic-typo-body-1-sb-size: var(--typo-brand-size-body-1);
-  --semantic-typo-body-1-sb-lh: var(--typo-brand-line-height-body-1);
-  --semantic-typo-body-1-sb-weight: var(--typo-brand-weight-semibold);
-  --semantic-typo-body-1-sb-ls: var(--typo-brand-letter-spacing-body-1);
-  --semantic-typo-body-1-m-font: var(--typo-brand-font-family-font);
-  --semantic-typo-body-1-m-size: var(--typo-brand-size-body-1);
-  --semantic-typo-body-1-m-lh: var(--typo-brand-line-height-body-1);
-  --semantic-typo-body-1-m-weight: var(--typo-brand-weight-medium);
-  --semantic-typo-body-1-m-ls: var(--typo-brand-letter-spacing-body-1);
-  --semantic-typo-body-1-r-font: var(--typo-brand-font-family-font);
-  --semantic-typo-body-1-r-size: var(--typo-brand-size-body-1);
-  --semantic-typo-body-1-r-lh: var(--typo-brand-line-height-body-1);
-  --semantic-typo-body-1-r-weight: var(--typo-brand-weight-regular);
-  --semantic-typo-body-1-r-ls: var(--typo-brand-letter-spacing-body-1);
-  --semantic-typo-body-2-m-font: var(--typo-brand-font-family-font);
-  --semantic-typo-body-2-m-size: var(--typo-brand-size-body-2);
-  --semantic-typo-body-2-m-lh: var(--typo-brand-line-height-body-2);
-  --semantic-typo-body-2-m-weight: var(--typo-brand-weight-medium);
-  --semantic-typo-body-2-m-ls: var(--typo-brand-letter-spacing-body-2);
-  --semantic-typo-body-2-r-font: var(--typo-brand-font-family-font);
-  --semantic-typo-body-2-r-size: var(--typo-brand-size-body-2);
-  --semantic-typo-body-2-r-lh: var(--typo-brand-line-height-body-2);
-  --semantic-typo-body-2-r-weight: var(--typo-brand-weight-regular);
-  --semantic-typo-body-2-r-ls: var(--typo-brand-letter-spacing-body-2);
-  --semantic-typo-label-1-sb-font: var(--typo-brand-font-family-font);
-  --semantic-typo-label-1-sb-size: var(--typo-brand-size-label-1);
-  --semantic-typo-label-1-sb-lh: var(--typo-brand-line-height-label-1);
-  --semantic-typo-label-1-sb-weight: var(--typo-brand-weight-semibold);
-  --semantic-typo-label-1-sb-ls: var(--typo-brand-letter-spacing-label-1);
-  --semantic-typo-label-1-m-font: var(--typo-brand-font-family-font);
-  --semantic-typo-label-1-m-size: var(--typo-brand-size-label-1);
-  --semantic-typo-label-1-m-lh: var(--typo-brand-line-height-label-1);
-  --semantic-typo-label-1-m-weight: var(--typo-brand-weight-medium);
-  --semantic-typo-label-1-m-ls: var(--typo-brand-letter-spacing-label-1);
-  --semantic-typo-label-2-sb-font: var(--typo-brand-font-family-font);
-  --semantic-typo-label-2-sb-size: var(--typo-brand-size-label-2);
-  --semantic-typo-label-2-sb-lh: var(--typo-brand-line-height-label-2);
-  --semantic-typo-label-2-sb-weight: var(--typo-brand-weight-semibold);
-  --semantic-typo-label-2-sb-ls: var(--typo-brand-letter-spacing-label-2);
-  --semantic-typo-label-2-m-font: var(--typo-brand-font-family-font);
-  --semantic-typo-label-2-m-size: var(--typo-brand-size-label-2);
-  --semantic-typo-label-2-m-lh: var(--typo-brand-line-height-label-2);
-  --semantic-typo-label-2-m-weight: var(--typo-brand-weight-medium);
-  --semantic-typo-label-2-m-ls: var(--typo-brand-letter-spacing-label-2);
-  --semantic-typo-caption-1-sb-font: var(--typo-brand-font-family-font);
-  --semantic-typo-caption-1-sb-size: var(--typo-brand-size-caption-1);
-  --semantic-typo-caption-1-sb-lh: var(--typo-brand-line-height-caption-1);
-  --semantic-typo-caption-1-sb-weight: var(--typo-brand-weight-semibold);
-  --semantic-typo-caption-1-sb-ls: var(--typo-brand-letter-spacing-caption-1);
-  --semantic-typo-caption-1-r-font: var(--typo-brand-font-family-font);
-  --semantic-typo-caption-1-r-size: var(--typo-brand-size-caption-1);
-  --semantic-typo-caption-1-r-lh: var(--typo-brand-line-height-caption-1);
-  --semantic-typo-caption-1-r-weight: var(--typo-brand-weight-regular);
-  --semantic-typo-caption-1-r-ls: var(--typo-brand-letter-spacing-caption-1);
-  --semantic-typo-caption-2-r-font: var(--typo-brand-font-family-font);
-  --semantic-typo-caption-2-r-size: var(--typo-brand-size-caption-2);
-  --semantic-typo-caption-2-r-lh: var(--typo-brand-line-height-caption-2);
-  --semantic-typo-caption-2-r-weight: var(--typo-brand-weight-regular);
-  --semantic-typo-caption-2-r-ls: var(--typo-brand-letter-spacing-caption-2);
+  --semantic-typo-display-1-b-font: var(--typo-font-family-brand);
+  --semantic-typo-display-1-b-size: var(--typo-size-display-1);
+  --semantic-typo-display-1-b-lh: var(--typo-lh-display-1);
+  --semantic-typo-display-1-b-weight: var(--typo-weight-bold);
+  --semantic-typo-display-1-b-ls: var(--typo-ls-tight);
+  --semantic-typo-display-1-sb-font: var(--typo-font-family-brand);
+  --semantic-typo-display-1-sb-size: var(--typo-size-display-1);
+  --semantic-typo-display-1-sb-lh: var(--typo-lh-display-1);
+  --semantic-typo-display-1-sb-weight: var(--typo-weight-semibold);
+  --semantic-typo-display-1-sb-ls: var(--typo-ls-tight);
+  --semantic-typo-display-2-b-font: var(--typo-font-family-brand);
+  --semantic-typo-display-2-b-size: var(--typo-size-display-2);
+  --semantic-typo-display-2-b-lh: var(--typo-lh-display-2);
+  --semantic-typo-display-2-b-weight: var(--typo-weight-bold);
+  --semantic-typo-display-2-b-ls: var(--typo-ls-tight);
+  --semantic-typo-display-2-sb-font: var(--typo-font-family-brand);
+  --semantic-typo-display-2-sb-size: var(--typo-size-display-2);
+  --semantic-typo-display-2-sb-lh: var(--typo-lh-display-2);
+  --semantic-typo-display-2-sb-weight: var(--typo-weight-semibold);
+  --semantic-typo-display-2-sb-ls: var(--typo-ls-tight);
+  --semantic-typo-title-1-sb-font: var(--typo-font-family-brand);
+  --semantic-typo-title-1-sb-size: var(--typo-size-title-1);
+  --semantic-typo-title-1-sb-lh: var(--typo-lh-title-1);
+  --semantic-typo-title-1-sb-weight: var(--typo-weight-semibold);
+  --semantic-typo-title-1-sb-ls: var(--typo-ls-tight);
+  --semantic-typo-title-1-m-font: var(--typo-font-family-brand);
+  --semantic-typo-title-1-m-size: var(--typo-size-title-1);
+  --semantic-typo-title-1-m-lh: var(--typo-lh-title-1);
+  --semantic-typo-title-1-m-weight: var(--typo-weight-medium);
+  --semantic-typo-title-1-m-ls: var(--typo-ls-tight);
+  --semantic-typo-title-2-sb-font: var(--typo-font-family-brand);
+  --semantic-typo-title-2-sb-size: var(--typo-size-title-2);
+  --semantic-typo-title-2-sb-lh: var(--typo-lh-title-2);
+  --semantic-typo-title-2-sb-weight: var(--typo-weight-semibold);
+  --semantic-typo-title-2-sb-ls: var(--typo-ls-tight);
+  --semantic-typo-title-2-m-font: var(--typo-font-family-brand);
+  --semantic-typo-title-2-m-size: var(--typo-size-title-2);
+  --semantic-typo-title-2-m-lh: var(--typo-lh-title-2);
+  --semantic-typo-title-2-m-weight: var(--typo-weight-medium);
+  --semantic-typo-title-2-m-ls: var(--typo-ls-tight);
+  --semantic-typo-heading-1-sb-font: var(--typo-font-family-default);
+  --semantic-typo-heading-1-sb-size: var(--typo-size-heading-1);
+  --semantic-typo-heading-1-sb-lh: var(--typo-lh-heading-1);
+  --semantic-typo-heading-1-sb-weight: var(--typo-weight-semibold);
+  --semantic-typo-heading-1-sb-ls: var(--typo-ls-tight);
+  --semantic-typo-heading-1-m-font: var(--typo-font-family-default);
+  --semantic-typo-heading-1-m-size: var(--typo-size-heading-1);
+  --semantic-typo-heading-1-m-lh: var(--typo-lh-heading-1);
+  --semantic-typo-heading-1-m-weight: var(--typo-weight-medium);
+  --semantic-typo-heading-1-m-ls: var(--typo-ls-tight);
+  --semantic-typo-heading-2-m-font: var(--typo-font-family-default);
+  --semantic-typo-heading-2-m-size: var(--typo-size-heading-2);
+  --semantic-typo-heading-2-m-lh: var(--typo-lh-heading-2);
+  --semantic-typo-heading-2-m-weight: var(--typo-weight-medium);
+  --semantic-typo-heading-2-m-ls: var(--typo-ls-tight);
+  --semantic-typo-body-1-sb-font: var(--typo-font-family-default);
+  --semantic-typo-body-1-sb-size: var(--typo-size-body-1);
+  --semantic-typo-body-1-sb-lh: var(--typo-lh-body-1);
+  --semantic-typo-body-1-sb-weight: var(--typo-weight-semibold);
+  --semantic-typo-body-1-sb-ls: var(--typo-ls-normal);
+  --semantic-typo-body-1-m-font: var(--typo-font-family-default);
+  --semantic-typo-body-1-m-size: var(--typo-size-body-1);
+  --semantic-typo-body-1-m-lh: var(--typo-lh-body-1);
+  --semantic-typo-body-1-m-weight: var(--typo-weight-medium);
+  --semantic-typo-body-1-m-ls: var(--typo-ls-normal);
+  --semantic-typo-body-1-r-font: var(--typo-font-family-default);
+  --semantic-typo-body-1-r-size: var(--typo-size-body-1);
+  --semantic-typo-body-1-r-lh: var(--typo-lh-body-1);
+  --semantic-typo-body-1-r-weight: var(--typo-weight-regular);
+  --semantic-typo-body-1-r-ls: var(--typo-ls-normal);
+  --semantic-typo-body-2-m-font: var(--typo-font-family-default);
+  --semantic-typo-body-2-m-size: var(--typo-size-body-2);
+  --semantic-typo-body-2-m-lh: var(--typo-lh-body-2);
+  --semantic-typo-body-2-m-weight: var(--typo-weight-medium);
+  --semantic-typo-body-2-m-ls: var(--typo-ls-normal);
+  --semantic-typo-body-2-r-font: var(--typo-font-family-default);
+  --semantic-typo-body-2-r-size: var(--typo-size-body-2);
+  --semantic-typo-body-2-r-lh: var(--typo-lh-body-2);
+  --semantic-typo-body-2-r-weight: var(--typo-weight-regular);
+  --semantic-typo-body-2-r-ls: var(--typo-ls-normal);
+  --semantic-typo-label-1-sb-font: var(--typo-font-family-default);
+  --semantic-typo-label-1-sb-size: var(--typo-size-label-1);
+  --semantic-typo-label-1-sb-lh: var(--typo-lh-label-1);
+  --semantic-typo-label-1-sb-weight: var(--typo-weight-semibold);
+  --semantic-typo-label-1-sb-ls: var(--typo-ls-normal);
+  --semantic-typo-label-1-m-font: var(--typo-font-family-default);
+  --semantic-typo-label-1-m-size: var(--typo-size-label-1);
+  --semantic-typo-label-1-m-lh: var(--typo-lh-label-1);
+  --semantic-typo-label-1-m-weight: var(--typo-weight-medium);
+  --semantic-typo-label-1-m-ls: var(--typo-ls-normal);
+  --semantic-typo-label-2-sb-font: var(--typo-font-family-default);
+  --semantic-typo-label-2-sb-size: var(--typo-size-label-2);
+  --semantic-typo-label-2-sb-lh: var(--typo-lh-label-2);
+  --semantic-typo-label-2-sb-weight: var(--typo-weight-semibold);
+  --semantic-typo-label-2-sb-ls: var(--typo-ls-wide);
+  --semantic-typo-label-2-m-font: var(--typo-font-family-default);
+  --semantic-typo-label-2-m-size: var(--typo-size-label-2);
+  --semantic-typo-label-2-m-lh: var(--typo-lh-label-2);
+  --semantic-typo-label-2-m-weight: var(--typo-weight-medium);
+  --semantic-typo-label-2-m-ls: var(--typo-ls-wide);
+  --semantic-typo-caption-1-sb-font: var(--typo-font-family-default);
+  --semantic-typo-caption-1-sb-size: var(--typo-size-caption-1);
+  --semantic-typo-caption-1-sb-lh: var(--typo-lh-caption-1);
+  --semantic-typo-caption-1-sb-weight: var(--typo-weight-semibold);
+  --semantic-typo-caption-1-sb-ls: var(--typo-ls-wide);
+  --semantic-typo-caption-1-r-font: var(--typo-font-family-default);
+  --semantic-typo-caption-1-r-size: var(--typo-size-caption-1);
+  --semantic-typo-caption-1-r-lh: var(--typo-lh-caption-1);
+  --semantic-typo-caption-1-r-weight: var(--typo-weight-regular);
+  --semantic-typo-caption-1-r-ls: var(--typo-ls-wide);
+  --semantic-typo-caption-2-r-font: var(--typo-font-family-default);
+  --semantic-typo-caption-2-r-size: var(--typo-size-caption-2);
+  --semantic-typo-caption-2-r-lh: var(--typo-lh-caption-2);
+  --semantic-typo-caption-2-r-weight: var(--typo-weight-regular);
+  --semantic-typo-caption-2-r-ls: var(--typo-ls-wide);
 }
 .typo-display-1-b {
   font-family: var(--semantic-typo-display-1-b-font);
@@ -1080,17 +685,17 @@
   font-weight: var(--semantic-typo-caption-2-r-weight);
   letter-spacing: var(--semantic-typo-caption-2-r-ls);
 }
-.semantic-text-strong {
-  --ds-color: var(--semantic-text-strong);
+.semantic-text-primary {
+  --ds-color: var(--semantic-text-primary);
 }
-.semantic-text-subtle {
-  --ds-color: var(--semantic-text-subtle);
+.semantic-text-secondary {
+  --ds-color: var(--semantic-text-secondary);
 }
-.semantic-text-muted {
-  --ds-color: var(--semantic-text-muted);
+.semantic-text-tertiary {
+  --ds-color: var(--semantic-text-tertiary);
 }
-.semantic-text-brand {
-  --ds-color: var(--semantic-text-brand);
+.semantic-text-brand-primary {
+  --ds-color: var(--semantic-text-brand-primary);
 }
 .semantic-text-brand-secondary {
   --ds-color: var(--semantic-text-brand-secondary);
@@ -1116,23 +721,23 @@
 .semantic-text-link {
   --ds-color: var(--semantic-text-link);
 }
-.semantic-text-sunday {
-  --ds-color: var(--semantic-text-sunday);
+.semantic-text-accent-red {
+  --ds-color: var(--semantic-text-accent-red);
 }
-.semantic-text-saturday {
-  --ds-color: var(--semantic-text-saturday);
+.semantic-text-accent-blue {
+  --ds-color: var(--semantic-text-accent-blue);
 }
-.semantic-surface-neutral-default {
-  --ds-color: var(--semantic-surface-neutral-default);
+.semantic-surface-neutral-primary {
+  --ds-color: var(--semantic-surface-neutral-primary);
 }
-.semantic-surface-neutral-subtle {
-  --ds-color: var(--semantic-surface-neutral-subtle);
+.semantic-surface-neutral-secondary {
+  --ds-color: var(--semantic-surface-neutral-secondary);
 }
-.semantic-surface-neutral-strong {
-  --ds-color: var(--semantic-surface-neutral-strong);
+.semantic-surface-neutral-tertiary {
+  --ds-color: var(--semantic-surface-neutral-tertiary);
 }
-.semantic-surface-neutral-overlay {
-  --ds-color: var(--semantic-surface-neutral-overlay);
+.semantic-surface-neutral-inverse {
+  --ds-color: var(--semantic-surface-neutral-inverse);
 }
 .semantic-surface-neutral-disabled {
   --ds-color: var(--semantic-surface-neutral-disabled);
@@ -1191,20 +796,20 @@
 .semantic-surface-info-strong {
   --ds-color: var(--semantic-surface-info-strong);
 }
-.semantic-border-default {
-  --ds-color: var(--semantic-border-default);
+.semantic-border-primary {
+  --ds-color: var(--semantic-border-primary);
 }
-.semantic-border-subtle {
-  --ds-color: var(--semantic-border-subtle);
+.semantic-border-secondary {
+  --ds-color: var(--semantic-border-secondary);
 }
-.semantic-border-strong {
-  --ds-color: var(--semantic-border-strong);
+.semantic-border-tertiary {
+  --ds-color: var(--semantic-border-tertiary);
 }
 .semantic-border-disabled {
   --ds-color: var(--semantic-border-disabled);
 }
-.semantic-border-brand {
-  --ds-color: var(--semantic-border-brand);
+.semantic-border-brand-primary {
+  --ds-color: var(--semantic-border-brand-primary);
 }
 .semantic-border-brand-secondary {
   --ds-color: var(--semantic-border-brand-secondary);
@@ -1221,11 +826,11 @@
 .semantic-border-info {
   --ds-color: var(--semantic-border-info);
 }
-.semantic-icon-strong {
-  --ds-color: var(--semantic-icon-strong);
+.semantic-icon-primary {
+  --ds-color: var(--semantic-icon-primary);
 }
-.semantic-icon-subtle {
-  --ds-color: var(--semantic-icon-subtle);
+.semantic-icon-secondary {
+  --ds-color: var(--semantic-icon-secondary);
 }
 .semantic-icon-inverse {
   --ds-color: var(--semantic-icon-inverse);
@@ -1251,23 +856,8 @@
 .semantic-icon-disabled {
   --ds-color: var(--semantic-icon-disabled);
 }
-.semantic-emphasis-brand {
-  --ds-color: var(--semantic-emphasis-brand);
-}
-.semantic-emphasis-brand-secondary {
-  --ds-color: var(--semantic-emphasis-brand-secondary);
-}
-.semantic-emphasis-success {
-  --ds-color: var(--semantic-emphasis-success);
-}
-.semantic-emphasis-error {
-  --ds-color: var(--semantic-emphasis-error);
-}
-.semantic-emphasis-warning {
-  --ds-color: var(--semantic-emphasis-warning);
-}
-.semantic-emphasis-info {
-  --ds-color: var(--semantic-emphasis-info);
+.semantic-interaction-overlay-5 {
+  --ds-color: var(--semantic-interaction-overlay-5);
 }
 .semantic-interaction-overlay-10 {
   --ds-color: var(--semantic-interaction-overlay-10);
@@ -1275,6 +865,12 @@
 .semantic-interaction-overlay-25 {
   --ds-color: var(--semantic-interaction-overlay-25);
 }
+.semantic-interaction-overlay-50 {
+  --ds-color: var(--semantic-interaction-overlay-50);
+}
+.semantic-interaction-overlay-75 {
+  --ds-color: var(--semantic-interaction-overlay-75);
+}
 .semantic-interaction-focus-ring {
   --ds-color: var(--semantic-interaction-focus-ring);
 }
@@ -1371,11 +967,23 @@
 .brand-base-white {
   --ds-color: var(--brand-base-white);
 }
-.brand-base-black-alpha-10 {
-  --ds-color: var(--brand-base-black-alpha-10);
+.brand-base-overlay-5 {
+  --ds-color: var(--brand-base-overlay-5);
+}
+.brand-base-overlay-10 {
+  --ds-color: var(--brand-base-overlay-10);
+}
+.brand-base-overlay-25 {
+  --ds-color: var(--brand-base-overlay-25);
+}
+.brand-base-overlay-50 {
+  --ds-color: var(--brand-base-overlay-50);
+}
+.brand-base-overlay-75 {
+  --ds-color: var(--brand-base-overlay-75);
 }
-.brand-base-black-alpha-25 {
-  --ds-color: var(--brand-base-black-alpha-25);
+.brand-base-overlay-85 {
+  --ds-color: var(--brand-base-overlay-85);
 }
 .brand-categorical-1-100 {
   --ds-color: var(--brand-categorical-1-100);
@@ -1658,12 +1266,12 @@
 .lib-xplat-accordion {
   contain: content;
   width: 100%;
-  border: 1px solid var(--semantic-border-default);
+  border: 1px solid var(--semantic-border-primary);
   border-radius: var(--spacing-radius-md);
   overflow: hidden;
 }
 .lib-xplat-accordion .accordion-item {
-  border-bottom: 1px solid var(--semantic-border-default);
+  border-bottom: 1px solid var(--semantic-border-primary);
 }
 .lib-xplat-accordion .accordion-item:last-child {
   border-bottom: none;
@@ -1679,12 +1287,12 @@
   cursor: pointer;
   font-size: var(--semantic-typo-caption-1-r-size);
   font-weight: 500;
-  color: var(--semantic-text-strong);
+  color: var(--semantic-text-primary);
   text-align: left;
   transition: background-color 0.2s;
 }
 .lib-xplat-accordion .accordion-header:hover {
-  background-color: var(--semantic-surface-neutral-subtle);
+  background-color: var(--semantic-surface-neutral-secondary);
 }
 .lib-xplat-accordion .accordion-header .chevron {
   width: var(--spacing-space-5);
@@ -1694,7 +1302,7 @@
   align-items: center;
   justify-content: center;
   transition: transform 0.25s ease;
-  color: var(--semantic-text-muted);
+  color: var(--semantic-text-tertiary);
 }
 .lib-xplat-accordion .accordion-body {
   overflow: hidden;
@@ -1704,7 +1312,7 @@
 .lib-xplat-accordion .accordion-content {
   padding: 0 var(--spacing-space-4) 14px;
   font-size: var(--semantic-typo-caption-1-r-size);
-  color: var(--semantic-text-subtle);
+  color: var(--semantic-text-secondary);
   line-height: 1.6;
 }
 .lib-xplat-accordion .accordion-item.open .chevron {
@@ -1810,8 +1418,8 @@
   align-items: center;
   justify-content: center;
   font-weight: 600;
-  background-color: var(--semantic-surface-neutral-subtle);
-  color: var(--semantic-text-muted);
+  background-color: var(--semantic-surface-neutral-secondary);
+  color: var(--semantic-text-tertiary);
 }
 .lib-xplat-avatar .fallback.cat-1 {
   background-color: var(--semantic-categorical-1-bg);
@@ -1906,7 +1514,7 @@
 }
 .lib-xplat-badge .badge-indicator.warning {
   background-color: var(--semantic-surface-warning-default);
-  color: var(--semantic-text-strong);
+  color: var(--semantic-text-primary);
 }
 .lib-xplat-badge .badge-indicator.info {
   background-color: var(--semantic-surface-info-default);
@@ -1925,11 +1533,11 @@
   flex: 1;
   min-width: 0;
   border-radius: var(--spacing-radius-xl);
-  background-color: var(--semantic-surface-neutral-default);
+  background-color: var(--semantic-surface-neutral-primary);
   overflow: hidden;
 }
 .lib-xplat-box.outlined {
-  border: 1px solid var(--semantic-border-default);
+  border: 1px solid var(--semantic-border-primary);
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
 }
 .lib-xplat-box.elevated {
@@ -1938,15 +1546,15 @@
 }
 .lib-xplat-box.flat {
   border: none;
-  background-color: var(--semantic-surface-neutral-subtle);
+  background-color: var(--semantic-surface-neutral-secondary);
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
 }
 .lib-xplat-box > .box-title {
   font-weight: 600;
   font-size: var(--semantic-typo-caption-1-r-size);
-  color: var(--semantic-text-strong);
+  color: var(--semantic-text-primary);
   padding: var(--spacing-space-3) var(--spacing-space-4);
-  border-bottom: 1px solid var(--semantic-border-subtle);
+  border-bottom: 1px solid var(--semantic-border-secondary);
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1991,7 +1599,7 @@
   font-size: var(--semantic-typo-caption-1-r-size);
 }
 .lib-xplat-breadcrumb .link {
-  color: var(--semantic-text-muted);
+  color: var(--semantic-text-tertiary);
   text-decoration: none;
   background: none;
   border: none;
@@ -2001,14 +1609,14 @@
   transition: color 0.2s;
 }
 .lib-xplat-breadcrumb .link:hover {
-  color: var(--semantic-text-strong);
+  color: var(--semantic-text-primary);
 }
 .lib-xplat-breadcrumb .current {
-  color: var(--semantic-text-strong);
+  color: var(--semantic-text-primary);
   font-weight: 500;
 }
 .lib-xplat-breadcrumb .separator {
-  color: var(--semantic-icon-subtle);
+  color: var(--semantic-icon-secondary);
   user-select: none;
 }
 
@@ -2066,14 +1674,14 @@
 }
 .lib-xplat-button.secondary {
   color: var(--semantic-surface-brand-default);
-  background-color: var(--semantic-surface-neutral-default);
-  border-color: var(--semantic-border-default);
+  background-color: var(--semantic-surface-neutral-primary);
+  border-color: var(--semantic-border-primary);
 }
 .lib-xplat-button.secondary:hover:not(:disabled) {
-  background-color: var(--semantic-surface-neutral-subtle);
+  background-color: var(--semantic-surface-neutral-secondary);
 }
 .lib-xplat-button.secondary:active:not(:disabled) {
-  background-color: var(--semantic-surface-neutral-strong);
+  background-color: var(--semantic-surface-neutral-tertiary);
 }
 .lib-xplat-button.secondary:focus-visible {
   outline: 2px solid var(--semantic-interaction-focus-ring);
@@ -2094,12 +1702,12 @@
   outline-offset: 2px;
 }
 .lib-xplat-button.ghost {
-  color: var(--semantic-text-subtle);
+  color: var(--semantic-text-secondary);
   background-color: transparent;
   border-color: transparent;
 }
 .lib-xplat-button.ghost:hover:not(:disabled) {
-  background-color: var(--semantic-surface-neutral-subtle);
+  background-color: var(--semantic-surface-neutral-secondary);
 }
 .lib-xplat-button.ghost:active:not(:disabled) {
   background-color: var(--semantic-surface-neutral-disabled);
@@ -2127,7 +1735,7 @@
 .lib-xplat-calendar .calendar-title {
   font-size: clamp(14px, 3cqi, 20px);
   font-weight: 600;
-  color: var(--semantic-text-strong);
+  color: var(--semantic-text-primary);
   min-width: 120px;
   text-align: center;
   background: none;
@@ -2150,7 +1758,7 @@
   border-radius: var(--spacing-radius-md);
   background: none;
   cursor: pointer;
-  color: var(--semantic-text-subtle);
+  color: var(--semantic-text-secondary);
   transition: background-color 0.15s;
 }
 .lib-xplat-calendar .calendar-nav:hover {
@@ -2162,11 +1770,11 @@
 .lib-xplat-calendar .calendar-today-btn {
   margin-left: auto;
   padding: var(--spacing-space-1) var(--spacing-space-3);
-  border: 1px solid var(--semantic-border-default);
+  border: 1px solid var(--semantic-border-primary);
   border-radius: var(--spacing-radius-md);
   background: none;
   font-size: clamp(12px, 2cqi, 14px);
-  color: var(--semantic-text-subtle);
+  color: var(--semantic-text-secondary);
   cursor: pointer;
   transition: background-color 0.15s;
 }
@@ -2183,13 +1791,13 @@
   font-size: clamp(11px, 2cqi, 14px);
   font-weight: 500;
   padding: var(--spacing-space-2) 0;
-  color: var(--semantic-text-muted);
+  color: var(--semantic-text-tertiary);
 }
 .lib-xplat-calendar .calendar-weekday.sunday {
-  color: var(--semantic-text-sunday);
+  color: var(--semantic-text-accent-red);
 }
 .lib-xplat-calendar .calendar-weekday.saturday {
-  color: var(--semantic-text-saturday);
+  color: var(--semantic-text-accent-blue);
 }
 .lib-xplat-calendar .calendar-grid {
   display: grid;
@@ -2206,7 +1814,7 @@
   transition: background-color 0.15s;
 }
 .lib-xplat-calendar .calendar-day:hover:not(.disabled):not(.outside):not(.selected) {
-  background-color: var(--semantic-surface-neutral-subtle);
+  background-color: var(--semantic-surface-neutral-secondary);
 }
 .lib-xplat-calendar .calendar-day.outside {
   cursor: default;
@@ -2215,10 +1823,10 @@
   color: var(--semantic-text-disabled);
 }
 .lib-xplat-calendar .calendar-day.outside.sunday .calendar-day-number {
-  color: color-mix(in srgb, var(--semantic-text-sunday) 35%, transparent);
+  color: color-mix(in srgb, var(--semantic-text-accent-red) 35%, transparent);
 }
 .lib-xplat-calendar .calendar-day.outside.saturday .calendar-day-number {
-  color: color-mix(in srgb, var(--semantic-text-saturday) 35%, transparent);
+  color: color-mix(in srgb, var(--semantic-text-accent-blue) 35%, transparent);
 }
 .lib-xplat-calendar .calendar-day.disabled {
   cursor: not-allowed;
@@ -2231,24 +1839,24 @@
   color: var(--semantic-surface-brand-default);
 }
 .lib-xplat-calendar .calendar-day.selected {
-  box-shadow: inset 0 0 0 1.5px var(--calendar-selected-color, var(--semantic-text-muted));
+  box-shadow: inset 0 0 0 1.5px var(--calendar-selected-color, var(--semantic-text-tertiary));
 }
 .lib-xplat-calendar .calendar-day.selected .calendar-day-number {
   font-weight: 700;
 }
 .lib-xplat-calendar .calendar-day.selected:hover {
-  background-color: color-mix(in srgb, var(--calendar-selected-color, var(--semantic-text-muted)) 10%, transparent);
+  background-color: color-mix(in srgb, var(--calendar-selected-color, var(--semantic-text-tertiary)) 10%, transparent);
 }
 .lib-xplat-calendar .calendar-day.sunday:not(.outside) .calendar-day-number {
-  color: var(--semantic-text-sunday);
+  color: var(--semantic-text-accent-red);
 }
 .lib-xplat-calendar .calendar-day.saturday:not(.outside) .calendar-day-number {
-  color: var(--semantic-text-saturday);
+  color: var(--semantic-text-accent-blue);
 }
 .lib-xplat-calendar .calendar-day-number {
   font-size: clamp(12px, 2.5cqi, 16px);
   line-height: 1;
-  color: var(--semantic-text-strong);
+  color: var(--semantic-text-primary);
 }
 .lib-xplat-calendar .calendar-day-events {
   display: flex;
@@ -2265,7 +1873,7 @@
 }
 .lib-xplat-calendar .calendar-event-more {
   font-size: var(--semantic-typo-caption-2-r-size);
-  color: var(--semantic-text-muted);
+  color: var(--semantic-text-tertiary);
   line-height: 1;
 }
 .lib-xplat-calendar .calendar-picker-grid {
@@ -2283,7 +1891,7 @@
   border-radius: var(--spacing-radius-md);
   background: none;
   font-size: clamp(12px, 2.5cqi, 15px);
-  color: var(--semantic-text-subtle);
+  color: var(--semantic-text-secondary);
   cursor: pointer;
   transition: background-color 0.15s;
 }
@@ -2291,7 +1899,7 @@
   background-color: var(--semantic-surface-neutral-disabled);
 }
 .lib-xplat-calendar .calendar-picker-cell.active {
-  background-color: var(--semantic-surface-neutral-strong);
+  background-color: var(--semantic-surface-neutral-tertiary);
   color: var(--semantic-text-inverse);
   font-weight: 600;
 }
@@ -2310,30 +1918,30 @@
 .lib-xplat-card-tab .card-tab-trigger {
   position: relative;
   cursor: pointer;
-  border: 1px solid var(--semantic-border-default);
+  border: 1px solid var(--semantic-border-primary);
   border-bottom: none;
   border-radius: var(--spacing-radius-md) var(--spacing-radius-md) 0 0;
   background-color: var(--semantic-surface-neutral-disabled);
-  color: var(--semantic-text-muted);
+  color: var(--semantic-text-tertiary);
   font-weight: 500;
   transition: background-color 0.2s, color 0.2s;
 }
 .lib-xplat-card-tab .card-tab-trigger:hover:not(.active) {
-  background-color: var(--semantic-surface-neutral-subtle);
-  color: var(--semantic-text-subtle);
+  background-color: var(--semantic-surface-neutral-secondary);
+  color: var(--semantic-text-secondary);
 }
 .lib-xplat-card-tab .card-tab-trigger.active {
-  background-color: var(--semantic-surface-neutral-default);
-  color: var(--semantic-text-strong);
+  background-color: var(--semantic-surface-neutral-primary);
+  color: var(--semantic-text-primary);
   font-weight: 600;
   z-index: 1;
   margin-bottom: -1px;
   padding-bottom: calc(var(--tab-py) + 1px);
 }
 .lib-xplat-card-tab .card-tab-body {
-  border: 1px solid var(--semantic-border-default);
+  border: 1px solid var(--semantic-border-primary);
   border-radius: 0 var(--spacing-radius-md) var(--spacing-radius-md) var(--spacing-radius-md);
-  background-color: var(--semantic-surface-neutral-default);
+  background-color: var(--semantic-surface-neutral-primary);
   padding: var(--spacing-space-5);
 }
 .lib-xplat-card-tab .card-tab-panel {
@@ -2398,20 +2006,20 @@
   font-weight: 400;
 }
 .lib-xplat-tooltip.dark {
-  background-color: var(--semantic-surface-neutral-strong);
+  background-color: var(--semantic-surface-neutral-tertiary);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 .lib-xplat-tooltip.dark .tooltip-title,
 .lib-xplat-tooltip.dark .tooltip-desc {
-  color: var(--semantic-text-subtle);
+  color: var(--semantic-text-secondary);
 }
 .lib-xplat-tooltip.light {
-  background-color: var(--semantic-surface-neutral-default);
+  background-color: var(--semantic-surface-neutral-primary);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 }
 .lib-xplat-tooltip.light .tooltip-title,
 .lib-xplat-tooltip.light .tooltip-desc {
-  color: var(--semantic-text-subtle);
+  color: var(--semantic-text-secondary);
 }
 @keyframes tooltip-show {
   from {
@@ -2440,12 +2048,12 @@
   contain: layout style paint;
 }
 .lib-xplat-chart .chart-grid {
-  stroke: var(--semantic-border-subtle);
+  stroke: var(--semantic-border-secondary);
   stroke-width: 1;
 }
 .lib-xplat-chart .chart-axis-label {
   font-size: var(--semantic-typo-caption-2-r-size);
-  fill: var(--semantic-text-muted);
+  fill: var(--semantic-text-tertiary);
 }
 .lib-xplat-chart .chart-pie-label {
   font-size: var(--semantic-typo-caption-2-r-size);
@@ -2482,7 +2090,7 @@
 }
 .lib-xplat-chart .chart-slice {
   cursor: pointer;
-  stroke: var(--semantic-surface-neutral-default);
+  stroke: var(--semantic-surface-neutral-primary);
   stroke-width: 2;
   transition:
     opacity 0.15s ease-out,
@@ -2502,7 +2110,7 @@
   opacity: 1;
 }
 .lib-xplat-chart .chart-crosshair {
-  stroke: var(--semantic-border-strong);
+  stroke: var(--semantic-border-tertiary);
   stroke-width: 1;
   stroke-dasharray: 4 3;
   pointer-events: none;
@@ -2514,7 +2122,7 @@
 .lib-xplat-chart .chart-crosshair-label {
   font-size: var(--semantic-typo-caption-2-r-size);
   font-weight: 500;
-  color: var(--semantic-text-strong);
+  color: var(--semantic-text-primary);
   text-align: center;
   white-space: nowrap;
   overflow: visible;
@@ -2559,12 +2167,12 @@
 }
 .lib-xplat-chart .chart-legend-label {
   font-size: var(--semantic-typo-caption-2-r-size);
-  color: var(--semantic-text-muted);
+  color: var(--semantic-text-tertiary);
 }
 .lib-xplat-chart .chart-legend-value {
   font-size: var(--semantic-typo-caption-1-r-size);
   font-weight: 600;
-  color: var(--semantic-text-strong);
+  color: var(--semantic-text-primary);
 }
 @keyframes chart-bar-grow {
   from {
@@ -2601,23 +2209,23 @@
 .lib-xplat-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea {
   display: flex;
   align-items: center;
-  border: 1px solid var(--semantic-border-default);
+  border: 1px solid var(--semantic-border-primary);
   border-radius: var(--spacing-radius-md);
   min-height: var(--spacing-control-height-md);
   overflow: hidden;
-  background-color: var(--semantic-surface-neutral-default);
+  background-color: var(--semantic-surface-neutral-primary);
   width: 100%;
   transition: border-color 0.15s, box-shadow 0.15s;
 }
 .lib-xplat-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea:hover:not(.disabled):not(:focus-within) {
-  border-color: var(--semantic-border-strong);
+  border-color: var(--semantic-border-tertiary);
 }
 .lib-xplat-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea:focus-within {
   border-color: var(--semantic-interaction-focus-ring);
   box-shadow: 0 0 0 2px var(--semantic-interaction-overlay-10);
 }
 .lib-xplat-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea:has(> textarea:not(:placeholder-shown)):not(:focus-within) {
-  border-color: var(--semantic-border-strong);
+  border-color: var(--semantic-border-tertiary);
 }
 .lib-xplat-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea.disabled {
   background-color: var(--semantic-surface-neutral-disabled);
@@ -2629,7 +2237,7 @@
   flex: 1;
   padding: var(--spacing-space-2) var(--spacing-space-4);
   width: 100%;
-  color: var(--semantic-text-subtle);
+  color: var(--semantic-text-secondary);
   resize: none;
   font-size: var(--semantic-typo-label-2-m-size);
   line-height: var(--semantic-typo-label-2-m-lh);
@@ -2684,11 +2292,11 @@
 }
 .lib-xplat-icon-button.secondary {
   color: var(--semantic-surface-brand-default);
-  background-color: var(--semantic-surface-neutral-default);
-  border-color: var(--semantic-border-default);
+  background-color: var(--semantic-surface-neutral-primary);
+  border-color: var(--semantic-border-primary);
 }
 .lib-xplat-icon-button.secondary:hover:not(:disabled) {
-  background-color: var(--semantic-surface-neutral-subtle);
+  background-color: var(--semantic-surface-neutral-secondary);
 }
 .lib-xplat-icon-button.secondary:focus-visible {
   outline: 2px solid var(--semantic-interaction-focus-ring);
@@ -2706,11 +2314,11 @@
   outline-offset: 2px;
 }
 .lib-xplat-icon-button.ghost {
-  color: var(--semantic-text-subtle);
+  color: var(--semantic-text-secondary);
   background-color: transparent;
 }
 .lib-xplat-icon-button.ghost:hover:not(:disabled) {
-  background-color: var(--semantic-surface-neutral-subtle);
+  background-color: var(--semantic-surface-neutral-secondary);
 }
 .lib-xplat-icon-button.ghost:focus-visible {
   outline: 2px solid var(--semantic-interaction-focus-ring);
@@ -2724,21 +2332,21 @@
   width: 100%;
   gap: var(--spacing-space-2);
   padding: var(--spacing-space-3);
-  border: 1px solid var(--semantic-border-default);
+  border: 1px solid var(--semantic-border-primary);
   border-radius: var(--spacing-radius-lg);
-  background-color: var(--semantic-surface-neutral-default);
+  background-color: var(--semantic-surface-neutral-primary);
   transition: border-color 0.15s, box-shadow 0.15s;
 }
 .lib-xplat-chat-input:hover:not(.disabled):not(:focus-within) {
-  border-color: var(--semantic-border-strong);
+  border-color: var(--semantic-border-tertiary);
 }
 .lib-xplat-chat-input:focus-within {
   border-color: var(--semantic-interaction-focus-ring);
   box-shadow: 0 0 0 2px var(--semantic-interaction-overlay-10);
 }
 .lib-xplat-chat-input.disabled {
-  background-color: var(--semantic-surface-neutral-subtle);
-  border-color: var(--semantic-border-default);
+  background-color: var(--semantic-surface-neutral-secondary);
+  border-color: var(--semantic-border-primary);
   cursor: not-allowed;
 }
 .lib-xplat-chat-input .chat-input-textarea {
@@ -2752,7 +2360,7 @@
   padding: 4px 0;
   font-size: var(--semantic-typo-label-2-m-size);
   line-height: var(--semantic-typo-label-2-m-lh);
-  color: var(--semantic-text-strong);
+  color: var(--semantic-text-primary);
   background: transparent;
 }
 .lib-xplat-chat-input .chat-input-textarea::placeholder {
@@ -2823,7 +2431,7 @@
   transform: scale(1);
 }
 .lib-xplat-checkbox > .checkbox.unchecked {
-  border: 1px solid var(--semantic-border-strong);
+  border: 1px solid var(--semantic-border-tertiary);
 }
 .lib-xplat-checkbox:hover > .checkbox.unchecked {
   background-color: var(--semantic-surface-neutral-disabled);
@@ -2864,7 +2472,7 @@
   border-color: var(--semantic-surface-neutral-disabled) !important;
 }
 .lib-xplat-checkbox > .label {
-  color: var(--semantic-text-strong);
+  color: var(--semantic-text-primary);
   font-weight: 400;
 }
 
@@ -2895,13 +2503,13 @@
 }
 .lib-xplat-chip.secondary {
   color: var(--semantic-surface-brand-default);
-  background-color: var(--semantic-surface-neutral-default);
-  border: 1px solid var(--semantic-border-default);
+  background-color: var(--semantic-surface-neutral-primary);
+  border: 1px solid var(--semantic-border-primary);
 }
 .lib-xplat-chip.neutral {
-  color: var(--semantic-text-subtle);
-  background-color: var(--semantic-surface-neutral-subtle);
-  border: 1px solid var(--semantic-border-default);
+  color: var(--semantic-text-secondary);
+  background-color: var(--semantic-surface-neutral-secondary);
+  border: 1px solid var(--semantic-border-primary);
 }
 .lib-xplat-chip.success {
   color: var(--semantic-text-success);
@@ -2929,23 +2537,23 @@
 .lib-xplat-input-wrap .lib-xplat-input {
   display: flex;
   align-items: center;
-  border: 1px solid var(--semantic-border-default);
+  border: 1px solid var(--semantic-border-primary);
   border-radius: var(--spacing-radius-md);
   overflow: hidden;
-  background-color: var(--semantic-surface-neutral-default);
+  background-color: var(--semantic-surface-neutral-primary);
   padding-right: var(--spacing-space-2);
   width: 100%;
   transition: border-color 0.15s, box-shadow 0.15s;
 }
 .lib-xplat-input-wrap .lib-xplat-input:hover:not(.disabled):not(:focus-within) {
-  border-color: var(--semantic-border-strong);
+  border-color: var(--semantic-border-tertiary);
 }
 .lib-xplat-input-wrap .lib-xplat-input:focus-within {
   border-color: var(--semantic-interaction-focus-ring);
   box-shadow: 0 0 0 2px var(--semantic-interaction-overlay-10);
 }
 .lib-xplat-input-wrap .lib-xplat-input:has(> input:not(:placeholder-shown)):not(:focus-within) {
-  border-color: var(--semantic-border-strong);
+  border-color: var(--semantic-border-tertiary);
 }
 .lib-xplat-input-wrap .lib-xplat-input.sm {
   height: var(--spacing-control-height-sm);
@@ -2973,7 +2581,7 @@
   padding-left: var(--spacing-space-4);
   padding-right: var(--spacing-space-2);
   width: 100%;
-  color: var(--semantic-text-subtle);
+  color: var(--semantic-text-secondary);
   font-size: inherit;
   font-family: inherit;
 }
@@ -2985,7 +2593,7 @@
   align-items: center;
   justify-content: center;
   height: 100%;
-  color: var(--semantic-icon-subtle);
+  color: var(--semantic-icon-secondary);
   padding-right: var(--spacing-space-2);
 }
 .lib-xplat-input-wrap .lib-xplat-input > .suffix > .wrapper {
@@ -3008,7 +2616,7 @@
   user-select: none;
 }
 .lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation.default {
-  color: var(--semantic-icon-subtle);
+  color: var(--semantic-icon-secondary);
 }
 .lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation.success {
   color: var(--semantic-text-success);
@@ -3029,7 +2637,7 @@
 }
 .lib-xplat-modal.modal-box {
   border-radius: var(--spacing-radius-lg);
-  background-color: var(--semantic-surface-neutral-default);
+  background-color: var(--semantic-surface-neutral-primary);
   padding: var(--spacing-space-6);
   min-width: min-content;
   max-width: calc(100vw - 32px);
@@ -3086,7 +2694,7 @@
   transition: background-color 0.15s;
   font-size: clamp(13px, 3cqi, 18px);
   font-weight: 600;
-  color: var(--semantic-text-strong);
+  color: var(--semantic-text-primary);
   min-width: 110px;
   text-align: center;
 }
@@ -3114,7 +2722,7 @@
   border-radius: var(--spacing-radius-md);
   background: none;
   font-size: clamp(11px, 2cqi, 13px);
-  color: var(--semantic-text-subtle);
+  color: var(--semantic-text-secondary);
   cursor: pointer;
   transition: background-color 0.15s;
 }
@@ -3136,7 +2744,7 @@
   border-radius: var(--spacing-radius-md);
   background: none;
   cursor: pointer;
-  color: var(--semantic-text-muted);
+  color: var(--semantic-text-tertiary);
   transition: background-color 0.15s;
 }
 .lib-xplat-datepicker .datepicker-nav:hover {
@@ -3155,13 +2763,13 @@
   font-size: clamp(11px, 2cqi, 14px);
   font-weight: 500;
   padding: var(--spacing-space-1) 0;
-  color: var(--semantic-text-muted);
+  color: var(--semantic-text-tertiary);
 }
 .lib-xplat-datepicker .datepicker-weekday.sunday {
-  color: var(--semantic-text-sunday);
+  color: var(--semantic-text-accent-red);
 }
 .lib-xplat-datepicker .datepicker-weekday.saturday {
-  color: var(--semantic-text-saturday);
+  color: var(--semantic-text-accent-blue);
 }
 .lib-xplat-datepicker .datepicker-grid {
   display: grid;
@@ -3179,7 +2787,7 @@
   border-radius: var(--spacing-radius-md);
   background: none;
   cursor: pointer;
-  color: var(--semantic-text-strong);
+  color: var(--semantic-text-primary);
   transition: background-color 0.15s, color 0.15s;
 }
 .lib-xplat-datepicker .datepicker-day:hover:not(:disabled):not(.outside):not(.selected) {
@@ -3190,10 +2798,10 @@
   cursor: default;
 }
 .lib-xplat-datepicker .datepicker-day.outside.sunday {
-  color: color-mix(in srgb, var(--semantic-text-sunday) 35%, transparent);
+  color: color-mix(in srgb, var(--semantic-text-accent-red) 35%, transparent);
 }
 .lib-xplat-datepicker .datepicker-day.outside.saturday {
-  color: color-mix(in srgb, var(--semantic-text-saturday) 35%, transparent);
+  color: color-mix(in srgb, var(--semantic-text-accent-blue) 35%, transparent);
 }
 .lib-xplat-datepicker .datepicker-day.disabled {
   color: var(--semantic-text-disabled);
@@ -3219,18 +2827,18 @@
   border-radius: 0;
 }
 .lib-xplat-datepicker .datepicker-day.sunday:not(.selected):not(.outside):not(.disabled) {
-  color: var(--semantic-text-sunday);
+  color: var(--semantic-text-accent-red);
 }
 .lib-xplat-datepicker .datepicker-day.saturday:not(.selected):not(.outside):not(.disabled) {
-  color: var(--semantic-text-saturday);
+  color: var(--semantic-text-accent-blue);
 }
 .lib-xplat-datepicker .datepicker-day.outside.sunday,
 .lib-xplat-datepicker .datepicker-day.disabled.sunday {
-  color: color-mix(in srgb, var(--semantic-text-sunday) 35%, transparent);
+  color: color-mix(in srgb, var(--semantic-text-accent-red) 35%, transparent);
 }
 .lib-xplat-datepicker .datepicker-day.outside.saturday,
 .lib-xplat-datepicker .datepicker-day.disabled.saturday {
-  color: color-mix(in srgb, var(--semantic-text-saturday) 35%, transparent);
+  color: color-mix(in srgb, var(--semantic-text-accent-blue) 35%, transparent);
 }
 .lib-xplat-datepicker.range {
   display: flex;
@@ -3257,7 +2865,7 @@
   text-align: center;
   font-size: var(--semantic-typo-caption-2-r-size);
   font-weight: 500;
-  color: var(--semantic-text-muted);
+  color: var(--semantic-text-tertiary);
   margin-bottom: var(--spacing-space-2);
 }
 @container (max-width: 600px) {
@@ -3296,13 +2904,13 @@
   z-index: 10;
   margin-top: var(--spacing-space-1);
   padding: var(--spacing-space-4);
-  background-color: var(--semantic-surface-neutral-default);
-  border: 1px solid var(--semantic-border-default);
+  background-color: var(--semantic-surface-neutral-primary);
+  border: 1px solid var(--semantic-border-primary);
   border-radius: var(--spacing-radius-md);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
 }
 .lib-xplat-popup-datepicker-card {
-  background-color: var(--semantic-surface-neutral-default);
+  background-color: var(--semantic-surface-neutral-primary);
   border-radius: var(--spacing-radius-xl);
   min-width: 320px;
 }
@@ -3317,7 +2925,7 @@
   justify-content: flex-end;
   gap: var(--spacing-space-3);
   padding-top: var(--spacing-space-4);
-  border-top: 1px solid var(--semantic-border-subtle);
+  border-top: 1px solid var(--semantic-border-secondary);
 }
 
 /* src/components/Tab/tab.scss */
@@ -3348,7 +2956,7 @@
 }
 .lib-xplat-tab.type-default {
   width: 100%;
-  background-color: var(--semantic-surface-neutral-strong);
+  background-color: var(--semantic-surface-neutral-tertiary);
   border-radius: var(--spacing-radius-md);
 }
 .lib-xplat-tab.type-default > .tab-item {
@@ -3360,7 +2968,7 @@
   justify-content: center;
   cursor: pointer;
   white-space: nowrap;
-  border-right: 1px solid var(--semantic-border-strong);
+  border-right: 1px solid var(--semantic-border-tertiary);
   color: var(--semantic-text-inverse);
 }
 .lib-xplat-tab.type-default > .tab-item:last-child {
@@ -3371,7 +2979,7 @@
 }
 .lib-xplat-tab.type-toggle {
   width: 100%;
-  border-bottom: 1px solid var(--semantic-border-default);
+  border-bottom: 1px solid var(--semantic-border-primary);
   gap: var(--spacing-space-6);
 }
 .lib-xplat-tab.type-toggle > .tab-item {
@@ -3389,7 +2997,7 @@
   border: none;
   cursor: pointer;
   transition: color 0.2s;
-  color: var(--semantic-text-muted);
+  color: var(--semantic-text-tertiary);
 }
 .lib-xplat-tab.type-toggle > .tab-item.active {
   color: var(--semantic-surface-brand-default);
@@ -3413,12 +3021,12 @@
 .lib-xplat-divider.horizontal {
   width: 100%;
   height: 1px;
-  background-color: var(--semantic-border-default);
+  background-color: var(--semantic-border-primary);
 }
 .lib-xplat-divider.vertical {
   width: 1px;
   align-self: stretch;
-  background-color: var(--semantic-border-default);
+  background-color: var(--semantic-border-primary);
 }
 
 /* src/components/Drawer/drawer.scss */
@@ -3439,7 +3047,7 @@
   position: fixed;
   top: 0;
   height: 100%;
-  background: var(--semantic-surface-neutral-default);
+  background: var(--semantic-surface-neutral-primary);
   box-shadow: -4px 0 16px rgba(0, 0, 0, 0.08);
   display: flex;
   flex-direction: column;
@@ -3478,12 +3086,12 @@
   align-items: center;
   justify-content: space-between;
   padding: var(--spacing-space-4) var(--spacing-space-5);
-  border-bottom: 1px solid var(--semantic-border-default);
+  border-bottom: 1px solid var(--semantic-border-primary);
 }
 .lib-xplat-drawer .drawer-title {
   font-size: var(--semantic-typo-label-2-m-size);
   font-weight: 600;
-  color: var(--semantic-text-strong);
+  color: var(--semantic-text-primary);
 }
 .lib-xplat-drawer .close-btn {
   background: none;
@@ -3491,12 +3099,12 @@
   cursor: pointer;
   font-size: var(--semantic-typo-heading-1-m-size);
   line-height: 1;
-  color: var(--semantic-icon-strong);
+  color: var(--semantic-icon-primary);
   padding: 0;
   transition: color 0.2s;
 }
 .lib-xplat-drawer .close-btn:hover {
-  color: var(--semantic-text-strong);
+  color: var(--semantic-text-primary);
 }
 .lib-xplat-drawer .drawer-body {
   flex: 1;
@@ -3517,8 +3125,8 @@
   position: fixed;
   z-index: 1000;
   min-width: 160px;
-  background: var(--semantic-surface-neutral-default);
-  border: 1px solid var(--semantic-border-default);
+  background: var(--semantic-surface-neutral-primary);
+  border: 1px solid var(--semantic-border-primary);
   border-radius: var(--spacing-radius-md);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
   padding: var(--spacing-space-1) 0;
@@ -3541,13 +3149,13 @@
   border: none;
   background: none;
   font-size: var(--semantic-typo-caption-1-r-size);
-  color: var(--semantic-text-strong);
+  color: var(--semantic-text-primary);
   cursor: pointer;
   text-align: left;
   transition: background-color 0.15s;
 }
 .lib-xplat-dropdown-menu .dropdown-item:hover:not(:disabled) {
-  background-color: var(--semantic-surface-neutral-subtle);
+  background-color: var(--semantic-surface-neutral-secondary);
 }
 .lib-xplat-dropdown-menu .dropdown-item.danger {
   color: var(--semantic-text-error);
@@ -3565,25 +3173,25 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  border: 1px solid var(--semantic-border-default);
+  border: 1px solid var(--semantic-border-primary);
   border-radius: var(--spacing-radius-md);
-  background: var(--semantic-surface-neutral-default);
+  background: var(--semantic-surface-neutral-primary);
   overflow: hidden;
   transition: border-color 150ms ease;
 }
 .lib-xplat-editor.focused {
-  border-color: var(--semantic-border-brand);
+  border-color: var(--semantic-border-brand-primary);
 }
 .lib-xplat-editor.readonly {
-  background: var(--semantic-surface-neutral-subtle);
+  background: var(--semantic-surface-neutral-secondary);
 }
 .lib-xplat-editor__toolbar {
   display: flex;
   flex-wrap: wrap;
   gap: var(--spacing-space-1);
   padding: var(--spacing-space-2);
-  border-bottom: 1px solid var(--semantic-border-subtle);
-  background: var(--semantic-surface-neutral-subtle);
+  border-bottom: 1px solid var(--semantic-border-secondary);
+  background: var(--semantic-surface-neutral-secondary);
 }
 .lib-xplat-editor__toolbar-btn {
   display: inline-flex;
@@ -3595,19 +3203,19 @@
   border: 1px solid transparent;
   border-radius: var(--spacing-radius-sm);
   background: transparent;
-  color: var(--semantic-text-strong);
+  color: var(--semantic-text-primary);
   font-family: inherit;
   font-weight: 600;
   cursor: pointer;
   transition: background 100ms ease, border-color 100ms ease;
 }
 .lib-xplat-editor__toolbar-btn:hover {
-  background: var(--semantic-surface-neutral-strong);
+  background: var(--semantic-surface-neutral-tertiary);
 }
 .lib-xplat-editor__toolbar-btn.active {
   background: var(--semantic-surface-brand-subtle);
-  color: var(--semantic-text-brand);
-  border-color: var(--semantic-border-brand);
+  color: var(--semantic-text-brand-primary);
+  border-color: var(--semantic-border-brand-primary);
 }
 .lib-xplat-editor__content {
   position: relative;
@@ -3617,13 +3225,13 @@
   position: absolute;
   top: var(--spacing-space-4);
   left: var(--spacing-space-4);
-  color: var(--semantic-text-muted);
+  color: var(--semantic-text-tertiary);
   pointer-events: none;
   user-select: none;
 }
 .lib-xplat-editor__editable {
   outline: none;
-  color: var(--semantic-text-strong);
+  color: var(--semantic-text-primary);
   min-height: inherit;
 }
 .lib-xplat-editor__editable h1,
@@ -3675,17 +3283,17 @@
 .lib-xplat-editor__editable blockquote {
   margin: var(--spacing-space-3) 0;
   padding: var(--spacing-space-2) var(--spacing-space-4);
-  border-left: 3px solid var(--semantic-border-brand);
-  color: var(--semantic-text-subtle);
-  background: var(--semantic-surface-neutral-subtle);
+  border-left: 3px solid var(--semantic-border-brand-primary);
+  color: var(--semantic-text-secondary);
+  background: var(--semantic-surface-neutral-secondary);
   border-radius: var(--spacing-radius-sm);
 }
 .lib-xplat-editor__editable pre {
   margin: var(--spacing-space-3) 0;
   padding: var(--spacing-space-3) var(--spacing-space-4);
   border-radius: var(--spacing-radius-md);
-  background: var(--semantic-surface-neutral-subtle);
-  color: var(--semantic-text-strong);
+  background: var(--semantic-surface-neutral-secondary);
+  color: var(--semantic-text-primary);
   font-family:
     ui-monospace,
     "SF Mono",
@@ -3699,17 +3307,17 @@
 .lib-xplat-editor__editable code {
   padding: 2px 6px;
   border-radius: var(--spacing-radius-sm);
-  background: var(--semantic-surface-neutral-subtle);
+  background: var(--semantic-surface-neutral-secondary);
   font-family:
     ui-monospace,
     "SF Mono",
     Menlo,
     monospace;
   font-size: var(--semantic-typo-caption-1-r-size);
-  color: var(--semantic-text-strong);
+  color: var(--semantic-text-primary);
 }
 .lib-xplat-editor__editable a {
-  color: var(--semantic-text-link, var(--semantic-text-brand));
+  color: var(--semantic-text-link, var(--semantic-text-brand-primary));
   text-decoration: underline;
 }
 .lib-xplat-editor__editable img {
@@ -3721,7 +3329,7 @@
 .lib-xplat-editor__editable hr {
   margin: var(--spacing-space-4) 0;
   border: 0;
-  border-top: 1px solid var(--semantic-border-default);
+  border-top: 1px solid var(--semantic-border-primary);
 }
 .lib-xplat-editor__slash-menu {
   position: absolute;
@@ -3730,9 +3338,9 @@
   max-height: 280px;
   overflow-y: auto;
   padding: var(--spacing-space-1);
-  border: 1px solid var(--semantic-border-default);
+  border: 1px solid var(--semantic-border-primary);
   border-radius: var(--spacing-radius-md);
-  background: var(--semantic-surface-neutral-default);
+  background: var(--semantic-surface-neutral-primary);
   box-shadow: 0 4px 16px var(--semantic-interaction-overlay-10);
 }
 .lib-xplat-editor__slash-item {
@@ -3745,7 +3353,7 @@
   border: 0;
   border-radius: var(--spacing-radius-sm);
   background: transparent;
-  color: var(--semantic-text-strong);
+  color: var(--semantic-text-primary);
   font-family: inherit;
   font-size: var(--semantic-typo-caption-1-r-size);
   text-align: left;
@@ -3754,13 +3362,13 @@
 .lib-xplat-editor__slash-item:hover,
 .lib-xplat-editor__slash-item.active {
   background: var(--semantic-surface-brand-subtle);
-  color: var(--semantic-text-brand);
+  color: var(--semantic-text-brand-primary);
 }
 .lib-xplat-editor__slash-item .label {
   flex: 1;
 }
 .lib-xplat-editor__slash-item .hint {
-  color: var(--semantic-text-muted);
+  color: var(--semantic-text-tertiary);
   font-size: var(--semantic-typo-caption-2-r-size);
 }
 .lib-xplat-editor__link-popover {
@@ -3770,37 +3378,37 @@
   align-items: center;
   gap: var(--spacing-space-2);
   padding: var(--spacing-space-2);
-  border: 1px solid var(--semantic-border-default);
+  border: 1px solid var(--semantic-border-primary);
   border-radius: var(--spacing-radius-md);
-  background: var(--semantic-surface-neutral-default);
+  background: var(--semantic-surface-neutral-primary);
   box-shadow: 0 4px 16px var(--semantic-interaction-overlay-10);
 }
 .lib-xplat-editor__link-popover input {
   width: 240px;
   padding: var(--spacing-space-1) var(--spacing-space-2);
-  border: 1px solid var(--semantic-border-default);
+  border: 1px solid var(--semantic-border-primary);
   border-radius: var(--spacing-radius-sm);
-  background: var(--semantic-surface-neutral-default);
-  color: var(--semantic-text-strong);
+  background: var(--semantic-surface-neutral-primary);
+  color: var(--semantic-text-primary);
   font-family: inherit;
   font-size: var(--semantic-typo-caption-1-r-size);
   outline: none;
 }
 .lib-xplat-editor__link-popover input:focus {
-  border-color: var(--semantic-border-brand);
+  border-color: var(--semantic-border-brand-primary);
 }
 .lib-xplat-editor__link-popover button {
   padding: var(--spacing-space-1) var(--spacing-space-3);
-  border: 1px solid var(--semantic-border-default);
+  border: 1px solid var(--semantic-border-primary);
   border-radius: var(--spacing-radius-sm);
-  background: var(--semantic-surface-neutral-default);
-  color: var(--semantic-text-strong);
+  background: var(--semantic-surface-neutral-primary);
+  color: var(--semantic-text-primary);
   font-family: inherit;
   font-size: var(--semantic-typo-caption-2-r-size);
   cursor: pointer;
 }
 .lib-xplat-editor__link-popover button:hover {
-  background: var(--semantic-surface-neutral-strong);
+  background: var(--semantic-surface-neutral-tertiary);
 }
 .lib-xplat-editor__link-popover button:first-of-type {
   background: var(--semantic-surface-brand-default);
@@ -3829,12 +3437,12 @@
 .lib-xplat-empty-state .empty-title {
   font-size: var(--semantic-typo-caption-1-r-size);
   font-weight: 500;
-  color: var(--semantic-text-subtle);
+  color: var(--semantic-text-secondary);
   margin: 0;
 }
 .lib-xplat-empty-state .empty-description {
   font-size: var(--semantic-typo-caption-1-r-size);
-  color: var(--semantic-text-muted);
+  color: var(--semantic-text-tertiary);
   margin: var(--spacing-space-2) 0 0;
   max-width: 320px;
 }
@@ -3852,7 +3460,7 @@
   align-items: center;
   justify-content: center;
   padding: var(--spacing-space-8) var(--spacing-space-6);
-  border: 2px dashed var(--semantic-border-default);
+  border: 2px dashed var(--semantic-border-primary);
   border-radius: var(--spacing-radius-md);
   cursor: pointer;
   transition: border-color 0.2s, background-color 0.2s;
@@ -3869,7 +3477,7 @@
   display: none;
 }
 .lib-xplat-file-upload .upload-icon {
-  color: var(--semantic-icon-subtle);
+  color: var(--semantic-icon-secondary);
   margin-bottom: var(--spacing-space-3);
 }
 .lib-xplat-file-upload .upload-icon svg {
@@ -3878,12 +3486,12 @@
 .lib-xplat-file-upload .upload-label {
   font-size: var(--semantic-typo-caption-1-r-size);
   font-weight: 500;
-  color: var(--semantic-text-subtle);
+  color: var(--semantic-text-secondary);
   margin: 0;
 }
 .lib-xplat-file-upload .upload-description {
   font-size: var(--semantic-typo-caption-2-r-size);
-  color: var(--semantic-text-muted);
+  color: var(--semantic-text-tertiary);
   margin: var(--spacing-space-1) 0 0;
 }
 
@@ -3907,7 +3515,7 @@
   font-size: var(--semantic-typo-heading-1-m-size);
 }
 .lib-xplat-htmlTypewriter hr {
-  color: var(--semantic-border-default);
+  color: var(--semantic-border-primary);
   margin-top: var(--spacing-space-4);
   margin-bottom: var(--spacing-space-4);
 }
@@ -3920,7 +3528,7 @@
   height: 100%;
   flex-direction: column;
   position: relative;
-  background-color: var(--semantic-surface-neutral-default);
+  background-color: var(--semantic-surface-neutral-primary);
   border-radius: var(--spacing-radius-sm);
   overflow: hidden;
   padding: var(--spacing-space-3);
@@ -3929,7 +3537,7 @@
   display: none;
 }
 .lib-xplat-imageselector.none-value {
-  border: 1px dashed var(--semantic-border-strong);
+  border: 1px dashed var(--semantic-border-tertiary);
 }
 .lib-xplat-imageselector:hover {
   background-color: var(--semantic-surface-neutral-disabled);
@@ -3961,18 +3569,18 @@
   cursor: pointer;
 }
 .lib-xplat-imageselector > .content .skeleton > .icon-wrapper {
-  color: var(--semantic-icon-subtle);
+  color: var(--semantic-icon-secondary);
 }
 .lib-xplat-imageselector > .content .skeleton > .label {
   margin-top: var(--spacing-space-1);
   font-size: var(--semantic-typo-caption-1-r-size);
-  color: var(--semantic-text-muted);
+  color: var(--semantic-text-tertiary);
 }
 .lib-xplat-imageselector > .content .skeleton:hover > .icon-wrapper {
-  color: var(--semantic-icon-strong);
+  color: var(--semantic-icon-primary);
 }
 .lib-xplat-imageselector > .content .skeleton:hover > .label {
-  color: var(--semantic-text-subtle);
+  color: var(--semantic-text-secondary);
 }
 .lib-xplat-imageselector > .action-bar {
   position: absolute;
@@ -3982,7 +3590,7 @@
   display: flex;
   gap: 0.5em;
   font-size: var(--semantic-typo-title-2-m-size);
-  background-color: var(--semantic-surface-neutral-strong);
+  background-color: var(--semantic-surface-neutral-tertiary);
   padding: var(--spacing-space-1) var(--spacing-space-3);
   align-items: center;
   opacity: 0;
@@ -4038,7 +3646,7 @@
   width: var(--spacing-control-height-sm);
   height: var(--spacing-control-height-sm);
   font-size: var(--semantic-typo-caption-1-r-size);
-  color: var(--semantic-text-muted);
+  color: var(--semantic-text-tertiary);
   user-select: none;
 }
 .lib-xplat-pagination .page-btn {
@@ -4053,11 +3661,11 @@
   background: none;
   font-size: var(--semantic-typo-caption-1-r-size);
   cursor: pointer;
-  color: var(--semantic-text-subtle);
+  color: var(--semantic-text-secondary);
   transition: background-color 0.2s, color 0.2s;
 }
 .lib-xplat-pagination .page-btn:hover:not(:disabled):not(.active) {
-  background-color: var(--semantic-surface-neutral-subtle);
+  background-color: var(--semantic-surface-neutral-secondary);
 }
 .lib-xplat-pagination .page-btn:disabled {
   cursor: not-allowed;
@@ -4099,7 +3707,7 @@
   z-index: 1000;
   cursor: default;
   transition: transform 0.2s ease, opacity 0.2s ease;
-  background: var(--semantic-surface-neutral-default);
+  background: var(--semantic-surface-neutral-primary);
   border-radius: var(--spacing-radius-md);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   opacity: 0;
@@ -4161,7 +3769,7 @@
 .lib-xplat-progress .label {
   font-size: var(--semantic-typo-caption-2-r-size);
   font-weight: 500;
-  color: var(--semantic-text-subtle);
+  color: var(--semantic-text-secondary);
   min-width: 36px;
   text-align: right;
 }
@@ -4213,25 +3821,25 @@
   line-height: var(--semantic-typo-label-1-m-lh);
 }
 .lib-xplat-radio > .circle {
-  border: 2px solid var(--semantic-border-strong);
+  border: 2px solid var(--semantic-border-tertiary);
   border-radius: 50%;
   display: flex;
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  background-color: var(--semantic-surface-neutral-default);
+  background-color: var(--semantic-surface-neutral-primary);
   transition: border-color 0.12s ease-out, background-color 0.12s ease-out;
 }
 .lib-xplat-radio > .circle > .inner-circle {
   width: var(--spacing-space-3);
   height: var(--spacing-space-3);
-  background-color: var(--semantic-surface-neutral-default);
+  background-color: var(--semantic-surface-neutral-primary);
   border-radius: 50%;
 }
 .lib-xplat-radio:hover > .circle:not(.checked) {
-  border-color: var(--semantic-icon-strong);
-  background-color: var(--semantic-surface-neutral-subtle);
+  border-color: var(--semantic-icon-primary);
+  background-color: var(--semantic-surface-neutral-secondary);
 }
 .lib-xplat-radio.brand > .circle.checked {
   background-color: var(--semantic-surface-brand-default);
@@ -4309,14 +3917,14 @@
   align-items: center;
   justify-content: space-between;
   gap: var(--spacing-space-2);
-  border: 1px solid var(--semantic-border-default);
+  border: 1px solid var(--semantic-border-primary);
   border-radius: var(--spacing-radius-md);
-  background-color: var(--semantic-surface-neutral-default);
-  color: var(--semantic-text-strong);
+  background-color: var(--semantic-surface-neutral-primary);
+  color: var(--semantic-text-primary);
   transition: border-color 0.15s;
 }
 .lib-xplat-select .select-trigger:hover:not(.disabled) {
-  border-color: var(--semantic-border-strong);
+  border-color: var(--semantic-border-tertiary);
 }
 .lib-xplat-select .select-trigger:active:not(.disabled) {
   border-color: var(--semantic-interaction-focus-ring);
@@ -4329,7 +3937,7 @@
   cursor: not-allowed;
   pointer-events: none;
   background-color: var(--semantic-surface-neutral-disabled);
-  border-color: var(--semantic-border-default);
+  border-color: var(--semantic-border-primary);
   color: var(--semantic-text-disabled);
 }
 .lib-xplat-select .select-trigger.disabled .select-trigger-value.placeholder {
@@ -4360,7 +3968,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--semantic-icon-subtle);
+  color: var(--semantic-icon-secondary);
   transition: transform 0.2s ease;
 }
 .lib-xplat-select .select-trigger .select-trigger-icon.open {
@@ -4374,7 +3982,7 @@
   z-index: 1000;
   padding: var(--spacing-space-1) 0;
   border-radius: var(--spacing-radius-md);
-  background-color: var(--semantic-surface-neutral-default);
+  background-color: var(--semantic-surface-neutral-primary);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   cursor: default;
   max-height: 220px;
@@ -4427,10 +4035,10 @@
   font-weight: var(--semantic-typo-label-1-sb-weight);
 }
 .lib-xplat-select-content .select-item:hover:not(.disabled) {
-  background-color: var(--semantic-surface-neutral-subtle);
+  background-color: var(--semantic-surface-neutral-secondary);
 }
 .lib-xplat-select-content .select-item:focus-visible:not(.disabled) {
-  background-color: var(--semantic-surface-neutral-subtle);
+  background-color: var(--semantic-surface-neutral-secondary);
 }
 .lib-xplat-select-content .select-item.disabled {
   cursor: not-allowed;
@@ -4494,7 +4102,7 @@
   backface-visibility: hidden;
 }
 .lib-xplat-spinner .track {
-  stroke: var(--semantic-border-default);
+  stroke: var(--semantic-border-primary);
 }
 .lib-xplat-spinner .indicator {
   stroke-dasharray: 42;
@@ -4572,11 +4180,11 @@
 .lib-xplat-steps .step-title {
   font-size: var(--semantic-typo-caption-1-r-size);
   font-weight: 500;
-  color: var(--semantic-text-strong);
+  color: var(--semantic-text-primary);
 }
 .lib-xplat-steps .step-description {
   font-size: var(--semantic-typo-caption-2-r-size);
-  color: var(--semantic-text-muted);
+  color: var(--semantic-text-tertiary);
   margin-top: 2px;
 }
 .lib-xplat-steps.brand .step-item.completed .step-circle {
@@ -4636,7 +4244,7 @@
 }
 .lib-xplat-steps .step-item.pending .step-circle {
   background-color: var(--semantic-surface-neutral-disabled);
-  color: var(--semantic-text-muted);
+  color: var(--semantic-text-tertiary);
 }
 .lib-xplat-steps .step-item.pending .step-title {
   color: var(--semantic-text-disabled);
@@ -4694,7 +4302,7 @@
   top: 0;
   left: 0;
   height: 100%;
-  background-color: var(--semantic-text-muted);
+  background-color: var(--semantic-text-tertiary);
   border-radius: 1px;
   transition-property: width;
   transition-timing-function: ease;
@@ -4712,11 +4320,11 @@
   border: none;
   padding: 0;
   cursor: pointer;
-  background-color: var(--semantic-border-default);
+  background-color: var(--semantic-border-primary);
   transition: background-color 0.2s;
 }
 .lib-xplat-swiper__dot.active {
-  background-color: var(--semantic-text-subtle);
+  background-color: var(--semantic-text-secondary);
 }
 .lib-xplat-swiper__dot:hover:not(.active) {
   background-color: var(--semantic-text-disabled);
@@ -4730,8 +4338,8 @@
   box-sizing: border-box;
   transition: background-color 0.2s, border-color 0.2s;
   border: 1px solid transparent;
-  background-color: var(--semantic-border-default);
-  border-color: var(--semantic-border-default);
+  background-color: var(--semantic-border-primary);
+  border-color: var(--semantic-border-primary);
 }
 .lib-xplat-switch.sm {
   width: 34px;
@@ -4820,7 +4428,7 @@
   top: 50%;
   left: 2px;
   transform: translateY(-50%);
-  background-color: var(--semantic-surface-neutral-default);
+  background-color: var(--semantic-surface-neutral-primary);
   border-radius: var(--spacing-radius-full);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
   transition: left 0.25s;
@@ -4874,7 +4482,7 @@
 }
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.table-bottom-border,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.table-bottom-border {
-  border-bottom: 1px solid var(--semantic-border-default);
+  border-bottom: 1px solid var(--semantic-border-primary);
 }
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.primary,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.primary {
@@ -4902,26 +4510,26 @@
 }
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.secondary,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.secondary {
-  background-color: var(--semantic-surface-neutral-default);
+  background-color: var(--semantic-surface-neutral-primary);
 }
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.secondary > td,
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.secondary > th,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.secondary > td,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.secondary > th {
-  background-color: var(--semantic-surface-neutral-default);
-  color: var(--semantic-text-strong);
+  background-color: var(--semantic-surface-neutral-primary);
+  color: var(--semantic-text-primary);
 }
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.secondary > td.cell-hover:hover,
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.secondary > th.cell-hover:hover,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.secondary > td.cell-hover:hover,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.secondary > th.cell-hover:hover {
-  background-color: var(--semantic-surface-neutral-subtle);
+  background-color: var(--semantic-surface-neutral-secondary);
 }
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.secondary.hover:hover > td,
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.secondary.hover:hover > th,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.secondary.hover:hover > td,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.secondary.hover:hover > th {
-  background-color: var(--semantic-surface-neutral-subtle);
+  background-color: var(--semantic-surface-neutral-secondary);
 }
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.success,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.success {
@@ -4979,7 +4587,7 @@
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.warning > th,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.warning > td,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.warning > th {
-  color: var(--semantic-text-strong);
+  color: var(--semantic-text-primary);
   background-color: var(--semantic-surface-warning-default);
 }
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.warning > td.cell-hover:hover,
@@ -4992,7 +4600,7 @@
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.warning.hover:hover > th,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.warning.hover:hover > td,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.warning.hover:hover > th {
-  color: var(--semantic-text-strong);
+  color: var(--semantic-text-primary);
   background-color: var(--semantic-surface-warning-strong);
 }
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.info,
@@ -5038,14 +4646,14 @@
 }
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.categorical.cat-neutral,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.categorical.cat-neutral {
-  background-color: var(--semantic-surface-neutral-strong);
+  background-color: var(--semantic-surface-neutral-tertiary);
 }
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.categorical.cat-neutral > td,
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.categorical.cat-neutral > th,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.categorical.cat-neutral > td,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.categorical.cat-neutral > th {
   color: var(--semantic-text-inverse);
-  background-color: var(--semantic-surface-neutral-strong);
+  background-color: var(--semantic-surface-neutral-tertiary);
 }
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.categorical.cat-neutral.hover:hover > td,
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.categorical.cat-neutral.hover:hover > th,
@@ -5141,9 +4749,9 @@
   font-size: var(--semantic-typo-caption-1-r-size);
 }
 .lib-xplat-tag.neutral {
-  color: var(--semantic-text-muted);
-  border-color: var(--semantic-border-default);
-  background-color: var(--semantic-surface-neutral-subtle);
+  color: var(--semantic-text-tertiary);
+  border-color: var(--semantic-border-primary);
+  background-color: var(--semantic-surface-neutral-secondary);
 }
 .lib-xplat-tag.categorical.cat-1 {
   color: var(--semantic-categorical-1-text);
@@ -5225,10 +4833,10 @@
 }
 .lib-xplat-textarea-wrap .lib-xplat-textarea {
   width: 100%;
-  border: 1px solid var(--semantic-border-default);
+  border: 1px solid var(--semantic-border-primary);
   border-radius: var(--spacing-radius-md);
-  background-color: var(--semantic-surface-neutral-default);
-  color: var(--semantic-text-subtle);
+  background-color: var(--semantic-surface-neutral-primary);
+  color: var(--semantic-text-secondary);
   font-family: inherit;
   outline: none;
   transition: border-color 0.15s, box-shadow 0.15s;
@@ -5249,14 +4857,14 @@
   line-height: var(--semantic-typo-label-1-m-lh);
 }
 .lib-xplat-textarea-wrap .lib-xplat-textarea:hover:not(.disabled):not(:focus) {
-  border-color: var(--semantic-border-strong);
+  border-color: var(--semantic-border-tertiary);
 }
 .lib-xplat-textarea-wrap .lib-xplat-textarea:focus {
   border-color: var(--semantic-interaction-focus-ring);
   box-shadow: 0 0 0 2px var(--semantic-interaction-overlay-10);
 }
 .lib-xplat-textarea-wrap .lib-xplat-textarea:not(:placeholder-shown):not(:focus) {
-  border-color: var(--semantic-border-strong);
+  border-color: var(--semantic-border-tertiary);
 }
 .lib-xplat-textarea-wrap .lib-xplat-textarea.disabled {
   background-color: var(--semantic-surface-neutral-disabled);
@@ -5383,7 +4991,7 @@
   height: 100%;
   border-radius: var(--spacing-radius-sm);
   overflow: hidden;
-  background-color: var(--semantic-surface-neutral-strong);
+  background-color: var(--semantic-surface-neutral-tertiary);
 }
 .lib-xplat-video > video {
   display: block;