jouw-stem__design-system 0.1.0 → 0.2.0

package/dist/css/theme-dark.css

@@ -23,19 +23,19 @@
   --border-subtle: #1a2244; /* Subtle borders */
   --border-default: #242e5c; /* Default borders */
   --border-strong: #2e3b75; /* Emphasized borders */
-  --border-focus: #006cde; /* Focus ring color — re-synced from light (nu.nl link blue) */
-  --border-vibrant-start: #1f2544; /* Vibrant border start — flattened, re-synced from light (navy) */
-  --border-vibrant-end: #1f2544; /* Vibrant border end — flattened, re-synced from light (navy) */
-  --feedback-success: #2a8a3a; /* Success state — re-synced from light */
+  --border-focus: #0f766e; /* Focus ring color — re-synced from light (teal.700, 3.5:1 on the dark canvas) */
+  --border-vibrant-start: #0f766e; /* Vibrant border start — flattened, re-synced from light (teal.700) */
+  --border-vibrant-end: #0f766e; /* Vibrant border end — flattened, re-synced from light (teal.700) */
+  --feedback-success: #1f7a55; /* Success state — re-synced from light (3.6:1 on the dark canvas) */
   --feedback-successSubtle: #dcfce7; /* Success background */
   --feedback-successEmphasis: #4ade80; /* Success text */
-  --feedback-warning: #d97706; /* Warning state — re-synced from light */
+  --feedback-warning: #b3701a; /* Warning state — re-synced from light (4.8:1 on the dark canvas) */
   --feedback-warningSubtle: #fef3c7; /* Warning background */
   --feedback-warningEmphasis: #fbbf24; /* Warning text */
-  --feedback-error: #e00613; /* Error state — re-synced from light (nu.nl breaking red) */
+  --feedback-error: #b8342c; /* Error state — re-synced from light (muted brick red, 3.3:1 on the dark canvas) */
   --feedback-errorSubtle: #fee2e2; /* Error background */
   --feedback-errorEmphasis: #f87171; /* Error text */
-  --feedback-info: #006cde; /* Info state — re-synced from light (nu.nl link blue) */
+  --feedback-info: #0f766e; /* Info state — re-synced from light (teal.700; the design carries no separate informational blue) */
   --feedback-infoSubtle: #dbeafe; /* Info background */
   --feedback-infoEmphasis: #60a5fa; /* Info text */
   --accent-gradient-start: #3b82f6; /* Accent gradient start — points at the dark-theme action ramp so background-clip:text labels (Tabs active tab) stay legible on the dark canvas (light-theme navy was 1.28:1) */
@@ -49,9 +49,9 @@
   --intent-secondary-default: transparent; /* Secondary action bg */
   --intent-secondary-hover: #1a2244; /* Secondary action hover */
   --intent-secondary-border: #2e3b75; /* Secondary action border */
-  --focus-ring: #006cde; /* Focus ring color — re-synced from light (nu.nl link blue) */
+  --focus-ring: #0f766e; /* Focus ring color — re-synced from light (teal.700) */
   --brand-primary: #7680a9; /* Primary brand color */
-  --brand-secondary: #006cde; /* Secondary brand color (CTA) — re-synced from light (nu.nl link blue) */
+  --brand-secondary: #0d9488; /* Secondary brand color (CTA) — re-synced from light; teal.600, 5.1:1 against the dark canvas */
   --brand-accent: #fbbf24; /* Accent brand color */
   --brand-subtle: #1a2244; /* Subtle brand background */
   --container-max-width-narrow: 720px; /* Long-form reading / forms / articles (~65ch comfortable line length) */
@@ -126,15 +126,15 @@
   --appFooter-background: #0a0e1f; /* Status bar background (matches page; separated by the top rule) */
   --appFooter-text: #7680a9; /* Status bar text */
   --appFooter-border: #1a2244; /* Divider above the status bar */
-  --appFooter-focusRing: #006cde; /* Focus outline colour */
+  --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: #7680a9; /* 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-status-success: #1f7a55; /* Operational status dot */
+  --appFooter-status-warning: #b3701a; /* Degraded status dot */
+  --appFooter-status-error: #b8342c; /* Outage status dot */
   --appFooter-version-text: #7680a9; /* Version stamp colour */
   --appFooter-link-text: #7680a9; /* Utility link colour */
   --appFooter-link-hover: #60a5fa; /* Utility link hover colour */
@@ -145,7 +145,7 @@
   --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-focusRing: #0f766e; /* Focus outline colour */
   --appHeader-iconButton-text: #7680a9; /* Icon button glyph colour */
   --appHeader-iconButton-hover: #060813; /* Icon button hover background */
   --appHeader-iconButton-size: 36px; /* Icon button hit area */
@@ -156,7 +156,7 @@
   --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-background: #b8342c; /* Notification badge background */
   --appHeader-badge-text: #0a0e1f; /* Notification badge count colour */
   --appHeader-avatar-background: #ffffff; /* Account avatar background */
   --appHeader-avatar-text: #0a0e1f; /* Account avatar initials colour */
@@ -185,7 +185,7 @@
   --autocomplete-border-color-hover: #a3a3a3;
   --autocomplete-border-color-focus: #7680a9;
   --autocomplete-border-color-disabled: #e5e5e5;
-  --autocomplete-border-color-error: #e00613;
+  --autocomplete-border-color-error: #b8342c;
   --autocomplete-background-default: #0a0e1f;
   --autocomplete-background-disabled: #f5f5f5;
   --autocomplete-text-default: #ffffff;
@@ -267,7 +267,7 @@
   --avatar-group-ringColor: #0a0e1f; /* Ring color matches canvas */
   --badge-background-primary: #f97316; /* Primary badge background - visible accent color */
   --badge-background-success: #4ade80; /* Success badge background (emphasis shade for white-text contrast) */
-  --badge-background-warning: #d97706; /* Warning badge background (paired with dark text for contrast) */
+  --badge-background-warning: #b3701a; /* Warning badge background (paired with dark text for contrast) */
   --badge-background-danger: #f87171; /* Danger badge background (emphasis shade for white-text contrast) */
   --badge-background-info: #60a5fa; /* Info badge background (emphasis shade for white-text contrast) */
   --badge-text-primary: #ffffff; /* Text on primary badge - white */
@@ -325,7 +325,7 @@
   --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 */
@@ -416,7 +416,7 @@
   --calendar-input-border-color-hover: #a3a3a3;
   --calendar-input-border-color-focus: #7680a9;
   --calendar-input-border-color-disabled: #e5e5e5;
-  --calendar-input-border-color-error: #e00613;
+  --calendar-input-border-color-error: #b8342c;
   --calendar-input-background-default: #0a0e1f;
   --calendar-input-background-disabled: #f5f5f5;
   --calendar-input-text-default: #ffffff;
@@ -512,9 +512,9 @@
   --checkbox-border-color-hover: #2e3b75;
   --checkbox-border-color-checked: #3b82f6; /* Accent color when checked */
   --checkbox-border-color-checkedHover: #60a5fa; /* Checked + hover — keeps filled look so checkmark stays visible (WCAG 1.4.11) */
-  --checkbox-border-color-focus: #006cde;
+  --checkbox-border-color-focus: #0f766e;
   --checkbox-border-color-disabled: #1a2244;
-  --checkbox-border-color-error: #e00613;
+  --checkbox-border-color-error: #b8342c;
   --checkbox-background-default: transparent; /* Transparent to inherit page background */
   --checkbox-background-checked: #3b82f6; /* Brand accent when checked */
   --checkbox-background-checkedHover: #60a5fa; /* Checked + hover — keeps filled look so the white checkmark remains legible */
@@ -525,7 +525,7 @@
   --checkbox-label-color-default: #ffffff;
   --checkbox-label-color-disabled: #7680a9;
   --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 */
@@ -621,9 +621,9 @@
   --confirmDialog-header-borderColor: #1a2244; /* Header bottom border color */
   --confirmDialog-header-title-color: #ffffff; /* 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-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: #ffffff; /* Message text color */
   --confirmDialog-message-fontSize: 16px; /* Message font size */
   --confirmDialog-overlay-background: rgba(0, 0, 0, 0.6); /* Modal overlay backdrop color */
@@ -642,7 +642,7 @@
   --confirmPopup-message-color: #ffffff; /* 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 */
@@ -682,7 +682,7 @@
   --corporateFooter-textMuted: #7680a9; /* Muted footer text (tagline, copyright) */
   --corporateFooter-heading: #ffffff; /* Column titles / brand */
   --corporateFooter-border: #1a2244; /* Divider above the bottom bar */
-  --corporateFooter-focusRing: #006cde; /* Focus outline colour */
+  --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 */
@@ -712,7 +712,7 @@
   --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-focusRing: #0f766e; /* Focus outline colour */
   --corporateHeader-link-text: #ffffff; /* Primary nav link colour */
   --corporateHeader-link-hover: #60a5fa; /* Primary nav link hover colour */
   --corporateHeader-link-radius: 2px; /* Nav link radius */
@@ -884,7 +884,7 @@
   --dropdown-border-color-hover: #a3a3a3;
   --dropdown-border-color-focus: #7680a9;
   --dropdown-border-color-disabled: #e5e5e5;
-  --dropdown-border-color-error: #e00613;
+  --dropdown-border-color-error: #b8342c;
   --dropdown-background-default: #0a0e1f;
   --dropdown-background-disabled: #f5f5f5;
   --dropdown-background-hover: #0a0e1f;
@@ -925,7 +925,7 @@
   --editor-border-color-hover: #a3a3a3;
   --editor-border-color-focus: #7680a9;
   --editor-border-color-disabled: #e5e5e5;
-  --editor-border-color-error: #e00613;
+  --editor-border-color-error: #b8342c;
   --editor-background-default: #0a0e1f;
   --editor-background-disabled: #f5f5f5;
   --editor-toolbar-padding-x: 10px;
@@ -1000,7 +1000,7 @@
   --fileUpload-fileList-fileSize-color: #7680a9; /* File size color */
   --fileUpload-fileList-fileSize-size: 12px; /* File size font size */
   --fileUpload-fileList-removeButton-color-default: #7680a9; /* Remove button color */
-  --fileUpload-fileList-removeButton-color-hover: #e00613; /* Remove button hover 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: #11162d; /* Galleria container background */
@@ -1112,7 +1112,7 @@
   --input-chips-border-color-hover: #a3a3a3; /* Hover border color */
   --input-chips-border-color-focus: #7680a9; /* Focus border color */
   --input-chips-border-color-disabled: #e5e5e5; /* Disabled border color */
-  --input-chips-border-color-error: #e00613; /* Error/invalid border color */
+  --input-chips-border-color-error: #b8342c; /* Error/invalid border color */
   --input-chips-background-default: #0a0e1f; /* Default background */
   --input-chips-background-disabled: #f5f5f5; /* Disabled background */
   --input-chips-text-default: #ffffff; /* Default text color */
@@ -1165,7 +1165,7 @@
   --input-mask-border-color-hover: #a3a3a3; /* Hover border color */
   --input-mask-border-color-focus: #7680a9; /* Focus border color */
   --input-mask-border-color-disabled: #e5e5e5; /* Disabled border color */
-  --input-mask-border-color-error: #e00613; /* Error/invalid border color */
+  --input-mask-border-color-error: #b8342c; /* Error/invalid border color */
   --input-mask-background-default: #0a0e1f; /* Default background */
   --input-mask-background-disabled: #f5f5f5; /* Disabled background */
   --input-mask-background-hover: #0a0e1f; /* Hover background */
@@ -1188,7 +1188,7 @@
   --inputNumber-border-color-hover: #a3a3a3;
   --inputNumber-border-color-focus: #7680a9;
   --inputNumber-border-color-disabled: #e5e5e5;
-  --inputNumber-border-color-error: #e00613;
+  --inputNumber-border-color-error: #b8342c;
   --inputNumber-background-default: #0a0e1f;
   --inputNumber-background-disabled: #f5f5f5;
   --inputNumber-text-default: #ffffff;
@@ -1219,12 +1219,12 @@
   --input-otp-cell-border-color-focus: #7680a9; /* 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-border-color-error: #b8342c; /* Error cell border color */
   --input-otp-cell-text-default: #ffffff; /* Default text color */
   --input-otp-cell-text-disabled: #7680a9; /* Disabled text color */
   --input-otp-cell-text-mask: #ffffff; /* 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 */
@@ -1289,7 +1289,7 @@
   --knob-valueText-color-default: #ffffff; /* Default value color */
   --knob-valueText-color-disabled: #7680a9; /* 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 */
@@ -1440,14 +1440,14 @@
   --message-text-info: #60a5fa; /* Info message text color */
   --message-text-warn: #fbbf24; /* Warning message text color */
   --message-text-error: #f87171; /* 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-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: #7680a9; /* Close button icon color */
   --message-closeButton-hoverColor: #ffffff; /* Close button icon hover color */
   --meter-group-track-height: 8px; /* Height of the meter track */
@@ -1465,9 +1465,9 @@
   --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: #7680a9; /* 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-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;
@@ -1483,7 +1483,7 @@
   --multi-select-border-color-hover: #a3a3a3;
   --multi-select-border-color-focus: #7680a9;
   --multi-select-border-color-disabled: #e5e5e5;
-  --multi-select-border-color-error: #e00613;
+  --multi-select-border-color-error: #b8342c;
   --multi-select-background-default: #0a0e1f;
   --multi-select-background-disabled: #f5f5f5;
   --multi-select-background-hover: #0a0e1f;
@@ -1627,7 +1627,7 @@
   --paginator-nav-radius: 5px; /* Nav button border radius */
   --paginator-info-color: #7680a9; /* 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 */
@@ -1745,7 +1745,7 @@
   --promotionFooter-border: #1a2244; /* Divider above the slim bar */
   --promotionFooter-heading: #ffffff; /* Brand text */
   --promotionFooter-textMuted: #7680a9; /* Copyright text */
-  --promotionFooter-focusRing: #006cde; /* Focus outline colour */
+  --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 */
@@ -1770,7 +1770,7 @@
   --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-focusRing: #0f766e; /* Focus outline colour */
   --promotionHeader-link-text: #ffffff; /* Anchor link colour */
   --promotionHeader-link-hover: #60a5fa; /* Anchor link hover colour */
   --promotionHeader-link-radius: 2px; /* Link radius */
@@ -1795,9 +1795,9 @@
   --radio-border-color-default: #242e5c; /* Default unchecked border */
   --radio-border-color-hover: #2e3b75;
   --radio-border-color-checked: #3b82f6; /* Accent color when checked */
-  --radio-border-color-focus: #006cde;
+  --radio-border-color-focus: #0f766e;
   --radio-border-color-disabled: #1a2244;
-  --radio-border-color-error: #e00613;
+  --radio-border-color-error: #b8342c;
   --radio-border-color-checkedHover: #60a5fa; /* 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: #3b82f6; /* Brand accent when checked */
@@ -1809,7 +1809,7 @@
   --radio-label-color-default: #ffffff;
   --radio-label-color-disabled: #7680a9;
   --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 */
@@ -1856,7 +1856,7 @@
   --relationMatrix-cell-glyph-danger: #f87171; /* Glyph/text colour — danger tone */
   --relationMatrix-cell-glyph-info: #60a5fa; /* Glyph/text colour — info tone */
   --relationMatrix-cell-hoverBackground: #060813; /* Cell hover background — only when interactive */
-  --relationMatrix-cell-focusOutline: #006cde; /* Cell focus outline colour — only when interactive */
+  --relationMatrix-cell-focusOutline: #0f766e; /* Cell focus outline colour — only when interactive */
   --relationMatrix-legend-color: #7680a9; /* Legend label colour */
   --relationMatrix-legend-fontSize: 12px; /* Legend label size */
   --relationMatrix-legend-gap: 16px; /* Gap between legend items */
@@ -1904,7 +1904,7 @@
   --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;
@@ -1964,7 +1964,7 @@
   --selectButton-text-selected: #0a0e1f; /* Selected text color */
   --selectButton-text-disabled: #7680a9; /* 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 */
@@ -2040,7 +2040,7 @@
   --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;
@@ -2105,7 +2105,7 @@
   --split-button-menu-item-icon-color: #7680a9;
   --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;
@@ -2195,7 +2195,7 @@
   --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: #15803d;
-  --tag-background-warning: #d97706; /* Warning status tag (paired with dark text for contrast) */
+  --tag-background-warning: #b3701a; /* Warning status tag (paired with dark text for contrast) */
   --tag-background-danger: #b91c1c;
   --tag-background-info: #1d4ed8;
   --tag-text-brand: #ffffff; /* Text on brand background */
@@ -2283,9 +2283,9 @@
   --timeline-event-description-color: #7680a9; /* Event description color */
   --timeline-event-description-fontSize: 14px; /* Event description font size */
   --timeline-colors-primary: #7680a9; /* 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-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 */
@@ -2297,20 +2297,20 @@
   --toast-background-error: #fee2e2; /* Error toast background */
   --toast-border-width: 1px; /* Toast border width */
   --toast-border-color-default: #1a2244; /* 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-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: #7680a9; /* 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-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: #ffffff; /* Summary text color */
@@ -2331,10 +2331,10 @@
   --toast-progress-height: 3px; /* Progress bar height */
   --toast-progress-background: #060813; /* Progress bar track background */
   --toast-progress-fill-default: #7680a9; /* 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-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 */
@@ -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 */
@@ -2449,7 +2449,7 @@
   --tree-select-border-color-hover: #a3a3a3;
   --tree-select-border-color-focus: #7680a9;
   --tree-select-border-color-disabled: #e5e5e5;
-  --tree-select-border-color-error: #e00613;
+  --tree-select-border-color-error: #b8342c;
   --tree-select-background-default: #0a0e1f;
   --tree-select-background-disabled: #f5f5f5;
   --tree-select-background-hover: #0a0e1f;