@aviala-design/spiral 2.5.0 → 2.6.1

package/dist/styles.css

@@ -114,41 +114,73 @@
 
 :root {
   /* ALD semantic colors → runtime aviala palette steps (set by generateTheme / applyTheme) */
-  --control-control-theme-background: var(--aviala-primary-primary-8, #ff856b);
-  --control-control-theme-lightbackground: var(--aviala-primary-primary-2, #fff9f8);
-  --box-box-theme-secondarybackground: var(--aviala-primary-primary-4, #ffe9e5);
-  --box-box-theme-lightbackground: var(--aviala-primary-primary-2, #fff9f8);
-  --text-text-theme-primary-black: var(--aviala-primary-primary-10, #bf2300);
-  --text-text-theme-secondary-black: var(--aviala-primary-primary-7, #ffab98);
-  --text-text-theme-light-black: var(--aviala-primary-primary-5, #ffd6cd);
-  --border-border-theme-light: var(--border-border-normal-light, #f5f3f3);
-  --border-border-theme-primary: var(--aviala-primary-primary-8, #ff856b);
-  --border-border-normal-light: #f5f3f3;
-  --border-border-normal-primary: #e2e0e0;
-  --control-control-fail-background: var(--aviala-error-error-8, #ff646f);
+  --control-control-theme-background: var(--aviala-primary-primary-8, #ff5532);
+  --control-control-theme-lightbackground: var(--aviala-primary-primary-2, #ffe9e3);
+  --box-box-theme-secondarybackground: var(--aviala-primary-primary-4, #ffc6b6);
+  --box-box-theme-lightbackground: var(--aviala-primary-primary-2, #ffe9e3);
+  --text-text-theme-primary-black: var(--aviala-primary-primary-10, #cd3923);
+  --text-text-theme-secondary-black: var(--aviala-primary-primary-7, #ff7b5b);
+  --text-text-theme-light-black: var(--aviala-primary-primary-5, #ffb19b);
+  --border-border-theme-light: var(--border-border-normal-1, #f9f8f8);
+  --border-border-theme-primary: var(--aviala-primary-primary-8, #ff5532);
+  --border-border-normal-1: #f9f8f8;
+  --border-border-normal-2: #f0efef;
+  --border-border-normal-3: #d6d5d4;
+  --control-control-fail-background: var(--aviala-error-error-8, #ff1d4e);
+  --control-control-normal-lightbackground-1: #f0efef;
+  --control-control-normal-lightbackground-2: #e5e4e3;
+  --control-control-normal-background-3: #d6d5d4;
+  --control-control-normal-background-whiteonly: #ffffff;
 
   /* Neutral text series (body copy, labels, icons) */
-  --text-text-normal-text-black: #343333;
-  --text-text-normal-text-caption-black: #858484;
-  --text-text-normal-text-white: #fefcfc;
-  --text-text-normal-text-caption-white: #fefcfc;
+  --text-text-normal-text-black: #262525;
+  --text-text-normal-text-caption-black: #616060;
+  --text-text-normal-text-white: #fefdfd;
+  --text-text-normal-text-caption-white: #fefdfd;
+
+  /* Shared elevation — BasicShadow-Level4WithLine */
+  --aviala-shadow-level4-with-line:
+    0 0 1px 0 rgba(0, 0, 0, 0.45),
+    0 6px 18px 0 rgba(0, 0, 0, 0.08);
+
+  /* Shared interaction surfaces — Figma Components 1909:28593 matrix */
+  --aviala-interaction-ghost-hover: var(
+    --aviala-neutral-neutral-3,
+    var(--box-box-normal-lightbackground-white, #f9f8f8)
+  );
+  --aviala-interaction-ghost-active: var(
+    --control-control-normal-lightbackground-1,
+    #f0efef
+  );
+  --aviala-interaction-filled-default: var(
+    --control-control-normal-lightbackground-1,
+    #f0efef
+  );
+  --aviala-interaction-filled-hover: var(
+    --control-control-normal-lightbackground-2,
+    #e5e4e3
+  );
+  --aviala-interaction-filled-active: var(
+    --control-control-normal-background-3,
+    #d6d5d4
+  );
 
   /* shadcn semantic aliases — default typography/surfaces use neutral tokens, not theme tint */
-  --background: var(--normal-background-theme, #faf8f8);
-  --foreground: var(--text-text-normal-text-black, #343333);
-  --primary: var(--control-control-theme-background, #ff856b);
+  --background: var(--normal-background-theme, #f9f8f8);
+  --foreground: var(--text-text-normal-text-black, #262525);
+  --primary: var(--control-control-theme-background, #ff5532);
   --primary-foreground: #ffffff;
-  --secondary: var(--control-control-normal-lightbackground-deep, #fdfbfb);
-  --secondary-foreground: var(--text-text-normal-text-black, #343333);
-  --muted: var(--control-control-normal-lightbackground-light, #f5f3f3);
-  --muted-foreground: var(--text-text-normal-text-caption-black, #858484);
-  --accent: var(--control-control-normal-lightbackground-light, #f5f3f3);
-  --accent-foreground: var(--text-text-normal-text-black, #343333);
-  --destructive: var(--control-control-fail-background, #ff646f);
+  --secondary: var(--control-control-normal-lightbackground-2, #e5e4e3);
+  --secondary-foreground: var(--text-text-normal-text-black, #262525);
+  --muted: var(--control-control-normal-lightbackground-1, #f0efef);
+  --muted-foreground: var(--text-text-normal-text-caption-black, #616060);
+  --accent: var(--control-control-normal-lightbackground-1, #f0efef);
+  --accent-foreground: var(--text-text-normal-text-black, #262525);
+  --destructive: var(--control-control-fail-background, #ff1d4e);
   --destructive-foreground: #ffffff;
-  --border: var(--border-border-normal-light, #f5f3f3);
-  --input: var(--border-border-normal-light, #f5f3f3);
-  --ring: var(--border-border-theme-primary, #ff856b);
+  --border: var(--border-border-normal-1, #f9f8f8);
+  --input: var(--border-border-normal-1, #f9f8f8);
+  --ring: var(--border-border-theme-primary, #ff5532);
   --card: #ffffff;
   --card-foreground: var(--foreground);
   --popover: var(--card);
@@ -157,22 +189,27 @@
 }
 
 [data-mode="dark"] {
-  --background: #1a1a1a;
-  --foreground: var(--text-text-normal-text-white, #e8e8e8);
-  --muted-foreground: var(--text-text-normal-text-caption-black, #a8a8a8);
-  --secondary-foreground: var(--text-text-normal-text-white, #e8e8e8);
-  --accent-foreground: var(--text-text-normal-text-white, #e8e8e8);
-  --card: #242424;
+  --background: #090909;
+  --foreground: var(--text-text-normal-text-white, #d5d5d5);
+  --muted-foreground: var(--text-text-normal-text-caption-black, #8e8e8e);
+  --secondary-foreground: var(--text-text-normal-text-white, #d5d5d5);
+  --accent-foreground: var(--text-text-normal-text-white, #d5d5d5);
+  --card: #000000;
   --card-foreground: var(--foreground);
   --popover: var(--card);
   /* Override light :root neutrals — fallbacks alone never win once :root defines the var */
-  --border-border-normal-light: #3d3d3d;
-  --border-border-normal-primary: #2c2c2c;
-  --border-border-theme-light: var(--border-border-normal-light);
-  --border: var(--border-border-normal-light);
+  --border-border-normal-1: #090909;
+  --border-border-normal-2: #121212;
+  --border-border-normal-3: #252525;
+  --border-border-theme-light: var(--border-border-normal-1);
+  --border: var(--border-border-normal-1);
   --input: var(--border);
-  --muted: var(--control-control-normal-lightbackground-light, #2a2a2a);
-  --accent: var(--control-control-normal-lightbackground-light, #2a2a2a);
+  --control-control-normal-lightbackground-1: #121212;
+  --control-control-normal-lightbackground-2: #1a1a1a;
+  --control-control-normal-background-3: #252525;
+  --muted: var(--control-control-normal-lightbackground-1, #121212);
+  --accent: var(--control-control-normal-lightbackground-1, #121212);
+  --secondary: var(--control-control-normal-lightbackground-2, #1a1a1a);
 }
 
 :root {
@@ -186,7 +223,7 @@
     --control-control-theme-background,
     var(--aviala-primary-primary-8, #ff856b)
   );
-  --button-primary-fg: var(--primary-foreground, #fefcfc);
+  --button-primary-fg: var(--primary-foreground, #ffffff);
   --button-second-bg: var(
     --box-box-theme-secondarybackground,
     var(--aviala-primary-primary-4, #ffe9e5)
@@ -195,12 +232,12 @@
     --text-text-theme-primary-black,
     var(--aviala-primary-primary-10, #bf2300)
   );
-  --button-default-bg: var(--control-control-normal-lightbackground-light, #f5f3f3);
+  --button-default-bg: var(--control-control-normal-lightbackground-1, #f0efef);
   --button-default-fg: var(
     --text-text-theme-primary-black,
     var(--aviala-primary-primary-10, #bf2300)
   );
-  --button-default-custom-fg: var(--text-text-normal-text-black, #343333);
+  --button-default-custom-fg: var(--text-text-normal-text-black, #262525);
   --button-no-bg-fg: var(
     --text-text-theme-primary-black,
     var(--aviala-primary-primary-10, #bf2300)
@@ -209,24 +246,31 @@
     --control-control-fail-background,
     var(--aviala-error-error-8, #ff646f)
   );
-  --button-destructive-fg: var(--destructive-foreground, #fefcfc);
+  --button-destructive-fg: var(--destructive-foreground, #ffffff);
 
-  /* Button hover/active — ALD palette steps (primary-7 hover, primary-9 press) */
-  --button-primary-bg-hover: var(--aviala-primary-primary-7, #ffab98);
-  --button-primary-bg-active: var(--aviala-primary-primary-9, #e92d00);
+  /* Button hover/active — Figma matrix: primary hover darker / active lighter */
+  --button-primary-bg-hover: var(--aviala-primary-primary-9, #e92d00);
+  --button-primary-bg-active: var(--aviala-primary-primary-7, #ff7b5b);
+  --button-destructive-bg-hover: var(--aviala-error-error-9, #e0003d);
+  --button-destructive-bg-active: var(--aviala-error-error-7, #ff6b8a);
   --button-hover-brightness: 1.05;
   --button-active-brightness: 0.95;
   --button-second-bg-hover: var(--aviala-primary-primary-5, #ffc5b9);
-  --button-default-bg-hover: var(--aviala-neutral-neutral-6, #edebeb);
-  /* noBackground — theme palette -2 hover, -5 press */
-  --button-no-bg-hover: var(
-    --control-control-theme-lightbackground,
-    var(--aviala-primary-primary-2, #fff9f8)
+  --button-second-bg-active: var(--aviala-primary-primary-6, #ffab98);
+  --button-default-bg-hover: var(--aviala-interaction-filled-hover, #e5e4e3);
+  --button-default-bg-active: var(--aviala-interaction-filled-hover, #e5e4e3);
+  /* Ghost / outline — Figma: neutral-3 hover, lightBackground-1 active */
+  --button-no-bg-hover: var(--aviala-interaction-ghost-hover, #f9f8f8);
+  --button-no-bg-active: var(--aviala-interaction-ghost-active, #f0efef);
+  --button-no-bg-custom-hover: var(--aviala-interaction-ghost-hover, #f9f8f8);
+  --button-no-bg-custom-active: var(--aviala-interaction-ghost-active, #f0efef);
+  /* outline / outlineCustom — Figma Mode=Outline(-Custom); 1px outside stroke */
+  --button-outline-border: var(--border-border-normal-3, #d6d5d4);
+  --button-outline-fg: var(
+    --text-text-theme-primary-black,
+    var(--aviala-primary-primary-10, #bf2300)
   );
-  --button-no-bg-active: var(--aviala-primary-primary-5, #ffc5b9);
-  /* noBackgroundCustom — neutral-4 hover, neutral-5 press */
-  --button-no-bg-custom-hover: var(--aviala-neutral-neutral-4, #faf8f8);
-  --button-no-bg-custom-active: var(--aviala-neutral-neutral-5, #f5f3f3);
+  --button-outline-custom-fg: var(--text-text-normal-text-black, #262525);
   --button-icon-size: var(--icon-size-text-bigger, var(--size-middle, 1rem));
   --button-icon-slot-height: var(--line-height-regular, 1.125rem);
 
@@ -289,9 +333,9 @@
   --icon-size-caption: var(--size-small, 0.75rem);
   --icon-size-caption-bigger: var(--size-regular, 0.875rem);
 
-  --input-bg-default: var(--control-control-normal-lightbackground-light, #f5f3f3);
-  --input-bg-hover: var(--control-control-normal-background-deep, #e2e0e0);
-  --input-bg-activated: var(--control-control-normal-lightbackground-whiteonly, #fefcfc);
+  --input-bg-default: var(--aviala-interaction-filled-default, #f0efef);
+  --input-bg-hover: var(--aviala-interaction-filled-hover, #e5e4e3);
+  --input-bg-activated: var(--control-control-normal-background-whiteonly, #ffffff);
   --input-border-activated: var(--border-border-theme-primary, var(--primary));
   --input-fg: var(--text-text-normal-text-black, var(--foreground));
   --input-placeholder-opacity: var(--transparency-placeholder, 0.6);
@@ -318,30 +362,30 @@
   --textarea-min-height-big: 70px;
   --textarea-min-width: var(--button-min-width, 46px);
   --textarea-radius: var(--border-radius-small, 8px);
-  --textarea-controller-bg: var(--control-control-normal-lightbackground-light, #f5f3f3);
-  --textarea-counter-fg: var(--text-text-normal-text-caption-black, #858484);
+  --textarea-controller-bg: var(--control-control-normal-lightbackground-1, #f0efef);
+  --textarea-counter-fg: var(--text-text-normal-text-caption-black, #616060);
 
   --radio-size: var(--size-big, 1.25rem);
   --radio-indicator-size: 0.5rem;
-  --radio-bg-unchecked: var(--control-control-normal-lightbackground-whiteonly, #fefcfc);
-  --radio-border-unchecked: var(--border-border-normal-light, #e8e6e6);
+  --radio-bg-unchecked: var(--control-control-normal-background-whiteonly, #ffffff);
+  --radio-border-unchecked: var(--border-border-normal-1, #e8e6e6);
   --radio-checked-bg: var(--control-control-theme-background, var(--button-primary-bg));
-  --radio-indicator-bg: var(--control-control-normal-lightbackground-whiteonly, #fefcfc);
+  --radio-indicator-bg: var(--control-control-normal-background-whiteonly, #ffffff);
   --radio-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.06);
   --radio-input-gap: var(--gap-component-space, 8px);
   --radio-group-gap: var(--gap-content-space, 10px);
-  --radio-label-fg: var(--text-text-normal-text-black, #343333);
-  --radio-caption-fg: var(--text-text-normal-text-caption-black, #858484);
+  --radio-label-fg: var(--text-text-normal-text-black, #262525);
+  --radio-caption-fg: var(--text-text-normal-text-caption-black, #616060);
   --radio-card-border-selected: var(--border-border-theme-primary, #ff5532);
-  --radio-card-hover-bg: var(--aviala-neutral-neutral-4, #faf8f8);
-  --radio-card-press-bg: var(--aviala-neutral-neutral-6, #edebeb);
+  --radio-card-hover-bg: var(--aviala-interaction-filled-hover, #e5e4e3);
+  --radio-card-press-bg: var(--aviala-interaction-filled-active, #d6d5d4);
   --radio-disabled-opacity: var(--input-disabled-opacity, 0.55);
 
-  --select-menu-bg: var(--control-control-normal-lightbackground-whiteonly, #fefcfc);
-  --select-menu-border: var(--border-border-normal-light, #f5f3f3);
+  --select-menu-bg: var(--control-control-normal-background-whiteonly, #ffffff);
+  --select-menu-border: var(--border-border-normal-1, #f0efef);
   --select-menu-radius: var(--border-radius-middle, 10px);
-  --select-menu-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
-  --select-item-highlight-bg: var(--control-control-normal-lightbackground-light, #f5f3f3);
+  --select-menu-shadow: var(--aviala-shadow-level4-with-line);
+  --select-item-highlight-bg: var(--aviala-interaction-filled-hover, #e5e4e3);
   --select-item-selected-bg: var(--box-box-theme-secondarybackground, #ffdad2);
   --select-item-selected-fg: var(--text-text-theme-primary-black, #bf2300);
   --select-item-checked-bg: var(--box-box-theme-lightbackground, #fff3f0);
@@ -350,14 +394,14 @@
   --select-item-subtitle-fg: var(--select-label-fg);
   --select-item-subtitle-font-size: var(--select-label-font-size);
   --select-item-subtitle-line-height: var(--select-label-line-height);
-  --select-label-fg: var(--text-text-normal-text-caption-black, #858484);
+  --select-label-fg: var(--text-text-normal-text-caption-black, #616060);
   --select-menu-py: var(--gap-inside-space, 6px);
   --select-group-gap: var(--gap-inside, 4px);
   --select-group-px: var(--gap-inside-space, 6px);
   --select-slot-gap: var(--gap-inside, 4px);
   --select-item-font-size: var(--input-font-size);
   --select-item-line-height: var(--input-line-height);
-  --select-item-fg: var(--text-text-normal-text-black, #343333);
+  --select-item-fg: var(--text-text-normal-text-black, #262525);
   --select-item-gap: var(--gap-component-space, 8px);
   --select-item-px: var(--padding-default, 8px);
   --select-item-py: var(--padding-tiny, 4px);
@@ -427,25 +471,27 @@
   --checkbox-check-duration: 300ms;
   --checkbox-check-easing: cubic-bezier(0.873, 0, 0, 1);
   --checkbox-surface-easing: ease;
-  --checkbox-bg-unchecked: var(--control-control-normal-lightbackground-whiteonly, #fefcfc);
-  --checkbox-border-unchecked: var(--border-border-normal-primary, #e2e0e0);
+  --checkbox-bg-unchecked: var(--control-control-normal-background-whiteonly, #ffffff);
+  --checkbox-border-unchecked: var(--border-border-normal-3, #d6d5d4);
   --checkbox-checked-bg: var(--control-control-theme-background, var(--button-primary-bg));
-  --checkbox-checked-icon: var(--control-control-normal-lightbackground-whiteonly, #fefcfc);
+  --checkbox-checked-icon: var(--control-control-normal-background-whiteonly, #ffffff);
   --checkbox-indeterminate-bg: var(--box-box-theme-secondarybackground, #ffdad2);
   --checkbox-indeterminate-mark-bg: var(--box-box-theme-primarybackground, #ff5532);
   --checkbox-input-gap: var(--gap-component-space, 8px);
   --checkbox-group-gap: var(--gap-content-space, 10px);
-  --checkbox-label-fg: var(--text-text-normal-text-black, #343333);
-  --checkbox-caption-fg: var(--text-text-normal-text-caption-black, #858484);
+  --checkbox-label-fg: var(--text-text-normal-text-black, #262525);
+  --checkbox-caption-fg: var(--text-text-normal-text-caption-black, #616060);
   --checkbox-disabled-opacity: var(--input-disabled-opacity, 0.55);
   --switch-width: 34px;
   --switch-height-regular: 22px;
   --switch-height-small: 20px;
-  --switch-track-bg: var(--control-control-normal-background-deep, #e2e0e0);
-  --switch-hover-bg: var(--aviala-neutral-neutral-8, #d2d0d0);
-  --switch-press-bg: var(--aviala-neutral-neutral-9, #bebcbc);
+  --switch-track-bg: var(--control-control-normal-background-3, #d6d5d4);
+  --switch-hover-bg: var(--aviala-neutral-neutral-7, #c4c2c2);
+  --switch-press-bg: var(--aviala-neutral-neutral-8, #afadad);
   --switch-checked-bg: var(--control-control-theme-background, var(--button-primary-bg));
-  --switch-thumb-bg: var(--control-control-normal-lightbackground-whiteonly, #fefcfc);
+  --switch-checked-bg-hover: var(--button-primary-bg-hover);
+  --switch-checked-bg-active: var(--button-primary-bg-active);
+  --switch-thumb-bg: var(--control-control-normal-background-whiteonly, #ffffff);
   --switch-thumb-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.06);
   --switch-thumb-size-regular: 18px;
   --switch-thumb-size-small: 16px;
@@ -465,15 +511,16 @@
   --link-fg-theme: var(--text-text-theme-primary-black, var(--button-no-bg-fg));
   --link-fg-custom: var(--text-text-normal-text-black, var(--button-default-custom-fg));
 
-  --segmentator-bg: var(--control-control-normal-lightbackground-light, #f5f3f3);
-  --segmentator-selected-bg: var(--control-control-normal-lightbackground-whiteonly, #fefcfc);
+  --segmentator-bg: var(--control-control-normal-lightbackground-1, #f0efef);
+  --segmentator-selected-bg: var(--control-control-normal-background-whiteonly, #ffffff);
   --segmentator-selected-fg: var(--text-text-theme-primary-black, var(--button-no-bg-fg));
   --segmentator-fg: var(--text-text-normal-text-black, var(--button-default-custom-fg));
   --segmentator-tiled-bg: var(--box-box-theme-secondarybackground, var(--button-second-bg));
   --segmentator-shadow-selected: 0 4px 8px rgba(0, 0, 0, 0.06);
   --segmentator-shadow-tiled: inset 0 -0.5px 0
     var(--special-effort-se-lineshadow-bottom, rgba(0, 0, 0, 0.04));
-  --segmentator-item-hover-bg: var(--aviala-neutral-neutral-6, #edebeb);
+  --segmentator-item-hover-bg: var(--aviala-interaction-filled-hover, #e5e4e3);
+  --segmentator-item-active-bg: var(--aviala-interaction-filled-active, #d6d5d4);
   --segmentator-press-scale: 0.98;
   --segmentator-press-height-scale: 0.88;
   --segmentator-press-transition-duration: var(--segmentator-transition-duration, 0.52s);
@@ -484,20 +531,20 @@
   --segmentator-haptic-press-ms: 20;
   --segmentator-haptic-select-ms: 16;
 
-  --badge-bg: var(--control-control-normal-lightbackground-deep, #fdfbfb);
+  --badge-bg: var(--control-control-normal-lightbackground-2, #e5e4e3);
   --badge-gap: var(--padding-min, 2px);
   --badge-px: var(--padding-tiny, 4px);
   --badge-radius: var(--border-radius-extra-small-2, 6px);
-  --badge-fg: var(--text-text-normal-text-black, #343333);
+  --badge-fg: var(--text-text-normal-text-black, #262525);
   --badge-icon-slot-height: var(--line-height-small, 1rem);
   --badge-icon-size: var(--icon-size-caption, 0.75rem);
 
   --avatar-bg: var(--text-text-theme-secondary-black, #ff8368);
-  --avatar-fg: var(--text-text-normal-text-black, #343333);
+  --avatar-fg: var(--text-text-normal-text-black, #262525);
 
-  --tag-bg: var(--box-box-normal-background-whiteonly, #fefcfc);
-  --tag-border: var(--border-border-normal-light, #f5f3f3);
-  --tag-fg: var(--text-text-normal-text-caption-black, #858484);
+  --tag-bg: var(--box-box-normal-background-whiteonly, #ffffff);
+  --tag-border: var(--border-border-normal-1, #f0efef);
+  --tag-fg: var(--text-text-normal-text-caption-black, #616060);
   --tag-gap: var(--padding-tiny, 4px);
   --tag-px: var(--padding-min, 2px);
   --tag-radius: var(--border-radius-extra-small-2, 6px);
@@ -508,21 +555,21 @@
   --progress-bar-height: 4px;
   --progress-bar-height-big: 6px;
   --progress-label-width: 22px;
-  --progress-label-fg: var(--text-text-normal-text-caption-black, #858484);
-  --progress-track-bg: var(--box-box-normal-background-whiteonly, #fefcfc);
-  --progress-track-border: var(--border-border-normal-light, #f5f3f3);
+  --progress-label-fg: var(--text-text-normal-text-caption-black, #616060);
+  --progress-track-bg: var(--box-box-normal-background-whiteonly, #ffffff);
+  --progress-track-border: var(--border-border-normal-1, #f0efef);
   --progress-ring-size: 16px;
 
   --scroll-size: 10px;
   --scroll-size-small: 8px;
-  --scroll-thumb-bg: var(--control-control-normal-background-deep, #e2e0e0);
+  --scroll-thumb-bg: var(--control-control-normal-background-3, #d6d5d4);
   --scroll-track-padding-y: var(--padding-tiny, 4px);
   --scroll-track-padding-x: var(--padding-min, 2px);
   --scroll-thumb-inset: 2px;
   --scroll-thumb-inset-small: 1px;
 
-  --table-bg: var(--box-box-normal-lightbackground-white, #fdfbfb);
-  --table-border: var(--border-border-normal-light, #f5f3f3);
+  --table-bg: var(--box-box-normal-lightbackground-white, #f9f8f8);
+  --table-border: var(--border-border-normal-1, #f0efef);
   --table-radius: var(--border-radius-middle, 10px);
   --table-head-height: 38px;
   --table-cell-height: 50px;
@@ -531,25 +578,24 @@
   --table-cell-gap: var(--gap-component-space, 8px);
   --table-checkbox-col-width: 40px;
   --table-cell-icon-size: var(--icon-size-text-bigger, 1rem);
-  --table-head-fg: var(--text-text-normal-text-caption-black, #858484);
-  --table-cell-fg: var(--text-text-normal-text-black, #343333);
+  --table-head-fg: var(--text-text-normal-text-caption-black, #616060);
+  --table-cell-fg: var(--text-text-normal-text-black, #262525);
 
   --color-picker-panel-width: 370px;
   --color-picker-area-height: 160px;
   --color-picker-swatch-input: 18px;
   --color-picker-swatch-button: 26px;
   --color-picker-swatch-button-size: 32px;
-  --color-picker-slider-height: 8px;
-  --color-picker-slider-thumb: 10px;
+  --color-picker-slider-height: 16px;
   --color-picker-panel-bg: var(--select-menu-bg);
   --color-picker-panel-border: var(--select-menu-border);
   --color-picker-panel-radius: var(--select-menu-radius);
   --color-picker-panel-shadow: var(--select-menu-shadow);
   --color-picker-panel-gap: var(--gap-content-space, 10px);
   --color-picker-panel-px: var(--padding-default, 8px);
-  --color-picker-thumb-border: var(--border-border-normal-primary, #e2e0e0);
-  --color-picker-checkerboard-light: #e2e0e0;
-  --color-picker-checkerboard-dark: #fefcfc;
+  --color-picker-thumb-border: var(--border-border-normal-3, #d6d5d4);
+  --color-picker-checkerboard-light: #d6d5d4;
+  --color-picker-checkerboard-dark: #ffffff;
 
   --datepicker-trigger-min-width: 46px;
   --datepicker-panel-width: 290px;
@@ -562,7 +608,7 @@
   --datepicker-panel-py: var(--padding-default, 8px);
   --datepicker-header-gap: 5px;
   --datepicker-header-fg: var(--select-item-fg);
-  --datepicker-weekday-bg: var(--box-box-normal-lightbackground-white, #fdfbfb);
+  --datepicker-weekday-bg: var(--box-box-normal-lightbackground-white, #f9f8f8);
   --datepicker-weekday-height: 18px;
   --datepicker-weekday-fg: var(--select-label-fg);
   --datepicker-grid-gap: 4px;
@@ -574,7 +620,7 @@
   --datepicker-day-bg-in-range: var(--control-theme-lightbackground, #ffdad2);
   --datepicker-day-bg-selected: var(--control-theme-lightbackground, #ffdad2);
   --datepicker-day-today-dot: var(--text-text-theme-primary-black, #bf2300);
-  --datepicker-footer-bg: var(--control-normal-lightbackground-light, #f5f3f3);
+  --datepicker-footer-bg: var(--control-control-normal-lightbackground-1, #f0efef);
   --datepicker-grid-rows: 6;
   --datepicker-day-height: calc(
     var(--padding-min, 2px) * 2 + var(--line-height-line-height-regular, 1.125rem)
@@ -611,18 +657,18 @@
   --popover-content-px: var(--padding-default, 8px);
   --popover-content-py: var(--padding-default, 8px);
   --popover-content-max-width: 320px;
-  --popover-content-arrow-stroke: var(--border-border-normal-light, #f5f3f3);
+  --popover-content-arrow-stroke: var(--border-border-normal-1, #f0efef);
 
   /* Modal — Figma Information Display → Modal (553:58593) */
   --modal-overlay-bg: rgba(0, 0, 0, 0.45);
   --modal-content-width: 260px;
   --modal-content-width-large: 480px;
   --modal-content-max-width: calc(100vw - 32px);
-  --modal-content-bg: var(--box-box-normal-background-whiteonly, #fefcfc);
-  --modal-content-fg: var(--text-text-normal-text-black, #343333);
-  --modal-content-border: var(--border-border-normal-light, #f5f3f3);
+  --modal-content-bg: var(--box-box-normal-background-whiteonly, #ffffff);
+  --modal-content-fg: var(--text-text-normal-text-black, #262525);
+  --modal-content-border: var(--border-border-normal-1, #f0efef);
   --modal-content-radius: var(--border-radius-big, 12px);
-  --modal-content-shadow: 0 8px 24px 2px rgba(0, 0, 0, 0.06);
+  --modal-content-shadow: var(--aviala-shadow-level4-with-line);
   --modal-header-bg: var(--modal-content-bg);
   --modal-header-pl: var(--padding-big, 14px);
   --modal-header-pr: var(--padding-small, 6px);
@@ -631,7 +677,7 @@
   --modal-header-gap: var(--gap-content-space, 10px);
   --modal-section-px: var(--padding-big, 14px);
   --modal-section-py: var(--padding-default, 8px);
-  --modal-section-border: var(--border-border-normal-light, #f5f3f3);
+  --modal-section-border: var(--border-border-normal-1, #f0efef);
   --modal-body-bg: var(--modal-content-bg);
   --modal-footer-bg: var(--modal-content-bg);
   --modal-footer-gap: var(--gap-content-space, 10px);
@@ -641,13 +687,13 @@
   --modal-icon-py: var(--padding-min, 2px);
   --modal-icon-fg: var(--text-text-infomation-primary-black, #3489c8);
   --modal-close-icon-size: var(--size-middle, 1rem);
-  --modal-close-fg: var(--text-text-normal-text-caption-black, #858484);
-  --modal-description-fg: var(--text-text-normal-text-caption-black, #858484);
+  --modal-close-fg: var(--text-text-normal-text-caption-black, #616060);
+  --modal-description-fg: var(--text-text-normal-text-caption-black, #616060);
 
-  --tooltip-content-bg: var(--text-text-normal-text-black, var(--aviala-neutral-neutral-10, #343333));
+  --tooltip-content-bg: var(--text-text-normal-text-black, var(--aviala-neutral-neutral-10, #262525));
   --tooltip-content-fg: var(
-    --control-control-normal-lightbackground-whiteonly,
-    var(--aviala-neutral-neutral-2, #fefcfc)
+    --control-control-normal-background-whiteonly,
+    var(--aviala-neutral-neutral-2, #ffffff)
   );
   --tooltip-content-radius: var(--border-radius-small, 8px);
   --tooltip-content-px: var(--padding-default, 8px);
@@ -655,47 +701,77 @@
   --tooltip-content-max-width: 240px;
   --tooltip-content-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
 
-  --list-bg: var(--box-box-normal-lightbackground-white, #fdfbfb);
+  --list-bg: var(--box-box-normal-lightbackground-white, #f9f8f8);
   --list-gap: var(--gap-component-space, 8px);
   --list-title-px: 12px;
-  --list-title-fg: var(--text-text-normal-text-black, #343333);
+  --list-title-fg: var(--text-text-normal-text-black, #262525);
   --list-group-radius: var(--border-radius-middle, 10px);
   --list-item-radius: var(--border-radius-small, 8px);
-  --list-item-fg: var(--text-text-normal-text-black, #343333);
+  --list-item-fg: var(--text-text-normal-text-black, #262525);
   --list-item-block-gap: var(--gap-block-space, 14px);
   --list-item-pl: var(--padding-big, 14px);
   --list-item-icon-py: var(--padding-default, 8px);
   --list-item-content-py: var(--padding-default, 8px);
   --list-item-content-pr: var(--padding-big, 14px);
   --list-item-content-gap: var(--gap-content-space, 10px);
-  --list-item-border: var(--border-border-normal-light, #f5f3f3);
+  --list-item-border: var(--border-border-normal-1, #f0efef);
   --list-item-icon-shaped-size: 36px;
   --list-item-icon-default-size: 22px;
   --list-item-icon-shaped-bg: var(--box-box-theme-primarybackground, #ff5532);
   --list-item-icon-shaped-fg: var(
-    --control-control-normal-lightbackground-whiteonly,
-    #fefcfc
+    --control-control-normal-background-whiteonly,
+    #ffffff
   );
   --list-item-trailing-gap: 10px;
   --list-item-divider-height: 14px;
   --list-item-select-width: 143px;
-  --list-item-highlight-bg: var(--select-item-highlight-bg);
+  --list-item-highlight-bg: var(
+    --aviala-interaction-filled-hover,
+    var(--select-item-highlight-bg)
+  );
+  --list-item-active-bg: var(--aviala-interaction-filled-active, #d6d5d4);
   --list-item-selected-bg: var(--select-item-selected-bg);
   --list-item-selected-fg: var(--select-item-selected-fg);
   --list-item-disabled-opacity: var(--input-disabled-opacity, 0.55);
   --list-separator-my: var(--list-gap);
 
-  --navigation-bg: var(--box-box-normal-background-whiteonly, #fefcfc);
+  /* Tab — Figma Structure Navigation → Tab / TabItem */
+  --tab-gap: var(--gap-inside, 4px);
+  --tab-px: var(--padding-default, 8px);
+  --tab-list-gap: var(--gap-inside-space, 6px);
+  --tab-list-gap-card: 0px;
+  --tab-slot-gap: var(--gap-component-space, 8px);
+  --tab-item-indicator-space: var(--padding-small, 6px);
+  --tab-item-control-gap: var(--gap-inside, 4px);
+  --tab-item-control-radius: var(--border-radius-small, 8px);
+  --tab-icon-box: 18px;
+  --tab-icon-size: var(--icon-size-text-bigger, var(--size-middle, 1rem));
+  --tab-fg: var(--text-text-normal-text-black, #262525);
+  --tab-bg: var(--box-box-normal-background-whiteonly, #ffffff);
+  --tab-bg-card: var(--control-control-normal-lightbackground-1, #f0efef);
+  --tab-card-active-bg: var(--box-box-normal-background-whiteonly, #ffffff);
+  --tab-card-ear-size: 8px;
+  --tab-indicator-height: 4px;
+  --tab-indicator-inset-inline: 12px;
+  --tab-indicator-radius: var(--border-radius-extra-small-2, 6px);
+  --tab-indicator-color: var(--border-border-theme-primary, #ff856b);
+  --tab-transition-duration: var(--navigation-transition-duration, 0.3s);
+  --tab-transition-easing: var(
+    --navigation-transition-easing,
+    cubic-bezier(0.16, 1, 0.3, 1)
+  );
+
+  --navigation-bg: var(--box-box-normal-background-whiteonly, #ffffff);
   --navigation-gap: var(--gap-content-space, 10px);
   --navigation-py: var(--padding-big, 14px);
   --navigation-height-horizontal: 48px;
   --navigation-px-horizontal: var(--padding-large, 18px);
-  --navigation-divider: var(--border-border-normal-light, #f5f3f3);
+  --navigation-divider: var(--border-border-normal-1, #f0efef);
   --navigation-brand-px: var(--padding-big, 14px);
   --navigation-brand-title-height: 26px;
-  --navigation-brand-fg: var(--text-text-normal-text-black, #343333);
+  --navigation-brand-fg: var(--text-text-normal-text-black, #262525);
   --navigation-section-px: var(--gap-inside-space, 6px);
-  --navigation-section-fg: var(--muted-foreground, #858484);
+  --navigation-section-fg: var(--muted-foreground, #616060);
   --navigation-group-gap: var(--gap-inside-space, 6px);
   --navigation-group-gap-horizontal: var(--gap-inside-space, 6px);
   --navigation-item-px: var(--padding-default, 8px);
@@ -710,7 +786,7 @@
   /* Vertical active rail: grow on hover / shrink on press (inset from item edges). */
   --navigation-rail-inset-hover: 3px;
   --navigation-rail-inset-press: 9px;
-  --navigation-rail-left: 1px;
+  --navigation-rail-inline-start: 1px;
   --navigation-rail-width: 3px;
   --navigation-indicator-width-horizontal: 50px;
   --navigation-transition-duration: var(--switch-transition-duration, 0.3s);
@@ -731,11 +807,11 @@
     --text-text-theme-primary-black,
     var(--button-no-bg-fg)
   );
-  --loading-fg-black: var(--text-text-normal-text-black, #343333);
-  --loading-fg-white: var(--control-control-normal-lightbackground-whiteonly, #fefcfc);
+  --loading-fg-black: var(--text-text-normal-text-black, #262525);
+  --loading-fg-white: var(--control-control-normal-background-whiteonly, #ffffff);
 
   /* Feedback — Figma Response And Feedback → Feedback (553:58620) */
-  --feedback-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
+  --feedback-shadow: var(--aviala-shadow-level4-with-line);
   --feedback-radius-default: var(--border-radius-middle, 10px);
   --feedback-radius-small: var(--border-radius-allround, 99px);
   --feedback-body-gap: var(--gap-component-space, 8px);
@@ -746,13 +822,13 @@
   --feedback-close-icon-size: var(--size-middle, 1rem);
   --feedback-close-icon-size-primary: var(--size-regular, 0.875rem);
   --feedback-content-max-width: 480px;
-  --feedback-title-fg-default: var(--text-text-normal-text-black, #343333);
-  --feedback-description-fg-default: var(--text-text-normal-text-caption-black, #858484);
-  --feedback-title-fg-primary: var(--text-text-normal-text-white, #fefcfc);
-  --feedback-description-fg-primary: var(--text-text-normal-text-caption-white, #fefcfc);
-  --feedback-close-fg: var(--text-text-normal-text-caption-black, #858484);
-  --feedback-close-fg-on-primary: var(--text-text-normal-text-white, #fefcfc);
-  --feedback-icon-fg-primary: var(--text-text-normal-text-white, #fefcfc);
+  --feedback-title-fg-default: var(--text-text-normal-text-black, #262525);
+  --feedback-description-fg-default: var(--text-text-normal-text-caption-black, #616060);
+  --feedback-title-fg-primary: var(--text-text-normal-text-white, #ffffff);
+  --feedback-description-fg-primary: var(--text-text-normal-text-caption-white, #ffffff);
+  --feedback-close-fg: var(--text-text-normal-text-caption-black, #616060);
+  --feedback-close-fg-on-primary: var(--text-text-normal-text-white, #ffffff);
+  --feedback-icon-fg-primary: var(--text-text-normal-text-white, #ffffff);
   --feedback-information-bg-default: var(--box-box-infomation-lightbackground, #fafbff);
   --feedback-information-bg-primary: var(--box-box-infomation-primarybackground, #66b6fa);
   --feedback-information-border: var(--border-border-infomation-primary, #66b6fa);
@@ -765,13 +841,13 @@
   --feedback-success-bg-default: var(--box-box-success-lightbackground, #f4fde9);
   --feedback-success-bg-primary: var(--box-box-success-primarybackground, #70b450);
   --feedback-success-border: var(--border-border-success-primary, #70b450);
-  --feedback-normal-bg-default: var(--box-box-normal-background-whiteonly, #fefcfc);
-  --feedback-normal-border: var(--border-border-normal-light, #f5f3f3);
+  --feedback-normal-bg-default: var(--box-box-normal-background-whiteonly, #ffffff);
+  --feedback-normal-border: var(--border-border-normal-1, #f0efef);
   --feedback-information-icon-fg: var(--text-text-infomation-primary-black, #3489c8);
   --feedback-warning-icon-fg: var(--text-text-warning-primary-black, #ab6200);
   --feedback-wrong-icon-fg: var(--text-text-fail-primary-black, #960024);
   --feedback-success-icon-fg: var(--text-text-success-primary-black, #47842b);
-  --feedback-normal-icon-fg: var(--text-text-normal-text-caption-black, #858484);
+  --feedback-normal-icon-fg: var(--text-text-normal-text-caption-black, #616060);
 
   /* Alert — Figma Response And Feedback → Alert (527:56855) */
   --alert-radius: var(--border-radius-small, 8px);
@@ -780,10 +856,10 @@
   --alert-body-py: var(--padding-small, 6px);
   --alert-icon-size: var(--size-middle, 1rem);
   --alert-icon-slot-height: var(--line-height-regular, 1.125rem);
-  --alert-title-fg: var(--text-text-normal-text-black, #343333);
-  --alert-description-fg: var(--text-text-normal-text-caption-black, #858484);
-  --alert-close-fg: var(--text-text-normal-text-caption-black, #858484);
-  --alert-secondary-action-fg: var(--text-text-normal-text-caption-black, #858484);
+  --alert-title-fg: var(--text-text-normal-text-black, #262525);
+  --alert-description-fg: var(--text-text-normal-text-caption-black, #616060);
+  --alert-close-fg: var(--text-text-normal-text-caption-black, #616060);
+  --alert-secondary-action-fg: var(--text-text-normal-text-caption-black, #616060);
   --alert-actions-gap: var(--gap-component-space, 8px);
   --alert-actions-pl: 30px;
   --alert-actions-pr: var(--gap-content-space, 10px);
@@ -800,14 +876,14 @@
   --alert-success-bg-default: var(--box-box-success-lightbackground, #f4fde9);
   --alert-success-bg-light: var(--box-box-success-secondarybackground, #dff6ce);
   --alert-success-border: var(--border-border-success-primary, #70b450);
-  --alert-neutral-bg-default: var(--box-box-normal-background-whiteonly, #fefcfc);
-  --alert-neutral-bg-light: var(--box-box-normal-lightbackground-white, #fdfbfb);
-  --alert-neutral-border: var(--border-border-normal-light, #f5f3f3);
+  --alert-neutral-bg-default: var(--box-box-normal-background-whiteonly, #ffffff);
+  --alert-neutral-bg-light: var(--box-box-normal-lightbackground-white, #f9f8f8);
+  --alert-neutral-border: var(--border-border-normal-1, #f0efef);
   --alert-info-icon-fg: var(--text-text-infomation-primary-black, #3489c8);
   --alert-warning-icon-fg: var(--text-text-warning-primary-black, #ab6200);
   --alert-error-icon-fg: var(--text-text-fail-primary-black, #960024);
   --alert-success-icon-fg: var(--text-text-success-primary-black, #47842b);
-  --alert-neutral-icon-fg: var(--text-text-normal-text-caption-black, #858484);
+  --alert-neutral-icon-fg: var(--text-text-normal-text-caption-black, #616060);
 
   /* Keyboard focus ring — Tab focus: ring 12px→3px, flush outer border, 250ms */
   --focus-ring-width-start: var(--size-small, 0.75rem);
@@ -832,17 +908,16 @@
   --slider-value-transition-easing: cubic-bezier(0.22, 1, 0.36, 1);
   --slider-pad-y: var(--padding-tinyer, 3px);
   /* Default & Big tracks share fill tokens; Big only differs by height/thumb.
-   * Track fill ON: border-normal-primary; OFF: border-normal-light. No stroke. */
-  --slider-track-bg: var(--border-border-normal-primary, #e2e0e0);
+   * Track fill ON: border-normal-3; OFF: border-normal-1. No stroke. */
+  --slider-track-bg: var(--border-border-normal-3, #d6d5d4);
   --slider-range-bg: var(--box-box-theme-primarybackground, #ff5532);
-  --slider-thumb-bg: var(--box-box-normal-background-whiteonly, #fefcfc);
+  --slider-thumb-bg: var(--box-box-normal-background-whiteonly, #ffffff);
   --slider-thumb-core: var(--box-box-theme-primarybackground, #ff5532);
   /* BasicShadow / BasicShadow-Level4WithLIne */
   --slider-thumb-shadow:
-    0 6px 18px rgba(0, 0, 0, 0.08),
-    0 0 1px rgba(0, 0, 0, 0.2);
+    var(--aviala-shadow-level4-with-line);
   /* Availability Status=OFF */
-  --slider-track-bg-disabled: var(--border-border-normal-light, #f5f3f3);
+  --slider-track-bg-disabled: var(--border-border-normal-1, #f0efef);
   --slider-range-bg-disabled: var(--box-box-theme-secondarybackground, #ffdad2);
   --slider-thumb-core-disabled: var(
     --box-box-theme-secondarybackground,
@@ -855,9 +930,9 @@
   --upload-large-gap: var(--gap-content-space, 10px);
   --upload-large-px: var(--padding-big, 14px);
   --upload-large-py: var(--padding-default, 8px);
-  --upload-large-bg: var(--control-control-normal-lightbackground-light, #f5f3f3);
-  --upload-large-fg: var(--text-text-normal-text-black, #343333);
-  --upload-large-caption-fg: var(--text-text-normal-text-caption-black, #858484);
+  --upload-large-bg: var(--control-control-normal-lightbackground-1, #f0efef);
+  --upload-large-fg: var(--text-text-normal-text-black, #262525);
+  --upload-large-caption-fg: var(--text-text-normal-text-caption-black, #616060);
   --upload-drag-border: var(--border-border-theme-primary, #ff5532);
   --upload-drag-bg: var(--box-box-theme-secondarybackground, #ffdad2);
   --upload-disabled-opacity: var(--transparency-disable, 0.55);
@@ -865,17 +940,17 @@
   /* ScrollPicker — Figma Information Collect → ScrollPicker (579:88681) */
   --scroll-picker-width: 200px;
   --scroll-picker-height: 230px;
-  --scroll-picker-bg: var(--box-box-normal-background-whiteonly, #fefcfc);
-  --scroll-picker-border: var(--border-border-normal-light, #f5f3f3);
+  --scroll-picker-bg: var(--box-box-normal-background-whiteonly, #ffffff);
+  --scroll-picker-border: var(--border-border-normal-1, #f0efef);
   --scroll-picker-radius: var(--border-radius-middle, 10px);
-  --scroll-picker-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.06);
+  --scroll-picker-shadow: var(--aviala-shadow-level4-with-line);
   --scroll-picker-column-px: var(--gap-inside-space, 6px);
   --scroll-picker-item-height: 26px;
   --scroll-picker-item-gap: var(--gap-inside, 4px);
   --scroll-picker-item-px: var(--padding-default, 8px);
   --scroll-picker-item-py: var(--padding-tiny, 4px);
   --scroll-picker-item-radius: var(--border-radius-extra-small-2, 6px);
-  --scroll-picker-item-fg: var(--text-text-normal-text-black, #343333);
+  --scroll-picker-item-fg: var(--text-text-normal-text-black, #262525);
   --scroll-picker-item-fg-selected: var(--text-text-theme-primary-black, #bf2300);
   --scroll-picker-item-bg-selected: var(--control-control-theme-lightbackground, #ffdad2);
   --scroll-picker-item-opacity: var(--transparency-placeholder, 0.6);
@@ -886,16 +961,16 @@
   --breadcrumb-item-gap: var(--gap-inside, 4px);
   --breadcrumb-item-px: var(--padding-tiny, 4px);
   --breadcrumb-item-radius: var(--border-radius-extra-small-2, 6px);
-  --breadcrumb-fg: var(--text-text-normal-text-black, #343333);
-  --breadcrumb-fg-muted: var(--text-text-normal-text-caption-black, #858484);
+  --breadcrumb-fg: var(--text-text-normal-text-black, #262525);
+  --breadcrumb-fg-muted: var(--text-text-normal-text-caption-black, #616060);
   --breadcrumb-separator-opacity: var(--transparency-placeholder, 0.6);
   --breadcrumb-icon-size: 0.875rem;
   --breadcrumb-icon-size-small: 0.75rem;
   --breadcrumb-ellipsis-menu-width: 120px;
 
   /* Pagehead — Figma Structure Navigation → Pagehead (643:172156) */
-  --pagehead-bg: var(--box-box-normal-background-whiteonly, #fefcfc);
-  --pagehead-border: var(--border-border-normal-light, #f5f3f3);
+  --pagehead-bg: var(--box-box-normal-background-whiteonly, #ffffff);
+  --pagehead-border: var(--border-border-normal-1, #f0efef);
   --pagehead-gap: var(--gap-content-space, 10px);
   --pagehead-px: var(--padding-large, 18px);
   --pagehead-title-gap: var(--gap-inside-space, 6px);
@@ -909,9 +984,9 @@
   --steps-item-gap: var(--gap-component-space, 8px);
   --steps-item-min-width: 120px;
   --steps-icon-size: var(--size-semilarge, 1.375rem);
-  --steps-title-fg: var(--text-text-normal-text-black, #343333);
+  --steps-title-fg: var(--text-text-normal-text-black, #262525);
   /* Figma StepsItem description uses Typography Text (not Caption) */
-  --steps-description-fg: var(--text-text-normal-text-black, #343333);
+  --steps-description-fg: var(--text-text-normal-text-black, #262525);
   --steps-done-bg: var(--box-box-success-secondarybackground, #dff6ce);
   --steps-done-fg: var(--text-text-success-primary-black, #47842b);
   --steps-fail-bg: var(--box-box-fail-secondarybackground, #ffdfdf);
@@ -922,10 +997,10 @@
   --steps-waiting-fg: var(--text-text-infomation-primary-black, #3489c8);
   --steps-in-progress-bg: var(--box-box-theme-primarybackground, #ff5532);
   --steps-in-progress-fg: var(--text-text-theme-primary-black, #bf2300);
-  --steps-in-progress-icon-fg: var(--text-text-normal-text-caption-white, #fefcfc);
-  --steps-default-bg: var(--box-box-normal-background-whiteonly, #fefcfc);
-  --steps-default-border: var(--border-border-normal-light, #f5f3f3);
-  --steps-default-fg: var(--text-text-normal-text-caption-black, #858484);
+  --steps-in-progress-icon-fg: var(--text-text-normal-text-caption-white, #ffffff);
+  --steps-default-bg: var(--box-box-normal-background-whiteonly, #ffffff);
+  --steps-default-border: var(--border-border-normal-1, #f0efef);
+  --steps-default-fg: var(--text-text-normal-text-caption-black, #616060);
 
   /* Pagination — Figma Structure Navigation → Pagination (791:146366) */
   --pagination-gap: var(--gap-content-space, 10px);
@@ -936,7 +1011,7 @@
   --pagination-page-active-px: var(--padding-middle, 10px);
   --pagination-page-active-py: var(--padding-small, 6px);
   --pagination-page-radius: var(--border-radius-small, 8px);
-  --pagination-page-fg: var(--text-text-normal-text-black, #343333);
+  --pagination-page-fg: var(--text-text-normal-text-black, #262525);
   --pagination-page-active-bg: var(--box-box-theme-secondarybackground, #ffdad2);
   --pagination-page-active-fg: var(--text-text-theme-primary-black, #bf2300);
   --pagination-jump-gap: 4px;
@@ -944,7 +1019,7 @@
   --pagination-size-select-width: 77px;
 
   /* Card — Figma Structure Navigation → Card (738:145715) */
-  --card-bg: var(--box-box-normal-lightbackground-white, #fdfbfb);
+  --card-bg: var(--box-box-normal-lightbackground-white, #f9f8f8);
   --card-radius: var(--border-radius-middle, 10px);
   --card-px: var(--padding-big, 14px);
   --card-gap: var(--gap-content-space, 10px);
@@ -953,7 +1028,7 @@
   --card-bottom-pt: var(--padding-tiny, 4px);
   --card-bottom-pb: var(--padding-default, 8px);
   --card-body-py: var(--padding-default, 8px);
-  --card-fg: var(--text-text-normal-text-black, #343333);
+  --card-fg: var(--text-text-normal-text-black, #262525);
   --card-divider-height: 14px;
   --card-trailing-gap: 10px;
 }
@@ -1056,11 +1131,11 @@
   --typography-caption-weight-number: var(--font-weight-light, 300);
 
   --typography-title-fg: var(--text-text-normal-title-black, #000000);
-  --typography-title-fg-white: var(--text-text-normal-title-white, #fefcfc);
-  --typography-body-fg: var(--text-text-normal-text-black, #343333);
-  --typography-body-fg-white: var(--text-text-normal-text-white, #fefcfc);
-  --typography-caption-fg: var(--text-text-normal-text-caption-black, #858484);
-  --typography-caption-fg-white: var(--text-text-normal-text-caption-white, #fefcfc);
+  --typography-title-fg-white: var(--text-text-normal-title-white, #ffffff);
+  --typography-body-fg: var(--text-text-normal-text-black, #262525);
+  --typography-body-fg-white: var(--text-text-normal-text-white, #ffffff);
+  --typography-caption-fg: var(--text-text-normal-text-caption-black, #616060);
+  --typography-caption-fg-white: var(--text-text-normal-text-caption-white, #ffffff);
 
   --typeface-gap: var(--gap-none, 0);
 }