npm - jouw-stem__design-system - Versions diffs - 0.1.0 → 0.2.0 - Mend

jouw-stem__design-system 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/dist/css/theme-dark.css +78 -78
package/dist/css/theme-light.css +888 -888
package/dist/manifest.json +2 -2
package/dist/scss/_tokens.scss +48 -48
package/dist/token-refs.json +67 -67
package/package.json +1 -1
package/src/components/ButtonPrimary/ButtonPrimary.tokens.theme-light.json +8 -8
package/tokens/themes/theme-dark/color.json +9 -9
package/tokens/themes/theme-light/color.json +52 -52

package/dist/css/theme-light.css CHANGED Viewed

@@ -1,59 +1,59 @@
 /* Auto-generated by build-tokens.ts - DO NOT EDIT */
 :root.theme-light, [data-theme="light"] {
-  --surface-canvas: #ffffff; /* Main page background — nu.nl pure white */
-  --surface-panel: #f5f5f5; /* Card/panel background — light grey, derived above the #eeeeee hairline */
+  --surface-canvas: #faf8f5; /* Main page background — warm off-white, the dominant fill across all six mockups */
+  --surface-panel: #ffffff; /* Card/panel background — pure white cards sitting on the warm canvas (pricing cards, form fields) */
   --surface-elevated: #ffffff; /* Elevated surface (modals, dropdowns) */
-  --surface-overlay: rgba(0, 0, 0, 0.5); /* Modal overlay backdrop */
-  --surface-muted: #f0f1f4; /* Subtle/recessed background — slightly navy-tinted neutral */
-  --surface-inverse: #1f2544; /* Dark surface for contrast (tooltips, banners) — nu.nl navy */
-  --surface-highlight: #fde8ea; /* Warm accent surface — light tint of breaking-news red */
-  --surface-gradient-start: #ffffff; /* Gradient background start — flattened to solid (no nu.nl gradient) */
-  --surface-gradient-end: #ffffff; /* Gradient background end — flattened to solid (no nu.nl gradient) */
-  --text-default: #1f2544; /* Primary text — nu.nl navy rgb(31,37,68) */
-  --text-primary: #1f2544; /* Primary text (alias) */
-  --text-secondary: #3d4467; /* Secondary text — slightly lifted navy */
-  --text-muted: #5e6481; /* Helper/secondary text */
-  --text-subtle: #8e93a8; /* Placeholder text */
-  --text-inverse: #ffffff; /* Text on dark backgrounds */
-  --text-link: #006cde; /* Link text — nu.nl link blue rgb(0,108,222) */
-  --text-linkHover: #0050a8; /* Link hover — darker blue */
-  --text-linkVisited: #5d3da8; /* Visited link */
-  --text-heading: #1f2544; /* Heading text — nu.nl navy */
-  --border-subtle: #eeeeee; /* Subtle borders — nu.nl hairline rgb(238,238,238) */
-  --border-default: #d9dadf; /* Default borders */
-  --border-strong: #1f2544; /* Emphasised borders — navy rule (nu.nl uses navy under nav, headings) */
-  --border-focus: #006cde; /* Focus ring colour — nu.nl link blue */
-  --border-vibrant-start: #1f2544; /* Vibrant gradient border start — flattened to solid navy */
-  --border-vibrant-end: #1f2544; /* Vibrant gradient border end — flattened to solid navy */
-  --feedback-success: #2a8a3a; /* Success state */
-  --feedback-successSubtle: #e6f4e9; /* Success background */
-  --feedback-successEmphasis: #1d6429; /* Success text */
-  --feedback-warning: #d97706; /* Warning state */
-  --feedback-warningSubtle: #fef3e6; /* Warning background */
-  --feedback-warningEmphasis: #a8590e; /* Warning text */
-  --feedback-error: #e00613; /* Error state — nu.nl breaking-news red rgb(224,6,19) */
-  --feedback-errorSubtle: #fde8ea; /* Error background */
-  --feedback-errorEmphasis: #c40000; /* Error text — nu.nl deeper promo red rgb(196,0,0) */
-  --feedback-info: #006cde; /* Info state — nu.nl link blue */
-  --feedback-infoSubtle: #e0eef9; /* Info background */
-  --feedback-infoEmphasis: #0050a8; /* Info text */
-  --accent-gradient-start: #1f2544; /* Accent gradient start — flattened to solid navy (nu.nl uses solid) */
-  --accent-gradient-end: #1f2544; /* Accent gradient end — flattened to solid navy */
-  --accent-gradient-hoverStart: #3d4467; /* Accent hover start — flattened to lifted navy */
-  --accent-gradient-hoverEnd: #3d4467; /* Accent hover end — flattened to lifted navy */
-  --intent-action-default: #1f2544; /* Primary CTA colour — nu.nl navy */
-  --intent-action-hover: #3d4467; /* Primary CTA hover */
-  --intent-action-active: #0f1422; /* Primary CTA pressed */
-  --intent-action-disabled: #d9dadf; /* Disabled state */
+  --surface-overlay: rgba(4, 26, 38, 0.55); /* Modal overlay backdrop — deep petrol wash rather than neutral black */
+  --surface-muted: #eceeec; /* Subtle/recessed background — cool grey-green band (quote block, 'eerste les gratis' strip) */
+  --surface-inverse: #041a26; /* Dark surface for contrast (footer, CTA bands) — deep petrol, measured flat fill */
+  --surface-highlight: #e2efec; /* Accent surface — light teal tint (selected/'meest gekozen' card wash) */
+  --surface-gradient-start: #faf8f5; /* Gradient background start — flattened to solid (design uses no surface gradients) */
+  --surface-gradient-end: #faf8f5; /* Gradient background end — flattened to solid (design uses no surface gradients) */
+  --text-default: #253a43; /* Primary body text — petrol slate, 11.2:1 on canvas */
+  --text-primary: #253a43; /* Primary text (alias) */
+  --text-secondary: #3d5058; /* Secondary text — lifted petrol slate, 8.0:1 on canvas */
+  --text-muted: #5f7178; /* Helper/secondary text — 4.8:1 on canvas, holds AA */
+  --text-subtle: #7d8f95; /* Placeholder text — 3.2:1 on canvas (AA-large / non-text minimum) */
+  --text-inverse: #faf8f5; /* Text on dark surfaces — warm off-white, 16.8:1 on the petrol inverse */
+  --text-link: #0f766e; /* Link text — teal ramp step 700, 5.2:1 on canvas */
+  --text-linkHover: #115e59; /* Link hover — one ramp step deeper, 7.2:1 on canvas */
+  --text-linkVisited: #4a5f74; /* Visited link — muted slate-blue, kept distinguishable from the teal link */
+  --text-heading: #04141f; /* Heading text — near-black petrol ink, 17.6:1 on canvas (darkest measured stroke plateau) */
+  --border-subtle: #e6e2dd; /* Subtle borders — warm hairline measured on the pricing-card outlines */
+  --border-default: #d5d8d4; /* Default borders — cool hairline matching the recessed band */
+  --border-strong: #04141f; /* Emphasised borders — petrol ink rule (used under headings in the mockups) */
+  --border-focus: #0f766e; /* Focus ring colour — teal ramp step 700 */
+  --border-vibrant-start: #0f766e; /* Vibrant gradient border start — flattened to solid teal */
+  --border-vibrant-end: #0f766e; /* Vibrant gradient border end — flattened to solid teal */
+  --feedback-success: #1f7a55; /* Success state — teal-leaning green, harmonised with the palette (5.0:1 on canvas) */
+  --feedback-successSubtle: #e4f2ec; /* Success background */
+  --feedback-successEmphasis: #145c3f; /* Success text */
+  --feedback-warning: #b3701a; /* Warning state — warm ochre tuned to the warm canvas (3.8:1) */
+  --feedback-warningSubtle: #f7eddf; /* Warning background */
+  --feedback-warningEmphasis: #8a5410; /* Warning text — 5.9:1 on canvas */
+  --feedback-error: #b8342c; /* Error state — muted brick red, desaturated to sit beside the teal (5.6:1) */
+  --feedback-errorSubtle: #f7e6e4; /* Error background */
+  --feedback-errorEmphasis: #8f2620; /* Error text — 8.0:1 on canvas */
+  --feedback-info: #0f766e; /* Info state — teal (the design carries no separate informational blue) */
+  --feedback-infoSubtle: #e2efee; /* Info background */
+  --feedback-infoEmphasis: #115e59; /* Info text — one ramp step deeper */
+  --accent-gradient-start: #0f766e; /* Accent gradient start — flattened to solid teal (design uses solid fills) */
+  --accent-gradient-end: #0f766e; /* Accent gradient end — flattened to solid teal */
+  --accent-gradient-hoverStart: #115e59; /* Accent hover start — flattened to one ramp step deeper */
+  --accent-gradient-hoverEnd: #115e59; /* Accent hover end — flattened to one ramp step deeper */
+  --intent-action-default: #0f766e; /* Primary CTA colour — teal.700 #0f766e, within 2% of the measured button fill #097878; 5.5:1 against a white label */
+  --intent-action-hover: #115e59; /* Primary CTA hover — one ramp step deeper, 7.6:1 against white */
+  --intent-action-active: #134e4a; /* Primary CTA pressed — two ramp steps deeper, 9.5:1 against white */
+  --intent-action-disabled: #d5d8d4; /* Disabled state */
   --intent-secondary-default: transparent; /* Secondary action bg */
-  --intent-secondary-hover: #f0f1f4; /* Secondary action hover */
-  --intent-secondary-border: #1f2544; /* Secondary action border — navy outline (nu.nl button pattern) */
-  --focus-ring: #006cde; /* Focus ring colour — nu.nl link blue */
-  --brand-primary: #1f2544; /* Primary brand colour — nu.nl navy rgb(31,37,68) */
-  --brand-secondary: #006cde; /* Secondary brand colour (CTA / link) — nu.nl blue rgb(0,108,222) */
-  --brand-accent: #e00613; /* Accent brand colour — nu.nl breaking red rgb(224,6,19) */
-  --brand-subtle: #f0f1f4; /* Subtle brand background */
+  --intent-secondary-hover: #eceeec; /* Secondary action hover — recessed band tint */
+  --intent-secondary-border: #0f766e; /* Secondary action border — teal outline (matches the 'Meer over mij' ghost buttons) */
+  --focus-ring: #0f766e; /* Focus ring colour — teal.700, 5.2:1 on canvas */
+  --brand-primary: #0f766e; /* Primary brand colour — the 'Jouw Stem' teal, carried by every CTA and the logo waveform */
+  --brand-secondary: #0d9488; /* Secondary brand colour — mid teal used for the decorative connector lines and icon strokes */
+  --brand-accent: #2dd4bf; /* Accent brand colour — light teal for on-dark use (footer section labels, 9.6:1 on the petrol inverse) */
+  --brand-subtle: #e2efec; /* Subtle brand background — light teal wash */
   --container-max-width-narrow: 720px; /* Long-form reading / forms / articles (~65ch comfortable line length) */
   --container-max-width-default: 1200px; /* Standard app shell */
   --container-max-width-wide: 1600px; /* Data-heavy / multi-column dashboards */
@@ -103,72 +103,72 @@
   --inline-xl: 42px;
   --inline-2xl: 68px;
   --accordion-header-padding: 16px; /* Header padding */
-  --accordion-header-background-default: #f5f5f5; /* Header background */
+  --accordion-header-background-default: #ffffff; /* Header background */
   --accordion-header-background-hover: rgba(255, 255, 255, 0.05); /* Header hover background - semi-transparent for dark mode */
-  --accordion-header-background-active: #f0f1f4; /* Header active/expanded background */
-  --accordion-header-color-default: #1f2544; /* Header text color */
-  --accordion-header-color-hover: #1f2544; /* Header text color on hover */
-  --accordion-header-color-disabled: #5e6481; /* Header text color when disabled */
+  --accordion-header-background-active: #eceeec; /* Header active/expanded background */
+  --accordion-header-color-default: #253a43; /* Header text color */
+  --accordion-header-color-hover: #253a43; /* Header text color on hover */
+  --accordion-header-color-disabled: #5f7178; /* Header text color when disabled */
   --accordion-content-padding: 16px; /* Content padding */
-  --accordion-content-background: #ffffff; /* Content background */
-  --accordion-content-color: #1f2544; /* Content text color */
+  --accordion-content-background: #faf8f5; /* Content background */
+  --accordion-content-color: #253a43; /* Content text color */
   --accordion-border-width: 1px; /* Border width */
-  --accordion-border-color: #eeeeee; /* Border color */
+  --accordion-border-color: #e6e2dd; /* Border color */
   --accordion-border-radius: 5px; /* Border radius */
   --accordion-icon-size: 16px; /* Toggle icon size */
-  --accordion-icon-color-default: #5e6481; /* Icon color */
-  --accordion-icon-color-hover: #1f2544; /* Icon color on hover */
+  --accordion-icon-color-default: #5f7178; /* Icon color */
+  --accordion-icon-color-hover: #253a43; /* Icon color on hover */
   --accordion-icon-color-disabled: rgba(255, 255, 255, 0.25); /* Icon color when disabled */
   --accordion-icon-rotation-collapsed: 0deg; /* Icon rotation when collapsed */
   --accordion-icon-rotation-expanded: 180deg; /* Icon rotation when expanded */
   --accordion-transition-duration: 200ms; /* Animation duration */
   --accordion-gap: 0px; /* Gap between accordion tabs */
-  --appFooter-background: #ffffff; /* Status bar background (matches page; separated by the top rule) */
-  --appFooter-text: #5e6481; /* Status bar text */
-  --appFooter-border: #eeeeee; /* Divider above the status bar */
-  --appFooter-focusRing: #006cde; /* Focus outline colour */
+  --appFooter-background: #faf8f5; /* Status bar background (matches page; separated by the top rule) */
+  --appFooter-text: #5f7178; /* Status bar text */
+  --appFooter-border: #e6e2dd; /* Divider above the status bar */
+  --appFooter-focusRing: #0f766e; /* Focus outline colour */
   --appFooter-height: 40px; /* Status bar min-height */
   --appFooter-paddingX: 16px; /* Horizontal inset */
   --appFooter-gap: 16px; /* Gap between status-bar items */
-  --appFooter-status-text: #5e6481; /* Status label colour */
+  --appFooter-status-text: #5f7178; /* Status label colour */
   --appFooter-status-gap: 4px; /* Gap between dot and label */
-  --appFooter-status-success: #2a8a3a; /* Operational status dot */
-  --appFooter-status-warning: #d97706; /* Degraded status dot */
-  --appFooter-status-error: #e00613; /* Outage status dot */
-  --appFooter-version-text: #5e6481; /* Version stamp colour */
-  --appFooter-link-text: #5e6481; /* Utility link colour */
-  --appFooter-link-hover: #006cde; /* Utility link hover colour */
-  --appHeader-background: #ffffff; /* Top bar background */
-  --appHeader-text: #1f2544; /* Top bar text */
-  --appHeader-border: #d9dadf; /* Bottom + breadcrumb divider */
+  --appFooter-status-success: #1f7a55; /* Operational status dot */
+  --appFooter-status-warning: #b3701a; /* Degraded status dot */
+  --appFooter-status-error: #b8342c; /* Outage status dot */
+  --appFooter-version-text: #5f7178; /* Version stamp colour */
+  --appFooter-link-text: #5f7178; /* Utility link colour */
+  --appFooter-link-hover: #0f766e; /* Utility link hover colour */
+  --appHeader-background: #faf8f5; /* Top bar background */
+  --appHeader-text: #253a43; /* Top bar text */
+  --appHeader-border: #d5d8d4; /* Bottom + breadcrumb divider */
   --appHeader-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.08); /* Subtle top-bar elevation */
   --appHeader-height: 56px; /* Top bar min-height */
   --appHeader-paddingX: 16px; /* Horizontal inset */
   --appHeader-gap: 10px; /* Gap between top-bar items */
-  --appHeader-focusRing: #006cde; /* Focus outline colour */
-  --appHeader-iconButton-text: #5e6481; /* Icon button glyph colour */
-  --appHeader-iconButton-hover: #f0f1f4; /* Icon button hover background */
+  --appHeader-focusRing: #0f766e; /* Focus outline colour */
+  --appHeader-iconButton-text: #5f7178; /* Icon button glyph colour */
+  --appHeader-iconButton-hover: #eceeec; /* Icon button hover background */
   --appHeader-iconButton-size: 36px; /* Icon button hit area */
   --appHeader-iconButton-radius: 5px; /* Icon button radius */
-  --appHeader-search-background: #ffffff; /* Search input background (matches bar; defined by its border) */
-  --appHeader-search-text: #1f2544; /* Search input text */
-  --appHeader-search-border: #d9dadf; /* Search input border */
+  --appHeader-search-background: #faf8f5; /* Search input background (matches bar; defined by its border) */
+  --appHeader-search-text: #253a43; /* Search input text */
+  --appHeader-search-border: #d5d8d4; /* Search input border */
   --appHeader-search-radius: 5px; /* Search input radius */
   --appHeader-search-paddingX: 10px; /* Search input horizontal padding */
   --appHeader-search-paddingY: 4px; /* Search input vertical padding */
-  --appHeader-badge-background: #e00613; /* Notification badge background */
-  --appHeader-badge-text: #ffffff; /* Notification badge count colour */
-  --appHeader-avatar-background: #1f2544; /* Account avatar background */
-  --appHeader-avatar-text: #ffffff; /* Account avatar initials colour */
+  --appHeader-badge-background: #b8342c; /* Notification badge background */
+  --appHeader-badge-text: #faf8f5; /* Notification badge count colour */
+  --appHeader-avatar-background: #041a26; /* Account avatar background */
+  --appHeader-avatar-text: #faf8f5; /* Account avatar initials colour */
   --appHeader-avatar-size: 32px; /* Account avatar diameter */
-  --appHeader-crumbs-background: #ffffff; /* Breadcrumb row background (matches bar; separated by the top rule) */
-  --appHeader-crumbs-link: #5e6481; /* Breadcrumb link / separator colour */
-  --appHeader-crumbs-current: #1f2544; /* Current breadcrumb colour */
+  --appHeader-crumbs-background: #faf8f5; /* Breadcrumb row background (matches bar; separated by the top rule) */
+  --appHeader-crumbs-link: #5f7178; /* Breadcrumb link / separator colour */
+  --appHeader-crumbs-current: #253a43; /* Current breadcrumb colour */
   --appHeader-crumbs-height: 40px; /* Breadcrumb row min-height */
   --appHeader-crumbs-gap: 4px; /* Gap between crumbs */
-  --appHeader-menu-linkText: #1f2544; /* Drawer nav link colour */
-  --appHeader-menu-linkHover: #f0f1f4; /* Drawer nav link hover background */
-  --appHeader-menu-linkCurrent: #f0f1f4; /* Current drawer nav link background */
+  --appHeader-menu-linkText: #253a43; /* Drawer nav link colour */
+  --appHeader-menu-linkHover: #eceeec; /* Drawer nav link hover background */
+  --appHeader-menu-linkCurrent: #e2efec; /* Current drawer nav link background */
   --appHeader-menu-linkPaddingY: 10px; /* Drawer nav link vertical padding */
   --appHeader-menu-linkPaddingX: 10px; /* Drawer nav link horizontal padding */
   --appHeader-menu-radius: 5px; /* Drawer nav link radius */
@@ -183,18 +183,18 @@
   --autocomplete-border-width: 1px;
   --autocomplete-border-color-default: #d4d4d4;
   --autocomplete-border-color-hover: #a3a3a3;
-  --autocomplete-border-color-focus: #1f2544;
+  --autocomplete-border-color-focus: #0f766e;
   --autocomplete-border-color-disabled: #e5e5e5;
-  --autocomplete-border-color-error: #e00613;
-  --autocomplete-background-default: #ffffff;
+  --autocomplete-border-color-error: #b8342c;
+  --autocomplete-background-default: #faf8f5;
   --autocomplete-background-disabled: #f5f5f5;
-  --autocomplete-text-default: #1f2544;
-  --autocomplete-text-placeholder: #5e6481;
-  --autocomplete-text-disabled: #5e6481;
+  --autocomplete-text-default: #253a43;
+  --autocomplete-text-placeholder: #5f7178;
+  --autocomplete-text-disabled: #5f7178;
   --autocomplete-fontSize-sm: 14px;
   --autocomplete-fontSize-md: 15px;
   --autocomplete-fontSize-lg: 16px;
-  --autocomplete-dropdown-background: #ffffff;
+  --autocomplete-dropdown-background: #faf8f5;
   --autocomplete-dropdown-border: #e5e5e5;
   --autocomplete-dropdown-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
   --autocomplete-dropdown-radius: 5px;
@@ -203,29 +203,29 @@
   --autocomplete-option-padding-y: 10px;
   --autocomplete-option-background-default: transparent;
   --autocomplete-option-background-hover: #f5f5f5;
-  --autocomplete-option-background-selected: #1f2544;
-  --autocomplete-option-text-default: #1f2544;
+  --autocomplete-option-background-selected: #0f766e;
+  --autocomplete-option-text-default: #253a43;
   --autocomplete-option-text-selected: #ffffff;
   --autocomplete-chip-padding-x: 10px;
   --autocomplete-chip-padding-y: 4px;
   --autocomplete-chip-gap: 4px;
   --autocomplete-chip-radius: 9999px;
-  --autocomplete-chip-background-default: #f0f1f4;
+  --autocomplete-chip-background-default: #eceeec;
   --autocomplete-chip-background-hover: #e5e5e5;
-  --autocomplete-chip-text: #1f2544;
+  --autocomplete-chip-text: #253a43;
   --autocomplete-chip-fontSize: 13px;
   --autocomplete-remove-size: 14px;
-  --autocomplete-remove-color-default: #5e6481;
-  --autocomplete-remove-color-hover: #1f2544;
+  --autocomplete-remove-color-default: #5f7178;
+  --autocomplete-remove-color-hover: #253a43;
   --autocomplete-focus-ringWidth: 2px;
-  --autocomplete-focus-ringColor: #1f2544;
+  --autocomplete-focus-ringColor: #0f766e;
   --autocomplete-focus-ringOffset: 1px;
   --autocomplete-loader-size: 16px;
   --autocomplete-loader-color: #a3a3a3;
   --avatar-background-default: #e5e5e5; /* Default avatar background */
   --avatar-background-muted: #f5f5f5; /* Subtle avatar background */
-  --avatar-background-brand: #1f2544; /* Brand-colored avatar */
-  --avatar-background-accent: #ffffff; /* Warm accent avatar */
+  --avatar-background-brand: #0f766e; /* Brand-colored avatar */
+  --avatar-background-accent: #faf8f5; /* Warm accent avatar */
   --avatar-background-success: #22c55e; /* Success state avatar */
   --avatar-background-warning: #f59e0b; /* Warning state avatar */
   --avatar-background-error: #ef4444; /* Error state avatar */
@@ -264,17 +264,17 @@
   --avatar-status-away: #f59e0b;
   --avatar-group-overlap: -8px; /* Overlap amount for avatar groups */
   --avatar-group-ringWidth: 2px; /* Ring width in groups */
-  --avatar-group-ringColor: #ffffff; /* Ring color matches canvas */
+  --avatar-group-ringColor: #faf8f5; /* Ring color matches canvas */
   --badge-background-primary: #f97316; /* Primary badge background - visible accent color */
-  --badge-background-success: #1d6429; /* Success badge background (emphasis shade for white-text contrast) */
-  --badge-background-warning: #d97706; /* Warning badge background (paired with dark text for contrast) */
-  --badge-background-danger: #c40000; /* Danger badge background (emphasis shade for white-text contrast) */
-  --badge-background-info: #0050a8; /* Info badge background (emphasis shade for white-text contrast) */
+  --badge-background-success: #145c3f; /* Success badge background (emphasis shade for white-text contrast) */
+  --badge-background-warning: #b3701a; /* Warning badge background (paired with dark text for contrast) */
+  --badge-background-danger: #8f2620; /* Danger badge background (emphasis shade for white-text contrast) */
+  --badge-background-info: #115e59; /* Info badge background (emphasis shade for white-text contrast) */
   --badge-text-primary: #ffffff; /* Text on primary badge - white */
-  --badge-text-success: #ffffff; /* Text on success badge */
+  --badge-text-success: #faf8f5; /* Text on success badge */
   --badge-text-warning: #171717; /* Text on warning badge (dark for contrast) */
-  --badge-text-danger: #ffffff; /* Text on danger badge */
-  --badge-text-info: #ffffff; /* Text on info badge */
+  --badge-text-danger: #faf8f5; /* Text on danger badge */
+  --badge-text-info: #faf8f5; /* Text on info badge */
   --badge-size-sm: 16px; /* Small badge min height */
   --badge-size-md: 20px; /* Medium badge min height */
   --badge-size-lg: 24px; /* Large badge min height */
@@ -286,18 +286,18 @@
   --badge-padding-lg: 10px; /* Large badge horizontal padding */
   --badge-radius: 9999px; /* Badge border radius (pill shape) */
   --badge-fontWeight: 600; /* Badge font weight */
-  --block-ui-overlay-background: rgba(0, 0, 0, 0.5); /* Blocking overlay background */
+  --block-ui-overlay-background: rgba(4, 26, 38, 0.55); /* Blocking overlay background */
   --block-ui-overlay-zIndex: 1000; /* Overlay z-index */
   --block-ui-spinner-size: 48px; /* Loading spinner size */
-  --block-ui-spinner-color: #1f2544; /* Spinner color */
+  --block-ui-spinner-color: #0f766e; /* Spinner color */
   --block-ui-spinner-borderWidth: 4px; /* Spinner border width */
   --block-ui-transition-duration: 200ms; /* Overlay fade transition */
   --breadcrumb-gap: 6px; /* Gap between breadcrumb items and separators */
-  --breadcrumb-separator-color: #5e6481; /* Separator icon/text color */
+  --breadcrumb-separator-color: #5f7178; /* Separator icon/text color */
   --breadcrumb-separator-size: 12px; /* Separator icon size */
-  --breadcrumb-link-color-default: #5e6481; /* Default link color */
-  --breadcrumb-link-color-hover: #006cde; /* Link hover color */
-  --breadcrumb-link-color-current: #1f2544; /* Current/active item color */
+  --breadcrumb-link-color-default: #5f7178; /* Default link color */
+  --breadcrumb-link-color-hover: #0f766e; /* Link hover color */
+  --breadcrumb-link-color-current: #253a43; /* Current/active item color */
   --breadcrumb-icon-size: 16px; /* Icon size in breadcrumb items */
   --breadcrumb-icon-gap: 4px; /* Gap between icon and label */
   --breadcrumb-fontSize: 14px; /* Breadcrumb text size */
@@ -325,47 +325,47 @@
   --button-radius-square: 0; /* Sharp corners — shape='square' */
   --button-radius-circle: 9999px; /* Circular (icon-only) — shape='circle' */
   --button-fontWeight: 600; /* Button font weight */
-  --button-focus-ringColor: #006cde; /* Button focus ring color */
+  --button-focus-ringColor: #0f766e; /* Button focus ring color */
   --button-focus-ringWidth: 2px; /* Button focus ring width */
   --button-focus-ringOffset: 2px; /* Button focus ring offset */
   --button-transition-duration: 150ms; /* Button transition duration */
   --button-border-width: 1px; /* Button border width */
   --button-outlined-background-default: transparent; /* Outlined button background */
-  --button-outlined-background-hover: #f0f1f4; /* Outlined button hover background */
-  --button-outlined-background-active: #f0f1f4; /* Outlined button active/pressed background */
+  --button-outlined-background-hover: #eceeec; /* Outlined button hover background */
+  --button-outlined-background-active: #eceeec; /* Outlined button active/pressed background */
   --button-outlined-background-disabled: transparent; /* Outlined button disabled background */
-  --button-outlined-text-default: #1f2544; /* Outlined button text color */
-  --button-outlined-text-disabled: #5e6481; /* Outlined button disabled text color */
-  --button-outlined-border-default: #1f2544; /* Outlined button border */
-  --button-outlined-border-hover: #1f2544; /* Outlined button hover border */
-  --button-outlined-border-active: #1f2544; /* Outlined button active border */
+  --button-outlined-text-default: #253a43; /* Outlined button text color */
+  --button-outlined-text-disabled: #5f7178; /* Outlined button disabled text color */
+  --button-outlined-border-default: #0f766e; /* Outlined button border */
+  --button-outlined-border-hover: #0f766e; /* Outlined button hover border */
+  --button-outlined-border-active: #0f766e; /* Outlined button active border */
   --button-outlined-border-disabled: #d4d4d4; /* Outlined button disabled border */
-  --button-primary-background-default: #1a2244; /* Primary button background — navy.700, palette-step rest */
-  --button-primary-background-hover: #11162d; /* Primary button hover — navy.800, one ramp step darker */
-  --button-primary-background-active: #0a0e1f; /* Primary button pressed — navy.900, two steps darker */
+  --button-primary-background-default: #0f766e; /* Primary button background — teal action fill from the Jouw Stem mockups. Repointed from {primary.700} on 2026-08-09: the brand chain still resolves primary=navy, which no longer matches the extracted identity (mirrors the theme-high-contrast-solarized-dark pattern) */
+  --button-primary-background-hover: #115e59; /* Primary button hover — one step deeper teal */
+  --button-primary-background-active: #134e4a; /* Primary button pressed — two steps deeper teal */
   --button-primary-background-disabled: #e5e5e5; /* Primary button disabled background (state-exempt from rules) */
-  --button-primary-text-default: #ffffff; /* Primary button label — white on dark fill */
+  --button-primary-text-default: #ffffff; /* Primary button label — white on the teal fill, 5.3:1 */
   --button-primary-text-disabled: #737373; /* Primary button disabled label */
-  --button-primary-border-default: #1a2244; /* Primary button border — matches fill */
-  --button-primary-border-hover: #11162d; /* Primary button hover border */
-  --button-primary-border-active: #0a0e1f; /* Primary button active border */
+  --button-primary-border-default: #0f766e; /* Primary button border — matches fill */
+  --button-primary-border-hover: #115e59; /* Primary button hover border */
+  --button-primary-border-active: #134e4a; /* Primary button active border */
   --button-primary-border-disabled: #e5e5e5; /* Primary button disabled border */
-  --button-secondary-background-default: #f0f1f4; /* Secondary button background */
-  --button-secondary-background-hover: #f0f1f4; /* Secondary button hover background */
-  --button-secondary-background-active: #d9dadf; /* Secondary button active background */
-  --button-secondary-background-disabled: #f5f5f5; /* Secondary button disabled background */
-  --button-secondary-text-default: #1f2544; /* Secondary button text color */
-  --button-secondary-text-disabled: #5e6481; /* Secondary button disabled text color */
+  --button-secondary-background-default: #eceeec; /* Secondary button background */
+  --button-secondary-background-hover: #eceeec; /* Secondary button hover background */
+  --button-secondary-background-active: #d5d8d4; /* Secondary button active background */
+  --button-secondary-background-disabled: #ffffff; /* Secondary button disabled background */
+  --button-secondary-text-default: #253a43; /* Secondary button text color */
+  --button-secondary-text-disabled: #5f7178; /* Secondary button disabled text color */
   --button-secondary-border-default: transparent; /* Secondary button border (gradient via pseudo-element) */
   --button-secondary-border-hover: transparent; /* Secondary button hover border */
   --button-secondary-border-active: transparent; /* Secondary button active border */
-  --button-secondary-border-disabled: #eeeeee; /* Secondary button disabled border */
+  --button-secondary-border-disabled: #e6e2dd; /* Secondary button disabled border */
   --button-text-background-default: transparent; /* Text button background */
-  --button-text-background-hover: #f0f1f4; /* Text button hover background */
-  --button-text-background-active: #f0f1f4; /* Text button active/pressed background */
+  --button-text-background-hover: #eceeec; /* Text button hover background */
+  --button-text-background-active: #eceeec; /* Text button active/pressed background */
   --button-text-background-disabled: transparent; /* Text button disabled background */
-  --button-text-text-default: #1f2544; /* Text button text color */
-  --button-text-text-disabled: #5e6481; /* Text button disabled text color */
+  --button-text-text-default: #253a43; /* Text button text color */
+  --button-text-text-disabled: #5f7178; /* Text button disabled text color */
   --button-text-border-default: transparent; /* Text button border */
   --button-text-border-hover: transparent; /* Text button hover border */
   --button-text-border-active: transparent; /* Text button active border */
@@ -373,37 +373,37 @@
   --calendar-width: 280px;
   --calendar-padding: 16px;
   --calendar-radius: 5px;
-  --calendar-background: #ffffff;
+  --calendar-background: #faf8f5;
   --calendar-border-width: 1px;
   --calendar-border-color: #e5e5e5;
   --calendar-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
   --calendar-header-padding: 10px;
   --calendar-header-gap: 10px;
-  --calendar-header-text: #1f2544;
+  --calendar-header-text: #253a43;
   --calendar-header-fontSize: 16px;
   --calendar-header-fontWeight: 600;
   --calendar-nav-size: 32px;
   --calendar-nav-radius: 5px;
   --calendar-nav-background-default: transparent;
-  --calendar-nav-background-hover: #f0f1f4; /* Nav (prev/next/title) hover bg — semantic so it adapts in dark */
-  --calendar-nav-color-default: #5e6481;
-  --calendar-nav-color-hover: #1f2544;
+  --calendar-nav-background-hover: #eceeec; /* Nav (prev/next/title) hover bg — semantic so it adapts in dark */
+  --calendar-nav-color-default: #5f7178;
+  --calendar-nav-color-hover: #253a43;
   --calendar-weekday-padding: 6px;
-  --calendar-weekday-text: #5e6481;
+  --calendar-weekday-text: #5f7178;
   --calendar-weekday-fontSize: 12px;
   --calendar-weekday-fontWeight: 500;
   --calendar-day-size: 36px;
   --calendar-day-radius: 5px;
   --calendar-day-fontSize: 14px;
-  --calendar-day-text-default: #1f2544;
-  --calendar-day-text-muted: #5e6481;
+  --calendar-day-text-default: #253a43;
+  --calendar-day-text-muted: #5f7178;
   --calendar-day-text-selected: #ffffff;
-  --calendar-day-text-today: #1f2544;
+  --calendar-day-text-today: #0f766e;
   --calendar-day-background-default: transparent;
-  --calendar-day-background-hover: #f0f1f4; /* Day hover bg (semantic, adapts to theme so text stays readable) */
-  --calendar-day-background-selected: #1f2544;
+  --calendar-day-background-hover: #eceeec; /* Day hover bg (semantic, adapts to theme so text stays readable) */
+  --calendar-day-background-selected: #0f766e;
   --calendar-day-background-today: transparent;
-  --calendar-day-background-range: #fde8ea;
+  --calendar-day-background-range: #e2efec;
   --calendar-input-height-sm: 32px;
   --calendar-input-height-md: 40px;
   --calendar-input-height-lg: 48px;
@@ -414,19 +414,19 @@
   --calendar-input-radius: 5px;
   --calendar-input-border-color-default: #d4d4d4;
   --calendar-input-border-color-hover: #a3a3a3;
-  --calendar-input-border-color-focus: #1f2544;
+  --calendar-input-border-color-focus: #0f766e;
   --calendar-input-border-color-disabled: #e5e5e5;
-  --calendar-input-border-color-error: #e00613;
-  --calendar-input-background-default: #ffffff;
+  --calendar-input-border-color-error: #b8342c;
+  --calendar-input-background-default: #faf8f5;
   --calendar-input-background-disabled: #f5f5f5;
-  --calendar-input-text-default: #1f2544;
-  --calendar-input-text-placeholder: #5e6481;
-  --calendar-input-text-disabled: #5e6481;
+  --calendar-input-text-default: #253a43;
+  --calendar-input-text-placeholder: #5f7178;
+  --calendar-input-text-disabled: #5f7178;
   --calendar-focus-ringWidth: 2px;
-  --calendar-focus-ringColor: #1f2544;
+  --calendar-focus-ringColor: #0f766e;
   --calendar-focus-ringOffset: 1px;
-  --card-background: #f5f5f5; /* Card background color */
-  --card-border-color: #eeeeee; /* Card border color */
+  --card-background: #ffffff; /* Card background color */
+  --card-border-color: #e6e2dd; /* Card border color */
   --card-border-width: 1px; /* Card border width */
   --card-highlighted-border-start: #f97316; /* Highlighted card border - vibrant orange */
   --card-highlighted-border-end: #fb923c; /* Highlighted card border end - bright orange */
@@ -436,38 +436,38 @@
   --card-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08); /* Card shadow */
   --card-padding: 26px; /* Card inner padding */
   --card-header-padding: 16px; /* Header section padding */
-  --card-header-borderColor: #eeeeee; /* Header bottom border color */
+  --card-header-borderColor: #e6e2dd; /* Header bottom border color */
   --card-header-borderWidth: 1px; /* Header bottom border width */
   --card-body-padding: 26px; /* Body section padding */
   --card-body-gap: 10px; /* Gap between caption and content */
-  --card-title-color: #1f2544; /* Title text color */
+  --card-title-color: #04141f; /* Title text color */
   --card-title-fontSize: 18px; /* Title font size */
   --card-title-fontWeight: 600; /* Title font weight */
   --card-title-lineHeight: 1.4; /* Title line height */
-  --card-subtitle-color: #5e6481; /* Subtitle text color */
+  --card-subtitle-color: #5f7178; /* Subtitle text color */
   --card-subtitle-fontSize: 14px; /* Subtitle font size */
   --card-subtitle-fontWeight: 400; /* Subtitle font weight */
   --card-subtitle-marginTop: 4px; /* Space between title and subtitle */
-  --card-content-color: #1f2544; /* Content text color */
+  --card-content-color: #253a43; /* Content text color */
   --card-footer-padding: 16px; /* Footer section padding */
-  --card-footer-borderColor: #eeeeee; /* Footer top border color */
+  --card-footer-borderColor: #e6e2dd; /* Footer top border color */
   --card-footer-borderWidth: 1px; /* Footer top border width */
-  --carousel-container-background: #f5f5f5; /* Carousel container background */
+  --carousel-container-background: #ffffff; /* Carousel container background */
   --carousel-container-radius: 5px; /* Carousel container border radius */
   --carousel-content-gap: 16px; /* Gap between carousel items */
   --carousel-content-padding: 16px; /* Content area padding */
-  --carousel-item-background: #ffffff; /* Carousel item background */
+  --carousel-item-background: #faf8f5; /* Carousel item background */
   --carousel-item-radius: 5px; /* Carousel item border radius */
   --carousel-item-padding: 10px; /* Carousel item padding */
   --carousel-navigator-size: 40px; /* Navigator button size */
   --carousel-navigator-iconSize: 20px; /* Navigator icon size */
-  --carousel-navigator-background-default: #f5f5f5; /* Navigator button background */
-  --carousel-navigator-background-hover: #f0f1f4; /* Navigator button hover background */
-  --carousel-navigator-background-disabled: #f0f1f4; /* Navigator button disabled background */
-  --carousel-navigator-color-default: #1f2544; /* Navigator icon color */
-  --carousel-navigator-color-hover: #1f2544; /* Navigator icon hover color */
-  --carousel-navigator-color-disabled: #8e93a8; /* Navigator icon disabled color */
-  --carousel-navigator-border-color: #eeeeee; /* Navigator button border color */
+  --carousel-navigator-background-default: #ffffff; /* Navigator button background */
+  --carousel-navigator-background-hover: #eceeec; /* Navigator button hover background */
+  --carousel-navigator-background-disabled: #eceeec; /* Navigator button disabled background */
+  --carousel-navigator-color-default: #253a43; /* Navigator icon color */
+  --carousel-navigator-color-hover: #0f766e; /* Navigator icon hover color */
+  --carousel-navigator-color-disabled: #7d8f95; /* Navigator icon disabled color */
+  --carousel-navigator-border-color: #e6e2dd; /* Navigator button border color */
   --carousel-navigator-border-width: 1px; /* Navigator button border width */
   --carousel-navigator-radius: 50%; /* Navigator button border radius */
   --carousel-navigator-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08); /* Navigator button shadow */
@@ -475,30 +475,30 @@
   --carousel-indicator-gap: 6px; /* Gap between indicators */
   --carousel-indicator-marginTop: 16px; /* Space above indicators */
   --carousel-indicator-background-default: #d4d4d4; /* Indicator background */
-  --carousel-indicator-background-active: #1f2544; /* Active indicator background */
+  --carousel-indicator-background-active: #0f766e; /* Active indicator background */
   --carousel-indicator-background-hover: #a3a3a3; /* Indicator hover background */
   --carousel-transition-duration: 300ms; /* Slide transition duration */
-  --chart-container-background: #ffffff; /* Chart container matches canvas — frame from border, not from a subtle tint that would fail WCAG 1.4.11 */
+  --chart-container-background: #faf8f5; /* Chart container matches canvas — frame from border, not from a subtle tint that would fail WCAG 1.4.11 */
   --chart-container-padding: 16px; /* Chart container padding */
   --chart-container-radius: 5px; /* Chart container border radius */
-  --chart-container-border-color: #eeeeee; /* Chart container border color */
+  --chart-container-border-color: #e6e2dd; /* Chart container border color */
   --chart-container-border-width: 1px; /* Chart container border width */
-  --chart-title-color: #1f2544; /* Chart title color */
+  --chart-title-color: #253a43; /* Chart title color */
   --chart-title-size: 16px; /* Chart title font size */
   --chart-title-weight: 600; /* Chart title font weight */
   --chart-title-marginBottom: 16px; /* Space below chart title */
   --chart-canvas-minHeight: 300px; /* Minimum chart canvas height */
   --chart-legend-gap: 16px; /* Gap between legend items */
   --chart-legend-item-gap: 6px; /* Gap between legend marker and text */
-  --chart-legend-item-color: #5e6481; /* Legend text color */
+  --chart-legend-item-color: #5f7178; /* Legend text color */
   --chart-legend-item-size: 13px; /* Legend text font size */
   --chart-legend-marker-size: 12px; /* Legend marker size */
   --chart-legend-marker-radius: 2px; /* Legend marker border radius */
-  --chart-loading-background: rgba(0, 0, 0, 0.5); /* Loading overlay background */
-  --chart-loading-spinnerColor: #1f2544; /* Loading spinner color */
+  --chart-loading-background: rgba(4, 26, 38, 0.55); /* Loading overlay background */
+  --chart-loading-spinnerColor: #0f766e; /* Loading spinner color */
   --chart-loading-spinnerSize: 32px; /* Loading spinner size */
-  --chart-empty-textColor: #5e6481; /* Empty state text color */
-  --chart-empty-iconColor: #8e93a8; /* Empty state icon color */
+  --chart-empty-textColor: #5f7178; /* Empty state text color */
+  --chart-empty-iconColor: #7d8f95; /* Empty state icon color */
   --chart-empty-iconSize: 48px; /* Empty state icon size */
   --checkbox-size-sm: 16px; /* Small checkbox */
   --checkbox-size-md: 20px; /* Medium checkbox (default) */
@@ -508,46 +508,46 @@
   --checkbox-iconSize-lg: 16px;
   --checkbox-radius: 2px; /* Checkbox border radius */
   --checkbox-border-width: 2px;
-  --checkbox-border-color-default: #d9dadf; /* Default unchecked border */
-  --checkbox-border-color-hover: #1f2544;
-  --checkbox-border-color-checked: #1f2544; /* Accent color when checked */
-  --checkbox-border-color-checkedHover: #3d4467; /* Checked + hover — keeps filled look so checkmark stays visible (WCAG 1.4.11) */
-  --checkbox-border-color-focus: #006cde;
-  --checkbox-border-color-disabled: #eeeeee;
-  --checkbox-border-color-error: #e00613;
+  --checkbox-border-color-default: #d5d8d4; /* Default unchecked border */
+  --checkbox-border-color-hover: #04141f;
+  --checkbox-border-color-checked: #0f766e; /* Accent color when checked */
+  --checkbox-border-color-checkedHover: #115e59; /* Checked + hover — keeps filled look so checkmark stays visible (WCAG 1.4.11) */
+  --checkbox-border-color-focus: #0f766e;
+  --checkbox-border-color-disabled: #e6e2dd;
+  --checkbox-border-color-error: #b8342c;
   --checkbox-background-default: transparent; /* Transparent to inherit page background */
-  --checkbox-background-checked: #1f2544; /* Brand accent when checked */
-  --checkbox-background-checkedHover: #3d4467; /* Checked + hover — keeps filled look so the white checkmark remains legible */
-  --checkbox-background-disabled: #f0f1f4;
-  --checkbox-background-hover: #f0f1f4;
+  --checkbox-background-checked: #0f766e; /* Brand accent when checked */
+  --checkbox-background-checkedHover: #115e59; /* Checked + hover — keeps filled look so the white checkmark remains legible */
+  --checkbox-background-disabled: #eceeec;
+  --checkbox-background-hover: #eceeec;
   --checkbox-checkmark-color: #ffffff;
   --checkbox-label-gap: 10px;
-  --checkbox-label-color-default: #1f2544;
-  --checkbox-label-color-disabled: #5e6481;
+  --checkbox-label-color-default: #253a43;
+  --checkbox-label-color-disabled: #5f7178;
   --checkbox-focus-ringWidth: 2px;
-  --checkbox-focus-ringColor: #006cde;
+  --checkbox-focus-ringColor: #0f766e;
   --checkbox-focus-ringOffset: 2px;
   --chip-padding-x: 10px; /* Horizontal padding */
   --chip-padding-y: 4px; /* Vertical padding */
   --chip-gap: 4px; /* Gap between chip elements */
   --chip-radius: 9999px; /* Border radius (pill shape) */
-  --chip-background-default: #1f2544; /* Default chip background — nu.nl navy. ~14.9:1 vs white canvas (WCAG 1.4.11 ≥3:1). The previous surface.muted tint was 1.13:1 — boundary invisible. */
-  --chip-background-hover: #3d4467; /* Hover background — lifted navy */
-  --chip-text-color: #ffffff; /* Chip text — white on navy fill, ~14.9:1 (WCAG 1.4.3 ≥4.5:1) */
+  --chip-background-default: #0f766e; /* Default chip background — nu.nl navy. ~14.9:1 vs white canvas (WCAG 1.4.11 ≥3:1). The previous surface.muted tint was 1.13:1 — boundary invisible. */
+  --chip-background-hover: #115e59; /* Hover background — lifted navy */
+  --chip-text-color: #faf8f5; /* Chip text — white on navy fill, ~14.9:1 (WCAG 1.4.3 ≥4.5:1) */
   --chip-text-fontSize: 14px; /* Chip text size */
   --chip-icon-size: 16px; /* Icon size */
-  --chip-icon-color: #ffffff; /* Icon color — white to match label on navy chip */
+  --chip-icon-color: #faf8f5; /* Icon color — white to match label on navy chip */
   --chip-image-size: 24px; /* Avatar/image size */
   --chip-remove-size: 16px; /* Remove button size */
-  --chip-remove-color-default: #ffffff; /* Remove icon — white on navy chip */
-  --chip-remove-color-hover: #ffffff; /* Remove icon hover — stays white; hover affordance is the button-bg change below */
-  --chip-remove-background-hover: #3d4467; /* Remove button hover background — lifted navy */
+  --chip-remove-color-default: #faf8f5; /* Remove icon — white on navy chip */
+  --chip-remove-color-hover: #faf8f5; /* Remove icon hover — stays white; hover affordance is the button-bg change below */
+  --chip-remove-background-hover: #115e59; /* Remove button hover background — lifted navy */
   --chip-remove-radius: 9999px; /* Remove button border radius */
   --color-picker-width: 240px;
   --color-picker-padding: 16px;
   --color-picker-gap: 16px;
   --color-picker-radius: 5px;
-  --color-picker-background: #ffffff;
+  --color-picker-background: #faf8f5;
   --color-picker-border-width: 1px;
   --color-picker-border-color: #e5e5e5;
   --color-picker-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
@@ -558,7 +558,7 @@
   --color-picker-trigger-border-width: 1px;
   --color-picker-trigger-border-color-default: #d4d4d4;
   --color-picker-trigger-border-color-hover: #a3a3a3;
-  --color-picker-trigger-border-color-focus: #1f2544;
+  --color-picker-trigger-border-color-focus: #0f766e;
   --color-picker-gradient-height: 150px;
   --color-picker-gradient-radius: 2px;
   --color-picker-hue-height: 12px;
@@ -571,62 +571,62 @@
   --color-picker-input-padding-x: 10px;
   --color-picker-input-radius: 2px;
   --color-picker-input-fontSize: 13px;
-  --color-picker-input-background: #ffffff;
+  --color-picker-input-background: #faf8f5;
   --color-picker-input-border-color: #d4d4d4;
-  --color-picker-input-text: #1f2544;
+  --color-picker-input-text: #253a43;
   --color-picker-preset-size: 24px;
   --color-picker-preset-gap: 6px;
   --color-picker-preset-radius: 2px;
   --color-picker-preset-border-width: 2px;
   --color-picker-preset-border-color-default: transparent;
-  --color-picker-preset-border-color-selected: #1f2544;
+  --color-picker-preset-border-color-selected: #0f766e;
   --color-picker-focus-ringWidth: 2px;
-  --color-picker-focus-ringColor: #1f2544;
+  --color-picker-focus-ringColor: #0f766e;
   --color-picker-focus-ringOffset: 1px;
-  --column-header-background: #f0f1f4; /* Column header background color */
-  --column-header-color: #1f2544; /* Column header text color */
+  --column-header-background: #eceeec; /* Column header background color */
+  --column-header-color: #04141f; /* Column header text color */
   --column-header-padding: 10px; /* Column header padding */
   --column-header-fontWeight: 600; /* Column header font weight */
   --column-header-fontSize: 13px; /* Column header font size */
-  --column-header-borderColor: #eeeeee; /* Column header border color */
-  --column-body-background: #f5f5f5; /* Column body background color */
-  --column-body-color: #1f2544; /* Column body text color */
+  --column-header-borderColor: #e6e2dd; /* Column header border color */
+  --column-body-background: #ffffff; /* Column body background color */
+  --column-body-color: #253a43; /* Column body text color */
   --column-body-padding: 10px; /* Column body padding */
   --column-body-fontSize: 14px; /* Column body font size */
-  --column-body-borderColor: #eeeeee; /* Column body border color */
-  --column-footer-background: #f0f1f4; /* Column footer background color */
-  --column-footer-color: #1f2544; /* Column footer text color */
+  --column-body-borderColor: #e6e2dd; /* Column body border color */
+  --column-footer-background: #eceeec; /* Column footer background color */
+  --column-footer-color: #253a43; /* Column footer text color */
   --column-footer-padding: 10px; /* Column footer padding */
   --column-footer-fontWeight: 600; /* Column footer font weight */
-  --column-footer-borderColor: #eeeeee; /* Column footer border color */
+  --column-footer-borderColor: #e6e2dd; /* Column footer border color */
   --column-sortIcon-color-default: #a3a3a3; /* Sort icon default color */
-  --column-sortIcon-color-active: #1f2544; /* Sort icon active color */
+  --column-sortIcon-color-active: #0f766e; /* Sort icon active color */
   --column-sortIcon-size: 14px; /* Sort icon size */
-  --column-group-header-background: #f0f1f4; /* Column group header background */
-  --column-group-header-borderColor: #eeeeee; /* Column group header border color */
+  --column-group-header-background: #eceeec; /* Column group header background */
+  --column-group-header-borderColor: #e6e2dd; /* Column group header border color */
   --column-group-header-borderWidth: 1px; /* Column group header border width */
-  --column-group-footer-background: #f0f1f4; /* Column group footer background */
-  --column-group-footer-borderColor: #eeeeee; /* Column group footer border color */
+  --column-group-footer-background: #eceeec; /* Column group footer background */
+  --column-group-footer-borderColor: #e6e2dd; /* Column group footer border color */
   --column-group-footer-borderWidth: 1px; /* Column group footer border width */
-  --column-group-row-borderColor: #eeeeee; /* Row border color within group */
+  --column-group-row-borderColor: #e6e2dd; /* Row border color within group */
   --confirmDialog-padding-header: 26px; /* Header section padding */
   --confirmDialog-padding-content: 26px; /* Content area padding */
   --confirmDialog-padding-footer: 26px; /* Footer section padding */
-  --confirmDialog-background-default: #ffffff; /* Dialog background color */
+  --confirmDialog-background-default: #faf8f5; /* Dialog background color */
   --confirmDialog-radius: 13px; /* Dialog border radius */
   --confirmDialog-shadow: 0 8px 16px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08); /* Dialog elevation shadow */
-  --confirmDialog-border-color: #eeeeee; /* Dialog border color */
+  --confirmDialog-border-color: #e6e2dd; /* Dialog border color */
   --confirmDialog-border-width: 1px; /* Dialog border width */
-  --confirmDialog-header-background: #ffffff; /* Header background */
-  --confirmDialog-header-borderColor: #eeeeee; /* Header bottom border color */
-  --confirmDialog-header-title-color: #1f2544; /* Header title text color */
+  --confirmDialog-header-background: #faf8f5; /* Header background */
+  --confirmDialog-header-borderColor: #e6e2dd; /* Header bottom border color */
+  --confirmDialog-header-title-color: #04141f; /* Header title text color */
   --confirmDialog-icon-size: 48px; /* Icon size */
-  --confirmDialog-icon-color-warning: #d97706; /* Warning icon color */
-  --confirmDialog-icon-color-danger: #e00613; /* Danger icon color */
-  --confirmDialog-icon-color-info: #006cde; /* Info icon color */
-  --confirmDialog-message-color: #1f2544; /* Message text color */
+  --confirmDialog-icon-color-warning: #b3701a; /* Warning icon color */
+  --confirmDialog-icon-color-danger: #b8342c; /* Danger icon color */
+  --confirmDialog-icon-color-info: #0f766e; /* Info icon color */
+  --confirmDialog-message-color: #253a43; /* Message text color */
   --confirmDialog-message-fontSize: 16px; /* Message font size */
-  --confirmDialog-overlay-background: rgba(0, 0, 0, 0.5); /* Modal overlay backdrop color */
+  --confirmDialog-overlay-background: rgba(4, 26, 38, 0.55); /* Modal overlay backdrop color */
   --confirmDialog-width: 450px; /* Dialog width */
   --confirmDialog-zIndex-overlay: 1000; /* Overlay z-index */
   --confirmDialog-zIndex-dialog: 1001; /* Dialog z-index */
@@ -634,15 +634,15 @@
   --confirmDialog-gap-buttons: 10px; /* Gap between footer buttons */
   --confirmPopup-padding-x: 16px; /* Horizontal padding */
   --confirmPopup-padding-y: 10px; /* Vertical padding */
-  --confirmPopup-background: #ffffff; /* Popup background color */
+  --confirmPopup-background: #faf8f5; /* Popup background color */
   --confirmPopup-radius: 5px; /* Popup border radius */
   --confirmPopup-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08); /* Popup elevation shadow */
-  --confirmPopup-border-color: #eeeeee; /* Popup border color */
+  --confirmPopup-border-color: #e6e2dd; /* Popup border color */
   --confirmPopup-border-width: 1px; /* Popup border width */
-  --confirmPopup-message-color: #1f2544; /* Message text color */
+  --confirmPopup-message-color: #253a43; /* Message text color */
   --confirmPopup-message-fontSize: 14px; /* Message font size */
   --confirmPopup-icon-size: 20px; /* Icon size */
-  --confirmPopup-icon-color: #d97706; /* Icon color */
+  --confirmPopup-icon-color: #b3701a; /* Icon color */
   --confirmPopup-arrow-size: 8px; /* Arrow/pointer size */
   --confirmPopup-offset: 10px; /* Distance from target element */
   --confirmPopup-maxWidth: 300px; /* Maximum width */
@@ -650,7 +650,7 @@
   --confirmPopup-gap-content: 10px; /* Gap between icon/message and buttons */
   --confirmPopup-gap-buttons: 6px; /* Gap between buttons */
   --context-menu-background: #ffffff; /* Context menu background */
-  --context-menu-border-color: #eeeeee; /* Context menu border color */
+  --context-menu-border-color: #e6e2dd; /* Context menu border color */
   --context-menu-border-width: 1px; /* Context menu border width */
   --context-menu-radius: 5px; /* Context menu border radius */
   --context-menu-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08); /* Context menu elevation shadow */
@@ -660,146 +660,146 @@
   --context-menu-zIndex: 1100; /* Z-index for stacking */
   --context-menu-item-padding-x: 16px; /* Item horizontal padding */
   --context-menu-item-padding-y: 6px; /* Item vertical padding */
-  --context-menu-item-text-color-default: #1f2544; /* Item text color */
-  --context-menu-item-text-color-hover: #1f2544; /* Item hover text color */
-  --context-menu-item-text-color-disabled: #8e93a8; /* Disabled item text color */
+  --context-menu-item-text-color-default: #253a43; /* Item text color */
+  --context-menu-item-text-color-hover: #253a43; /* Item hover text color */
+  --context-menu-item-text-color-disabled: #7d8f95; /* Disabled item text color */
   --context-menu-item-text-fontSize: 14px; /* Item font size */
   --context-menu-item-background-default: transparent; /* Item background */
-  --context-menu-item-background-hover: #f0f1f4; /* Item hover background */
-  --context-menu-item-background-active: #f0f1f4; /* Active item background */
+  --context-menu-item-background-hover: #eceeec; /* Item hover background */
+  --context-menu-item-background-active: #eceeec; /* Active item background */
   --context-menu-item-icon-size: 16px; /* Item icon size */
-  --context-menu-item-icon-color: #5e6481; /* Item icon color */
+  --context-menu-item-icon-color: #5f7178; /* Item icon color */
   --context-menu-item-icon-gap: 10px; /* Space between icon and label */
-  --context-menu-item-shortcut-color: #5e6481; /* Keyboard shortcut color */
+  --context-menu-item-shortcut-color: #5f7178; /* Keyboard shortcut color */
   --context-menu-item-shortcut-fontSize: 12px; /* Shortcut font size */
-  --context-menu-separator-color: #eeeeee; /* Separator line color */
+  --context-menu-separator-color: #e6e2dd; /* Separator line color */
   --context-menu-separator-margin: 4px; /* Separator vertical margin */
   --context-menu-submenu-arrow-size: 10px; /* Submenu arrow size */
-  --context-menu-submenu-arrow-color: #5e6481; /* Submenu arrow color */
+  --context-menu-submenu-arrow-color: #5f7178; /* Submenu arrow color */
   --context-menu-submenu-offset: -4px; /* Submenu position offset */
-  --corporateFooter-background: #ffffff; /* Footer background (matches page; separated by the bottom-bar rule) */
-  --corporateFooter-text: #1f2544; /* Footer text */
-  --corporateFooter-textMuted: #5e6481; /* Muted footer text (tagline, copyright) */
-  --corporateFooter-heading: #1f2544; /* Column titles / brand */
-  --corporateFooter-border: #eeeeee; /* Divider above the bottom bar */
-  --corporateFooter-focusRing: #006cde; /* Focus outline colour */
+  --corporateFooter-background: #faf8f5; /* Footer background (matches page; separated by the bottom-bar rule) */
+  --corporateFooter-text: #253a43; /* Footer text */
+  --corporateFooter-textMuted: #5f7178; /* Muted footer text (tagline, copyright) */
+  --corporateFooter-heading: #04141f; /* Column titles / brand */
+  --corporateFooter-border: #e6e2dd; /* Divider above the bottom bar */
+  --corporateFooter-focusRing: #0f766e; /* Focus outline colour */
   --corporateFooter-maxWidth: 1400px; /* Inner content max width */
   --corporateFooter-paddingX: 26px; /* Horizontal inset */
   --corporateFooter-paddingY: 42px; /* Vertical padding of the top region */
   --corporateFooter-gap: 42px; /* Gap between footer columns */
   --corporateFooter-stack: 10px; /* Vertical rhythm within a column */
   --corporateFooter-inline: 16px; /* Inline gap (social, legal) */
-  --corporateFooter-link-text: #5e6481; /* Footer link colour */
-  --corporateFooter-link-hover: #006cde; /* Footer link hover colour */
-  --corporateFooter-input-background: #ffffff; /* Newsletter input background */
-  --corporateFooter-input-text: #1f2544; /* Newsletter input text */
-  --corporateFooter-input-border: #d9dadf; /* Newsletter input border */
+  --corporateFooter-link-text: #5f7178; /* Footer link colour */
+  --corporateFooter-link-hover: #0f766e; /* Footer link hover colour */
+  --corporateFooter-input-background: #faf8f5; /* Newsletter input background */
+  --corporateFooter-input-text: #253a43; /* Newsletter input text */
+  --corporateFooter-input-border: #d5d8d4; /* Newsletter input border */
   --corporateFooter-input-radius: 5px; /* Newsletter input radius */
   --corporateFooter-input-paddingX: 10px; /* Input horizontal padding */
   --corporateFooter-input-paddingY: 10px; /* Input vertical padding */
-  --corporateFooter-cta-background: #1f2544; /* Subscribe button background */
-  --corporateFooter-cta-hover: #3d4467; /* Subscribe button hover */
-  --corporateFooter-cta-text: #ffffff; /* Subscribe button label */
+  --corporateFooter-cta-background: #0f766e; /* Subscribe button background */
+  --corporateFooter-cta-hover: #115e59; /* Subscribe button hover */
+  --corporateFooter-cta-text: #faf8f5; /* Subscribe button label */
   --corporateFooter-cta-radius: 5px; /* Subscribe button radius */
   --corporateFooter-cta-paddingX: 16px; /* Subscribe button horizontal padding */
   --corporateFooter-cta-paddingY: 10px; /* Subscribe button vertical padding */
   --corporateFooter-bottom-height: 56px; /* Bottom bar min-height */
-  --corporateHeader-background: #ffffff; /* Main header background */
-  --corporateHeader-text: #1f2544; /* Header foreground text */
-  --corporateHeader-border: #eeeeee; /* Hairline under the header */
+  --corporateHeader-background: #faf8f5; /* Main header background */
+  --corporateHeader-text: #253a43; /* Header foreground text */
+  --corporateHeader-border: #e6e2dd; /* Hairline under the header */
   --corporateHeader-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08); /* Header elevation shadow */
   --corporateHeader-height: 68px; /* Main bar min-height */
   --corporateHeader-maxWidth: 1400px; /* Inner content max width */
   --corporateHeader-paddingX: 26px; /* Horizontal inset */
   --corporateHeader-gap: 16px; /* Gap between header items */
-  --corporateHeader-focusRing: #006cde; /* Focus outline colour */
-  --corporateHeader-link-text: #1f2544; /* Primary nav link colour */
-  --corporateHeader-link-hover: #006cde; /* Primary nav link hover colour */
+  --corporateHeader-focusRing: #0f766e; /* Focus outline colour */
+  --corporateHeader-link-text: #253a43; /* Primary nav link colour */
+  --corporateHeader-link-hover: #0f766e; /* Primary nav link hover colour */
   --corporateHeader-link-radius: 2px; /* Nav link radius */
   --corporateHeader-link-paddingX: 10px; /* Nav link horizontal padding */
   --corporateHeader-link-paddingY: 4px; /* Nav link vertical padding */
-  --corporateHeader-cta-background: #1f2544; /* CTA background */
-  --corporateHeader-cta-hover: #3d4467; /* CTA hover background */
-  --corporateHeader-cta-text: #ffffff; /* CTA label colour */
+  --corporateHeader-cta-background: #0f766e; /* CTA background */
+  --corporateHeader-cta-hover: #115e59; /* CTA hover background */
+  --corporateHeader-cta-text: #faf8f5; /* CTA label colour */
   --corporateHeader-cta-radius: 5px; /* CTA radius */
   --corporateHeader-cta-paddingX: 16px; /* CTA horizontal padding */
   --corporateHeader-cta-paddingY: 10px; /* CTA vertical padding */
-  --corporateHeader-utility-background: #1f2544; /* Utility bar background */
-  --corporateHeader-utility-text: #ffffff; /* Utility bar text */
+  --corporateHeader-utility-background: #041a26; /* Utility bar background */
+  --corporateHeader-utility-text: #faf8f5; /* Utility bar text */
   --corporateHeader-utility-height: 36px; /* Utility bar min-height */
-  --dataTable-background: #ffffff; /* Table background — matches canvas so the wrapper isn't a separate subtle surface (was surface.panel, 1.09:1 vs canvas). Visual frame comes from border + header fill. */
-  --dataTable-border-color: #eeeeee; /* Table border color */
+  --dataTable-background: #faf8f5; /* Table background — matches canvas so the wrapper isn't a separate subtle surface (was surface.panel, 1.09:1 vs canvas). Visual frame comes from border + header fill. */
+  --dataTable-border-color: #e6e2dd; /* Table border color */
   --dataTable-border-width: 1px; /* Table border width */
   --dataTable-radius: 5px; /* Table border radius */
-  --dataTable-header-background: #1f2544; /* Header bg — navy, ~14:1 vs canvas (was surface.muted, 1.13:1 — invisible header chrome) */
-  --dataTable-header-color: #ffffff; /* Header text — white on navy */
+  --dataTable-header-background: #0f766e; /* Header bg — navy, ~14:1 vs canvas (was surface.muted, 1.13:1 — invisible header chrome) */
+  --dataTable-header-color: #faf8f5; /* Header text — white on navy */
   --dataTable-header-padding: 16px; /* Header cell padding */
   --dataTable-header-fontSize: 14px; /* Header font size */
   --dataTable-header-fontWeight: 600; /* Header font weight */
-  --dataTable-header-borderColor: #eeeeee; /* Header border color */
-  --dataTable-body-background-default: #ffffff; /* Row bg matches canvas — rows read as content on the page, header chrome carries the visual frame. WCAG 1.4.11 skipped because no surface change vs canvas. */
-  --dataTable-body-background-hover: #f0f1f4; /* Row hover bg — subtle tint as transient affordance (not part of the static identification surface) */
+  --dataTable-header-borderColor: #e6e2dd; /* Header border color */
+  --dataTable-body-background-default: #faf8f5; /* Row bg matches canvas — rows read as content on the page, header chrome carries the visual frame. WCAG 1.4.11 skipped because no surface change vs canvas. */
+  --dataTable-body-background-hover: #eceeec; /* Row hover bg — subtle tint as transient affordance (not part of the static identification surface) */
   --dataTable-body-background-striped: #fafafa; /* Striped alternate row — by-design subtle (~1.04:1 vs canvas). The striped variant doesn't pass strict 1.4.11; consumers who need a11y-strict tables should opt-out of striped mode. */
-  --dataTable-body-color: #1f2544; /* Body text color */
+  --dataTable-body-color: #253a43; /* Body text color */
   --dataTable-body-padding: 16px; /* Body cell padding */
   --dataTable-body-fontSize: 14px; /* Body font size */
-  --dataTable-body-borderColor: #eeeeee; /* Row border color */
+  --dataTable-body-borderColor: #e6e2dd; /* Row border color */
   --dataTable-sortIcon-size: 14px; /* Sort icon size */
-  --dataTable-sortIcon-color-default: #5e6481; /* Sort icon default color */
-  --dataTable-sortIcon-color-active: #1f2544; /* Sort icon active color */
+  --dataTable-sortIcon-color-default: #5f7178; /* Sort icon default color */
+  --dataTable-sortIcon-color-active: #253a43; /* Sort icon active color */
   --dataTable-pagination-padding: 16px; /* Pagination area padding */
   --dataTable-pagination-gap: 6px; /* Gap between pagination elements */
-  --dataTable-pagination-background: #f0f1f4; /* Pagination background */
-  --dataTable-pagination-borderColor: #eeeeee; /* Pagination border color */
+  --dataTable-pagination-background: #eceeec; /* Pagination background */
+  --dataTable-pagination-borderColor: #e6e2dd; /* Pagination border color */
   --dataTable-empty-padding: 42px; /* Empty state padding */
-  --dataTable-empty-color: #5e6481; /* Empty state text color */
+  --dataTable-empty-color: #5f7178; /* Empty state text color */
   --dataTable-transition-duration: 150ms; /* Animation duration */
-  --dataView-background: #f5f5f5; /* DataView container background */
-  --dataView-border-color: #eeeeee; /* Container border color */
+  --dataView-background: #ffffff; /* DataView container background */
+  --dataView-border-color: #e6e2dd; /* Container border color */
   --dataView-border-width: 1px; /* Container border width */
   --dataView-radius: 5px; /* Container border radius */
-  --dataView-header-background: #f0f1f4; /* Header background color */
+  --dataView-header-background: #eceeec; /* Header background color */
   --dataView-header-padding: 16px; /* Header padding */
-  --dataView-header-borderColor: #eeeeee; /* Header border color */
+  --dataView-header-borderColor: #e6e2dd; /* Header border color */
   --dataView-content-padding: 16px; /* Content area padding */
   --dataView-grid-gap: 16px; /* Gap between grid items */
   --dataView-list-gap: 10px; /* Gap between list items */
   --dataView-list-item-padding: 16px; /* List item padding */
   --dataView-list-item-background-default: transparent; /* List item background */
-  --dataView-list-item-background-hover: #f0f1f4; /* List item hover background */
-  --dataView-list-item-borderColor: #eeeeee; /* List item border color */
+  --dataView-list-item-background-hover: #eceeec; /* List item hover background */
+  --dataView-list-item-borderColor: #e6e2dd; /* List item border color */
   --dataView-list-item-radius: 2px; /* List item border radius */
   --dataView-layoutSwitcher-gap: 4px; /* Gap between layout buttons */
   --dataView-layoutSwitcher-button-size: 32px; /* Layout button size */
   --dataView-layoutSwitcher-button-background-default: transparent; /* Button default background */
-  --dataView-layoutSwitcher-button-background-active: #f0f1f4; /* Button active background */
+  --dataView-layoutSwitcher-button-background-active: #eceeec; /* Button active background */
   --dataView-layoutSwitcher-button-background-hover: #f5f5f5; /* Button hover background */
-  --dataView-layoutSwitcher-button-color-default: #5e6481; /* Button icon default color */
-  --dataView-layoutSwitcher-button-color-active: #1f2544; /* Button icon active color */
+  --dataView-layoutSwitcher-button-color-default: #5f7178; /* Button icon default color */
+  --dataView-layoutSwitcher-button-color-active: #253a43; /* Button icon active color */
   --dataView-layoutSwitcher-button-radius: 2px; /* Button border radius */
   --dataView-pagination-padding: 16px; /* Pagination padding */
-  --dataView-pagination-borderColor: #eeeeee; /* Pagination border color */
+  --dataView-pagination-borderColor: #e6e2dd; /* Pagination border color */
   --dataView-empty-padding: 42px; /* Empty state padding */
-  --dataView-empty-color: #5e6481; /* Empty state text color */
+  --dataView-empty-color: #5f7178; /* Empty state text color */
   --dataView-transition-duration: 150ms; /* Animation duration */
   --dialog-padding-header: 26px; /* Header section padding */
   --dialog-padding-content: 26px; /* Content area padding */
   --dialog-padding-footer: 26px; /* Footer section padding */
-  --dialog-background-default: #ffffff; /* Dialog background color */
+  --dialog-background-default: #faf8f5; /* Dialog background color */
   --dialog-radius: 13px; /* Dialog border radius */
   --dialog-shadow: 0 8px 16px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08); /* Dialog elevation shadow */
-  --dialog-border-color: #eeeeee; /* Dialog border color */
+  --dialog-border-color: #e6e2dd; /* Dialog border color */
   --dialog-border-width: 1px; /* Dialog border width */
-  --dialog-header-background: #ffffff; /* Header background */
-  --dialog-header-borderColor: #eeeeee; /* Header bottom border color */
-  --dialog-header-title-color: #1f2544; /* Header title text color */
+  --dialog-header-background: #faf8f5; /* Header background */
+  --dialog-header-borderColor: #e6e2dd; /* Header bottom border color */
+  --dialog-header-title-color: #04141f; /* Header title text color */
   --dialog-closeButton-size: 32px; /* Close button size */
   --dialog-closeButton-iconSize: 16px; /* Close icon size */
-  --dialog-closeButton-color-default: #5e6481; /* Close button icon color */
-  --dialog-closeButton-color-hover: #1f2544; /* Close button hover color */
-  --dialog-closeButton-background-hover: #f0f1f4; /* Close button hover background */
+  --dialog-closeButton-color-default: #5f7178; /* Close button icon color */
+  --dialog-closeButton-color-hover: #253a43; /* Close button hover color */
+  --dialog-closeButton-background-hover: #eceeec; /* Close button hover background */
   --dialog-closeButton-radius: 5px; /* Close button border radius */
-  --dialog-overlay-background: rgba(0, 0, 0, 0.5); /* Modal overlay backdrop color */
+  --dialog-overlay-background: rgba(4, 26, 38, 0.55); /* Modal overlay backdrop color */
   --dialog-width-sm: 400px; /* Small dialog width */
   --dialog-width-md: 560px; /* Medium dialog width (default) */
   --dialog-width-lg: 720px; /* Large dialog width */
@@ -815,7 +815,7 @@
   --divider-content-color: #737373; /* Color of content text within divider */
   --divider-content-background: #ffffff; /* Background behind content to cover the line */
   --dock-background: #ffffff; /* Dock background */
-  --dock-border-color: #eeeeee; /* Dock border color */
+  --dock-border-color: #e6e2dd; /* Dock border color */
   --dock-border-width: 1px; /* Dock border width */
   --dock-radius: 13px; /* Dock border radius */
   --dock-shadow: 0 8px 16px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08); /* Dock elevation shadow */
@@ -827,42 +827,42 @@
   --dock-item-size-magnified: 72px; /* Magnified item size on hover */
   --dock-item-radius: 8px; /* Item border radius */
   --dock-item-background-default: transparent; /* Item background */
-  --dock-item-background-hover: #f0f1f4; /* Item hover background */
-  --dock-item-background-active: #f0f1f4; /* Active item background */
+  --dock-item-background-hover: #eceeec; /* Item hover background */
+  --dock-item-background-active: #eceeec; /* Active item background */
   --dock-item-icon-size-default: 28px; /* Default icon size */
   --dock-item-icon-size-magnified: 42px; /* Magnified icon size */
-  --dock-item-icon-color-default: #1f2544; /* Icon color */
-  --dock-item-icon-color-hover: #1f2544; /* Icon hover color */
+  --dock-item-icon-color-default: #253a43; /* Icon color */
+  --dock-item-icon-color-hover: #0f766e; /* Icon hover color */
   --dock-tooltip-offset: 6px; /* Tooltip distance from dock */
-  --dock-tooltip-background: #1f2544; /* Tooltip background */
-  --dock-tooltip-text-color: #ffffff; /* Tooltip text color */
+  --dock-tooltip-background: #041a26; /* Tooltip background */
+  --dock-tooltip-text-color: #faf8f5; /* Tooltip text color */
   --dock-tooltip-text-fontSize: 12px; /* Tooltip font size */
   --dock-tooltip-padding-x: 10px; /* Tooltip horizontal padding */
   --dock-tooltip-padding-y: 4px; /* Tooltip vertical padding */
   --dock-tooltip-radius: 2px; /* Tooltip border radius */
   --dock-indicator-size: 4px; /* Active indicator dot size */
-  --dock-indicator-color: #1f2544; /* Active indicator color */
+  --dock-indicator-color: #0f766e; /* Active indicator color */
   --dock-indicator-gap: 4px; /* Gap between item and indicator */
-  --drawer-background: #ffffff; /* Drawer background color */
-  --drawer-border-color: #eeeeee; /* Drawer border color */
+  --drawer-background: #faf8f5; /* Drawer background color */
+  --drawer-border-color: #e6e2dd; /* Drawer border color */
   --drawer-border-width: 1px; /* Drawer border width */
   --drawer-shadow: 0 8px 16px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08); /* Drawer shadow */
   --drawer-header-padding: 26px; /* Header section padding */
-  --drawer-header-background: #ffffff; /* Header background */
-  --drawer-header-borderColor: #eeeeee; /* Header bottom border color */
-  --drawer-header-title-color: #1f2544; /* Header title text color */
+  --drawer-header-background: #faf8f5; /* Header background */
+  --drawer-header-borderColor: #e6e2dd; /* Header bottom border color */
+  --drawer-header-title-color: #04141f; /* Header title text color */
   --drawer-header-title-fontSize: 18px; /* Header title font size */
   --drawer-header-title-fontWeight: 600; /* Header title font weight */
   --drawer-content-padding: 26px; /* Content area padding */
   --drawer-footer-padding: 26px; /* Footer section padding */
-  --drawer-footer-borderColor: #eeeeee; /* Footer top border color */
+  --drawer-footer-borderColor: #e6e2dd; /* Footer top border color */
   --drawer-closeButton-size: 32px; /* Close button size */
   --drawer-closeButton-iconSize: 16px; /* Close icon size */
-  --drawer-closeButton-color-default: #5e6481; /* Close button icon color */
-  --drawer-closeButton-color-hover: #1f2544; /* Close button hover color */
-  --drawer-closeButton-background-hover: #f0f1f4; /* Close button hover background */
+  --drawer-closeButton-color-default: #5f7178; /* Close button icon color */
+  --drawer-closeButton-color-hover: #253a43; /* Close button hover color */
+  --drawer-closeButton-background-hover: #eceeec; /* Close button hover background */
   --drawer-closeButton-radius: 5px; /* Close button border radius */
-  --drawer-overlay-background: rgba(0, 0, 0, 0.5); /* Overlay backdrop color */
+  --drawer-overlay-background: rgba(4, 26, 38, 0.55); /* Overlay backdrop color */
   --drawer-size-sm: 280px; /* Small drawer size */
   --drawer-size-md: 400px; /* Medium drawer size (default) */
   --drawer-size-lg: 560px; /* Large drawer size */
@@ -882,19 +882,19 @@
   --dropdown-border-width: 1px;
   --dropdown-border-color-default: #d4d4d4;
   --dropdown-border-color-hover: #a3a3a3;
-  --dropdown-border-color-focus: #1f2544;
+  --dropdown-border-color-focus: #0f766e;
   --dropdown-border-color-disabled: #e5e5e5;
-  --dropdown-border-color-error: #e00613;
-  --dropdown-background-default: #ffffff;
+  --dropdown-border-color-error: #b8342c;
+  --dropdown-background-default: #faf8f5;
   --dropdown-background-disabled: #f5f5f5;
-  --dropdown-background-hover: #ffffff;
-  --dropdown-text-default: #1f2544;
-  --dropdown-text-placeholder: #5e6481;
-  --dropdown-text-disabled: #5e6481;
+  --dropdown-background-hover: #faf8f5;
+  --dropdown-text-default: #253a43;
+  --dropdown-text-placeholder: #5f7178;
+  --dropdown-text-disabled: #5f7178;
   --dropdown-icon-size: 16px;
   --dropdown-icon-color-default: #737373;
   --dropdown-icon-color-disabled: #d4d4d4;
-  --dropdown-panel-background: #ffffff;
+  --dropdown-panel-background: #faf8f5;
   --dropdown-panel-border: #e5e5e5;
   --dropdown-panel-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
   --dropdown-panel-radius: 5px;
@@ -902,7 +902,7 @@
   --dropdown-panel-padding: 6px;
   --dropdown-filter-height: 36px;
   --dropdown-filter-padding-x: 10px;
-  --dropdown-filter-background: #ffffff;
+  --dropdown-filter-background: #faf8f5;
   --dropdown-filter-border: #e5e5e5;
   --dropdown-filter-radius: 5px;
   --dropdown-filter-marginBottom: 6px;
@@ -911,103 +911,103 @@
   --dropdown-option-radius: 2px;
   --dropdown-option-background-default: transparent;
   --dropdown-option-background-hover: #f5f5f5;
-  --dropdown-option-background-selected: #1f2544;
+  --dropdown-option-background-selected: #0f766e;
   --dropdown-option-background-focus: #f5f5f5;
-  --dropdown-option-text-default: #1f2544;
+  --dropdown-option-text-default: #253a43;
   --dropdown-option-text-selected: #ffffff;
   --dropdown-focus-ringWidth: 2px;
-  --dropdown-focus-ringColor: #1f2544;
+  --dropdown-focus-ringColor: #0f766e;
   --dropdown-focus-ringOffset: 1px;
   --editor-minHeight: 200px;
   --editor-radius: 5px;
   --editor-border-width: 1px;
   --editor-border-color-default: #d4d4d4;
   --editor-border-color-hover: #a3a3a3;
-  --editor-border-color-focus: #1f2544;
+  --editor-border-color-focus: #0f766e;
   --editor-border-color-disabled: #e5e5e5;
-  --editor-border-color-error: #e00613;
-  --editor-background-default: #ffffff;
+  --editor-border-color-error: #b8342c;
+  --editor-background-default: #faf8f5;
   --editor-background-disabled: #f5f5f5;
   --editor-toolbar-padding-x: 10px;
   --editor-toolbar-padding-y: 6px;
   --editor-toolbar-gap: 6px;
-  --editor-toolbar-background: #f0f1f4;
+  --editor-toolbar-background: #eceeec;
   --editor-toolbar-border-color: #e5e5e5;
   --editor-button-size: 32px;
   --editor-button-radius: 2px;
   --editor-button-background-default: transparent;
-  --editor-button-background-hover: #f0f1f4; /* Toolbar button hover bg — semantic so it adapts in dark */
-  --editor-button-background-active: #d9dadf; /* Toolbar button active bg — semantic, adapts in dark */
-  --editor-button-color-default: #1f2544;
-  --editor-button-color-active: #1f2544;
-  --editor-button-color-disabled: #5e6481;
+  --editor-button-background-hover: #eceeec; /* Toolbar button hover bg — semantic so it adapts in dark */
+  --editor-button-background-active: #d5d8d4; /* Toolbar button active bg — semantic, adapts in dark */
+  --editor-button-color-default: #253a43;
+  --editor-button-color-active: #0f766e;
+  --editor-button-color-disabled: #5f7178;
   --editor-separator-width: 1px;
   --editor-separator-color: #d4d4d4;
   --editor-separator-margin: 6px;
   --editor-content-padding: 16px;
-  --editor-content-text-default: #1f2544;
-  --editor-content-text-placeholder: #5e6481;
-  --editor-content-text-disabled: #5e6481;
+  --editor-content-text-default: #253a43;
+  --editor-content-text-placeholder: #5f7178;
+  --editor-content-text-disabled: #5f7178;
   --editor-content-fontSize: 15px;
   --editor-content-lineHeight: 1.6;
   --editor-focus-ringWidth: 2px;
-  --editor-focus-ringColor: #1f2544;
+  --editor-focus-ringColor: #0f766e;
   --editor-focus-ringOffset: 1px;
   --field-set-padding: 26px; /* Content padding */
-  --field-set-background: #ffffff; /* FieldSet background color */
-  --field-set-border-color: #eeeeee; /* Border color */
+  --field-set-background: #faf8f5; /* FieldSet background color */
+  --field-set-border-color: #e6e2dd; /* Border color */
   --field-set-border-width: 1px; /* Border width */
   --field-set-border-radius: 5px; /* Border radius */
   --field-set-legend-padding-x: 16px; /* Legend horizontal padding */
   --field-set-legend-padding-y: 10px; /* Legend vertical padding */
-  --field-set-legend-background: #f5f5f5; /* Legend background */
-  --field-set-legend-color: #1f2544; /* Legend text color */
+  --field-set-legend-background: #ffffff; /* Legend background */
+  --field-set-legend-color: #04141f; /* Legend text color */
   --field-set-legend-fontSize: 14px; /* Legend font size */
   --field-set-legend-fontWeight: 600; /* Legend font weight */
-  --field-set-legend-border-color: #eeeeee; /* Legend border color */
+  --field-set-legend-border-color: #e6e2dd; /* Legend border color */
   --field-set-legend-border-width: 1px; /* Legend border width */
   --field-set-legend-border-radius: 5px; /* Legend border radius */
   --field-set-toggle-icon-size: 16px; /* Toggle icon size */
-  --field-set-toggle-icon-color-default: #5e6481; /* Toggle icon color */
-  --field-set-toggle-icon-color-hover: #1f2544; /* Toggle icon hover color */
+  --field-set-toggle-icon-color-default: #5f7178; /* Toggle icon color */
+  --field-set-toggle-icon-color-hover: #253a43; /* Toggle icon hover color */
   --field-set-toggle-gap: 10px; /* Gap between legend text and toggle icon */
   --field-set-transition-duration: 200ms; /* Collapse/expand transition duration */
-  --fileUpload-dropzone-background-default: #f5f5f5; /* Dropzone background color */
-  --fileUpload-dropzone-background-hover: #f0f1f4; /* Dropzone hover background */
-  --fileUpload-dropzone-background-active: #fde8ea; /* Dropzone active/dragging background */
-  --fileUpload-dropzone-border-color-default: #eeeeee; /* Dropzone border color */
-  --fileUpload-dropzone-border-color-hover: #d9dadf; /* Dropzone hover border color */
-  --fileUpload-dropzone-border-color-active: #1f2544; /* Dropzone active border color */
+  --fileUpload-dropzone-background-default: #ffffff; /* Dropzone background color */
+  --fileUpload-dropzone-background-hover: #eceeec; /* Dropzone hover background */
+  --fileUpload-dropzone-background-active: #e2efec; /* Dropzone active/dragging background */
+  --fileUpload-dropzone-border-color-default: #e6e2dd; /* Dropzone border color */
+  --fileUpload-dropzone-border-color-hover: #d5d8d4; /* Dropzone hover border color */
+  --fileUpload-dropzone-border-color-active: #0f766e; /* Dropzone active border color */
   --fileUpload-dropzone-border-width: 2px; /* Dropzone border width */
   --fileUpload-dropzone-border-style: dashed; /* Dropzone border style */
   --fileUpload-dropzone-radius: 5px; /* Dropzone border radius */
   --fileUpload-dropzone-padding: 42px; /* Dropzone padding */
   --fileUpload-icon-size: 48px; /* Upload icon size */
-  --fileUpload-icon-color-default: #5e6481; /* Upload icon color */
-  --fileUpload-icon-color-active: #1f2544; /* Upload icon color when dragging */
-  --fileUpload-text-primary-color: #1f2544; /* Primary text color */
+  --fileUpload-icon-color-default: #5f7178; /* Upload icon color */
+  --fileUpload-icon-color-active: #0f766e; /* Upload icon color when dragging */
+  --fileUpload-text-primary-color: #253a43; /* Primary text color */
   --fileUpload-text-primary-size: 16px; /* Primary text font size */
-  --fileUpload-text-secondary-color: #5e6481; /* Secondary text color */
+  --fileUpload-text-secondary-color: #5f7178; /* Secondary text color */
   --fileUpload-text-secondary-size: 14px; /* Secondary text font size */
   --fileUpload-fileList-gap: 10px; /* Gap between file items */
-  --fileUpload-fileList-item-background: #f0f1f4; /* File item background */
+  --fileUpload-fileList-item-background: #eceeec; /* File item background */
   --fileUpload-fileList-item-padding: 10px; /* File item padding */
   --fileUpload-fileList-item-radius: 5px; /* File item border radius */
-  --fileUpload-fileList-item-border-color: #eeeeee; /* File item border color */
+  --fileUpload-fileList-item-border-color: #e6e2dd; /* File item border color */
   --fileUpload-fileList-item-border-width: 1px; /* File item border width */
-  --fileUpload-fileList-fileName-color: #1f2544; /* File name color */
+  --fileUpload-fileList-fileName-color: #253a43; /* File name color */
   --fileUpload-fileList-fileName-size: 14px; /* File name font size */
-  --fileUpload-fileList-fileSize-color: #5e6481; /* File size color */
+  --fileUpload-fileList-fileSize-color: #5f7178; /* File size color */
   --fileUpload-fileList-fileSize-size: 12px; /* File size font size */
-  --fileUpload-fileList-removeButton-color-default: #5e6481; /* Remove button color */
-  --fileUpload-fileList-removeButton-color-hover: #e00613; /* Remove button hover color */
+  --fileUpload-fileList-removeButton-color-default: #5f7178; /* Remove button color */
+  --fileUpload-fileList-removeButton-color-hover: #b8342c; /* Remove button hover color */
   --fileUpload-fileList-removeButton-size: 20px; /* Remove button icon size */
   --fileUpload-transition-duration: 200ms; /* Transition duration */
-  --galleria-container-background: #f5f5f5; /* Galleria container background */
+  --galleria-container-background: #ffffff; /* Galleria container background */
   --galleria-container-radius: 5px; /* Galleria container border radius */
-  --galleria-container-border-color: #eeeeee; /* Container border color */
+  --galleria-container-border-color: #e6e2dd; /* Container border color */
   --galleria-container-border-width: 1px; /* Container border width */
-  --galleria-preview-background: #ffffff; /* Preview area background */
+  --galleria-preview-background: #faf8f5; /* Preview area background */
   --galleria-preview-padding: 10px; /* Preview area padding */
   --galleria-preview-radius: 5px; /* Preview image border radius */
   --galleria-thumbnail-container-gap: 6px; /* Gap between thumbnails */
@@ -1019,47 +1019,47 @@
   --galleria-thumbnail-item-opacity-hover: 0.8; /* Thumbnail hover opacity */
   --galleria-thumbnail-item-opacity-active: 1; /* Active thumbnail opacity */
   --galleria-thumbnail-item-border-color-default: transparent; /* Thumbnail border color */
-  --galleria-thumbnail-item-border-color-active: #1f2544; /* Active thumbnail border color */
+  --galleria-thumbnail-item-border-color-active: #0f766e; /* Active thumbnail border color */
   --galleria-thumbnail-item-border-width: 2px; /* Thumbnail border width */
   --galleria-navigator-size: 40px; /* Navigator button size */
   --galleria-navigator-iconSize: 20px; /* Navigator icon size */
   --galleria-navigator-background-default: rgba(0, 0, 0, 0.3); /* Navigator background */
   --galleria-navigator-background-hover: rgba(0, 0, 0, 0.5); /* Navigator hover background */
-  --galleria-navigator-color: #ffffff; /* Navigator icon color */
+  --galleria-navigator-color: #faf8f5; /* Navigator icon color */
   --galleria-navigator-radius: 50%; /* Navigator border radius */
   --galleria-indicator-size: 10px; /* Indicator dot size */
   --galleria-indicator-gap: 6px; /* Gap between indicators */
   --galleria-indicator-background-default: rgba(255, 255, 255, 0.5); /* Indicator background */
-  --galleria-indicator-background-active: #ffffff; /* Active indicator background */
-  --galleria-fullscreen-background: rgba(0, 0, 0, 0.5); /* Fullscreen overlay background */
+  --galleria-indicator-background-active: #faf8f5; /* Active indicator background */
+  --galleria-fullscreen-background: rgba(4, 26, 38, 0.55); /* Fullscreen overlay background */
   --galleria-fullscreen-zIndex: 1100; /* Fullscreen z-index */
   --galleria-fullscreen-closeButton-size: 40px; /* Close button size */
-  --galleria-fullscreen-closeButton-color: #ffffff; /* Close button color */
+  --galleria-fullscreen-closeButton-color: #faf8f5; /* Close button color */
   --galleria-fullscreen-closeButton-background-default: rgba(0, 0, 0, 0.3); /* Close button background */
   --galleria-fullscreen-closeButton-background-hover: rgba(0, 0, 0, 0.5); /* Close button hover background */
   --galleria-caption-background: rgba(0, 0, 0, 0.5); /* Caption background */
-  --galleria-caption-color: #ffffff; /* Caption text color */
+  --galleria-caption-color: #faf8f5; /* Caption text color */
   --galleria-caption-padding: 10px; /* Caption padding */
   --galleria-caption-fontSize: 14px; /* Caption font size */
   --galleria-transition-duration: 300ms; /* Transition duration */
   --image-radius: 5px; /* Image border radius */
-  --image-placeholder-background: #f0f1f4; /* Placeholder background color while loading */
+  --image-placeholder-background: #eceeec; /* Placeholder background color while loading */
   --image-preview-icon-size: 24px; /* Preview indicator icon size */
-  --image-preview-icon-color: #ffffff; /* Preview indicator icon color */
+  --image-preview-icon-color: #faf8f5; /* Preview indicator icon color */
   --image-preview-icon-background: rgba(0, 0, 0, 0.5); /* Preview indicator background */
-  --image-preview-overlay-background: rgba(0, 0, 0, 0.5); /* Preview overlay background */
+  --image-preview-overlay-background: rgba(4, 26, 38, 0.55); /* Preview overlay background */
   --image-preview-overlay-zIndex: 1100; /* Preview overlay z-index */
   --image-preview-closeButton-size: 40px; /* Close button size in preview */
-  --image-preview-closeButton-color: #ffffff; /* Close button color */
+  --image-preview-closeButton-color: #faf8f5; /* Close button color */
   --image-preview-closeButton-hoverBackground: rgba(255, 255, 255, 0.1); /* Close button hover background */
   --image-transition-duration: 200ms; /* Transition duration for hover effects */
-  --image-compare-background: #f5f5f5; /* Container background color */
-  --image-compare-border-color: #eeeeee; /* Border color */
+  --image-compare-background: #ffffff; /* Container background color */
+  --image-compare-border-color: #e6e2dd; /* Border color */
   --image-compare-border-width: 1px; /* Border width */
   --image-compare-border-radius: 5px; /* Border radius */
   --image-compare-handle-width: 4px; /* Handle divider width */
   --image-compare-handle-color-default: #ffffff; /* Handle color */
-  --image-compare-handle-color-hover: #1f2544; /* Handle hover color */
+  --image-compare-handle-color-hover: #0f766e; /* Handle hover color */
   --image-compare-handle-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08); /* Handle shadow */
   --image-compare-icon-size: 32px; /* Handle icon container size */
   --image-compare-icon-color: #404040; /* Handle icon color */
@@ -1072,31 +1072,31 @@
   --inline-message-fontSize: 14px; /* Text font size */
   --inline-message-fontWeight: 500; /* Text font weight */
   --inline-message-iconSize: 16px; /* Icon size */
-  --inline-message-background-success: #1d6429; /* Success bg — darker green, ≥4.5:1 vs white text (WCAG 1.4.3) and ≥3:1 vs white canvas (WCAG 1.4.11). Previous *Subtle was 1.14:1 vs canvas. */
-  --inline-message-background-info: #0050a8; /* Info bg — darker blue, same constraints */
-  --inline-message-background-warn: #a8590e; /* Warning bg — darker orange (feedback.warning mid is too light against white canvas) */
-  --inline-message-background-error: #c40000; /* Error bg — darker red */
-  --inline-message-text-success: #ffffff; /* Text — white on filled severity bg */
-  --inline-message-text-info: #ffffff; /* Text — white on filled severity bg */
-  --inline-message-text-warn: #ffffff; /* Text — white on filled severity bg */
-  --inline-message-text-error: #ffffff; /* Text — white on filled severity bg */
-  --inline-message-icon-success: #ffffff; /* Icon matches text — white on filled bg */
-  --inline-message-icon-info: #ffffff; /* Icon matches text — white on filled bg */
-  --inline-message-icon-warn: #ffffff; /* Icon matches text — white on filled bg */
-  --inline-message-icon-error: #ffffff; /* Icon matches text — white on filled bg */
+  --inline-message-background-success: #145c3f; /* Success bg — darker green, ≥4.5:1 vs white text (WCAG 1.4.3) and ≥3:1 vs white canvas (WCAG 1.4.11). Previous *Subtle was 1.14:1 vs canvas. */
+  --inline-message-background-info: #115e59; /* Info bg — darker blue, same constraints */
+  --inline-message-background-warn: #8a5410; /* Warning bg — darker orange (feedback.warning mid is too light against white canvas) */
+  --inline-message-background-error: #8f2620; /* Error bg — darker red */
+  --inline-message-text-success: #faf8f5; /* Text — white on filled severity bg */
+  --inline-message-text-info: #faf8f5; /* Text — white on filled severity bg */
+  --inline-message-text-warn: #faf8f5; /* Text — white on filled severity bg */
+  --inline-message-text-error: #faf8f5; /* Text — white on filled severity bg */
+  --inline-message-icon-success: #faf8f5; /* Icon matches text — white on filled bg */
+  --inline-message-icon-info: #faf8f5; /* Icon matches text — white on filled bg */
+  --inline-message-icon-warn: #faf8f5; /* Icon matches text — white on filled bg */
+  --inline-message-icon-error: #faf8f5; /* Icon matches text — white on filled bg */
   --in-place-display-paddingX: 16px; /* Display element horizontal padding */
   --in-place-display-paddingY: 10px; /* Display element vertical padding */
   --in-place-display-background-default: transparent; /* Display background */
-  --in-place-display-background-hover: #f0f1f4; /* Display hover background */
-  --in-place-display-color-default: #1f2544; /* Display text color */
-  --in-place-display-color-hover: #1f2544; /* Display hover text color */
-  --in-place-display-color-disabled: #5e6481; /* Display disabled text color */
+  --in-place-display-background-hover: #eceeec; /* Display hover background */
+  --in-place-display-color-default: #253a43; /* Display text color */
+  --in-place-display-color-hover: #253a43; /* Display hover text color */
+  --in-place-display-color-disabled: #5f7178; /* Display disabled text color */
   --in-place-display-border-radius: 5px; /* Display border radius */
   --in-place-closeButton-size: 28px; /* Close button size */
   --in-place-closeButton-iconSize: 14px; /* Close icon size */
-  --in-place-closeButton-color-default: #5e6481; /* Close button color */
-  --in-place-closeButton-color-hover: #1f2544; /* Close button hover color */
-  --in-place-closeButton-background-hover: #f0f1f4; /* Close button hover background */
+  --in-place-closeButton-color-default: #5f7178; /* Close button color */
+  --in-place-closeButton-color-hover: #253a43; /* Close button hover color */
+  --in-place-closeButton-background-hover: #eceeec; /* Close button hover background */
   --in-place-closeButton-radius: 5px; /* Close button border radius */
   --in-place-closeButton-gap: 10px; /* Gap between content and close button */
   --in-place-transition-duration: 150ms; /* State transition duration */
@@ -1110,14 +1110,14 @@
   --input-chips-border-width: 1px;
   --input-chips-border-color-default: #d4d4d4; /* Default border color */
   --input-chips-border-color-hover: #a3a3a3; /* Hover border color */
-  --input-chips-border-color-focus: #1f2544; /* Focus border color */
+  --input-chips-border-color-focus: #0f766e; /* Focus border color */
   --input-chips-border-color-disabled: #e5e5e5; /* Disabled border color */
-  --input-chips-border-color-error: #e00613; /* Error/invalid border color */
-  --input-chips-background-default: #ffffff; /* Default background */
+  --input-chips-border-color-error: #b8342c; /* Error/invalid border color */
+  --input-chips-background-default: #faf8f5; /* Default background */
   --input-chips-background-disabled: #f5f5f5; /* Disabled background */
-  --input-chips-text-default: #1f2544; /* Default text color */
-  --input-chips-text-placeholder: #5e6481; /* Placeholder text color */
-  --input-chips-text-disabled: #5e6481; /* Disabled text color */
+  --input-chips-text-default: #253a43; /* Default text color */
+  --input-chips-text-placeholder: #5f7178; /* Placeholder text color */
+  --input-chips-text-disabled: #5f7178; /* Disabled text color */
   --input-chips-fontSize-sm: 14px;
   --input-chips-fontSize-md: 15px;
   --input-chips-fontSize-lg: 16px;
@@ -1125,28 +1125,28 @@
   --input-chips-chip-padding-y: 4px;
   --input-chips-chip-gap: 4px;
   --input-chips-chip-radius: 9999px;
-  --input-chips-chip-background-default: #1f2544; /* Chip bg — navy ~14.9:1 vs canvas (WCAG 1.4.11). Previous surface.muted was 1.13:1 — invisible. */
-  --input-chips-chip-background-hover: #3d4467; /* Chip hover — lifted navy */
-  --input-chips-chip-text: #ffffff; /* Chip text — white on navy fill, ~14.9:1 */
+  --input-chips-chip-background-default: #0f766e; /* Chip bg — navy ~14.9:1 vs canvas (WCAG 1.4.11). Previous surface.muted was 1.13:1 — invisible. */
+  --input-chips-chip-background-hover: #115e59; /* Chip hover — lifted navy */
+  --input-chips-chip-text: #faf8f5; /* Chip text — white on navy fill, ~14.9:1 */
   --input-chips-chip-fontSize: 13px;
   --input-chips-remove-size: 14px;
-  --input-chips-remove-color-default: #ffffff; /* Chip remove icon — matches chip text; SCSS applies opacity:0.75 so it reads as a slightly softer tint than the label. */
-  --input-chips-remove-color-hover: #ffffff; /* Chip remove icon hover — same hue, full opacity for the affordance. */
+  --input-chips-remove-color-default: #faf8f5; /* Chip remove icon — matches chip text; SCSS applies opacity:0.75 so it reads as a slightly softer tint than the label. */
+  --input-chips-remove-color-hover: #faf8f5; /* Chip remove icon hover — same hue, full opacity for the affordance. */
   --input-chips-focus-ringWidth: 2px;
-  --input-chips-focus-ringColor: #1f2544;
+  --input-chips-focus-ringColor: #0f766e;
   --input-chips-focus-ringOffset: 1px;
   --input-group-display: flex; /* Display type for input group container */
   --input-group-border-radius: 5px; /* Border radius for grouped elements */
   --input-group-gap: 0; /* Gap between input group items (none for seamless grouping) */
-  --input-group-addon-background-default: #f5f5f5; /* Addon background color */
-  --input-group-addon-text-default: #5e6481; /* Addon text color */
-  --input-group-addon-border-color: #d9dadf; /* Addon border color */
+  --input-group-addon-background-default: #ffffff; /* Addon background color */
+  --input-group-addon-text-default: #5f7178; /* Addon text color */
+  --input-group-addon-border-color: #d5d8d4; /* Addon border color */
   --input-group-addon-border-width: 1px; /* Addon border width */
   --input-group-addon-padding-x: 16px; /* Horizontal padding */
   --input-group-addon-padding-y: 10px; /* Vertical padding */
   --input-group-addon-fontSize: 14px; /* Addon font size */
-  --input-icon-color-default: #5e6481; /* Default icon color */
-  --input-icon-color-focus: #1f2544; /* Icon color when input is focused */
+  --input-icon-color-default: #5f7178; /* Default icon color */
+  --input-icon-color-focus: #253a43; /* Icon color when input is focused */
   --input-icon-size-sm: 16px; /* Small icon size */
   --input-icon-size-md: 18px; /* Medium icon size */
   --input-icon-size-lg: 20px; /* Large icon size */
@@ -1163,17 +1163,17 @@
   --input-mask-border-width: 1px;
   --input-mask-border-color-default: #d4d4d4; /* Default border color */
   --input-mask-border-color-hover: #a3a3a3; /* Hover border color */
-  --input-mask-border-color-focus: #1f2544; /* Focus border color */
+  --input-mask-border-color-focus: #0f766e; /* Focus border color */
   --input-mask-border-color-disabled: #e5e5e5; /* Disabled border color */
-  --input-mask-border-color-error: #e00613; /* Error/invalid border color */
-  --input-mask-background-default: #ffffff; /* Default background */
+  --input-mask-border-color-error: #b8342c; /* Error/invalid border color */
+  --input-mask-background-default: #faf8f5; /* Default background */
   --input-mask-background-disabled: #f5f5f5; /* Disabled background */
-  --input-mask-background-hover: #ffffff; /* Hover background */
-  --input-mask-text-default: #1f2544; /* Default text color */
-  --input-mask-text-placeholder: #5e6481; /* Placeholder/slot character color */
-  --input-mask-text-disabled: #5e6481; /* Disabled text color */
+  --input-mask-background-hover: #faf8f5; /* Hover background */
+  --input-mask-text-default: #253a43; /* Default text color */
+  --input-mask-text-placeholder: #5f7178; /* Placeholder/slot character color */
+  --input-mask-text-disabled: #5f7178; /* Disabled text color */
   --input-mask-focus-ringWidth: 2px; /* Focus ring width */
-  --input-mask-focus-ringColor: #1f2544; /* Focus ring color */
+  --input-mask-focus-ringColor: #0f766e; /* Focus ring color */
   --input-mask-focus-ringOffset: 1px; /* Focus ring offset */
   --inputNumber-height-sm: 32px;
   --inputNumber-height-md: 40px;
@@ -1186,14 +1186,14 @@
   --inputNumber-border-width: 1px;
   --inputNumber-border-color-default: #d4d4d4;
   --inputNumber-border-color-hover: #a3a3a3;
-  --inputNumber-border-color-focus: #1f2544;
+  --inputNumber-border-color-focus: #0f766e;
   --inputNumber-border-color-disabled: #e5e5e5;
-  --inputNumber-border-color-error: #e00613;
-  --inputNumber-background-default: #ffffff;
+  --inputNumber-border-color-error: #b8342c;
+  --inputNumber-background-default: #faf8f5;
   --inputNumber-background-disabled: #f5f5f5;
-  --inputNumber-text-default: #1f2544;
-  --inputNumber-text-placeholder: #5e6481;
-  --inputNumber-text-disabled: #5e6481;
+  --inputNumber-text-default: #253a43;
+  --inputNumber-text-placeholder: #5f7178;
+  --inputNumber-text-disabled: #5f7178;
   --inputNumber-button-width: 32px;
   --inputNumber-button-background-default: #f5f5f5;
   --inputNumber-button-background-hover: #e5e5e5;
@@ -1202,29 +1202,29 @@
   --inputNumber-button-icon-color-default: #525252;
   --inputNumber-button-icon-color-disabled: #d4d4d4;
   --inputNumber-focus-ringWidth: 2px;
-  --inputNumber-focus-ringColor: #1f2544;
+  --inputNumber-focus-ringColor: #0f766e;
   --inputNumber-focus-ringOffset: 1px;
   --input-otp-gap: 10px; /* Gap between input cells */
   --input-otp-cell-size: 48px; /* Cell width and height */
   --input-otp-cell-fontSize: 20px; /* Cell character font size */
   --input-otp-cell-fontWeight: 600; /* Cell character font weight */
   --input-otp-cell-radius: 5px; /* Cell border radius */
-  --input-otp-cell-background-default: #ffffff; /* Default cell background */
-  --input-otp-cell-background-focus: #ffffff; /* Focused cell background */
+  --input-otp-cell-background-default: #faf8f5; /* Default cell background */
+  --input-otp-cell-background-focus: #faf8f5; /* Focused cell background */
   --input-otp-cell-background-filled: #fafafa; /* Filled cell background */
   --input-otp-cell-background-disabled: #f5f5f5; /* Disabled cell background */
   --input-otp-cell-border-width: 1px; /* Cell border width */
   --input-otp-cell-border-color-default: #d4d4d4; /* Default cell border color */
   --input-otp-cell-border-color-hover: #a3a3a3; /* Hover cell border color */
-  --input-otp-cell-border-color-focus: #1f2544; /* Focused cell border color */
+  --input-otp-cell-border-color-focus: #0f766e; /* Focused cell border color */
   --input-otp-cell-border-color-filled: #a3a3a3; /* Filled cell border color */
   --input-otp-cell-border-color-disabled: #e5e5e5; /* Disabled cell border color */
-  --input-otp-cell-border-color-error: #e00613; /* Error cell border color */
-  --input-otp-cell-text-default: #1f2544; /* Default text color */
-  --input-otp-cell-text-disabled: #5e6481; /* Disabled text color */
-  --input-otp-cell-text-mask: #1f2544; /* Masked character color */
+  --input-otp-cell-border-color-error: #b8342c; /* Error cell border color */
+  --input-otp-cell-text-default: #253a43; /* Default text color */
+  --input-otp-cell-text-disabled: #5f7178; /* Disabled text color */
+  --input-otp-cell-text-mask: #253a43; /* Masked character color */
   --input-otp-focus-ringWidth: 2px; /* Focus ring width */
-  --input-otp-focus-ringColor: #006cde; /* Focus ring color */
+  --input-otp-focus-ringColor: #0f766e; /* Focus ring color */
   --input-otp-focus-ringOffset: 1px; /* Focus ring offset */
   --input-otp-separator-width: 8px; /* Separator dash width */
   --input-otp-separator-color: #a3a3a3; /* Separator color */
@@ -1241,13 +1241,13 @@
   --inputSwitch-thumb-color-default: #ffffff;
   --inputSwitch-thumb-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
   --inputSwitch-track-background-off: #737373; /* Off state — #737373, ~4.8:1 vs white canvas (WCAG 1.4.11 ≥3:1) */
-  --inputSwitch-track-background-on: #1f2544;
+  --inputSwitch-track-background-on: #0f766e;
   --inputSwitch-track-background-disabled: #e5e5e5; /* Disabled — exempt from 1.4.11 per WCAG */
   --inputSwitch-label-gap: 10px;
-  --inputSwitch-label-color-default: #1f2544;
-  --inputSwitch-label-color-disabled: #5e6481;
+  --inputSwitch-label-color-default: #253a43;
+  --inputSwitch-label-color-disabled: #5f7178;
   --inputSwitch-focus-ringWidth: 2px;
-  --inputSwitch-focus-ringColor: #1f2544;
+  --inputSwitch-focus-ringColor: #0f766e;
   --inputSwitch-focus-ringOffset: 2px;
   --input-text-height-sm: 32px; /* Small input height */
   --input-text-height-md: 40px; /* Medium input height (default) */
@@ -1259,19 +1259,19 @@
   --input-text-fontSize-lg: 16px;
   --input-text-radius: 5px; /* Input border radius */
   --input-text-border-width: 1px;
-  --input-text-border-color-default: #d9dadf; /* Default border color (semantic, adapts to theme) */
-  --input-text-border-color-hover: #1f2544; /* Hover border color */
-  --input-text-border-color-focus: #1f2544; /* Focus border color */
-  --input-text-border-color-disabled: #eeeeee; /* Disabled border color */
-  --input-text-border-color-error: #c40000; /* Error/invalid border color (emphasis shade for visibility on both light + dark) */
-  --input-text-background-default: #ffffff; /* Default background */
+  --input-text-border-color-default: #d5d8d4; /* Default border color (semantic, adapts to theme) */
+  --input-text-border-color-hover: #04141f; /* Hover border color */
+  --input-text-border-color-focus: #0f766e; /* Focus border color */
+  --input-text-border-color-disabled: #e6e2dd; /* Disabled border color */
+  --input-text-border-color-error: #8f2620; /* Error/invalid border color (emphasis shade for visibility on both light + dark) */
+  --input-text-background-default: #faf8f5; /* Default background */
   --input-text-background-disabled: #f5f5f5; /* Disabled background */
-  --input-text-background-hover: #ffffff; /* Hover background */
-  --input-text-text-default: #1f2544; /* Default text color */
-  --input-text-text-placeholder: #5e6481; /* Placeholder text color */
-  --input-text-text-disabled: #5e6481; /* Disabled text color */
+  --input-text-background-hover: #faf8f5; /* Hover background */
+  --input-text-text-default: #253a43; /* Default text color */
+  --input-text-text-placeholder: #5f7178; /* Placeholder text color */
+  --input-text-text-disabled: #5f7178; /* Disabled text color */
   --input-text-focus-ringWidth: 2px; /* Focus ring width */
-  --input-text-focus-ringColor: #1f2544; /* Focus ring color */
+  --input-text-focus-ringColor: #0f766e; /* Focus ring color */
   --input-text-focus-ringOffset: 1px; /* Focus ring offset */
   --knob-size-sm: 80px; /* Small knob size */
   --knob-size-md: 120px; /* Medium knob size */
@@ -1280,71 +1280,71 @@
   --knob-strokeWidth-md: 8px; /* Medium stroke width */
   --knob-strokeWidth-lg: 10px; /* Large stroke width */
   --knob-track-color: #e5e5e5; /* Background track color */
-  --knob-fill-color-default: #1f2544; /* Default fill color */
+  --knob-fill-color-default: #0f766e; /* Default fill color */
   --knob-fill-color-disabled: #d4d4d4; /* Disabled fill color */
   --knob-valueText-fontSize-sm: 16px; /* Small value font size */
   --knob-valueText-fontSize-md: 20px; /* Medium value font size */
   --knob-valueText-fontSize-lg: 28px; /* Large value font size */
   --knob-valueText-fontWeight: 600; /* Value font weight */
-  --knob-valueText-color-default: #1f2544; /* Default value color */
-  --knob-valueText-color-disabled: #5e6481; /* Disabled value color */
+  --knob-valueText-color-default: #253a43; /* Default value color */
+  --knob-valueText-color-disabled: #5f7178; /* Disabled value color */
   --knob-focus-ringWidth: 2px; /* Focus ring width */
-  --knob-focus-ringColor: #006cde; /* Focus ring color */
+  --knob-focus-ringColor: #0f766e; /* Focus ring color */
   --knob-focus-ringOffset: 2px; /* Focus ring offset */
   --knob-transition-duration: 100ms; /* Value change transition */
   --listbox-padding: 6px; /* Container padding */
   --listbox-radius: 5px; /* Container border radius */
   --listbox-border-width: 1px;
   --listbox-border-color-default: #d4d4d4; /* Default border color */
-  --listbox-border-color-focus: #1f2544; /* Focus border color */
+  --listbox-border-color-focus: #0f766e; /* Focus border color */
   --listbox-border-color-disabled: #e5e5e5; /* Disabled border color */
-  --listbox-background-default: #ffffff; /* Default background */
+  --listbox-background-default: #faf8f5; /* Default background */
   --listbox-background-disabled: #f5f5f5; /* Disabled background */
   --listbox-maxHeight: 280px; /* Max height before scrolling */
   --listbox-filter-height: 36px;
   --listbox-filter-padding-x: 10px;
-  --listbox-filter-background: #ffffff;
+  --listbox-filter-background: #faf8f5;
   --listbox-filter-border: #e5e5e5;
   --listbox-filter-radius: 5px;
-  --listbox-filter-text: #1f2544;
-  --listbox-filter-placeholder: #5e6481;
+  --listbox-filter-text: #253a43;
+  --listbox-filter-placeholder: #5f7178;
   --listbox-filter-marginBottom: 6px;
   --listbox-option-padding-x: 16px;
   --listbox-option-padding-y: 10px;
   --listbox-option-radius: 2px;
   --listbox-option-background-default: transparent;
   --listbox-option-background-hover: #f5f5f5;
-  --listbox-option-background-selected: #1f2544;
+  --listbox-option-background-selected: #0f766e;
   --listbox-option-background-focus: #f5f5f5;
-  --listbox-option-text-default: #1f2544;
+  --listbox-option-text-default: #253a43;
   --listbox-option-text-selected: #ffffff;
-  --listbox-option-text-disabled: #5e6481;
+  --listbox-option-text-disabled: #5f7178;
   --listbox-option-fontSize: 15px;
   --listbox-focus-ringWidth: 2px;
-  --listbox-focus-ringColor: #1f2544;
+  --listbox-focus-ringColor: #0f766e;
   --listbox-focus-ringOffset: 1px;
   --listbox-checkbox-size: 16px;
   --listbox-checkbox-marginRight: 10px;
-  --mega-menu-root-background: #ffffff; /* Menu bar background */
+  --mega-menu-root-background: #faf8f5; /* Menu bar background */
   --mega-menu-root-padding-x: 16px; /* Menu bar horizontal padding */
   --mega-menu-root-padding-y: 6px; /* Menu bar vertical padding */
   --mega-menu-root-gap: 4px; /* Gap between root items */
   --mega-menu-rootItem-padding-x: 16px; /* Root item horizontal padding */
   --mega-menu-rootItem-padding-y: 10px; /* Root item vertical padding */
-  --mega-menu-rootItem-text-color-default: #1f2544; /* Root item text color */
-  --mega-menu-rootItem-text-color-hover: #1f2544; /* Root item hover text color */
-  --mega-menu-rootItem-text-color-active: #1f2544; /* Active root item text color */
+  --mega-menu-rootItem-text-color-default: #253a43; /* Root item text color */
+  --mega-menu-rootItem-text-color-hover: #0f766e; /* Root item hover text color */
+  --mega-menu-rootItem-text-color-active: #0f766e; /* Active root item text color */
   --mega-menu-rootItem-text-fontSize: 14px; /* Root item font size */
   --mega-menu-rootItem-text-fontWeight-default: 500; /* Root item font weight */
   --mega-menu-rootItem-text-fontWeight-active: 600; /* Active root item font weight */
   --mega-menu-rootItem-background-default: transparent; /* Root item background */
-  --mega-menu-rootItem-background-hover: #f0f1f4; /* Root item hover background */
-  --mega-menu-rootItem-background-active: #f0f1f4; /* Active root item background */
+  --mega-menu-rootItem-background-hover: #eceeec; /* Root item hover background */
+  --mega-menu-rootItem-background-active: #eceeec; /* Active root item background */
   --mega-menu-rootItem-radius: 2px; /* Root item border radius */
   --mega-menu-rootItem-indicator-height: 2px; /* Active indicator height */
-  --mega-menu-rootItem-indicator-color: #1f2544; /* Active indicator color */
+  --mega-menu-rootItem-indicator-color: #0f766e; /* Active indicator color */
   --mega-menu-panel-background: #ffffff; /* Dropdown panel background */
-  --mega-menu-panel-border-color: #eeeeee; /* Panel border color */
+  --mega-menu-panel-border-color: #e6e2dd; /* Panel border color */
   --mega-menu-panel-border-width: 1px; /* Panel border width */
   --mega-menu-panel-radius: 5px; /* Panel border radius */
   --mega-menu-panel-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08); /* Panel shadow */
@@ -1354,7 +1354,7 @@
   --mega-menu-panel-zIndex: 1050; /* Panel z-index */
   --mega-menu-column-minWidth: 200px; /* Minimum column width */
   --mega-menu-column-gap: 6px; /* Gap between column items */
-  --mega-menu-category-text-color: #1f2544; /* Category heading color */
+  --mega-menu-category-text-color: #04141f; /* Category heading color */
   --mega-menu-category-text-fontSize: 12px; /* Category heading font size */
   --mega-menu-category-text-fontWeight: 600; /* Category heading font weight */
   --mega-menu-category-text-textTransform: uppercase; /* Category text transform */
@@ -1362,15 +1362,15 @@
   --mega-menu-category-margin-bottom: 10px; /* Space below category heading */
   --mega-menu-item-padding-x: 10px; /* Item horizontal padding */
   --mega-menu-item-padding-y: 6px; /* Item vertical padding */
-  --mega-menu-item-text-color-default: #1f2544; /* Item text color */
-  --mega-menu-item-text-color-hover: #1f2544; /* Item hover text color */
+  --mega-menu-item-text-color-default: #253a43; /* Item text color */
+  --mega-menu-item-text-color-hover: #0f766e; /* Item hover text color */
   --mega-menu-item-text-fontSize: 14px; /* Item font size */
-  --mega-menu-item-background-hover: #f0f1f4; /* Item hover background */
+  --mega-menu-item-background-hover: #eceeec; /* Item hover background */
   --mega-menu-item-radius: 2px; /* Item border radius */
   --mega-menu-item-icon-size: 16px; /* Item icon size */
-  --mega-menu-item-icon-color: #5e6481; /* Item icon color */
+  --mega-menu-item-icon-color: #5f7178; /* Item icon color */
   --mega-menu-item-icon-gap: 10px; /* Gap between icon and text */
-  --mega-menu-item-description-color: #5e6481; /* Item description color */
+  --mega-menu-item-description-color: #5f7178; /* Item description color */
   --mega-menu-item-description-fontSize: 12px; /* Item description font size */
   --menu-background: #ffffff; /* Menu popup background */
   --menu-border-width: 1px; /* Menu border width */
@@ -1389,38 +1389,38 @@
   --menu-item-background-hover: #f5f5f5; /* Item hover background */
   --menu-item-background-active: #e5e5e5; /* Item active/pressed background */
   --menu-item-background-disabled: transparent; /* Disabled item background */
-  --menu-item-text-default: #1f2544; /* Default item text color */
-  --menu-item-text-disabled: #5e6481; /* Disabled item text color */
+  --menu-item-text-default: #253a43; /* Default item text color */
+  --menu-item-text-disabled: #5f7178; /* Disabled item text color */
   --menu-item-icon-size: 18px; /* Item icon size */
-  --menu-item-icon-color-default: #5e6481; /* Default icon color */
+  --menu-item-icon-color-default: #5f7178; /* Default icon color */
   --menu-item-icon-color-disabled: #d4d4d4; /* Disabled icon color */
   --menu-item-fontSize: 14px; /* Item font size */
   --menu-separator-color: #e5e5e5; /* Separator line color */
   --menu-separator-margin: 6px; /* Separator vertical margin */
-  --menubar-background: #f5f5f5; /* Menubar background color */
+  --menubar-background: #ffffff; /* Menubar background color */
   --menubar-padding: 10px; /* Menubar container padding */
   --menubar-border-width: 1px; /* Border width */
-  --menubar-border-color: #eeeeee; /* Border color */
+  --menubar-border-color: #e6e2dd; /* Border color */
   --menubar-border-radius: 5px; /* Border radius */
   --menubar-item-padding: 6px 10px; /* Menu item padding */
   --menubar-item-gap: 4px; /* Gap between icon and label */
-  --menubar-item-color-default: #1f2544; /* Item text color */
-  --menubar-item-color-hover: #1f2544; /* Item text color on hover */
-  --menubar-item-color-active: #1f2544; /* Item text color when active */
-  --menubar-item-color-disabled: #5e6481; /* Item text color when disabled */
+  --menubar-item-color-default: #253a43; /* Item text color */
+  --menubar-item-color-hover: #253a43; /* Item text color on hover */
+  --menubar-item-color-active: #0f766e; /* Item text color when active */
+  --menubar-item-color-disabled: #5f7178; /* Item text color when disabled */
   --menubar-item-background-default: transparent; /* Item background */
-  --menubar-item-background-hover: #f0f1f4; /* Item background on hover */
-  --menubar-item-background-active: #fde8ea; /* Item background when active */
+  --menubar-item-background-hover: #eceeec; /* Item background on hover */
+  --menubar-item-background-active: #e2efec; /* Item background when active */
   --menubar-item-borderRadius: 5px; /* Item border radius */
   --menubar-icon-size: 16px; /* Icon size */
-  --menubar-icon-color-default: #5e6481; /* Icon color */
-  --menubar-icon-color-hover: #1f2544; /* Icon color on hover */
-  --menubar-submenu-background: #f5f5f5; /* Submenu background */
+  --menubar-icon-color-default: #5f7178; /* Icon color */
+  --menubar-icon-color-hover: #253a43; /* Icon color on hover */
+  --menubar-submenu-background: #ffffff; /* Submenu background */
   --menubar-submenu-minWidth: 200px; /* Submenu minimum width */
   --menubar-submenu-padding: 4px; /* Submenu container padding */
   --menubar-submenu-borderRadius: 5px; /* Submenu border radius */
   --menubar-submenu-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08); /* Submenu shadow */
-  --menubar-separator-color: #eeeeee; /* Separator color */
+  --menubar-separator-color: #e6e2dd; /* Separator color */
   --menubar-separator-margin: 4px; /* Separator vertical margin */
   --menubar-transition-duration: 150ms; /* Animation duration */
   --message-padding-x: 16px; /* Horizontal padding */
@@ -1432,42 +1432,42 @@
   --message-iconSize: 20px; /* Icon size */
   --message-closeButtonSize: 24px; /* Close button size */
   --message-borderWidth: 1px; /* Border width */
-  --message-background-success: #e6f4e9; /* Success message background */
-  --message-background-info: #e0eef9; /* Info message background */
-  --message-background-warn: #fef3e6; /* Warning message background */
-  --message-background-error: #fde8ea; /* Error message background */
-  --message-text-success: #1d6429; /* Success message text color */
-  --message-text-info: #0050a8; /* Info message text color */
-  --message-text-warn: #a8590e; /* Warning message text color */
-  --message-text-error: #c40000; /* Error message text color */
-  --message-icon-success: #2a8a3a; /* Success icon color */
-  --message-icon-info: #006cde; /* Info icon color */
-  --message-icon-warn: #d97706; /* Warning icon color */
-  --message-icon-error: #e00613; /* Error icon color */
-  --message-border-success: #2a8a3a; /* Success message border color */
-  --message-border-info: #006cde; /* Info message border color */
-  --message-border-warn: #d97706; /* Warning message border color */
-  --message-border-error: #e00613; /* Error message border color */
-  --message-closeButton-color: #5e6481; /* Close button icon color */
-  --message-closeButton-hoverColor: #1f2544; /* Close button icon hover color */
+  --message-background-success: #e4f2ec; /* Success message background */
+  --message-background-info: #e2efee; /* Info message background */
+  --message-background-warn: #f7eddf; /* Warning message background */
+  --message-background-error: #f7e6e4; /* Error message background */
+  --message-text-success: #145c3f; /* Success message text color */
+  --message-text-info: #115e59; /* Info message text color */
+  --message-text-warn: #8a5410; /* Warning message text color */
+  --message-text-error: #8f2620; /* Error message text color */
+  --message-icon-success: #1f7a55; /* Success icon color */
+  --message-icon-info: #0f766e; /* Info icon color */
+  --message-icon-warn: #b3701a; /* Warning icon color */
+  --message-icon-error: #b8342c; /* Error icon color */
+  --message-border-success: #1f7a55; /* Success message border color */
+  --message-border-info: #0f766e; /* Info message border color */
+  --message-border-warn: #b3701a; /* Warning message border color */
+  --message-border-error: #b8342c; /* Error message border color */
+  --message-closeButton-color: #5f7178; /* Close button icon color */
+  --message-closeButton-hoverColor: #253a43; /* Close button icon hover color */
   --meter-group-track-height: 8px; /* Height of the meter track */
   --meter-group-track-background: #e5e5e5; /* Background color of the meter track */
   --meter-group-track-radius: 9999px; /* Border radius of the meter track */
   --meter-group-meter-gap: 1px; /* Gap between meters in the group */
   --meter-group-meter-radius: 9999px; /* Border radius of individual meters */
-  --meter-group-label-color: #1f2544; /* Label text color */
+  --meter-group-label-color: #253a43; /* Label text color */
   --meter-group-label-fontSize: 14px; /* Label font size */
   --meter-group-label-fontWeight: 500; /* Label font weight */
   --meter-group-label-gap: 6px; /* Gap between label and meter */
-  --meter-group-valueText-color: #5e6481; /* Value text color */
+  --meter-group-valueText-color: #5f7178; /* Value text color */
   --meter-group-valueText-fontSize: 12px; /* Value font size */
   --meter-group-legend-gap: 16px; /* Gap between legend items */
   --meter-group-legend-marker-size: 8px; /* Size of the legend color marker */
   --meter-group-legend-marker-radius: 9999px; /* Border radius of the legend marker */
-  --meter-group-colors-primary: #1f2544; /* Primary meter color */
-  --meter-group-colors-success: #2a8a3a; /* Success meter color */
-  --meter-group-colors-warning: #d97706; /* Warning meter color */
-  --meter-group-colors-danger: #e00613; /* Danger meter color */
+  --meter-group-colors-primary: #0f766e; /* Primary meter color */
+  --meter-group-colors-success: #1f7a55; /* Success meter color */
+  --meter-group-colors-warning: #b3701a; /* Warning meter color */
+  --meter-group-colors-danger: #b8342c; /* Danger meter color */
   --multi-select-height-sm: 32px;
   --multi-select-height-md: 40px;
   --multi-select-height-lg: 48px;
@@ -1481,28 +1481,28 @@
   --multi-select-border-width: 1px;
   --multi-select-border-color-default: #d4d4d4;
   --multi-select-border-color-hover: #a3a3a3;
-  --multi-select-border-color-focus: #1f2544;
+  --multi-select-border-color-focus: #0f766e;
   --multi-select-border-color-disabled: #e5e5e5;
-  --multi-select-border-color-error: #e00613;
-  --multi-select-background-default: #ffffff;
+  --multi-select-border-color-error: #b8342c;
+  --multi-select-background-default: #faf8f5;
   --multi-select-background-disabled: #f5f5f5;
-  --multi-select-background-hover: #ffffff;
-  --multi-select-text-default: #1f2544;
-  --multi-select-text-placeholder: #5e6481;
-  --multi-select-text-disabled: #5e6481;
+  --multi-select-background-hover: #faf8f5;
+  --multi-select-text-default: #253a43;
+  --multi-select-text-placeholder: #5f7178;
+  --multi-select-text-disabled: #5f7178;
   --multi-select-icon-size: 16px;
   --multi-select-icon-color-default: #737373;
   --multi-select-icon-color-disabled: #d4d4d4;
   --multi-select-chip-gap: 4px;
   --multi-select-chip-padding-x: 6px;
   --multi-select-chip-padding-y: 2px;
-  --multi-select-chip-background: #f0f1f4;
+  --multi-select-chip-background: #eceeec;
   --multi-select-chip-radius: 2px;
   --multi-select-chip-fontSize: 13px;
   --multi-select-chip-remove-size: 14px;
-  --multi-select-chip-remove-color-default: #5e6481;
-  --multi-select-chip-remove-color-hover: #1f2544;
-  --multi-select-dropdown-background: #ffffff;
+  --multi-select-chip-remove-color-default: #5f7178;
+  --multi-select-chip-remove-color-hover: #253a43;
+  --multi-select-dropdown-background: #faf8f5;
   --multi-select-dropdown-border: #e5e5e5;
   --multi-select-dropdown-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
   --multi-select-dropdown-radius: 5px;
@@ -1512,94 +1512,94 @@
   --multi-select-option-gap: 10px;
   --multi-select-option-background-default: transparent;
   --multi-select-option-background-hover: #f5f5f5;
-  --multi-select-option-text-default: #1f2544;
+  --multi-select-option-text-default: #253a43;
   --multi-select-filter-padding: 10px;
   --multi-select-filter-borderColor: #e5e5e5;
   --multi-select-focus-ringWidth: 2px;
-  --multi-select-focus-ringColor: #1f2544;
+  --multi-select-focus-ringColor: #0f766e;
   --multi-select-focus-ringOffset: 1px;
-  --orderList-background: #f5f5f5; /* OrderList container background */
-  --orderList-border-color: #eeeeee; /* Container border color */
+  --orderList-background: #ffffff; /* OrderList container background */
+  --orderList-border-color: #e6e2dd; /* Container border color */
   --orderList-border-width: 1px; /* Container border width */
   --orderList-radius: 5px; /* Container border radius */
-  --orderList-header-background: #f0f1f4; /* Header background color */
+  --orderList-header-background: #eceeec; /* Header background color */
   --orderList-header-padding: 16px; /* Header padding */
-  --orderList-header-color: #1f2544; /* Header text color */
+  --orderList-header-color: #04141f; /* Header text color */
   --orderList-header-fontSize: 16px; /* Header font size */
   --orderList-header-fontWeight: 600; /* Header font weight */
-  --orderList-header-borderColor: #eeeeee; /* Header border color */
+  --orderList-header-borderColor: #e6e2dd; /* Header border color */
   --orderList-list-padding: 10px; /* List container padding */
   --orderList-list-gap: 4px; /* Gap between list items */
   --orderList-item-padding: 10px; /* Item padding */
   --orderList-item-background-default: transparent; /* Item default background */
-  --orderList-item-background-hover: #f0f1f4; /* Item hover background */
-  --orderList-item-background-selected: #fde8ea; /* Item selected background */
+  --orderList-item-background-hover: #eceeec; /* Item hover background */
+  --orderList-item-background-selected: #e2efec; /* Item selected background */
   --orderList-item-background-dragging: #ffffff; /* Item dragging background */
-  --orderList-item-color: #1f2544; /* Item text color */
+  --orderList-item-color: #253a43; /* Item text color */
   --orderList-item-radius: 2px; /* Item border radius */
   --orderList-item-borderColor-default: transparent; /* Item default border */
-  --orderList-item-borderColor-selected: #1f2544; /* Item selected border */
+  --orderList-item-borderColor-selected: #0f766e; /* Item selected border */
   --orderList-controls-gap: 4px; /* Gap between control buttons */
   --orderList-controls-padding: 16px; /* Controls area padding */
   --orderList-button-size: 32px; /* Button size */
-  --orderList-button-background-default: #f0f1f4; /* Button default background */
+  --orderList-button-background-default: #eceeec; /* Button default background */
   --orderList-button-background-hover: #e5e5e5; /* Button hover background */
   --orderList-button-background-disabled: #f5f5f5; /* Button disabled background */
-  --orderList-button-color-default: #1f2544; /* Button icon color */
-  --orderList-button-color-disabled: #5e6481; /* Button disabled icon color */
+  --orderList-button-color-default: #253a43; /* Button icon color */
+  --orderList-button-color-disabled: #5f7178; /* Button disabled icon color */
   --orderList-button-radius: 2px; /* Button border radius */
-  --orderList-dragHandle-color: #5e6481; /* Drag handle color */
+  --orderList-dragHandle-color: #5f7178; /* Drag handle color */
   --orderList-dragHandle-size: 16px; /* Drag handle icon size */
   --orderList-transition-duration: 150ms; /* Animation duration */
   --organizationChart-background: transparent; /* Chart container background */
   --organizationChart-padding: 26px; /* Chart container padding */
-  --organizationChart-node-background-default: #f5f5f5; /* Node default background */
+  --organizationChart-node-background-default: #ffffff; /* Node default background */
   --organizationChart-node-background-hover: #ffffff; /* Node hover background */
-  --organizationChart-node-background-selected: #fde8ea; /* Node selected background */
+  --organizationChart-node-background-selected: #e2efec; /* Node selected background */
   --organizationChart-node-border-width: 1px; /* Node border width */
-  --organizationChart-node-border-color-default: #eeeeee; /* Node default border color */
-  --organizationChart-node-border-color-hover: #d9dadf; /* Node hover border color */
-  --organizationChart-node-border-color-selected: #1f2544; /* Node selected border color */
+  --organizationChart-node-border-color-default: #e6e2dd; /* Node default border color */
+  --organizationChart-node-border-color-hover: #d5d8d4; /* Node hover border color */
+  --organizationChart-node-border-color-selected: #0f766e; /* Node selected border color */
   --organizationChart-node-radius: 5px; /* Node border radius */
   --organizationChart-node-padding: 16px; /* Node content padding */
   --organizationChart-node-shadow-default: 0 1px 2px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.08); /* Node default shadow */
   --organizationChart-node-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08); /* Node hover shadow */
   --organizationChart-node-minWidth: 160px; /* Node minimum width */
   --organizationChart-nodeContent-gap: 4px; /* Gap between node content elements */
-  --organizationChart-nodeContent-title-color: #1f2544; /* Node title color */
+  --organizationChart-nodeContent-title-color: #04141f; /* Node title color */
   --organizationChart-nodeContent-title-fontSize: 14px; /* Node title font size */
   --organizationChart-nodeContent-title-fontWeight: 600; /* Node title font weight */
-  --organizationChart-nodeContent-subtitle-color: #5e6481; /* Node subtitle color */
+  --organizationChart-nodeContent-subtitle-color: #5f7178; /* Node subtitle color */
   --organizationChart-nodeContent-subtitle-fontSize: 12px; /* Node subtitle font size */
   --organizationChart-nodeContent-subtitle-fontWeight: 400; /* Node subtitle font weight */
-  --organizationChart-connector-color: #d9dadf; /* Connector line color */
+  --organizationChart-connector-color: #d5d8d4; /* Connector line color */
   --organizationChart-connector-width: 1px; /* Connector line width */
   --organizationChart-connector-style: solid; /* Connector line style */
   --organizationChart-spacing-horizontal: 42px; /* Horizontal spacing between nodes */
   --organizationChart-spacing-vertical: 26px; /* Vertical spacing between levels */
   --organizationChart-toggleButton-size: 20px; /* Toggle button size */
-  --organizationChart-toggleButton-background: #f5f5f5; /* Toggle button background */
-  --organizationChart-toggleButton-borderColor: #eeeeee; /* Toggle button border color */
-  --organizationChart-toggleButton-color: #5e6481; /* Toggle button icon color */
+  --organizationChart-toggleButton-background: #ffffff; /* Toggle button background */
+  --organizationChart-toggleButton-borderColor: #e6e2dd; /* Toggle button border color */
+  --organizationChart-toggleButton-color: #5f7178; /* Toggle button icon color */
   --organizationChart-toggleButton-radius: 9999px; /* Toggle button border radius */
   --organizationChart-transition-duration: 200ms; /* Animation duration */
   --overlayPanel-padding-x: 26px; /* Horizontal padding */
   --overlayPanel-padding-y: 16px; /* Vertical padding */
-  --overlayPanel-background: #ffffff; /* Panel background color */
+  --overlayPanel-background: #faf8f5; /* Panel background color */
   --overlayPanel-radius: 5px; /* Panel border radius */
   --overlayPanel-shadow: 0 8px 16px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08); /* Panel elevation shadow */
-  --overlayPanel-border-color: #eeeeee; /* Panel border color */
+  --overlayPanel-border-color: #e6e2dd; /* Panel border color */
   --overlayPanel-border-width: 1px; /* Panel border width */
   --overlayPanel-closeButton-size: 28px; /* Close button size */
   --overlayPanel-closeButton-iconSize: 14px; /* Close icon size */
-  --overlayPanel-closeButton-color-default: #5e6481; /* Close button icon color */
-  --overlayPanel-closeButton-color-hover: #1f2544; /* Close button hover color */
-  --overlayPanel-closeButton-background-hover: #f0f1f4; /* Close button hover background */
+  --overlayPanel-closeButton-color-default: #5f7178; /* Close button icon color */
+  --overlayPanel-closeButton-color-hover: #253a43; /* Close button hover color */
+  --overlayPanel-closeButton-background-hover: #eceeec; /* Close button hover background */
   --overlayPanel-closeButton-radius: 2px; /* Close button border radius */
   --overlayPanel-offset: 10px; /* Distance from trigger element */
   --overlayPanel-maxWidth: 400px; /* Maximum width */
   --overlayPanel-zIndex: 1100; /* Z-index for stacking */
-  --paginator-background: #ffffff; /* Paginator container background */
+  --paginator-background: #faf8f5; /* Paginator container background */
   --paginator-padding: 10px; /* Paginator container padding */
   --paginator-gap: 6px; /* Gap between paginator elements */
   --paginator-border-width: 1px; /* Border width */
@@ -1608,10 +1608,10 @@
   --paginator-page-size: 36px; /* Page button size */
   --paginator-page-background-default: transparent; /* Page button default background */
   --paginator-page-background-hover: #f5f5f5; /* Page button hover background */
-  --paginator-page-background-active: #1f2544; /* Active page button background */
-  --paginator-page-text-default: #1f2544; /* Page button default text color */
-  --paginator-page-text-hover: #1f2544; /* Page button hover text color */
-  --paginator-page-text-active: #ffffff; /* Active page button text color */
+  --paginator-page-background-active: #0f766e; /* Active page button background */
+  --paginator-page-text-default: #253a43; /* Page button default text color */
+  --paginator-page-text-hover: #253a43; /* Page button hover text color */
+  --paginator-page-text-active: #faf8f5; /* Active page button text color */
   --paginator-page-text-disabled: #a3a3a3; /* Disabled page button text color */
   --paginator-page-fontSize: 14px; /* Page button font size */
   --paginator-page-fontWeight: 500; /* Page button font weight */
@@ -1620,67 +1620,67 @@
   --paginator-nav-background-default: transparent; /* Nav button default background */
   --paginator-nav-background-hover: #f5f5f5; /* Nav button hover background */
   --paginator-nav-background-disabled: transparent; /* Nav button disabled background */
-  --paginator-nav-icon-color-default: #5e6481; /* Nav icon default color */
-  --paginator-nav-icon-color-hover: #1f2544; /* Nav icon hover color */
+  --paginator-nav-icon-color-default: #5f7178; /* Nav icon default color */
+  --paginator-nav-icon-color-hover: #253a43; /* Nav icon hover color */
   --paginator-nav-icon-color-disabled: #a3a3a3; /* Nav icon disabled color */
   --paginator-nav-icon-size: 18px; /* Nav icon size */
   --paginator-nav-radius: 5px; /* Nav button border radius */
-  --paginator-info-color: #5e6481; /* Info text color */
+  --paginator-info-color: #5f7178; /* Info text color */
   --paginator-info-fontSize: 14px; /* Info text font size */
-  --paginator-focus-ringColor: #006cde; /* Focus ring color */
+  --paginator-focus-ringColor: #0f766e; /* Focus ring color */
   --paginator-focus-ringWidth: 2px; /* Focus ring width */
   --paginator-focus-ringOffset: 2px; /* Focus ring offset */
   --paginator-transition-duration: 150ms; /* Transition duration */
-  --panel-background: #f5f5f5; /* Panel background color */
-  --panel-border-color: #eeeeee; /* Panel border color */
+  --panel-background: #ffffff; /* Panel background color */
+  --panel-border-color: #e6e2dd; /* Panel border color */
   --panel-border-width: 1px; /* Panel border width */
   --panel-radius: 5px; /* Panel border radius */
   --panel-header-padding: 16px; /* Header section padding */
-  --panel-header-background-default: #f0f1f4; /* Header background */
-  --panel-header-background-hover: #f0f1f4; /* Header hover background when toggleable */
-  --panel-header-color: #1f2544; /* Header text color */
-  --panel-header-borderColor: #eeeeee; /* Header bottom border color */
+  --panel-header-background-default: #eceeec; /* Header background */
+  --panel-header-background-hover: #eceeec; /* Header hover background when toggleable */
+  --panel-header-color: #04141f; /* Header text color */
+  --panel-header-borderColor: #e6e2dd; /* Header bottom border color */
   --panel-header-fontSize: 16px; /* Header font size */
   --panel-header-fontWeight: 600; /* Header font weight */
   --panel-content-padding: 26px; /* Content area padding */
-  --panel-content-background: #ffffff; /* Content background */
-  --panel-content-color: #1f2544; /* Content text color */
+  --panel-content-background: #faf8f5; /* Content background */
+  --panel-content-color: #253a43; /* Content text color */
   --panel-icon-size: 16px; /* Toggle icon size */
-  --panel-icon-color-default: #5e6481; /* Icon color */
-  --panel-icon-color-hover: #1f2544; /* Icon color on hover */
+  --panel-icon-color-default: #5f7178; /* Icon color */
+  --panel-icon-color-hover: #253a43; /* Icon color on hover */
   --panel-icon-rotation-collapsed: -90deg; /* Icon rotation when collapsed */
   --panel-icon-rotation-expanded: 0deg; /* Icon rotation when expanded */
   --panel-transition-duration: 200ms; /* Animation duration */
-  --panelmenu-background: #f5f5f5; /* PanelMenu background */
+  --panelmenu-background: #ffffff; /* PanelMenu background */
   --panelmenu-border-width: 1px; /* Border width */
-  --panelmenu-border-color: #eeeeee; /* Border color */
+  --panelmenu-border-color: #e6e2dd; /* Border color */
   --panelmenu-border-radius: 5px; /* Border radius */
   --panelmenu-gap: 0px; /* Gap between panels */
   --panelmenu-header-padding: 16px; /* Panel header padding */
-  --panelmenu-header-background-default: #f5f5f5; /* Header background */
-  --panelmenu-header-background-hover: #f0f1f4; /* Header background on hover */
-  --panelmenu-header-background-active: #f0f1f4; /* Header background when expanded */
-  --panelmenu-header-color-default: #1f2544; /* Header text color */
-  --panelmenu-header-color-hover: #1f2544; /* Header text color on hover */
-  --panelmenu-header-color-disabled: #5e6481; /* Header text color when disabled */
+  --panelmenu-header-background-default: #ffffff; /* Header background */
+  --panelmenu-header-background-hover: #eceeec; /* Header background on hover */
+  --panelmenu-header-background-active: #eceeec; /* Header background when expanded */
+  --panelmenu-header-color-default: #253a43; /* Header text color */
+  --panelmenu-header-color-hover: #253a43; /* Header text color on hover */
+  --panelmenu-header-color-disabled: #5f7178; /* Header text color when disabled */
   --panelmenu-content-padding: 0; /* Content area padding */
-  --panelmenu-content-background: #ffffff; /* Content background */
+  --panelmenu-content-background: #faf8f5; /* Content background */
   --panelmenu-item-padding: 6px 16px; /* Menu item padding */
   --panelmenu-item-gap: 4px; /* Gap between icon and label */
-  --panelmenu-item-color-default: #1f2544; /* Item text color */
-  --panelmenu-item-color-hover: #1f2544; /* Item text color on hover */
-  --panelmenu-item-color-active: #1f2544; /* Active item text color */
-  --panelmenu-item-color-disabled: #5e6481; /* Disabled item text color */
+  --panelmenu-item-color-default: #253a43; /* Item text color */
+  --panelmenu-item-color-hover: #0f766e; /* Item text color on hover */
+  --panelmenu-item-color-active: #0f766e; /* Active item text color */
+  --panelmenu-item-color-disabled: #5f7178; /* Disabled item text color */
   --panelmenu-item-background-default: transparent; /* Item background */
-  --panelmenu-item-background-hover: #f0f1f4; /* Item background on hover */
-  --panelmenu-item-background-active: #fde8ea; /* Active item background */
+  --panelmenu-item-background-hover: #eceeec; /* Item background on hover */
+  --panelmenu-item-background-active: #e2efec; /* Active item background */
   --panelmenu-item-indent: 16px; /* Indent for nested items */
   --panelmenu-icon-size: 16px; /* Icon size */
-  --panelmenu-icon-color-default: #5e6481; /* Icon color */
-  --panelmenu-icon-color-hover: #1f2544; /* Icon color on hover */
+  --panelmenu-icon-color-default: #5f7178; /* Icon color */
+  --panelmenu-icon-color-hover: #253a43; /* Icon color on hover */
   --panelmenu-icon-rotation-collapsed: 0deg; /* Chevron rotation when collapsed */
   --panelmenu-icon-rotation-expanded: 90deg; /* Chevron rotation when expanded */
-  --panelmenu-separator-color: #eeeeee; /* Separator color */
+  --panelmenu-separator-color: #e6e2dd; /* Separator color */
   --panelmenu-separator-margin: 4px; /* Separator margin */
   --panelmenu-transition-duration: 200ms; /* Animation duration */
   --picklist-padding: 16px; /* Container padding */
@@ -1689,7 +1689,7 @@
   --picklist-border-width: 1px;
   --picklist-border-color-default: #d4d4d4; /* Default border color */
   --picklist-border-color-disabled: #e5e5e5; /* Disabled border color */
-  --picklist-background-default: #ffffff; /* Default background */
+  --picklist-background-default: #faf8f5; /* Default background */
   --picklist-background-disabled: #f5f5f5; /* Disabled background */
   --picklist-list-minHeight: 200px; /* Minimum height of list panels */
   --picklist-list-maxHeight: 320px; /* Maximum height before scrolling */
@@ -1697,19 +1697,19 @@
   --picklist-header-padding-x: 16px;
   --picklist-header-padding-y: 10px;
   --picklist-header-background: #fafafa;
-  --picklist-header-text: #1f2544;
+  --picklist-header-text: #253a43;
   --picklist-header-borderColor: #e5e5e5;
   --picklist-item-padding-x: 16px;
   --picklist-item-padding-y: 10px;
   --picklist-item-radius: 2px;
   --picklist-item-background-default: transparent;
   --picklist-item-background-hover: #f5f5f5;
-  --picklist-item-background-selected: #1f2544;
-  --picklist-item-text-default: #1f2544;
+  --picklist-item-background-selected: #0f766e;
+  --picklist-item-text-default: #253a43;
   --picklist-item-text-selected: #ffffff;
   --picklist-controls-gap: 6px;
   --picklist-controls-button-size: 32px;
-  --picklist-controls-button-background-default: #ffffff;
+  --picklist-controls-button-background-default: #faf8f5;
   --picklist-controls-button-background-hover: #f5f5f5;
   --picklist-controls-button-background-disabled: #fafafa;
   --picklist-controls-button-border: #d4d4d4;
@@ -1717,14 +1717,14 @@
   --picklist-controls-button-icon-disabled: #d4d4d4;
   --picklist-controls-button-radius: 5px;
   --picklist-focus-ringWidth: 2px;
-  --picklist-focus-ringColor: #1f2544;
+  --picklist-focus-ringColor: #0f766e;
   --picklist-focus-ringOffset: 1px;
   --popover-padding-x: 16px; /* Horizontal padding */
   --popover-padding-y: 10px; /* Vertical padding */
-  --popover-background: #ffffff; /* Popover background color */
+  --popover-background: #faf8f5; /* Popover background color */
   --popover-radius: 5px; /* Popover border radius */
   --popover-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08); /* Popover elevation shadow */
-  --popover-border-color: #eeeeee; /* Popover border color */
+  --popover-border-color: #e6e2dd; /* Popover border color */
   --popover-border-width: 1px; /* Popover border width */
   --popover-arrow-size: 8px; /* Arrow/pointer size */
   --popover-offset: 10px; /* Distance from trigger element */
@@ -1737,53 +1737,53 @@
   --progress-bar-label-color: #ffffff; /* Label text on fill */
   --progress-spinner-size: 48px; /* Default spinner size (width and height) */
   --progress-spinner-strokeWidth: 4px; /* Stroke width of the spinner circle */
-  --progress-spinner-color: #1f2544; /* Spinner stroke color */
+  --progress-spinner-color: #0f766e; /* Spinner stroke color */
   --progress-spinner-fill: transparent; /* Spinner fill color (typically transparent) */
   --progress-spinner-animation-duration: 2s; /* Duration of the spinner animation */
   --progress-spinner-track-color: #e5e5e5; /* Background track circle color */
-  --promotionFooter-background: #ffffff; /* Slim bar background (matches page; separated by the top rule) */
-  --promotionFooter-border: #eeeeee; /* Divider above the slim bar */
-  --promotionFooter-heading: #1f2544; /* Brand text */
-  --promotionFooter-textMuted: #5e6481; /* Copyright text */
-  --promotionFooter-focusRing: #006cde; /* Focus outline colour */
+  --promotionFooter-background: #faf8f5; /* Slim bar background (matches page; separated by the top rule) */
+  --promotionFooter-border: #e6e2dd; /* Divider above the slim bar */
+  --promotionFooter-heading: #04141f; /* Brand text */
+  --promotionFooter-textMuted: #5f7178; /* Copyright text */
+  --promotionFooter-focusRing: #0f766e; /* Focus outline colour */
   --promotionFooter-maxWidth: 1280px; /* Inner content max width */
   --promotionFooter-paddingX: 26px; /* Horizontal inset */
   --promotionFooter-gap: 16px; /* Gap between slim-bar items */
   --promotionFooter-height: 56px; /* Slim bar min-height */
-  --promotionFooter-link-text: #5e6481; /* Slim-bar link colour */
-  --promotionFooter-link-hover: #006cde; /* Slim-bar link hover colour */
-  --promotionFooter-band-background: #1f2544; /* Conversion band background — strong surface for emphasis */
-  --promotionFooter-band-title: #ffffff; /* Conversion band headline (on inverse surface) */
+  --promotionFooter-link-text: #5f7178; /* Slim-bar link colour */
+  --promotionFooter-link-hover: #0f766e; /* Slim-bar link hover colour */
+  --promotionFooter-band-background: #041a26; /* Conversion band background — strong surface for emphasis */
+  --promotionFooter-band-title: #faf8f5; /* Conversion band headline (on inverse surface) */
   --promotionFooter-band-height: 96px; /* Conversion band min-height */
   --promotionFooter-band-gap: 26px; /* Gap between headline and CTA */
-  --promotionFooter-cta-background: #ffffff; /* Band CTA background — light button on the inverse band */
-  --promotionFooter-cta-hover: #f0f1f4; /* Band CTA hover */
-  --promotionFooter-cta-text: #1f2544; /* Band CTA label */
+  --promotionFooter-cta-background: #faf8f5; /* Band CTA background — light button on the inverse band */
+  --promotionFooter-cta-hover: #eceeec; /* Band CTA hover */
+  --promotionFooter-cta-text: #0f766e; /* Band CTA label */
   --promotionFooter-cta-radius: 9999px; /* Band CTA radius (pill) */
   --promotionFooter-cta-paddingX: 26px; /* Band CTA horizontal padding */
   --promotionFooter-cta-paddingY: 10px; /* Band CTA vertical padding */
-  --promotionHeader-background: #ffffff; /* Header background */
-  --promotionHeader-text: #1f2544; /* Header text */
-  --promotionHeader-border: #eeeeee; /* Hairline under the header */
+  --promotionHeader-background: #faf8f5; /* Header background */
+  --promotionHeader-text: #253a43; /* Header text */
+  --promotionHeader-border: #e6e2dd; /* Hairline under the header */
   --promotionHeader-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08); /* Header elevation */
   --promotionHeader-height: 64px; /* Main bar min-height */
   --promotionHeader-maxWidth: 1280px; /* Inner content max width */
   --promotionHeader-paddingX: 26px; /* Horizontal inset */
   --promotionHeader-gap: 16px; /* Gap between header items */
-  --promotionHeader-focusRing: #006cde; /* Focus outline colour */
-  --promotionHeader-link-text: #1f2544; /* Anchor link colour */
-  --promotionHeader-link-hover: #006cde; /* Anchor link hover colour */
+  --promotionHeader-focusRing: #0f766e; /* Focus outline colour */
+  --promotionHeader-link-text: #253a43; /* Anchor link colour */
+  --promotionHeader-link-hover: #0f766e; /* Anchor link hover colour */
   --promotionHeader-link-radius: 2px; /* Link radius */
   --promotionHeader-link-paddingX: 10px; /* Link horizontal padding */
   --promotionHeader-link-paddingY: 4px; /* Link vertical padding */
-  --promotionHeader-cta-background: #1f2544; /* CTA background */
-  --promotionHeader-cta-hover: #3d4467; /* CTA hover background */
-  --promotionHeader-cta-text: #ffffff; /* CTA label colour */
+  --promotionHeader-cta-background: #0f766e; /* CTA background */
+  --promotionHeader-cta-hover: #115e59; /* CTA hover background */
+  --promotionHeader-cta-text: #faf8f5; /* CTA label colour */
   --promotionHeader-cta-radius: 9999px; /* CTA radius (pill) */
   --promotionHeader-cta-paddingX: 26px; /* CTA horizontal padding */
   --promotionHeader-cta-paddingY: 10px; /* CTA vertical padding */
-  --promotionHeader-announcement-background: #1f2544; /* Announcement bar background */
-  --promotionHeader-announcement-text: #ffffff; /* Announcement bar text */
+  --promotionHeader-announcement-background: #041a26; /* Announcement bar background */
+  --promotionHeader-announcement-text: #faf8f5; /* Announcement bar text */
   --promotionHeader-announcement-height: 40px; /* Announcement bar min-height */
   --radio-size-sm: 16px; /* Small radio */
   --radio-size-md: 20px; /* Medium radio (default) */
@@ -1792,24 +1792,24 @@
   --radio-dotSize-md: 8px;
   --radio-dotSize-lg: 10px;
   --radio-border-width: 2px;
-  --radio-border-color-default: #d9dadf; /* Default unchecked border */
-  --radio-border-color-hover: #1f2544;
-  --radio-border-color-checked: #1f2544; /* Accent color when checked */
-  --radio-border-color-focus: #006cde;
-  --radio-border-color-disabled: #eeeeee;
-  --radio-border-color-error: #e00613;
-  --radio-border-color-checkedHover: #3d4467; /* Checked + hover — keeps filled look so the indicator stays visible (WCAG 1.4.11) */
+  --radio-border-color-default: #d5d8d4; /* Default unchecked border */
+  --radio-border-color-hover: #04141f;
+  --radio-border-color-checked: #0f766e; /* Accent color when checked */
+  --radio-border-color-focus: #0f766e;
+  --radio-border-color-disabled: #e6e2dd;
+  --radio-border-color-error: #b8342c;
+  --radio-border-color-checkedHover: #115e59; /* Checked + hover — keeps filled look so the indicator stays visible (WCAG 1.4.11) */
   --radio-background-default: transparent; /* Transparent to inherit page background */
-  --radio-background-checked: #1f2544; /* Brand accent when checked */
-  --radio-background-disabled: #f0f1f4;
-  --radio-background-hover: #f0f1f4;
-  --radio-background-checkedHover: #3d4467; /* Checked + hover — keeps filled bg so the indicator inside remains legible */
+  --radio-background-checked: #0f766e; /* Brand accent when checked */
+  --radio-background-disabled: #eceeec;
+  --radio-background-hover: #eceeec;
+  --radio-background-checkedHover: #115e59; /* Checked + hover — keeps filled bg so the indicator inside remains legible */
   --radio-dot-color: #ffffff;
   --radio-label-gap: 10px;
-  --radio-label-color-default: #1f2544;
-  --radio-label-color-disabled: #5e6481;
+  --radio-label-color-default: #253a43;
+  --radio-label-color-disabled: #5f7178;
   --radio-focus-ringWidth: 2px;
-  --radio-focus-ringColor: #006cde;
+  --radio-focus-ringColor: #0f766e;
   --radio-focus-ringOffset: 2px;
   --rating-star-size: 24px; /* Size of each star icon */
   --rating-star-gap: 4px; /* Gap between stars */
@@ -1822,42 +1822,42 @@
   --rating-cancel-color-default: #a3a3a3; /* Cancel button default color */
   --rating-cancel-color-hover: #ef4444; /* Cancel button hover color */
   --rating-focus-ringWidth: 2px;
-  --rating-focus-ringColor: #1f2544;
+  --rating-focus-ringColor: #0f766e;
   --rating-focus-ringOffset: 2px;
-  --relationMatrix-table-background: #ffffff; /* Matrix outer table background */
-  --relationMatrix-table-borderColor: #eeeeee; /* Matrix outer border */
+  --relationMatrix-table-background: #faf8f5; /* Matrix outer table background */
+  --relationMatrix-table-borderColor: #e6e2dd; /* Matrix outer border */
   --relationMatrix-table-borderRadius: 5px; /* Matrix outer corner radius */
-  --relationMatrix-header-background: #f0f1f4; /* Column-header row background */
-  --relationMatrix-header-color: #5e6481; /* Column-header text colour */
+  --relationMatrix-header-background: #eceeec; /* Column-header row background */
+  --relationMatrix-header-color: #5f7178; /* Column-header text colour */
   --relationMatrix-header-fontWeight: 600; /* Column-header weight */
   --relationMatrix-header-letterSpacing: 0.04em; /* Column-header tracking */
   --relationMatrix-header-textTransform: uppercase; /* Column-header case */
   --relationMatrix-header-padding-x: 10px; /* Column-header horizontal padding */
   --relationMatrix-header-padding-y: 6px; /* Column-header vertical padding */
-  --relationMatrix-header-borderColor: #d9dadf; /* Border under the column-header row */
-  --relationMatrix-rowHeader-background: #f0f1f4; /* Row-header column background */
-  --relationMatrix-rowHeader-color: #1f2544; /* Row-header text colour */
+  --relationMatrix-header-borderColor: #d5d8d4; /* Border under the column-header row */
+  --relationMatrix-rowHeader-background: #eceeec; /* Row-header column background */
+  --relationMatrix-rowHeader-color: #253a43; /* Row-header text colour */
   --relationMatrix-rowHeader-fontWeight: 500; /* Row-header weight */
   --relationMatrix-rowHeader-padding-x: 10px; /* Row-header horizontal padding */
   --relationMatrix-rowHeader-padding-y: 10px; /* Row-header vertical padding */
   --relationMatrix-cell-padding-x: 10px; /* Cell horizontal padding */
   --relationMatrix-cell-padding-y: 10px; /* Cell vertical padding */
-  --relationMatrix-cell-borderColor: #eeeeee; /* Inner grid lines between cells */
-  --relationMatrix-cell-background-default: #ffffff; /* Cell background when no legend value is set (or value not found) */
-  --relationMatrix-cell-background-neutral: #f0f1f4; /* Cell background — neutral tone */
-  --relationMatrix-cell-background-success: #e6f4e9; /* Cell background — success tone */
-  --relationMatrix-cell-background-warning: #fef3e6; /* Cell background — warning tone */
-  --relationMatrix-cell-background-danger: #fde8ea; /* Cell background — danger tone */
-  --relationMatrix-cell-background-info: #e0eef9; /* Cell background — info tone */
-  --relationMatrix-cell-glyph-default: #8e93a8; /* Glyph/text colour — empty cell */
-  --relationMatrix-cell-glyph-neutral: #5e6481; /* Glyph/text colour — neutral tone */
-  --relationMatrix-cell-glyph-success: #1d6429; /* Glyph/text colour — success tone */
-  --relationMatrix-cell-glyph-warning: #a8590e; /* Glyph/text colour — warning tone */
-  --relationMatrix-cell-glyph-danger: #c40000; /* Glyph/text colour — danger tone */
-  --relationMatrix-cell-glyph-info: #0050a8; /* Glyph/text colour — info tone */
-  --relationMatrix-cell-hoverBackground: #f0f1f4; /* Cell hover background — only when interactive */
-  --relationMatrix-cell-focusOutline: #006cde; /* Cell focus outline colour — only when interactive */
-  --relationMatrix-legend-color: #5e6481; /* Legend label colour */
+  --relationMatrix-cell-borderColor: #e6e2dd; /* Inner grid lines between cells */
+  --relationMatrix-cell-background-default: #faf8f5; /* Cell background when no legend value is set (or value not found) */
+  --relationMatrix-cell-background-neutral: #eceeec; /* Cell background — neutral tone */
+  --relationMatrix-cell-background-success: #e4f2ec; /* Cell background — success tone */
+  --relationMatrix-cell-background-warning: #f7eddf; /* Cell background — warning tone */
+  --relationMatrix-cell-background-danger: #f7e6e4; /* Cell background — danger tone */
+  --relationMatrix-cell-background-info: #e2efee; /* Cell background — info tone */
+  --relationMatrix-cell-glyph-default: #7d8f95; /* Glyph/text colour — empty cell */
+  --relationMatrix-cell-glyph-neutral: #5f7178; /* Glyph/text colour — neutral tone */
+  --relationMatrix-cell-glyph-success: #145c3f; /* Glyph/text colour — success tone */
+  --relationMatrix-cell-glyph-warning: #8a5410; /* Glyph/text colour — warning tone */
+  --relationMatrix-cell-glyph-danger: #8f2620; /* Glyph/text colour — danger tone */
+  --relationMatrix-cell-glyph-info: #115e59; /* Glyph/text colour — info tone */
+  --relationMatrix-cell-hoverBackground: #eceeec; /* Cell hover background — only when interactive */
+  --relationMatrix-cell-focusOutline: #0f766e; /* Cell focus outline colour — only when interactive */
+  --relationMatrix-legend-color: #5f7178; /* Legend label colour */
   --relationMatrix-legend-fontSize: 12px; /* Legend label size */
   --relationMatrix-legend-gap: 16px; /* Gap between legend items */
   --relationMatrix-legend-swatchSize: 14px; /* Legend tone-swatch box size */
@@ -1872,12 +1872,12 @@
   --relationMatrix-size-lg-cellMinHeight: 52px; /* Cell minimum row height — large */
   --relationMatrix-size-lg-glyphSize: 20px; /* Cell glyph font-size — large */
   --relationMatrix-size-lg-fontSize: 14px; /* Cell text font-size — large */
-  --row-background-default: #ffffff; /* Default row background */
-  --row-background-hover: #f0f1f4; /* Row background on hover */
-  --row-background-selected: #f0f1f4; /* Selected row background */
-  --row-background-striped: #f5f5f5; /* Striped row background (alternate) */
-  --row-text-default: #1f2544; /* Row text color */
-  --row-border-color: #eeeeee; /* Row border color */
+  --row-background-default: #faf8f5; /* Default row background */
+  --row-background-hover: #eceeec; /* Row background on hover */
+  --row-background-selected: #e2efec; /* Selected row background */
+  --row-background-striped: #ffffff; /* Striped row background (alternate) */
+  --row-text-default: #253a43; /* Row text color */
+  --row-border-color: #e6e2dd; /* Row border color */
   --row-border-width: 1px; /* Row border width */
   --row-padding-x: 16px; /* Horizontal cell padding */
   --row-padding-y: 10px; /* Vertical cell padding */
@@ -1885,7 +1885,7 @@
   --scroll-panel-background: transparent; /* Scroll panel container background */
   --scroll-panel-scrollbar-size: 6px; /* Scrollbar track width/height */
   --scroll-panel-scrollbar-padding: 2px; /* Padding around scrollbar */
-  --scroll-panel-scrollbar-track-background: #f0f1f4; /* Scrollbar track background */
+  --scroll-panel-scrollbar-track-background: #eceeec; /* Scrollbar track background */
   --scroll-panel-scrollbar-track-radius: 9999px; /* Scrollbar track border radius */
   --scroll-panel-scrollbar-thumb-background-default: #737373; /* Scrollbar thumb — #737373, ~4.8:1 vs white canvas (WCAG 1.4.11 ≥3:1) */
   --scroll-panel-scrollbar-thumb-background-hover: #525252; /* Scrollbar thumb hover — darker for affordance */
@@ -1894,17 +1894,17 @@
   --scroll-panel-scrollbar-thumb-minSize: 24px; /* Minimum scrollbar thumb size */
   --scroll-panel-transition-duration: 150ms; /* Scrollbar visibility transition */
   --scroll-top-size: 40px; /* Size of the scroll top button */
-  --scroll-top-background-default: #1f2544; /* Default background color */
-  --scroll-top-background-hover: #3d4467; /* Hover background color */
-  --scroll-top-background-active: #0f1422; /* Active background color */
-  --scroll-top-icon-color: #ffffff; /* Icon color */
+  --scroll-top-background-default: #0f766e; /* Default background color */
+  --scroll-top-background-hover: #115e59; /* Hover background color */
+  --scroll-top-background-active: #134e4a; /* Active background color */
+  --scroll-top-icon-color: #faf8f5; /* Icon color */
   --scroll-top-icon-size: 20px; /* Icon size */
   --scroll-top-radius: 9999px; /* Border radius (circular by default) */
   --scroll-top-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08); /* Box shadow for elevation */
   --scroll-top-position-bottom: 26px; /* Distance from bottom of viewport */
   --scroll-top-position-right: 26px; /* Distance from right of viewport */
   --scroll-top-transition-duration: 200ms; /* Transition duration for visibility */
-  --scroll-top-focus-ringColor: #006cde; /* Focus ring color */
+  --scroll-top-focus-ringColor: #0f766e; /* Focus ring color */
   --scroll-top-focus-ringWidth: 2px; /* Focus ring width */
   --scroll-top-focus-ringOffset: 2px; /* Focus ring offset */
   --select-height-sm: 32px;
@@ -1917,21 +1917,21 @@
   --select-fontSize-lg: 16px;
   --select-radius: 5px;
   --select-border-width: 1px;
-  --select-border-color-default: #d9dadf;
-  --select-border-color-hover: #1f2544;
-  --select-border-color-focus: #1f2544;
-  --select-border-color-disabled: #eeeeee;
-  --select-border-color-error: #c40000;
-  --select-background-default: #ffffff;
+  --select-border-color-default: #d5d8d4;
+  --select-border-color-hover: #04141f;
+  --select-border-color-focus: #0f766e;
+  --select-border-color-disabled: #e6e2dd;
+  --select-border-color-error: #8f2620;
+  --select-background-default: #faf8f5;
   --select-background-disabled: #f5f5f5;
-  --select-background-hover: #ffffff;
-  --select-text-default: #1f2544;
-  --select-text-placeholder: #5e6481;
-  --select-text-disabled: #5e6481;
+  --select-background-hover: #faf8f5;
+  --select-text-default: #253a43;
+  --select-text-placeholder: #5f7178;
+  --select-text-disabled: #5f7178;
   --select-icon-size: 16px;
   --select-icon-color-default: #737373;
   --select-icon-color-disabled: #d4d4d4;
-  --select-dropdown-background: #ffffff;
+  --select-dropdown-background: #faf8f5;
   --select-dropdown-border: #e5e5e5;
   --select-dropdown-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
   --select-dropdown-radius: 5px;
@@ -1940,11 +1940,11 @@
   --select-option-padding-y: 10px;
   --select-option-background-default: transparent;
   --select-option-background-hover: #f5f5f5;
-  --select-option-background-selected: #1f2544;
-  --select-option-text-default: #1f2544;
+  --select-option-background-selected: #0f766e;
+  --select-option-text-default: #253a43;
   --select-option-text-selected: #ffffff;
   --select-focus-ringWidth: 2px;
-  --select-focus-ringColor: #1f2544;
+  --select-focus-ringColor: #0f766e;
   --select-focus-ringOffset: 1px;
   --selectButton-gap: 4px; /* Gap between option buttons */
   --selectButton-padding-x: 16px; /* Horizontal padding for option buttons */
@@ -1953,43 +1953,43 @@
   --selectButton-border-width: 1px; /* Border width for option buttons */
   --selectButton-border-color-default: #d4d4d4; /* Default border color */
   --selectButton-border-color-hover: #a3a3a3; /* Hover border color */
-  --selectButton-border-color-selected: #1f2544; /* Selected border color */
+  --selectButton-border-color-selected: #0f766e; /* Selected border color */
   --selectButton-border-color-disabled: #e5e5e5; /* Disabled border color */
-  --selectButton-background-default: #ffffff; /* Default background color */
+  --selectButton-background-default: #faf8f5; /* Default background color */
   --selectButton-background-hover: #fafafa; /* Hover background color */
-  --selectButton-background-selected: #1f2544; /* Selected background color */
+  --selectButton-background-selected: #0f766e; /* Selected background color */
   --selectButton-background-disabled: #f5f5f5; /* Disabled background color */
-  --selectButton-text-default: #1f2544; /* Default text color */
-  --selectButton-text-hover: #1f2544; /* Hover text color */
-  --selectButton-text-selected: #ffffff; /* Selected text color */
-  --selectButton-text-disabled: #5e6481; /* Disabled text color */
+  --selectButton-text-default: #253a43; /* Default text color */
+  --selectButton-text-hover: #253a43; /* Hover text color */
+  --selectButton-text-selected: #faf8f5; /* Selected text color */
+  --selectButton-text-disabled: #5f7178; /* Disabled text color */
   --selectButton-focus-ringWidth: 2px; /* Focus ring width */
-  --selectButton-focus-ringColor: #006cde; /* Focus ring color */
+  --selectButton-focus-ringColor: #0f766e; /* Focus ring color */
   --selectButton-focus-ringOffset: 2px; /* Focus ring offset */
   --selectButton-fontSize: 14px; /* Font size for option text */
   --selectButton-fontWeight-default: 500; /* Default font weight */
   --selectButton-fontWeight-selected: 600; /* Selected font weight */
   --selectButton-minHeight: 36px; /* Minimum height of option buttons */
   --selectButton-transition-duration: 150ms; /* Transition duration for state changes */
-  --sidebar-background: #f5f5f5; /* Sidebar background color */
-  --sidebar-border-color: #eeeeee; /* Sidebar border color */
+  --sidebar-background: #ffffff; /* Sidebar background color */
+  --sidebar-border-color: #e6e2dd; /* Sidebar border color */
   --sidebar-border-width: 1px; /* Sidebar border width */
   --sidebar-shadow: 0 8px 16px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08); /* Sidebar shadow */
   --sidebar-header-padding: 26px; /* Header section padding */
-  --sidebar-header-background: #f5f5f5; /* Header background */
-  --sidebar-header-borderColor: #eeeeee; /* Header bottom border color */
-  --sidebar-header-title-color: #1f2544; /* Header title text color */
+  --sidebar-header-background: #ffffff; /* Header background */
+  --sidebar-header-borderColor: #e6e2dd; /* Header bottom border color */
+  --sidebar-header-title-color: #253a43; /* Header title text color */
   --sidebar-header-title-fontSize: 18px; /* Header title font size */
   --sidebar-header-title-fontWeight: 600; /* Header title font weight */
   --sidebar-content-padding: 26px; /* Content area padding */
-  --sidebar-content-color: #1f2544; /* Content text color */
+  --sidebar-content-color: #253a43; /* Content text color */
   --sidebar-closeButton-size: 32px; /* Close button size */
   --sidebar-closeButton-iconSize: 16px; /* Close icon size */
-  --sidebar-closeButton-color-default: #5e6481; /* Close button icon color */
-  --sidebar-closeButton-color-hover: #1f2544; /* Close button hover color */
-  --sidebar-closeButton-background-hover: #f0f1f4; /* Close button hover background */
+  --sidebar-closeButton-color-default: #5f7178; /* Close button icon color */
+  --sidebar-closeButton-color-hover: #253a43; /* Close button hover color */
+  --sidebar-closeButton-background-hover: #eceeec; /* Close button hover background */
   --sidebar-closeButton-radius: 5px; /* Close button border radius */
-  --sidebar-overlay-background: rgba(0, 0, 0, 0.5); /* Overlay backdrop color */
+  --sidebar-overlay-background: rgba(4, 26, 38, 0.55); /* Overlay backdrop color */
   --sidebar-width-default: 320px; /* Default sidebar width */
   --sidebar-width-fullScreen: 100%; /* Full screen width */
   --sidebar-zIndex-overlay: 1000; /* Overlay z-index */
@@ -2001,13 +2001,13 @@
   --skeleton-animation-duration: 1.5s; /* Wave animation duration */
   --slider-track-height: 6px;
   --slider-track-background-default: #737373; /* Inactive track — #737373, ~4.8:1 vs white canvas (WCAG 1.4.11 ≥3:1) */
-  --slider-track-background-fill: #1f2544; /* Active/filled track — primary action navy, ~14:1 vs white canvas */
-  --slider-track-background-disabled: #eeeeee; /* Disabled track — exempt from 1.4.11 */
+  --slider-track-background-fill: #0f766e; /* Active/filled track — primary action navy, ~14:1 vs white canvas */
+  --slider-track-background-disabled: #e6e2dd; /* Disabled track — exempt from 1.4.11 */
   --slider-track-radius: 9999px;
   --slider-thumb-size: 20px;
-  --slider-thumb-background-default: #1f2544; /* Thumb — primary action navy, ~14:1 vs canvas, ≥3:1 vs the inactive-grey track */
-  --slider-thumb-background-hover: #3d4467; /* Thumb hover — lifted navy */
-  --slider-thumb-background-disabled: #1f2544; /* Disabled thumb — exempt from 1.4.11 */
+  --slider-thumb-background-default: #0f766e; /* Thumb — primary action navy, ~14:1 vs canvas, ≥3:1 vs the inactive-grey track */
+  --slider-thumb-background-hover: #115e59; /* Thumb hover — lifted navy */
+  --slider-thumb-background-disabled: #04141f; /* Disabled thumb — exempt from 1.4.11 */
   --slider-thumb-border-width: 0px;
   --slider-thumb-border-color: transparent;
   --slider-thumb-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
@@ -2015,18 +2015,18 @@
   --slider-focus-ringColor: #f97316;
   --slider-focus-ringOffset: 2px;
   --speed-dial-button-size: 56px;
-  --speed-dial-button-background-default: #1f2544;
-  --speed-dial-button-background-hover: #3d4467;
-  --speed-dial-button-background-active: #0f1422;
-  --speed-dial-button-color: #ffffff;
+  --speed-dial-button-background-default: #0f766e;
+  --speed-dial-button-background-hover: #115e59;
+  --speed-dial-button-background-active: #134e4a;
+  --speed-dial-button-color: #faf8f5;
   --speed-dial-button-radius: 9999px;
   --speed-dial-button-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
   --speed-dial-button-iconSize: 24px;
   --speed-dial-action-size: 48px;
-  --speed-dial-action-background-default: #ffffff;
+  --speed-dial-action-background-default: #faf8f5;
   --speed-dial-action-background-hover: #f5f5f5;
-  --speed-dial-action-color-default: #1f2544;
-  --speed-dial-action-color-hover: #1f2544;
+  --speed-dial-action-color-default: #253a43;
+  --speed-dial-action-color-hover: #0f766e;
   --speed-dial-action-border-width: 1px;
   --speed-dial-action-border-color: #e5e5e5;
   --speed-dial-action-radius: 9999px;
@@ -2040,42 +2040,42 @@
   --speed-dial-label-radius: 2px;
   --speed-dial-label-fontSize: 13px;
   --speed-dial-label-offset: 10px;
-  --speed-dial-focus-ringColor: #006cde;
+  --speed-dial-focus-ringColor: #0f766e;
   --speed-dial-focus-ringWidth: 2px;
   --speed-dial-focus-ringOffset: 2px;
   --speed-dial-transition-duration: 200ms;
-  --split-button-background-primary-default: #1f2544;
-  --split-button-background-primary-hover: #3d4467;
-  --split-button-background-primary-active: #0f1422;
+  --split-button-background-primary-default: #0f766e;
+  --split-button-background-primary-hover: #115e59;
+  --split-button-background-primary-active: #134e4a;
   --split-button-background-primary-disabled: #e5e5e5;
   --split-button-background-secondary-default: transparent;
-  --split-button-background-secondary-hover: #f0f1f4;
+  --split-button-background-secondary-hover: #eceeec;
   --split-button-background-secondary-active: #f5f5f5;
   --split-button-background-secondary-disabled: #f5f5f5;
   --split-button-background-outlined-default: transparent;
   --split-button-background-outlined-hover: #fafafa;
   --split-button-background-outlined-active: #f5f5f5;
   --split-button-background-outlined-disabled: transparent;
-  --split-button-text-primary-default: #ffffff;
+  --split-button-text-primary-default: #faf8f5;
   --split-button-text-primary-disabled: #a3a3a3;
-  --split-button-text-secondary-default: #1f2544;
+  --split-button-text-secondary-default: #0f766e;
   --split-button-text-secondary-disabled: #a3a3a3;
-  --split-button-text-outlined-default: #1f2544;
+  --split-button-text-outlined-default: #0f766e;
   --split-button-text-outlined-disabled: #a3a3a3;
-  --split-button-border-primary-default: #1f2544;
-  --split-button-border-primary-hover: #3d4467;
+  --split-button-border-primary-default: #0f766e;
+  --split-button-border-primary-hover: #115e59;
   --split-button-border-primary-disabled: #e5e5e5;
-  --split-button-border-secondary-default: #1f2544;
-  --split-button-border-secondary-hover: #1f2544;
+  --split-button-border-secondary-default: #0f766e;
+  --split-button-border-secondary-hover: #0f766e;
   --split-button-border-secondary-disabled: #d4d4d4;
-  --split-button-border-outlined-default: #1f2544;
-  --split-button-border-outlined-hover: #1f2544;
+  --split-button-border-outlined-default: #0f766e;
+  --split-button-border-outlined-hover: #0f766e;
   --split-button-border-outlined-disabled: #d4d4d4;
   --split-button-border-width: 1px;
   --split-button-radius: 5px;
   --split-button-divider-primary: rgba(255, 255, 255, 0.2);
   --split-button-divider-secondary: #d4d4d4;
-  --split-button-divider-outlined: #1f2544;
+  --split-button-divider-outlined: #0f766e;
   --split-button-divider-width: 1px;
   --split-button-size-sm-height: 32px;
   --split-button-size-sm-paddingX: 10px;
@@ -2092,7 +2092,7 @@
   --split-button-size-lg-fontSize: 18px;
   --split-button-size-lg-iconSize: 20px;
   --split-button-size-lg-gap: 10px;
-  --split-button-dropdown-background: #ffffff;
+  --split-button-dropdown-background: #faf8f5;
   --split-button-dropdown-border: #e5e5e5;
   --split-button-dropdown-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
   --split-button-dropdown-radius: 5px;
@@ -2101,22 +2101,22 @@
   --split-button-menu-item-gap: 10px;
   --split-button-menu-item-background-default: transparent;
   --split-button-menu-item-background-hover: #f5f5f5;
-  --split-button-menu-item-text-default: #1f2544;
-  --split-button-menu-item-icon-color: #5e6481;
+  --split-button-menu-item-text-default: #253a43;
+  --split-button-menu-item-icon-color: #5f7178;
   --split-button-menu-item-icon-size: 16px;
   --split-button-fontWeight: 600;
-  --split-button-focus-ringColor: #006cde;
+  --split-button-focus-ringColor: #0f766e;
   --split-button-focus-ringWidth: 2px;
   --split-button-focus-ringOffset: 2px;
   --split-button-transition-duration: 150ms;
-  --splitter-background: #ffffff; /* Splitter container background */
-  --splitter-border-color: #eeeeee; /* Splitter border color */
+  --splitter-background: #faf8f5; /* Splitter container background */
+  --splitter-border-color: #e6e2dd; /* Splitter border color */
   --splitter-border-width: 1px; /* Splitter border width */
   --splitter-border-radius: 5px; /* Splitter border radius */
   --splitter-gutter-size: 10px; /* Default gutter width/height */
-  --splitter-gutter-background-default: #f0f1f4; /* Gutter background color */
+  --splitter-gutter-background-default: #eceeec; /* Gutter background color */
   --splitter-gutter-background-hover: #e5e5e5; /* Gutter hover background */
-  --splitter-gutter-background-active: #1f2544; /* Gutter active/dragging background */
+  --splitter-gutter-background-active: #0f766e; /* Gutter active/dragging background */
   --splitter-gutter-handle-size: 24px; /* Gutter handle indicator size */
   --splitter-gutter-handle-color-default: #a3a3a3; /* Gutter handle color */
   --splitter-gutter-handle-color-hover: #737373; /* Gutter handle hover color */
@@ -2125,7 +2125,7 @@
   --splitter-transition-duration: 150ms; /* Gutter state transition duration */
   --steps-gap: 16px; /* Gap between step items */
   --steps-connector-height: 2px; /* Connector line height */
-  --steps-connector-color-incomplete: #d9dadf; /* Incomplete connector color */
+  --steps-connector-color-incomplete: #d5d8d4; /* Incomplete connector color */
   --steps-connector-color-complete: #f97316; /* Completed connector color */
   --steps-marker-size: 32px; /* Step marker size */
   --steps-marker-fontSize: 14px; /* Step number font size */
@@ -2133,45 +2133,45 @@
   --steps-marker-background-incomplete: transparent; /* Incomplete step marker background */
   --steps-marker-background-active: #f97316; /* Active step marker background */
   --steps-marker-background-complete: #f97316; /* Completed step marker background */
-  --steps-marker-text-incomplete: #5e6481; /* Incomplete step number color */
+  --steps-marker-text-incomplete: #5f7178; /* Incomplete step number color */
   --steps-marker-text-active: #ffffff; /* Active step number color */
   --steps-marker-text-complete: #ffffff; /* Completed step number/icon color */
   --steps-marker-border-width: 2px; /* Marker border width */
-  --steps-marker-border-color-incomplete: #d9dadf; /* Incomplete marker border color */
+  --steps-marker-border-color-incomplete: #d5d8d4; /* Incomplete marker border color */
   --steps-marker-border-color-active: #f97316; /* Active marker border color */
   --steps-marker-border-color-complete: #f97316; /* Completed marker border color */
   --steps-label-fontSize: 14px; /* Step label font size */
   --steps-label-fontWeight: 500; /* Step label font weight */
-  --steps-label-color-incomplete: #5e6481; /* Incomplete step label color */
-  --steps-label-color-active: #1f2544; /* Active step label color */
-  --steps-label-color-complete: #1f2544; /* Completed step label color */
+  --steps-label-color-incomplete: #5f7178; /* Incomplete step label color */
+  --steps-label-color-active: #253a43; /* Active step label color */
+  --steps-label-color-complete: #253a43; /* Completed step label color */
   --steps-label-gap: 6px; /* Gap between marker and label */
   --steps-focus-ringWidth: 2px; /* Focus ring width */
   --steps-focus-ringColor: #f97316; /* Focus ring color */
   --steps-focus-ringOffset: 2px; /* Focus ring offset */
   --tabmenu-background: transparent; /* TabMenu container background */
   --tabmenu-border-width: 1px; /* Bottom border width */
-  --tabmenu-border-color: #eeeeee; /* Bottom border color */
+  --tabmenu-border-color: #e6e2dd; /* Bottom border color */
   --tabmenu-item-padding: 10px 16px; /* Tab item padding */
   --tabmenu-item-gap: 4px; /* Gap between icon and label */
-  --tabmenu-item-color-default: #5e6481; /* Tab text color */
-  --tabmenu-item-color-hover: #1f2544; /* Tab text color on hover */
-  --tabmenu-item-color-active: #1f2544; /* Active tab text color */
+  --tabmenu-item-color-default: #5f7178; /* Tab text color */
+  --tabmenu-item-color-hover: #253a43; /* Tab text color on hover */
+  --tabmenu-item-color-active: #0f766e; /* Active tab text color */
   --tabmenu-item-color-disabled: #a3a3a3; /* Disabled tab text color */
   --tabmenu-item-background-default: transparent; /* Tab background */
-  --tabmenu-item-background-hover: #f0f1f4; /* Tab background on hover */
+  --tabmenu-item-background-hover: #eceeec; /* Tab background on hover */
   --tabmenu-item-background-active: transparent; /* Active tab background */
   --tabmenu-icon-size: 16px; /* Icon size */
   --tabmenu-inkbar-height: 2px; /* Active indicator height */
-  --tabmenu-inkbar-color: #1f2544; /* Active indicator color */
+  --tabmenu-inkbar-color: #0f766e; /* Active indicator color */
   --tabmenu-inkbar-borderRadius: 2px; /* Active indicator border radius */
   --tabmenu-transition-duration: 200ms; /* Animation duration */
-  --tabs-nav-borderColor: #eeeeee; /* Border color for tab navigation */
+  --tabs-nav-borderColor: #e6e2dd; /* Border color for tab navigation */
   --tabs-nav-borderWidth: 1px;
   --tabs-tab-padding-x: 16px; /* Horizontal tab padding */
   --tabs-tab-padding-y: 10px; /* Vertical tab padding */
-  --tabs-tab-text-default: #3d4467; /* Inactive tab text */
-  --tabs-tab-text-hover: #1f2544; /* Tab text on hover */
+  --tabs-tab-text-default: #3d5058; /* Inactive tab text */
+  --tabs-tab-text-hover: #253a43; /* Tab text on hover */
   --tabs-tab-text-active: #f97316; /* Active tab text - visible accent */
   --tabs-tab-text-disabled: rgba(255, 255, 255, 0.38);
   --tabs-tab-background-default: transparent;
@@ -2194,13 +2194,13 @@
   --tag-background-brand: #c2410c; /* Brand color tag (darker shade for white-text contrast) */
   --tag-background-accent: #f59e0b; /* Accent color tag (paired with dark text) */
   --tag-background-neutral: #e5e5e5; /* Neutral/muted tag (visible on light surfaces) */
-  --tag-background-success: #1d6429; /* Success status tag (emphasis shade for white-text contrast) */
-  --tag-background-warning: #d97706; /* Warning status tag (paired with dark text for contrast) */
-  --tag-background-danger: #c40000; /* Danger/error status tag (emphasis shade for white-text contrast) */
-  --tag-background-info: #0050a8; /* Info status tag (emphasis shade for white-text contrast) */
+  --tag-background-success: #145c3f; /* Success status tag (emphasis shade for white-text contrast) */
+  --tag-background-warning: #b3701a; /* Warning status tag (paired with dark text for contrast) */
+  --tag-background-danger: #8f2620; /* Danger/error status tag (emphasis shade for white-text contrast) */
+  --tag-background-info: #115e59; /* Info status tag (emphasis shade for white-text contrast) */
   --tag-text-brand: #ffffff; /* Text on brand background */
   --tag-text-accent: #171717; /* Text on accent background (dark for contrast) */
-  --tag-text-neutral: #1f2544; /* Text on neutral background */
+  --tag-text-neutral: #253a43; /* Text on neutral background */
   --tag-text-success: #ffffff; /* Text on success background */
   --tag-text-warning: #171717; /* Text on warning background (dark for contrast) */
   --tag-text-danger: #ffffff; /* Text on danger background */
@@ -2214,13 +2214,13 @@
   --terminal-font-size: 14px; /* Terminal font size */
   --terminal-font-lineHeight: 1.5; /* Terminal line height */
   --terminal-text-color: #f5f5f5; /* Terminal text color */
-  --terminal-prompt-color: #1f2544; /* Prompt text color */
+  --terminal-prompt-color: #0f766e; /* Prompt text color */
   --terminal-prompt-gap: 10px; /* Gap between prompt and input */
   --terminal-response-color: #d4d4d4; /* Response text color */
   --terminal-welcome-color: #a3a3a3; /* Welcome message color */
   --terminal-welcome-marginBottom: 16px; /* Space below welcome message */
   --terminal-command-gap: 6px; /* Gap between commands */
-  --terminal-input-caretColor: #1f2544; /* Input caret color */
+  --terminal-input-caretColor: #0f766e; /* Input caret color */
   --textarea-padding-x: 16px;
   --textarea-padding-y: 10px;
   --textarea-minHeight: 80px;
@@ -2228,113 +2228,113 @@
   --textarea-lineHeight: 1.5;
   --textarea-radius: 5px;
   --textarea-border-width: 1px;
-  --textarea-border-color-default: #d9dadf;
-  --textarea-border-color-hover: #1f2544;
-  --textarea-border-color-focus: #1f2544;
-  --textarea-border-color-disabled: #eeeeee;
-  --textarea-border-color-error: #c40000;
-  --textarea-background-default: #ffffff;
+  --textarea-border-color-default: #d5d8d4;
+  --textarea-border-color-hover: #04141f;
+  --textarea-border-color-focus: #0f766e;
+  --textarea-border-color-disabled: #e6e2dd;
+  --textarea-border-color-error: #8f2620;
+  --textarea-background-default: #faf8f5;
   --textarea-background-disabled: #f5f5f5;
-  --textarea-text-default: #1f2544;
-  --textarea-text-placeholder: #5e6481;
-  --textarea-text-disabled: #5e6481;
+  --textarea-text-default: #253a43;
+  --textarea-text-placeholder: #5f7178;
+  --textarea-text-disabled: #5f7178;
   --textarea-focus-ringWidth: 2px;
-  --textarea-focus-ringColor: #1f2544;
+  --textarea-focus-ringColor: #0f766e;
   --textarea-focus-ringOffset: 1px;
-  --tieredmenu-background: #f5f5f5; /* Menu background */
+  --tieredmenu-background: #ffffff; /* Menu background */
   --tieredmenu-padding: 4px; /* Menu container padding */
   --tieredmenu-border-width: 1px; /* Border width */
-  --tieredmenu-border-color: #eeeeee; /* Border color */
+  --tieredmenu-border-color: #e6e2dd; /* Border color */
   --tieredmenu-border-radius: 5px; /* Border radius */
   --tieredmenu-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08); /* Menu shadow (popup mode) */
   --tieredmenu-minWidth: 200px; /* Minimum menu width */
   --tieredmenu-item-padding: 6px 10px; /* Item padding */
   --tieredmenu-item-gap: 4px; /* Gap between icon and label */
-  --tieredmenu-item-color-default: #1f2544; /* Item text color */
-  --tieredmenu-item-color-hover: #1f2544; /* Item text color on hover */
-  --tieredmenu-item-color-active: #1f2544; /* Active item text color */
-  --tieredmenu-item-color-disabled: #5e6481; /* Disabled item text color */
+  --tieredmenu-item-color-default: #253a43; /* Item text color */
+  --tieredmenu-item-color-hover: #253a43; /* Item text color on hover */
+  --tieredmenu-item-color-active: #0f766e; /* Active item text color */
+  --tieredmenu-item-color-disabled: #5f7178; /* Disabled item text color */
   --tieredmenu-item-background-default: transparent; /* Item background */
-  --tieredmenu-item-background-hover: #f0f1f4; /* Item background on hover */
-  --tieredmenu-item-background-active: #fde8ea; /* Active item background */
+  --tieredmenu-item-background-hover: #eceeec; /* Item background on hover */
+  --tieredmenu-item-background-active: #e2efec; /* Active item background */
   --tieredmenu-item-borderRadius: 5px; /* Item border radius */
   --tieredmenu-icon-size: 16px; /* Icon size */
-  --tieredmenu-icon-color-default: #5e6481; /* Icon color */
-  --tieredmenu-icon-color-hover: #1f2544; /* Icon color on hover */
+  --tieredmenu-icon-color-default: #5f7178; /* Icon color */
+  --tieredmenu-icon-color-hover: #253a43; /* Icon color on hover */
   --tieredmenu-submenu-offset: 2px; /* Submenu offset from parent */
-  --tieredmenu-separator-color: #eeeeee; /* Separator color */
+  --tieredmenu-separator-color: #e6e2dd; /* Separator color */
   --tieredmenu-separator-margin: 4px; /* Separator margin */
   --tieredmenu-transition-duration: 150ms; /* Animation duration */
   --timeline-line-width: 2px; /* Width of the vertical timeline line */
   --timeline-line-color: #d4d4d4; /* Color of the timeline line */
   --timeline-marker-size: 12px; /* Size of the timeline marker dot */
-  --timeline-marker-background: #1f2544; /* Background color of the marker */
+  --timeline-marker-background: #0f766e; /* Background color of the marker */
   --timeline-marker-border-width: 2px; /* Border width of the marker */
-  --timeline-marker-border-color: #ffffff; /* Border color of the marker */
+  --timeline-marker-border-color: #faf8f5; /* Border color of the marker */
   --timeline-marker-ring-size: 24px; /* Size of the outer ring around the marker */
   --timeline-marker-ring-color: #f5f5f5; /* Color of the outer ring */
   --timeline-content-gap: 16px; /* Gap between timeline items */
   --timeline-content-padding: 16px; /* Padding around content area */
-  --timeline-event-title-color: #1f2544; /* Event title color */
+  --timeline-event-title-color: #253a43; /* Event title color */
   --timeline-event-title-fontSize: 16px; /* Event title font size */
   --timeline-event-title-fontWeight: 600; /* Event title font weight */
-  --timeline-event-date-color: #5e6481; /* Event date color */
+  --timeline-event-date-color: #5f7178; /* Event date color */
   --timeline-event-date-fontSize: 12px; /* Event date font size */
-  --timeline-event-description-color: #5e6481; /* Event description color */
+  --timeline-event-description-color: #5f7178; /* Event description color */
   --timeline-event-description-fontSize: 14px; /* Event description font size */
-  --timeline-colors-primary: #1f2544; /* Primary marker color */
-  --timeline-colors-success: #2a8a3a; /* Success marker color */
-  --timeline-colors-warning: #d97706; /* Warning marker color */
-  --timeline-colors-danger: #e00613; /* Danger marker color */
+  --timeline-colors-primary: #0f766e; /* Primary marker color */
+  --timeline-colors-success: #1f7a55; /* Success marker color */
+  --timeline-colors-warning: #b3701a; /* Warning marker color */
+  --timeline-colors-danger: #b8342c; /* Danger marker color */
   --toast-container-gap: 10px; /* Gap between stacked toasts */
   --toast-container-padding: 16px; /* Container padding from screen edge */
   --toast-container-zIndex: 1200; /* Toast container z-index */
   --toast-container-maxWidth: 400px; /* Maximum toast width */
   --toast-background-default: #ffffff; /* Default toast background */
-  --toast-background-success: #e6f4e9; /* Success toast background */
-  --toast-background-info: #e0eef9; /* Info toast background */
-  --toast-background-warning: #fef3e6; /* Warning toast background */
-  --toast-background-error: #fde8ea; /* Error toast background */
+  --toast-background-success: #e4f2ec; /* Success toast background */
+  --toast-background-info: #e2efee; /* Info toast background */
+  --toast-background-warning: #f7eddf; /* Warning toast background */
+  --toast-background-error: #f7e6e4; /* Error toast background */
   --toast-border-width: 1px; /* Toast border width */
-  --toast-border-color-default: #eeeeee; /* Default border color */
-  --toast-border-color-success: #2a8a3a; /* Success border color */
-  --toast-border-color-info: #006cde; /* Info border color */
-  --toast-border-color-warning: #d97706; /* Warning border color */
-  --toast-border-color-error: #e00613; /* Error border color */
+  --toast-border-color-default: #e6e2dd; /* Default border color */
+  --toast-border-color-success: #1f7a55; /* Success border color */
+  --toast-border-color-info: #0f766e; /* Info border color */
+  --toast-border-color-warning: #b3701a; /* Warning border color */
+  --toast-border-color-error: #b8342c; /* Error border color */
   --toast-radius: 5px; /* Toast border radius */
   --toast-shadow: 0 8px 16px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08); /* Toast elevation shadow */
   --toast-padding-x: 16px; /* Horizontal padding */
   --toast-padding-y: 16px; /* Vertical padding */
   --toast-icon-size: 20px; /* Icon size */
-  --toast-icon-color-default: #5e6481; /* Default icon color */
-  --toast-icon-color-success: #2a8a3a; /* Success icon color */
-  --toast-icon-color-info: #006cde; /* Info icon color */
-  --toast-icon-color-warning: #d97706; /* Warning icon color */
-  --toast-icon-color-error: #e00613; /* Error icon color */
+  --toast-icon-color-default: #5f7178; /* Default icon color */
+  --toast-icon-color-success: #1f7a55; /* Success icon color */
+  --toast-icon-color-info: #0f766e; /* Info icon color */
+  --toast-icon-color-warning: #b3701a; /* Warning icon color */
+  --toast-icon-color-error: #b8342c; /* Error icon color */
   --toast-icon-gap: 10px; /* Gap between icon and content */
   --toast-content-gap: 4px; /* Gap between summary and detail */
-  --toast-summary-color-default: #1f2544; /* Summary text color */
-  --toast-summary-color-success: #1d6429; /* Success summary color */
-  --toast-summary-color-info: #0050a8; /* Info summary color */
-  --toast-summary-color-warning: #a8590e; /* Warning summary color */
-  --toast-summary-color-error: #c40000; /* Error summary color */
+  --toast-summary-color-default: #253a43; /* Summary text color */
+  --toast-summary-color-success: #145c3f; /* Success summary color */
+  --toast-summary-color-info: #115e59; /* Info summary color */
+  --toast-summary-color-warning: #8a5410; /* Warning summary color */
+  --toast-summary-color-error: #8f2620; /* Error summary color */
   --toast-summary-fontSize: 14px; /* Summary font size */
   --toast-summary-fontWeight: 600; /* Summary font weight */
-  --toast-detail-color: #5e6481; /* Detail text color */
+  --toast-detail-color: #5f7178; /* Detail text color */
   --toast-detail-fontSize: 13px; /* Detail font size */
   --toast-closeButton-size: 28px; /* Close button size */
   --toast-closeButton-iconSize: 14px; /* Close icon size */
-  --toast-closeButton-color-default: #5e6481; /* Close button color */
-  --toast-closeButton-color-hover: #1f2544; /* Close button hover color */
-  --toast-closeButton-background-hover: #f0f1f4; /* Close button hover background */
+  --toast-closeButton-color-default: #5f7178; /* Close button color */
+  --toast-closeButton-color-hover: #253a43; /* Close button hover color */
+  --toast-closeButton-background-hover: #eceeec; /* Close button hover background */
   --toast-closeButton-radius: 2px; /* Close button border radius */
   --toast-progress-height: 3px; /* Progress bar height */
-  --toast-progress-background: #f0f1f4; /* Progress bar track background */
-  --toast-progress-fill-default: #1f2544; /* Default progress fill */
-  --toast-progress-fill-success: #2a8a3a; /* Success progress fill */
-  --toast-progress-fill-info: #006cde; /* Info progress fill */
-  --toast-progress-fill-warning: #d97706; /* Warning progress fill */
-  --toast-progress-fill-error: #e00613; /* Error progress fill */
+  --toast-progress-background: #eceeec; /* Progress bar track background */
+  --toast-progress-fill-default: #0f766e; /* Default progress fill */
+  --toast-progress-fill-success: #1f7a55; /* Success progress fill */
+  --toast-progress-fill-info: #0f766e; /* Info progress fill */
+  --toast-progress-fill-warning: #b3701a; /* Warning progress fill */
+  --toast-progress-fill-error: #b8342c; /* Error progress fill */
   --toggleButton-height-sm: 32px; /* Small toggle button height */
   --toggleButton-height-md: 40px; /* Medium toggle button height */
   --toggleButton-height-lg: 48px; /* Large toggle button height */
@@ -2347,17 +2347,17 @@
   --toggleButton-gap: 6px; /* Gap between icon and label */
   --toggleButton-background-off-default: #e5e5e5; /* Toggle button off state background */
   --toggleButton-background-off-hover: #d4d4d4; /* Toggle button off state hover background */
-  --toggleButton-background-on-default: #1f2544; /* Toggle button on state background */
-  --toggleButton-background-on-hover: #3d4467; /* Toggle button on state hover background */
+  --toggleButton-background-on-default: #0f766e; /* Toggle button on state background */
+  --toggleButton-background-on-hover: #115e59; /* Toggle button on state hover background */
   --toggleButton-background-disabled: #f5f5f5; /* Toggle button disabled background */
-  --toggleButton-text-off-default: #1f2544; /* Toggle button off state text color */
-  --toggleButton-text-on-default: #ffffff; /* Toggle button on state text color */
+  --toggleButton-text-off-default: #253a43; /* Toggle button off state text color */
+  --toggleButton-text-on-default: #faf8f5; /* Toggle button on state text color */
   --toggleButton-text-disabled: #a3a3a3; /* Toggle button disabled text color */
   --toggleButton-border-width: 1px; /* Toggle button border width */
   --toggleButton-border-off-default: #d4d4d4; /* Toggle button off state border color */
   --toggleButton-border-off-hover: #a3a3a3; /* Toggle button off state hover border color */
-  --toggleButton-border-on-default: #1f2544; /* Toggle button on state border color */
-  --toggleButton-border-on-hover: #3d4467; /* Toggle button on state hover border color */
+  --toggleButton-border-on-default: #0f766e; /* Toggle button on state border color */
+  --toggleButton-border-on-hover: #115e59; /* Toggle button on state hover border color */
   --toggleButton-border-disabled: #e5e5e5; /* Toggle button disabled border color */
   --toggleButton-radius: 5px; /* Toggle button border radius */
   --toggleButton-fontSize-sm: 14px; /* Small toggle button font size */
@@ -2367,7 +2367,7 @@
   --toggleButton-iconSize-md: 18px; /* Medium toggle button icon size */
   --toggleButton-iconSize-lg: 20px; /* Large toggle button icon size */
   --toggleButton-fontWeight: 500; /* Toggle button font weight */
-  --toggleButton-focus-ringColor: #006cde; /* Toggle button focus ring color */
+  --toggleButton-focus-ringColor: #0f766e; /* Toggle button focus ring color */
   --toggleButton-focus-ringWidth: 2px; /* Toggle button focus ring width */
   --toggleButton-focus-ringOffset: 2px; /* Toggle button focus ring offset */
   --toggleButton-transition-duration: 150ms; /* Toggle button transition duration */
@@ -2384,13 +2384,13 @@
   --toggleSwitch-thumb-color-default: #ffffff;
   --toggleSwitch-thumb-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
   --toggleSwitch-track-background-off: #737373; /* Off state — mid-grey #737373, ~4.8:1 contrast vs #ffffff canvas (meets WCAG 1.4.11 Non-text Contrast 3:1) */
-  --toggleSwitch-track-background-on: #1f2544; /* On state — primary action navy, ~14:1 vs white canvas (WCAG 1.4.11 ≥3:1, also semantically the right 'active' color) */
+  --toggleSwitch-track-background-on: #0f766e; /* On state — primary action navy, ~14:1 vs white canvas (WCAG 1.4.11 ≥3:1, also semantically the right 'active' color) */
   --toggleSwitch-track-background-disabled: #d4d4d4; /* Disabled state — light grey #d4d4d4. Disabled controls are exempt from 1.4.11 per WCAG; cursor + ARIA carry the affordance */
   --toggleSwitch-focus-ringWidth: 2px;
   --toggleSwitch-focus-ringColor: #f97316;
   --toggleSwitch-focus-ringOffset: 2px;
-  --toolbar-background: #f5f5f5; /* Toolbar background color */
-  --toolbar-border-color: #eeeeee; /* Toolbar border color */
+  --toolbar-background: #ffffff; /* Toolbar background color */
+  --toolbar-border-color: #e6e2dd; /* Toolbar border color */
   --toolbar-border-width: 1px; /* Toolbar border width */
   --toolbar-radius: 5px; /* Toolbar border radius */
   --toolbar-padding: 16px; /* Toolbar inner padding */
@@ -2398,8 +2398,8 @@
   --toolbar-minHeight: 48px; /* Minimum toolbar height */
   --tooltip-padding-x: 10px; /* Horizontal padding */
   --tooltip-padding-y: 6px; /* Vertical padding */
-  --tooltip-background: #1f2544; /* Tooltip background color (dark) */
-  --tooltip-text-color: #ffffff; /* Tooltip text color (light on dark) */
+  --tooltip-background: #041a26; /* Tooltip background color (dark) */
+  --tooltip-text-color: #faf8f5; /* Tooltip text color (light on dark) */
   --tooltip-text-fontSize: 13px; /* Tooltip font size */
   --tooltip-radius: 2px; /* Border radius */
   --tooltip-arrow-size: 6px; /* Arrow/pointer size */
@@ -2411,7 +2411,7 @@
   --tree-border-width: 1px;
   --tree-border-color-default: #d4d4d4; /* Default border color */
   --tree-border-color-disabled: #e5e5e5; /* Disabled border color */
-  --tree-background-default: #ffffff; /* Default background */
+  --tree-background-default: #faf8f5; /* Default background */
   --tree-background-disabled: #f5f5f5; /* Disabled background */
   --tree-maxHeight: 400px; /* Maximum height before scrolling */
   --tree-node-padding-x: 16px;
@@ -2421,19 +2421,19 @@
   --tree-node-radius: 2px;
   --tree-node-background-default: transparent;
   --tree-node-background-hover: #f5f5f5;
-  --tree-node-background-selected: #1f2544;
-  --tree-node-text-default: #1f2544;
+  --tree-node-background-selected: #0f766e;
+  --tree-node-text-default: #253a43;
   --tree-node-text-selected: #ffffff;
   --tree-toggler-size: 20px;
   --tree-toggler-color-default: #737373;
   --tree-toggler-color-hover: #404040;
   --tree-checkbox-size: 18px;
   --tree-checkbox-border: #d4d4d4;
-  --tree-checkbox-background-checked: #1f2544;
+  --tree-checkbox-background-checked: #0f766e;
   --tree-filter-padding: 10px;
   --tree-filter-marginBottom: 10px;
   --tree-focus-ringWidth: 2px;
-  --tree-focus-ringColor: #1f2544;
+  --tree-focus-ringColor: #0f766e;
   --tree-focus-ringOffset: 1px;
   --tree-select-height-sm: 32px;
   --tree-select-height-md: 40px;
@@ -2447,19 +2447,19 @@
   --tree-select-border-width: 1px;
   --tree-select-border-color-default: #d4d4d4;
   --tree-select-border-color-hover: #a3a3a3;
-  --tree-select-border-color-focus: #1f2544;
+  --tree-select-border-color-focus: #0f766e;
   --tree-select-border-color-disabled: #e5e5e5;
-  --tree-select-border-color-error: #e00613;
-  --tree-select-background-default: #ffffff;
+  --tree-select-border-color-error: #b8342c;
+  --tree-select-background-default: #faf8f5;
   --tree-select-background-disabled: #f5f5f5;
-  --tree-select-background-hover: #ffffff;
-  --tree-select-text-default: #1f2544;
-  --tree-select-text-placeholder: #5e6481;
-  --tree-select-text-disabled: #5e6481;
+  --tree-select-background-hover: #faf8f5;
+  --tree-select-text-default: #253a43;
+  --tree-select-text-placeholder: #5f7178;
+  --tree-select-text-disabled: #5f7178;
   --tree-select-icon-size: 16px;
   --tree-select-icon-color-default: #737373;
   --tree-select-icon-color-disabled: #d4d4d4;
-  --tree-select-dropdown-background: #ffffff;
+  --tree-select-dropdown-background: #faf8f5;
   --tree-select-dropdown-border: #e5e5e5;
   --tree-select-dropdown-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
   --tree-select-dropdown-radius: 5px;
@@ -2470,8 +2470,8 @@
   --tree-select-node-indent: 26px;
   --tree-select-node-background-default: transparent;
   --tree-select-node-background-hover: #f5f5f5;
-  --tree-select-node-background-selected: #1f2544;
-  --tree-select-node-text-default: #1f2544;
+  --tree-select-node-background-selected: #0f766e;
+  --tree-select-node-text-default: #253a43;
   --tree-select-node-text-selected: #ffffff;
   --tree-select-toggler-size: 20px;
   --tree-select-toggler-color-default: #737373;
@@ -2479,25 +2479,25 @@
   --tree-select-filter-padding: 10px;
   --tree-select-filter-borderColor: #e5e5e5;
   --tree-select-focus-ringWidth: 2px;
-  --tree-select-focus-ringColor: #1f2544;
+  --tree-select-focus-ringColor: #0f766e;
   --tree-select-focus-ringOffset: 1px;
   --treetable-radius: 5px; /* Container border radius */
   --treetable-border-width: 1px;
   --treetable-border-color-default: #d4d4d4;
-  --treetable-background-default: #ffffff;
+  --treetable-background-default: #faf8f5;
   --treetable-header-padding-x: 16px;
   --treetable-header-padding-y: 10px;
-  --treetable-header-background: #1f2544; /* Header bg — navy, ~14:1 vs white canvas (was neutral.50 = 1.04:1, header invisible) */
-  --treetable-header-text: #ffffff; /* Header text — white on navy */
+  --treetable-header-background: #0f766e; /* Header bg — navy, ~14:1 vs white canvas (was neutral.50 = 1.04:1, header invisible) */
+  --treetable-header-text: #faf8f5; /* Header text — white on navy */
   --treetable-header-fontWeight: 600;
-  --treetable-header-borderColor: #1f2544; /* Header border matches fill */
+  --treetable-header-borderColor: #0f766e; /* Header border matches fill */
   --treetable-row-padding-x: 16px;
   --treetable-row-padding-y: 10px;
-  --treetable-row-background-default: #ffffff;
+  --treetable-row-background-default: #faf8f5;
   --treetable-row-background-hover: #fafafa;
-  --treetable-row-background-selected: #1f2544;
-  --treetable-row-background-stripe: #f0f1f4;
-  --treetable-row-text-default: #1f2544;
+  --treetable-row-background-selected: #0f766e;
+  --treetable-row-background-stripe: #eceeec;
+  --treetable-row-text-default: #253a43;
   --treetable-row-text-selected: #ffffff;
   --treetable-row-borderColor: #e5e5e5;
   --treetable-cell-padding-x: 16px;
@@ -2510,8 +2510,8 @@
   --treetable-checkbox-size: 18px;
   --treetable-checkbox-marginRight: 10px;
   --treetable-focus-ringWidth: 2px;
-  --treetable-focus-ringColor: #1f2544;
-  --virtualscroller-background-default: #ffffff; /* Default background */
+  --treetable-focus-ringColor: #0f766e;
+  --virtualscroller-background-default: #faf8f5; /* Default background */
   --virtualscroller-border-width: 1px;
   --virtualscroller-border-color-default: #d4d4d4;
   --virtualscroller-border-radius: 5px;
@@ -2519,11 +2519,11 @@
   --virtualscroller-item-padding-y: 10px;
   --virtualscroller-item-background-default: transparent;
   --virtualscroller-item-background-hover: #f5f5f5;
-  --virtualscroller-item-background-stripe: #f0f1f4;
-  --virtualscroller-item-text-default: #1f2544;
+  --virtualscroller-item-background-stripe: #eceeec;
+  --virtualscroller-item-text-default: #253a43;
   --virtualscroller-item-borderColor: #e5e5e5;
   --virtualscroller-loader-padding: 16px;
-  --virtualscroller-loader-text: #5e6481;
+  --virtualscroller-loader-text: #5f7178;
   --virtualscroller-loader-background: #fafafa;
   --virtualscroller-scrollbar-width: 8px;
   --virtualscroller-scrollbar-track: #f5f5f5;