@keenmate/pure-admin-core 2.5.0 → 2.7.0

package/dist/css/main.css

@@ -2629,6 +2629,19 @@ p {
   padding: 0;
 }
 
+:where(a) {
+  color: var(--pa-link-color);
+  text-decoration: underline;
+}
+
+:where(a:hover) {
+  color: var(--pa-link-color-hover);
+}
+
+:where(a:visited) {
+  color: var(--pa-link-color-visited);
+}
+
 ul, ol {
   margin: 0 0 1.6rem 0;
   padding: 0;
@@ -2692,7 +2705,7 @@ body::before {
   left: 0;
   right: 0;
   bottom: 0;
-  background: radial-gradient(circle at 20% 80%, rgba(0, 123, 255, 0.03) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(0, 123, 255, 0.03) 0%, transparent 50%);
+  background: radial-gradient(circle at 20% 80%, color-mix(in srgb, var(--pa-accent) 3%, transparent) 0%, transparent 50%), radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--pa-accent) 3%, transparent) 0%, transparent 50%);
   pointer-events: none;
   z-index: -1;
 }
@@ -3132,6 +3145,7 @@ body.loaded .pa-sidebar__label {
 }
 .pa-sidebar__submenu > .pa-sidebar__item > .pa-sidebar__link--active {
   background-color: var(--pa-sidebar-submenu-active-bg);
+  color: var(--pa-sidebar-submenu-active-text);
   border-inline-end-color: var(--pa-accent);
 }
 .pa-sidebar__submenu > .pa-sidebar__item > .pa-sidebar__toggle {
@@ -3271,6 +3285,7 @@ body.loaded .pa-sidebar__chevron {
 .sidebar-hidden .pa-layout__sidebar--icon-collapse .pa-sidebar__submenu:hover .pa-sidebar__link--active,
 .sidebar-hidden .pa-layout__sidebar--icon-collapse .pa-sidebar__submenu:hover .pa-sidebar__toggle--active {
   background-color: var(--pa-sidebar-submenu-active-bg);
+  color: var(--pa-sidebar-submenu-active-text);
 }
 .sidebar-hidden .pa-layout__sidebar--icon-collapse .pa-sidebar__item:hover > .pa-sidebar__submenu .pa-sidebar__icon,
 .sidebar-hidden .pa-layout__sidebar--icon-collapse .pa-sidebar__submenu:hover .pa-sidebar__icon {
@@ -5664,11 +5679,11 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
   border-top: none !important;
 }
 .pa-card--live-up {
-  background-color: rgba(40, 167, 69, 0.1);
+  background-color: color-mix(in srgb, var(--pa-positive) 10%, transparent);
   transition: background-color 0.3s ease;
 }
 .pa-card--live-down {
-  background-color: rgba(220, 53, 69, 0.1);
+  background-color: color-mix(in srgb, var(--pa-negative) 10%, transparent);
   transition: background-color 0.3s ease;
 }
 .pa-card--live-neutral {
@@ -5826,7 +5841,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
 }
 .pa-card__tab:hover {
   color: var(--pa-text-color-1);
-  background-color: rgba(0, 123, 255, 0.05);
+  background-color: color-mix(in srgb, var(--pa-accent) 5%, transparent);
 }
 .pa-card__tab--active {
   color: var(--pa-accent);
@@ -5856,7 +5871,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
   transition: all 0.1s ease-out;
 }
 .pa-card__tabs--inline .pa-card__tab:hover {
-  background-color: rgba(0, 123, 255, 0.05);
+  background-color: color-mix(in srgb, var(--pa-accent) 5%, transparent);
   color: var(--pa-text-color-1);
 }
 .pa-card__tabs--inline .pa-card__tab--active {
@@ -5923,11 +5938,11 @@ a.pa-card p {
 }
 .pa-tabs__item:hover {
   color: var(--pa-text-color-1);
-  background-color: rgba(0, 123, 255, 0.05);
+  background-color: color-mix(in srgb, var(--pa-accent) 5%, transparent);
 }
 .pa-tabs__item--active {
-  color: #007bff;
-  border-bottom-color: #007bff;
+  color: var(--pa-accent);
+  border-bottom-color: var(--pa-accent);
   font-weight: 600;
 }
 .pa-tabs__item i {
@@ -5953,8 +5968,8 @@ a.pa-card p {
   background-color: var(--pa-main-bg);
 }
 .pa-tabs--pills .pa-tabs__item:hover {
-  background-color: rgba(0, 123, 255, 0.1);
-  border-color: rgba(0, 123, 255, 0.3);
+  background-color: color-mix(in srgb, var(--pa-accent) 10%, transparent);
+  border-color: color-mix(in srgb, var(--pa-accent) 30%, transparent);
   color: var(--pa-text-color-1);
 }
 .pa-tabs--pills .pa-tabs__item--active {
@@ -5976,7 +5991,7 @@ a.pa-card p {
   padding: 0.8rem 1.2rem;
 }
 .pa-tabs--boxed .pa-tabs__item:hover {
-  background-color: rgba(0, 123, 255, 0.1);
+  background-color: color-mix(in srgb, var(--pa-accent) 10%, transparent);
   color: var(--pa-text-color-1);
 }
 .pa-tabs--boxed .pa-tabs__item--active {
@@ -6008,11 +6023,11 @@ a.pa-card p {
   min-height: 4rem;
 }
 .pa-tabs--vertical .pa-tabs__item:hover {
-  background-color: rgba(0, 123, 255, 0.05);
+  background-color: color-mix(in srgb, var(--pa-accent) 5%, transparent);
 }
 .pa-tabs--vertical .pa-tabs__item--active {
-  border-inline-end-color: #007bff;
-  background-color: rgba(0, 123, 255, 0.1);
+  border-inline-end-color: var(--pa-accent);
+  background-color: color-mix(in srgb, var(--pa-accent) 10%, transparent);
 }
 .pa-tabs--vertical .pa-tabs__item i {
   width: 2.4rem;
@@ -6204,7 +6219,7 @@ a.pa-card p {
   height: 4rem;
 }
 .pa-tabs__container--card .pa-tabs__overflow-toggle:hover {
-  background-color: rgba(0, 123, 255, 0.05);
+  background-color: color-mix(in srgb, var(--pa-accent) 5%, transparent);
   color: var(--pa-text-color-1);
 }
 .pa-tabs__container--card .pa-tabs__overflow-toggle--has-active {
@@ -6248,10 +6263,10 @@ a.pa-card p {
   white-space: nowrap;
 }
 .pa-tabs__container--card .pa-tabs__overflow-menu .pa-tabs__item:hover {
-  background-color: rgba(0, 123, 255, 0.05);
+  background-color: color-mix(in srgb, var(--pa-accent) 5%, transparent);
 }
 .pa-tabs__container--card .pa-tabs__overflow-menu .pa-tabs__item--active {
-  background-color: rgba(0, 123, 255, 0.1);
+  background-color: color-mix(in srgb, var(--pa-accent) 10%, transparent);
   border-bottom: none;
 }
 .pa-tabs__vertical-layout {
@@ -6295,20 +6310,24 @@ a.pa-card p {
   font-size: 2rem;
 }
 .pa-stat__icon--primary {
-  background-color: rgba(0, 123, 255, 0.1);
-  color: #007bff;
+  background-color: var(--pa-accent-light);
+  color: var(--pa-accent);
 }
 .pa-stat__icon--success {
-  background-color: rgba(40, 167, 69, 0.1);
-  color: #28a745;
+  background-color: var(--pa-success-bg-light);
+  color: var(--pa-success-bg);
 }
 .pa-stat__icon--warning {
-  background-color: rgba(255, 193, 7, 0.1);
-  color: #ffc107;
+  background-color: var(--pa-warning-bg-light);
+  color: var(--pa-warning-bg);
+}
+.pa-stat__icon--danger {
+  background-color: var(--pa-danger-bg-light);
+  color: var(--pa-danger-bg);
 }
 .pa-stat__icon--info {
-  background-color: rgba(23, 162, 184, 0.1);
-  color: #17a2b8;
+  background-color: var(--pa-info-bg-light);
+  color: var(--pa-info-bg);
 }
 .pa-stat__content {
   flex: 1;
@@ -6347,19 +6366,28 @@ a.pa-card p {
   font-size: 1.2rem;
   font-weight: 600;
 }
+.pa-stat--hero .pa-stat__change--very-positive, .pa-stat--hero-compact .pa-stat__change--very-positive {
+  color: var(--pa-very-positive);
+}
 .pa-stat--hero .pa-stat__change--positive, .pa-stat--hero-compact .pa-stat__change--positive {
-  color: #28a745;
+  color: var(--pa-positive);
+}
+.pa-stat--hero .pa-stat__change--neutral, .pa-stat--hero-compact .pa-stat__change--neutral {
+  color: var(--pa-neutral);
 }
 .pa-stat--hero .pa-stat__change--negative, .pa-stat--hero-compact .pa-stat__change--negative {
-  color: #dc3545;
+  color: var(--pa-negative);
 }
-.pa-stat--hero .pa-stat__change--neutral, .pa-stat--hero-compact .pa-stat__change--neutral {
-  color: var(--pa-text-color-2);
+.pa-stat--hero .pa-stat__change--very-negative, .pa-stat--hero-compact .pa-stat__change--very-negative {
+  color: var(--pa-very-negative);
 }
 .pa-stat--square {
+  container-type: inline-size;
   display: flex;
-  align-items: center;
-  justify-content: space-between;
+  flex-wrap: wrap;
+  align-content: space-between;
+  align-items: baseline;
+  column-gap: 0.15em;
   padding: 2.4rem;
   min-height: 12.8rem;
   min-width: 12.8rem;
@@ -6374,41 +6402,32 @@ a.pa-card p {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 .pa-stat--square .pa-stat__number {
-  font-size: clamp(4.8rem, 8vw, 7.2rem);
+  font-size: clamp(3.2rem, 25cqi, 9.6rem);
   font-weight: 700;
-  line-height: 1.1;
+  line-height: 1;
   color: inherit;
-  z-index: 2px;
-  position: relative;
   text-shadow: 0 4px 8px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.15);
   filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
   word-break: keep-all;
   white-space: nowrap;
 }
 .pa-stat--square .pa-stat__symbol {
-  font-size: clamp(6.4rem, 10vw, 9.6rem);
+  font-size: clamp(1.6rem, 12cqi, 4.8rem);
   font-weight: 700;
-  line-height: 1.1;
-  opacity: 0.12;
+  line-height: 1;
   color: inherit;
-  position: absolute;
-  right: 2.4rem;
-  top: 50%;
-  transform: translateY(-50%);
-  z-index: 0;
+  opacity: 0.85;
+  word-break: keep-all;
+  white-space: nowrap;
 }
 .pa-stat--square .pa-stat__label {
-  position: absolute;
-  bottom: 1.6rem;
-  left: 2.4rem;
+  flex-basis: 100%;
   font-size: 1.2rem;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   font-weight: 500;
   color: inherit;
   opacity: 0.8;
-  z-index: 2;
-  max-width: calc(100% - 4.8rem);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -6503,21 +6522,21 @@ a.pa-card p {
 }
 .pa-list-basic--icon li::before {
   content: "✓";
-  color: #28a745;
+  color: var(--pa-success);
   font-weight: 600;
   flex-shrink: 0;
 }
 .pa-list-basic--icon.pa-list-basic--danger li::before {
   content: "✗";
-  color: #dc3545;
+  color: var(--pa-danger);
 }
 .pa-list-basic--icon.pa-list-basic--info li::before {
   content: "→";
-  color: #17a2b8;
+  color: var(--pa-info);
 }
 .pa-list-basic--icon.pa-list-basic--warning li::before {
   content: "!";
-  color: #ffc107;
+  color: var(--pa-warning);
 }
 
 .pa-list-ordered {
@@ -6773,7 +6792,7 @@ a.pa-card p {
 }
 .pa-composite-badge__button:focus {
   outline: none;
-  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pa-danger) 25%, transparent);
 }
 
 /* ========================================
@@ -6823,7 +6842,7 @@ a.pa-card p {
   box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
 }
 .pa-composite-badge--success .pa-composite-badge__icon {
-  background-color: #28a745;
+  background-color: #22c55e;
   color: #ffffff;
 }
 .pa-composite-badge--success .pa-composite-badge__label {
@@ -6834,17 +6853,17 @@ a.pa-card p {
   background-color: rgb(194.0245901639, 229.4754098361, 202.5327868852);
 }
 .pa-composite-badge--success .pa-composite-badge__button {
-  background-color: #28a745;
+  background-color: #22c55e;
   color: #ffffff;
 }
 .pa-composite-badge--success .pa-composite-badge__button:hover {
-  background-color: rgb(30.1449275362, 125.8550724638, 52);
+  background-color: rgb(26.4935064935, 153.5064935065, 73.2467532468);
 }
 .pa-composite-badge--success .pa-composite-badge__button:focus {
   box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
 }
 .pa-composite-badge--danger .pa-composite-badge__icon {
-  background-color: #dc3545;
+  background-color: #ef4444;
   color: #ffffff;
 }
 .pa-composite-badge--danger .pa-composite-badge__label {
@@ -6855,17 +6874,17 @@ a.pa-card p {
   background-color: rgb(244.2021276596, 193.2978723404, 197.9255319149);
 }
 .pa-composite-badge--danger .pa-composite-badge__button {
-  background-color: #dc3545;
+  background-color: #ef4444;
   color: #ffffff;
 }
 .pa-composite-badge--danger .pa-composite-badge__button:hover {
-  background-color: rgb(189.2151898734, 32.7848101266, 47.7721518987);
+  background-color: rgb(234.9802955665, 21.0197044335, 21.0197044335);
 }
 .pa-composite-badge--danger .pa-composite-badge__button:focus {
   box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
 }
 .pa-composite-badge--warning .pa-composite-badge__icon {
-  background-color: #ffc107;
+  background-color: #f97316;
   color: #212529;
 }
 .pa-composite-badge--warning .pa-composite-badge__label {
@@ -6876,11 +6895,11 @@ a.pa-card p {
   background-color: rgb(255, 236.88, 179.5);
 }
 .pa-composite-badge--warning .pa-composite-badge__button {
-  background-color: #ffc107;
+  background-color: #f97316;
   color: #212529;
 }
 .pa-composite-badge--warning .pa-composite-badge__button:hover {
-  background-color: rgb(211, 158.25, 0);
+  background-color: rgb(214.4769874477, 91.129707113, 5.5230125523);
 }
 .pa-composite-badge--warning .pa-composite-badge__button:focus {
   box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
@@ -6955,13 +6974,13 @@ a.pa-card p {
   background-color: #6c757d;
 }
 .pa-composite-badge--success .pa-composite-badge__icon {
-  background-color: #28a745;
+  background-color: #22c55e;
 }
 .pa-composite-badge--danger .pa-composite-badge__icon {
-  background-color: #dc3545;
+  background-color: #ef4444;
 }
 .pa-composite-badge--warning .pa-composite-badge__icon {
-  background-color: #ffc107;
+  background-color: #f97316;
   color: #212529;
 }
 .pa-composite-badge--info .pa-composite-badge__icon {
@@ -7037,7 +7056,7 @@ a.pa-card p {
   background-color: rgb(51, 149.4, 255);
 }
 .pa-composite-badge--btn-primary .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pa-btn-primary-bg) 25%, transparent);
 }
 .pa-composite-badge--btn-secondary .pa-composite-badge__button {
   background-color: #6c757d;
@@ -7046,26 +7065,26 @@ a.pa-card p {
   background-color: #545b62;
 }
 .pa-composite-badge--btn-secondary .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(108, 117, 125, 0.25);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pa-btn-secondary-bg) 25%, transparent);
 }
 .pa-composite-badge--btn-success .pa-composite-badge__button {
-  background-color: #28a745;
+  background-color: #22c55e;
 }
 .pa-composite-badge--btn-success .pa-composite-badge__button:hover {
-  background-color: rgb(30.1449275362, 125.8550724638, 52);
+  background-color: rgb(26.4935064935, 153.5064935065, 73.2467532468);
 }
 .pa-composite-badge--btn-success .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.25);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pa-success) 25%, transparent);
 }
 .pa-composite-badge--btn-warning .pa-composite-badge__button {
-  background-color: #ffc107;
+  background-color: #f97316;
   color: #212529;
 }
 .pa-composite-badge--btn-warning .pa-composite-badge__button:hover {
-  background-color: rgb(211, 158.25, 0);
+  background-color: rgb(214.4769874477, 91.129707113, 5.5230125523);
 }
 .pa-composite-badge--btn-warning .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.25);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pa-warning) 25%, transparent);
 }
 .pa-composite-badge--btn-info .pa-composite-badge__button {
   background-color: #17a2b8;
@@ -7074,7 +7093,7 @@ a.pa-card p {
   background-color: rgb(17.3333333333, 122.0869565217, 138.6666666667);
 }
 .pa-composite-badge--btn-info .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(23, 162, 184, 0.25);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pa-info) 25%, transparent);
 }
 .pa-composite-badge--btn-light .pa-composite-badge__button {
   background-color: #f8f9fa;
@@ -7084,7 +7103,7 @@ a.pa-card p {
   background-color: #e9ecef;
 }
 .pa-composite-badge--btn-light .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(248, 249, 250, 0.25);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pa-btn-light-bg) 25%, transparent);
 }
 .pa-composite-badge--btn-dark .pa-composite-badge__button {
   background-color: #343a40;
@@ -7093,7 +7112,7 @@ a.pa-card p {
   background-color: #1d2124;
 }
 .pa-composite-badge--btn-dark .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(52, 58, 64, 0.25);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pa-btn-dark-bg) 25%, transparent);
 }
 
 /* ========================================
@@ -7173,17 +7192,17 @@ a.pa-card p {
   background-color: var(--pa-accent-light);
 }
 .pa-label--secondary {
-  background-color: rgba(108, 117, 125, 0.1);
-  color: #6c757d;
-  border-color: #6c757d;
+  background-color: color-mix(in srgb, var(--pa-btn-secondary-bg) 10%, transparent);
+  color: var(--pa-btn-secondary-bg);
+  border-color: var(--pa-btn-secondary-bg);
 }
 .pa-label--secondary.pa-label--outline {
   background-color: transparent;
-  color: #6c757d;
-  border-color: #6c757d;
+  color: var(--pa-btn-secondary-bg);
+  border-color: var(--pa-btn-secondary-bg);
 }
 .pa-label--secondary.pa-label--outline:hover {
-  background-color: rgba(108, 117, 125, 0.1);
+  background-color: color-mix(in srgb, var(--pa-btn-secondary-bg) 10%, transparent);
 }
 .pa-label--success {
   background-color: var(--pa-success-bg-light);
@@ -7770,15 +7789,16 @@ a.pa-card p {
 .pa-btn-split {
   position: relative;
   display: inline-flex;
-  border-radius: var(--pa-border-radius);
-  overflow: hidden;
-}
-.pa-btn-split .pa-btn {
-  border-radius: 0;
 }
-.pa-btn-split .pa-btn:first-child {
+.pa-btn-split > .pa-btn:first-child {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
   border-inline-end: none;
 }
+.pa-btn-split > .pa-btn-split__toggle {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
 .pa-btn-split__toggle {
   border-inline-start: 1px solid rgba(255, 255, 255, 0.25);
   padding-inline: 0;
@@ -7908,13 +7928,13 @@ a.pa-card p {
   border-top-color: #6c757d;
 }
 .pa-spinner--success {
-  border-top-color: #28a745;
+  border-top-color: #22c55e;
 }
 .pa-spinner--danger {
-  border-top-color: #dc3545;
+  border-top-color: #ef4444;
 }
 .pa-spinner--warning {
-  border-top-color: #ffc107;
+  border-top-color: #f97316;
 }
 .pa-spinner--info {
   border-top-color: #17a2b8;
@@ -8782,8 +8802,8 @@ a.pa-card p {
 }
 .pa-alert--primary {
   color: var(--pa-accent);
-  background-color: rgba(0, 123, 255, 0.08);
-  border-color: rgba(0, 123, 255, 0.2);
+  background-color: color-mix(in srgb, var(--pa-accent) 8%, transparent);
+  border-color: color-mix(in srgb, var(--pa-accent) 20%, transparent);
 }
 .pa-alert--secondary {
   color: var(--pa-text-color-2);
@@ -9053,7 +9073,7 @@ a.pa-card p {
 }
 .pa-callout--primary {
   border-inline-start-color: var(--pa-accent);
-  background-color: rgba(0, 123, 255, 0.08);
+  background-color: color-mix(in srgb, var(--pa-accent) 8%, transparent);
 }
 .pa-callout--secondary {
   border-inline-start-color: var(--pa-text-color-2);
@@ -9728,7 +9748,7 @@ a.pa-card p {
 }
 .pa-input-wrapper__clear:hover {
   opacity: 1;
-  color: #dc3545;
+  color: var(--pa-danger);
 }
 .pa-input-wrapper__clear:focus {
   outline: none;
@@ -9803,16 +9823,16 @@ a.pa-card p {
 }
 .pa-search-highlight__field {
   display: inline;
-  background-color: rgba(0, 123, 255, 0.15);
-  color: #007bff;
+  background-color: color-mix(in srgb, var(--pa-accent) 15%, transparent);
+  color: var(--pa-accent);
   padding: 0.2rem 0.4rem;
   border-radius: var(--pa-border-radius-sm);
   font-weight: 500;
 }
 .pa-search-highlight__operator {
   display: inline;
-  background-color: rgba(40, 167, 69, 0.15);
-  color: #28a745;
+  background-color: color-mix(in srgb, var(--pa-success) 15%, transparent);
+  color: var(--pa-success);
   padding: 0.2rem 0.4rem;
   border-radius: var(--pa-border-radius-sm);
   font-weight: 500;
@@ -9963,24 +9983,24 @@ a.pa-card p {
   font-weight: 500;
 }
 .pa-inline-query-token--field {
-  background-color: rgba(0, 123, 255, 0.15);
+  background-color: color-mix(in srgb, var(--pa-accent) 15%, transparent);
   color: var(--pa-text-color-1);
 }
 .pa-inline-query-token--field.pa-inline-query-token--invalid {
-  background-color: rgba(220, 53, 69, 0.15);
+  background-color: color-mix(in srgb, var(--pa-danger) 15%, transparent);
   color: var(--pa-text-color-1);
   text-decoration: wavy underline;
 }
 .pa-inline-query-token--operator {
-  background-color: rgba(var(--pa-text-color-2), 0.15);
+  background-color: color-mix(in srgb, var(--pa-text-color-2) 15%, transparent);
   color: var(--pa-text-color-1);
 }
 .pa-inline-query-token--value {
-  background-color: rgba(40, 167, 69, 0.15);
+  background-color: color-mix(in srgb, var(--pa-success) 15%, transparent);
   color: var(--pa-text-color-1);
 }
 .pa-inline-query-token--keyword {
-  background-color: rgba(255, 193, 7, 0.15);
+  background-color: color-mix(in srgb, var(--pa-warning) 15%, transparent);
   color: var(--pa-text-color-1);
   font-style: italic;
 }
@@ -10034,7 +10054,7 @@ a.pa-card p {
   flex-shrink: 0;
   font-size: 1.2rem;
   padding: 0.2rem 0.6rem;
-  background-color: rgba(var(--pa-text-color-2), 0.1);
+  background-color: color-mix(in srgb, var(--pa-text-color-2) 10%, transparent);
   color: var(--pa-text-color-2);
   border-radius: var(--pa-border-radius-sm);
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -10263,12 +10283,12 @@ web-multiselect {
   cursor: pointer;
 }
 .pa-file-dropzone:hover {
-  border-color: #007bff;
-  background: rgba(0, 123, 255, 0.05);
+  border-color: var(--pa-accent);
+  background: color-mix(in srgb, var(--pa-accent) 5%, transparent);
 }
 .pa-file-dropzone--active {
-  border-color: #007bff;
-  background: rgba(0, 123, 255, 0.1);
+  border-color: var(--pa-accent);
+  background: color-mix(in srgb, var(--pa-accent) 10%, transparent);
   border-style: solid;
 }
 .pa-file-dropzone__input {
@@ -10294,7 +10314,7 @@ web-multiselect {
   margin-bottom: 0.4rem;
 }
 .pa-file-dropzone__text strong {
-  color: #007bff;
+  color: var(--pa-accent);
   font-weight: 600;
 }
 .pa-file-dropzone__hint {
@@ -10333,7 +10353,7 @@ web-multiselect {
   transition: all 0.1s ease-out;
 }
 .pa-file-dropzone__file-card:hover {
-  border-color: #007bff;
+  border-color: var(--pa-accent);
   box-shadow: 0 1.6px 4.8px rgba(0, 0, 0, 0.1);
 }
 .pa-file-dropzone__file-card-icon {
@@ -10361,7 +10381,7 @@ web-multiselect {
   width: 2rem;
   height: 2rem;
   border: none;
-  background: #dc3545;
+  background: var(--pa-danger);
   color: #ffffff;
   cursor: pointer;
   border-radius: 50%;
@@ -10381,7 +10401,7 @@ web-multiselect {
 }
 .pa-file-dropzone__file-card-remove:hover {
   transform: scale(1.1);
-  background: rgba(220, 53, 69, 0.9);
+  background: color-mix(in srgb, var(--pa-danger) 90%, transparent);
 }
 .pa-file-dropzone__image-card {
   position: relative;
@@ -10422,7 +10442,7 @@ web-multiselect {
   opacity: 1;
 }
 .pa-file-dropzone__image-card-remove:hover {
-  background: #dc3545;
+  background: var(--pa-danger);
   transform: scale(1.1);
 }
 .pa-file-dropzone__summary {
@@ -10441,7 +10461,7 @@ web-multiselect {
   transition: background-color 0.1s ease-out;
 }
 .pa-file-dropzone__summary-line:hover {
-  background-color: rgba(0, 123, 255, 0.1);
+  background-color: color-mix(in srgb, var(--pa-accent) 10%, transparent);
 }
 .pa-file-dropzone__summary-line:not(:last-child)::after {
   content: " • ";
@@ -10451,7 +10471,7 @@ web-multiselect {
 }
 .pa-file-dropzone__summary-count {
   font-weight: 500;
-  color: #007bff;
+  color: var(--pa-accent);
 }
 .pa-file-dropzone__summary-size {
   color: var(--pa-text-color-2);
@@ -10525,7 +10545,7 @@ web-multiselect {
   justify-content: center;
 }
 .pa-file-popover__close:hover {
-  background: rgba(var(--pa-text-color-2), 0.1);
+  background: color-mix(in srgb, var(--pa-text-color-2) 10%, transparent);
   color: var(--pa-text-color-1);
 }
 .pa-file-popover__body {
@@ -10559,10 +10579,10 @@ web-multiselect {
   color: var(--pa-text-color-1);
 }
 .pa-file-popover__table tbody tr:hover {
-  background: rgba(0, 123, 255, 0.05);
+  background: color-mix(in srgb, var(--pa-accent) 5%, transparent);
 }
 .pa-file-popover__table tbody tr.uploading {
-  background: rgba(0, 123, 255, 0.1);
+  background: color-mix(in srgb, var(--pa-accent) 10%, transparent);
 }
 .pa-file-popover__file-name {
   overflow: hidden;
@@ -10579,14 +10599,14 @@ web-multiselect {
 }
 .pa-file-popover__progress-bar {
   height: 6.4px;
-  background: rgba(0, 123, 255, 0.2);
+  background: color-mix(in srgb, var(--pa-accent) 20%, transparent);
   border-radius: var(--pa-border-radius-sm);
   overflow: hidden;
   margin-bottom: 0.4rem;
 }
 .pa-file-popover__progress-fill {
   height: 100%;
-  background: #007bff;
+  background: var(--pa-accent);
   border-radius: var(--pa-border-radius-sm);
   transition: width 0.48s ease;
 }
@@ -10603,13 +10623,13 @@ web-multiselect {
   color: var(--pa-text-color-2);
 }
 .pa-file-popover__status--uploading {
-  color: #007bff;
+  color: var(--pa-accent);
 }
 .pa-file-popover__status--complete {
-  color: #28a745;
+  color: var(--pa-success);
 }
 .pa-file-popover__status--error {
-  color: #dc3545;
+  color: var(--pa-danger);
 }
 .pa-file-popover__remove-cell {
   text-align: center;
@@ -10621,7 +10641,7 @@ web-multiselect {
   height: 3.2rem;
   border: 1px solid var(--pa-border-color);
   background: var(--pa-card-bg);
-  color: #dc3545;
+  color: var(--pa-danger);
   cursor: pointer;
   border-radius: var(--pa-border-radius-sm);
   font-size: 2.4rem;
@@ -10633,9 +10653,9 @@ web-multiselect {
   font-weight: 700;
 }
 .pa-file-popover__remove-btn:hover {
-  background: #dc3545;
+  background: var(--pa-danger);
   color: #ffffff;
-  border-color: #dc3545;
+  border-color: var(--pa-danger);
   transform: scale(1.1);
 }
 
@@ -10672,9 +10692,9 @@ web-multiselect {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(0, 123, 255, 0.1);
+  background: color-mix(in srgb, var(--pa-accent) 10%, transparent);
   border-radius: var(--pa-border-radius);
-  color: #007bff;
+  color: var(--pa-accent);
 }
 .pa-file-item__info {
   flex: 1;
@@ -10710,8 +10730,8 @@ web-multiselect {
   justify-content: center;
 }
 .pa-file-item__remove:hover {
-  background: rgba(220, 53, 69, 0.1);
-  color: #dc3545;
+  background: color-mix(in srgb, var(--pa-danger) 10%, transparent);
+  color: var(--pa-danger);
 }
 .pa-file-item__remove::before {
   content: "×";
@@ -10758,7 +10778,7 @@ web-multiselect {
   justify-content: center;
 }
 .pa-file-preview__remove:hover {
-  background: #dc3545;
+  background: var(--pa-danger);
   transform: scale(1.1);
 }
 .pa-file-preview__remove::before {
@@ -10783,13 +10803,13 @@ web-multiselect {
 }
 .pa-file-progress__bar {
   height: 6.4px;
-  background: rgba(0, 123, 255, 0.2);
+  background: color-mix(in srgb, var(--pa-accent) 20%, transparent);
   border-radius: var(--pa-border-radius-sm);
   overflow: hidden;
 }
 .pa-file-progress__fill {
   height: 100%;
-  background: #007bff;
+  background: var(--pa-accent);
   border-radius: var(--pa-border-radius-sm);
   transition: width 0.48s ease;
 }
@@ -10806,10 +10826,10 @@ web-multiselect {
   font-weight: 600;
 }
 .pa-file-progress__status--complete {
-  color: #28a745;
+  color: var(--pa-success);
 }
 .pa-file-progress__status--error {
-  color: #dc3545;
+  color: var(--pa-danger);
 }
 
 .pa-file-icon--pdf::before {
@@ -10841,9 +10861,9 @@ web-multiselect {
 }
 
 .pa-file-dropzone-overlay {
-  background: rgba(0, 123, 255, 0.15);
+  background: color-mix(in srgb, var(--pa-accent) 15%, transparent);
   backdrop-filter: blur(3.2px);
-  border: 4.8px dashed #007bff;
+  border: 4.8px dashed var(--pa-accent);
   border-radius: var(--pa-border-radius);
   display: flex;
   align-items: center;
@@ -10861,7 +10881,7 @@ web-multiselect {
 .pa-file-dropzone-overlay__text {
   font-size: 2rem;
   font-weight: 600;
-  color: #007bff;
+  color: var(--pa-accent);
 }
 
 /* ========================================
@@ -10980,7 +11000,7 @@ web-multiselect {
   cursor: not-allowed;
 }
 .pa-checkbox-list__item--locked:hover {
-  background-color: rgba(255, 193, 7, 0.05);
+  background-color: color-mix(in srgb, var(--pa-warning) 5%, transparent);
 }
 .pa-checkbox-list__item--locked .pa-checkbox-list__checkbox {
   cursor: not-allowed;
@@ -10991,7 +11011,7 @@ web-multiselect {
   position: relative;
 }
 .pa-checkbox-list__item--locked .pa-checkbox-list__label .pa-checkbox-list__text {
-  color: #ffc107;
+  color: var(--pa-warning);
 }
 .pa-checkbox-list__item--locked .pa-checkbox-list__label .pa-checkbox-list__text::before {
   content: "🔒 ";
@@ -11801,7 +11821,7 @@ tbody tr:hover .pa-comparison-table__copy {
   opacity: 1;
 }
 .pa-comparison-table__changed {
-  background-color: rgba(244, 114, 182, 0.15);
+  background-color: color-mix(in srgb, #ec4899 15%, transparent);
   position: relative;
 }
 .pa-comparison-table__changed::before {
@@ -11814,19 +11834,19 @@ tbody tr:hover .pa-comparison-table__copy {
   background-color: #ec4899;
 }
 .pa-comparison-table__changed--solid {
-  background-color: rgba(244, 114, 182, 0.25) !important;
+  background-color: color-mix(in srgb, #ec4899 25%, transparent) !important;
 }
 .pa-comparison-table__changed--solid::before {
   content: none;
 }
 .pa-comparison-table__conflict {
-  background-color: rgba(251, 146, 60, 0.15);
+  background-color: color-mix(in srgb, #f97316 15%, transparent);
 }
 .pa-comparison-table__conflict::before {
   background-color: #f97316;
 }
 .pa-comparison-table__conflict--solid {
-  background-color: rgba(251, 146, 60, 0.25) !important;
+  background-color: color-mix(in srgb, #f97316 25%, transparent) !important;
 }
 .pa-comparison-table__conflict--solid::before {
   content: none;
@@ -12523,6 +12543,7 @@ code {
 .pa-modal__footer {
   padding: 1.2rem 1.6rem;
   border-top: 1px solid var(--pa-border-color);
+  border-radius: 0 0 var(--pa-border-radius) var(--pa-border-radius);
   display: flex;
   justify-content: flex-end;
   gap: 1.2rem;
@@ -12565,6 +12586,55 @@ code {
   color: var(--pa-btn-danger-text);
 }
 
+.pa-modal--banded .pa-modal__header {
+  background-color: var(--pa-modal-band-bg);
+  color: var(--pa-modal-band-text);
+  border-bottom-color: var(--pa-modal-band-border);
+}
+.pa-modal--banded .pa-modal__header .pa-modal__title {
+  color: var(--pa-modal-band-text);
+}
+.pa-modal--banded .pa-modal__footer {
+  background-color: var(--pa-modal-band-bg);
+  color: var(--pa-modal-band-text);
+  border-top-color: var(--pa-modal-band-border);
+}
+.pa-modal--banded .pa-modal__header .pa-btn,
+.pa-modal--banded .pa-modal__footer .pa-btn {
+  background-color: var(--pa-text-color-1);
+  color: var(--pa-modal-content-bg);
+  border-color: var(--pa-text-color-1);
+}
+.pa-modal--banded .pa-modal__header .pa-btn:hover,
+.pa-modal--banded .pa-modal__footer .pa-btn:hover {
+  background-color: color-mix(in srgb, var(--pa-text-color-1) 85%, transparent);
+  border-color: color-mix(in srgb, var(--pa-text-color-1) 85%, transparent);
+}
+
+.pa-modal--banded.pa-modal--success {
+  --pa-modal-band-bg: var(--pa-alert-success-bg);
+  --pa-modal-band-text: var(--pa-alert-success-text);
+  --pa-modal-band-border: var(--pa-alert-success-border);
+}
+
+.pa-modal--banded.pa-modal--warning {
+  --pa-modal-band-bg: var(--pa-alert-warning-bg);
+  --pa-modal-band-text: var(--pa-alert-warning-text);
+  --pa-modal-band-border: var(--pa-alert-warning-border);
+}
+
+.pa-modal--banded.pa-modal--danger {
+  --pa-modal-band-bg: var(--pa-alert-danger-bg);
+  --pa-modal-band-text: var(--pa-alert-danger-text);
+  --pa-modal-band-border: var(--pa-alert-danger-border);
+}
+
+.pa-modal--banded.pa-modal--info {
+  --pa-modal-band-bg: var(--pa-alert-info-bg);
+  --pa-modal-band-text: var(--pa-alert-info-text);
+  --pa-modal-band-border: var(--pa-alert-info-border);
+}
+
 .pa-modal__body--scrollable {
   max-height: 60vh;
   overflow-y: auto;
@@ -13264,51 +13334,51 @@ code {
   width: 15px;
   height: 15px;
   background: var(--pa-main-bg);
-  border: 1px solid #007bff;
-  border-radius: 50%;
-  box-shadow: 3px 3px 0 rgba(0, 123, 255, 0.3);
+  border: 1px solid var(--pa-accent);
+  border-radius: 30%;
+  box-shadow: 3px 3px 0 color-mix(in srgb, var(--pa-accent) 50%, transparent);
 }
 .pa-timeline--simple .pa-timeline__item--primary::before {
-  border-color: #007bff;
-  box-shadow: 3px 3px 0 rgba(0, 123, 255, 0.3);
+  border-color: var(--pa-btn-primary-bg);
+  box-shadow: 3px 3px 0 color-mix(in srgb, var(--pa-btn-primary-bg) 50%, transparent);
 }
 .pa-timeline--simple .pa-timeline__item--success::before {
-  border-color: #28a745;
-  box-shadow: 3px 3px 0 rgba(40, 167, 69, 0.3);
+  border-color: var(--pa-success);
+  box-shadow: 3px 3px 0 color-mix(in srgb, var(--pa-success) 50%, transparent);
 }
 .pa-timeline--simple .pa-timeline__item--warning::before {
-  border-color: #ffc107;
-  box-shadow: 3px 3px 0 rgba(255, 193, 7, 0.3);
+  border-color: var(--pa-warning);
+  box-shadow: 3px 3px 0 color-mix(in srgb, var(--pa-warning) 50%, transparent);
 }
 .pa-timeline--simple .pa-timeline__item--danger::before {
-  border-color: #dc3545;
-  box-shadow: 3px 3px 0 rgba(220, 53, 69, 0.3);
+  border-color: var(--pa-danger);
+  box-shadow: 3px 3px 0 color-mix(in srgb, var(--pa-danger) 50%, transparent);
 }
 .pa-timeline--simple .pa-timeline__item--info::before {
-  border-color: #17a2b8;
-  box-shadow: 3px 3px 0 rgba(23, 162, 184, 0.3);
+  border-color: var(--pa-info);
+  box-shadow: 3px 3px 0 color-mix(in srgb, var(--pa-info) 50%, transparent);
 }
 .pa-timeline--simple .pa-timeline__item--secondary::before {
   border-color: var(--pa-text-color-2);
-  box-shadow: 3px 3px 0 rgba(var(--pa-text-color-2), 0.3);
+  box-shadow: 3px 3px 0 color-mix(in srgb, var(--pa-text-color-2) 50%, transparent);
 }
 .pa-timeline--simple .pa-timeline__item--filled::before {
-  background: #007bff;
+  background: var(--pa-accent);
 }
 .pa-timeline--simple .pa-timeline__item--filled.pa-timeline__item--primary::before {
-  background: #007bff;
+  background: var(--pa-btn-primary-bg);
 }
 .pa-timeline--simple .pa-timeline__item--filled.pa-timeline__item--success::before {
-  background: #28a745;
+  background: var(--pa-success);
 }
 .pa-timeline--simple .pa-timeline__item--filled.pa-timeline__item--warning::before {
-  background: #ffc107;
+  background: var(--pa-warning);
 }
 .pa-timeline--simple .pa-timeline__item--filled.pa-timeline__item--danger::before {
-  background: #dc3545;
+  background: var(--pa-danger);
 }
 .pa-timeline--simple .pa-timeline__item--filled.pa-timeline__item--info::before {
-  background: #17a2b8;
+  background: var(--pa-info);
 }
 .pa-timeline--simple .pa-timeline__item--filled.pa-timeline__item--secondary::before {
   background: var(--pa-text-color-2);
@@ -13336,7 +13406,7 @@ code {
   content: "";
   position: absolute;
   width: 2px;
-  background: #007bff;
+  background: var(--pa-accent);
   top: 0;
   bottom: 0;
   left: 50%;
@@ -13381,7 +13451,7 @@ code {
   height: 2px;
   top: calc(50% - 1px);
   right: 8px;
-  background: #007bff;
+  background: var(--pa-accent);
   z-index: 1;
 }
 .pa-timeline--alternating .pa-timeline__item:nth-child(even) {
@@ -13417,7 +13487,7 @@ code {
   height: 2px;
   top: calc(50% - 1px);
   left: 8px;
-  background: #007bff;
+  background: var(--pa-accent);
   z-index: 1;
 }
 .pa-timeline--alternating .pa-timeline__date {
@@ -13427,7 +13497,7 @@ code {
   text-align: center;
   font-size: 1.4rem;
   font-weight: 700;
-  color: #007bff;
+  color: var(--pa-accent);
   text-transform: uppercase;
   letter-spacing: 1px;
   z-index: 1;
@@ -13440,15 +13510,15 @@ code {
   width: 40px;
   height: 40px;
   top: calc(50% - 20px);
-  background: #ffc107;
-  border: 2px solid #007bff;
+  background: var(--pa-warning);
+  border: 2px solid var(--pa-accent);
   border-radius: 50%;
   font-size: 1.8rem;
-  color: #007bff;
+  color: var(--pa-accent);
   z-index: 1;
 }
 .pa-timeline--alternating .pa-timeline__content {
-  background: #ffc107;
+  background: var(--pa-warning);
   position: relative;
 }
 .pa-timeline--alternating .pa-timeline__content h3 {
@@ -13461,7 +13531,7 @@ code {
   margin: 0;
   font-size: 1.6rem;
   line-height: 1.8;
-  color: #856404;
+  color: var(--pa-warning-text);
 }
 @media (max-width: 767px) {
   .pa-timeline--alternating:not(.pa-timeline--keep-layout)::after {
@@ -13599,7 +13669,7 @@ code {
   line-height: 1.8;
 }
 .pa-timeline--feed .pa-timeline__content a {
-  color: #007bff;
+  color: var(--pa-accent);
   text-decoration: none;
   font-weight: 500;
 }
@@ -14202,11 +14272,11 @@ code {
   background: #fff;
 }
 .pa-logic-tree__block--and {
-  border-color: #ffc107;
+  border-color: var(--pa-warning);
   background: linear-gradient(135deg, #fff8e1 0%, #ffffff 100%);
 }
 .pa-logic-tree__block--or {
-  border-color: #17a2b8;
+  border-color: var(--pa-info);
   background: linear-gradient(135deg, #e3f2fd 0%, #ffffff 100%);
 }
 .pa-logic-tree__block--group {
@@ -14407,7 +14477,7 @@ code {
   min-width: 1.6rem;
   height: 1.6rem;
   padding: 0 0.4rem;
-  background-color: #dc3545;
+  background-color: #ef4444;
   color: #ffffff;
   font-size: 1rem;
   font-weight: 600;
@@ -14456,14 +14526,14 @@ code {
   background: none;
   border: none;
   padding: 0;
-  color: #007bff;
+  color: var(--pa-accent);
   font-size: 1.4rem;
   font-weight: 500;
   cursor: pointer;
   transition: color 0.1s ease-out;
 }
 .pa-notifications__mark-read:hover {
-  color: rgba(0, 123, 255, 0.12);
+  color: var(--pa-accent-hover);
 }
 
 .pa-notifications__list {
@@ -14489,10 +14559,10 @@ code {
   background-color: var(--pa-accent-light);
 }
 .pa-notifications__item--unread {
-  background-color: rgba(0, 123, 255, 0.05);
+  background-color: color-mix(in srgb, var(--pa-accent) 5%, transparent);
 }
 .pa-notifications__item--unread:hover {
-  background-color: rgba(0, 123, 255, 0.1);
+  background-color: color-mix(in srgb, var(--pa-accent) 10%, transparent);
 }
 
 .pa-notifications__icon-wrapper {
@@ -14502,29 +14572,29 @@ code {
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 50%;
   font-size: 1.6rem;
-  background-color: var(--pa-accent-light);
   color: var(--pa-accent);
+  border: 1px solid transparent;
+  border-radius: var(--pa-border-radius);
 }
 .pa-notifications__icon-wrapper--primary {
-  background-color: rgba(0, 123, 255, 0.1);
-  color: #007bff;
+  border-color: var(--pa-btn-primary-bg);
+  color: var(--pa-btn-primary-bg);
 }
 .pa-notifications__icon-wrapper--success {
-  background-color: rgba(40, 167, 69, 0.1);
-  color: #28a745;
+  border-color: var(--pa-success);
+  color: var(--pa-success);
 }
 .pa-notifications__icon-wrapper--warning {
-  background-color: rgba(255, 193, 7, 0.1);
-  color: #ffc107;
+  border-color: var(--pa-warning);
+  color: var(--pa-warning);
 }
 .pa-notifications__icon-wrapper--danger {
-  background-color: rgba(220, 53, 69, 0.1);
-  color: #dc3545;
+  border-color: var(--pa-danger);
+  color: var(--pa-danger);
 }
 .pa-notifications__icon-wrapper--secondary {
-  background-color: rgba(var(--pa-text-color-2), 0.1);
+  border-color: var(--pa-text-color-2);
   color: var(--pa-text-color-2);
 }
 
@@ -14563,14 +14633,14 @@ code {
   text-align: center;
 }
 .pa-notifications__footer a {
-  color: #007bff;
+  color: var(--pa-accent);
   font-size: 1.4rem;
   font-weight: 500;
   text-decoration: none;
   transition: color 0.1s ease-out;
 }
 .pa-notifications__footer a:hover {
-  color: rgba(0, 123, 255, 0.12);
+  color: var(--pa-accent-hover);
 }
 
 @media (max-width: 768px) {
@@ -14702,7 +14772,7 @@ code {
   display: flex;
   gap: 0.8rem;
   justify-content: flex-end;
-  background-color: rgba(225, 229, 233, 0.3);
+  background-color: color-mix(in srgb, var(--pa-border-color) 30%, transparent);
 }
 .pa-popconfirm__actions .pa-btn {
   font-size: 1.2rem;
@@ -15261,7 +15331,7 @@ code {
 .pa-field--copied .pa-field__value::after {
   content: "Copied!" !important;
   opacity: 1 !important;
-  color: var(--pa-color-4, #28a745);
+  color: var(--pa-success);
 }
 
 .pa-field-group {
@@ -15521,16 +15591,20 @@ code {
   font-size: 1.3rem;
 }
 .pa-fields--chips .pa-field__value--success {
-  background: var(--pa-success-bg-light, rgba(0, 200, 80, 0.12));
-  color: var(--pa-success-color, #28a745);
+  background: var(--pa-success-bg-light);
+  color: var(--pa-success);
 }
 .pa-fields--chips .pa-field__value--warning {
-  background: var(--pa-warning-bg-light, rgba(255, 165, 0, 0.12));
-  color: var(--pa-warning-color, #e68a00);
+  background: var(--pa-warning-bg-light);
+  color: var(--pa-warning);
 }
 .pa-fields--chips .pa-field__value--danger {
-  background: var(--pa-danger-bg-light, rgba(255, 0, 0, 0.12));
-  color: var(--pa-danger-color, #dc3545);
+  background: var(--pa-danger-bg-light);
+  color: var(--pa-danger);
+}
+.pa-fields--chips .pa-field__value--info {
+  background: var(--pa-info-bg-light);
+  color: var(--pa-info);
 }
 
 .pa-desc-container {
@@ -15690,7 +15764,7 @@ code {
 .pa-desc-table__value--copied::after {
   content: "Copied!" !important;
   opacity: 1 !important;
-  color: var(--pa-color-4, #28a745);
+  color: var(--pa-success);
 }
 
 .pa-dot-leaders {
@@ -15966,7 +16040,7 @@ code {
 .pa-banded__row--copied .pa-banded__value::after {
   content: "Copied!" !important;
   opacity: 1 !important;
-  color: var(--pa-color-4, #28a745);
+  color: var(--pa-success);
 }
 
 .pa-accent-grid {
@@ -15977,19 +16051,19 @@ code {
 .pa-accent-grid__item {
   padding: 0.8rem 1.2rem;
   padding-inline-start: 1.4rem;
-  border-inline-start: 3px solid var(--pa-accent, #3b82f6);
+  border-inline-start: 3px solid var(--pa-accent);
 }
 .pa-accent-grid__item--success {
-  border-inline-start-color: var(--pa-success-color, #28a745);
+  border-inline-start-color: var(--pa-success);
 }
 .pa-accent-grid__item--warning {
-  border-inline-start-color: var(--pa-warning-color, #e68a00);
+  border-inline-start-color: var(--pa-warning);
 }
 .pa-accent-grid__item--danger {
-  border-inline-start-color: var(--pa-danger-color, #dc3545);
+  border-inline-start-color: var(--pa-danger);
 }
 .pa-accent-grid__item--info {
-  border-inline-start-color: var(--pa-info-color, #17a2b8);
+  border-inline-start-color: var(--pa-info);
 }
 .pa-accent-grid__label {
   font-size: 1.1rem;
@@ -16056,7 +16130,7 @@ code {
 .pa-accent-grid__item--copied .pa-accent-grid__value::after {
   content: "Copied!" !important;
   opacity: 1 !important;
-  color: var(--pa-color-4, #28a745);
+  color: var(--pa-success);
 }
 
 /* ========================================
@@ -16066,7 +16140,7 @@ code {
 .pa-progress {
   width: 100%;
   height: 0.8rem;
-  background: rgba(0, 0, 0, 0.08);
+  background: var(--pa-surface-track);
   border-radius: var(--pa-border-radius);
   overflow: hidden;
   position: relative;
@@ -16074,7 +16148,7 @@ code {
 .pa-progress__fill {
   height: 100%;
   width: var(--value, 0%);
-  background: #007bff;
+  background: var(--pa-accent);
   border-radius: inherit;
   transition: width 0.25s ease;
 }
@@ -16099,16 +16173,16 @@ code {
   height: 1.2rem;
 }
 .pa-progress--success > .pa-progress__fill {
-  background: #28a745;
+  background: var(--pa-success);
 }
 .pa-progress--warning > .pa-progress__fill {
-  background: #ffc107;
+  background: var(--pa-warning);
 }
 .pa-progress--danger > .pa-progress__fill {
-  background: #dc3545;
+  background: var(--pa-danger);
 }
 .pa-progress--info > .pa-progress__fill {
-  background: #17a2b8;
+  background: var(--pa-info);
 }
 .pa-progress--rounded {
   border-radius: 50rem;
@@ -16141,28 +16215,28 @@ code {
   height: 1.2rem;
   border-radius: var(--pa-border-radius);
   overflow: hidden;
-  background: rgba(0, 0, 0, 0.08);
+  background: var(--pa-surface-track);
 }
 .pa-stacked-bar__segment {
   height: 100%;
   width: var(--value, 0%);
   transition: width 0.25s ease;
-  background: #007bff;
+  background: var(--pa-accent);
 }
 .pa-stacked-bar__segment--success {
-  background: #28a745;
+  background: var(--pa-success);
 }
 .pa-stacked-bar__segment--warning {
-  background: #ffc107;
+  background: var(--pa-warning);
 }
 .pa-stacked-bar__segment--danger {
-  background: #dc3545;
+  background: var(--pa-danger);
 }
 .pa-stacked-bar__segment--info {
-  background: #17a2b8;
+  background: var(--pa-info);
 }
 .pa-stacked-bar__segment--secondary {
-  background: #6c757d;
+  background: var(--pa-btn-secondary-bg);
 }
 .pa-stacked-bar__legend {
   display: flex;
@@ -16184,22 +16258,22 @@ code {
   flex-shrink: 0;
 }
 .pa-stacked-bar__legend-swatch--primary {
-  background: #007bff;
+  background: var(--pa-accent);
 }
 .pa-stacked-bar__legend-swatch--success {
-  background: #28a745;
+  background: var(--pa-success);
 }
 .pa-stacked-bar__legend-swatch--warning {
-  background: #ffc107;
+  background: var(--pa-warning);
 }
 .pa-stacked-bar__legend-swatch--danger {
-  background: #dc3545;
+  background: var(--pa-danger);
 }
 .pa-stacked-bar__legend-swatch--info {
-  background: #17a2b8;
+  background: var(--pa-info);
 }
 .pa-stacked-bar__legend-swatch--secondary {
-  background: #6c757d;
+  background: var(--pa-btn-secondary-bg);
 }
 .pa-stacked-bar--sm {
   height: 0.5rem;
@@ -16215,7 +16289,7 @@ code {
   width: 8rem;
   height: 8rem;
   border-radius: 50%;
-  background: conic-gradient(#007bff calc(var(--value, 0) * 3.6deg), rgba(0, 0, 0, 0.08) 0deg);
+  background: conic-gradient(var(--pa-accent) calc(var(--value, 0) * 3.6deg), var(--pa-surface-track) 0deg);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -16225,7 +16299,7 @@ code {
   width: 70%;
   height: 70%;
   border-radius: 50%;
-  background: #ffffff;
+  background: var(--pa-card-bg);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -16263,57 +16337,65 @@ code {
   font-size: 1.2rem;
 }
 .pa-progress-ring--success {
-  background: conic-gradient(#28a745 calc(var(--value, 0) * 3.6deg), rgba(0, 0, 0, 0.08) 0deg);
+  background: conic-gradient(var(--pa-success) calc(var(--value, 0) * 3.6deg), var(--pa-surface-track) 0deg);
 }
 .pa-progress-ring--warning {
-  background: conic-gradient(#ffc107 calc(var(--value, 0) * 3.6deg), rgba(0, 0, 0, 0.08) 0deg);
+  background: conic-gradient(var(--pa-warning) calc(var(--value, 0) * 3.6deg), var(--pa-surface-track) 0deg);
 }
 .pa-progress-ring--danger {
-  background: conic-gradient(#dc3545 calc(var(--value, 0) * 3.6deg), rgba(0, 0, 0, 0.08) 0deg);
+  background: conic-gradient(var(--pa-danger) calc(var(--value, 0) * 3.6deg), var(--pa-surface-track) 0deg);
 }
 .pa-progress-ring--info {
-  background: conic-gradient(#17a2b8 calc(var(--value, 0) * 3.6deg), rgba(0, 0, 0, 0.08) 0deg);
+  background: conic-gradient(var(--pa-info) calc(var(--value, 0) * 3.6deg), var(--pa-surface-track) 0deg);
 }
 
 .pa-gauge {
-  width: 12rem;
-  height: calc(12rem / 2);
-  border-radius: 12rem 12rem 0 0;
-  overflow: hidden;
-  background: conic-gradient(from 0.75turn, #007bff calc(var(--value, 0) * 1.8deg), rgba(0, 0, 0, 0.08) 0deg);
+  --pa-gauge-fill: var(--pa-accent);
+  --pa-gauge-size: 12rem;
+  width: var(--pa-gauge-size);
+  height: calc(var(--pa-gauge-size) / 2);
+  margin-bottom: 1.6rem;
   position: relative;
   flex-shrink: 0;
 }
+.pa-gauge::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: var(--pa-gauge-size) var(--pa-gauge-size) 0 0;
+  background: conic-gradient(from 0.75turn at 50% 100%, var(--pa-gauge-fill) calc(var(--value, 0) * 1.8deg), var(--pa-surface-track) 0deg);
+  -webkit-mask-image: radial-gradient(circle farthest-side at 50% 100%, transparent 0 70%, #000 70%);
+  mask-image: radial-gradient(circle farthest-side at 50% 100%, transparent 0 70%, #000 70%);
+}
 .pa-gauge__inner {
   position: absolute;
   bottom: 0;
   left: 15%;
   right: 15%;
   height: 70%;
-  border-radius: 12rem 12rem 0 0;
-  background: #ffffff;
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-end;
-  padding-bottom: 0.4rem;
+  align-items: flex-end;
+  justify-content: center;
 }
 .pa-gauge__value {
-  font-size: 2.4rem;
+  font-size: 2.8rem;
   font-weight: 700;
   line-height: 1;
   color: var(--pa-text-color-1);
 }
-.pa-gauge__label {
-  font-size: 1.2rem;
-  color: var(--pa-text-color-2);
-  margin-top: 0.4rem;
-}
-.pa-gauge__min, .pa-gauge__max {
+.pa-gauge__label, .pa-gauge__min, .pa-gauge__max {
   position: absolute;
-  bottom: 0;
+  top: 100%;
+  margin-top: 0.4rem;
   font-size: 1rem;
+  line-height: 1.2rem;
   color: var(--pa-text-color-2);
+  white-space: nowrap;
+}
+.pa-gauge__label {
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 1.2rem;
 }
 .pa-gauge__min {
   left: 0;
@@ -16322,19 +16404,19 @@ code {
   right: 0;
 }
 .pa-gauge--success {
-  background: conic-gradient(from 0.75turn, #28a745 calc(var(--value, 0) * 1.8deg), rgba(0, 0, 0, 0.08) 0deg);
+  --pa-gauge-fill: var(--pa-success);
 }
 .pa-gauge--warning {
-  background: conic-gradient(from 0.75turn, #ffc107 calc(var(--value, 0) * 1.8deg), rgba(0, 0, 0, 0.08) 0deg);
+  --pa-gauge-fill: var(--pa-warning);
 }
 .pa-gauge--danger {
-  background: conic-gradient(from 0.75turn, #dc3545 calc(var(--value, 0) * 1.8deg), rgba(0, 0, 0, 0.08) 0deg);
+  --pa-gauge-fill: var(--pa-danger);
 }
 .pa-gauge--info {
-  background: conic-gradient(from 0.75turn, #17a2b8 calc(var(--value, 0) * 1.8deg), rgba(0, 0, 0, 0.08) 0deg);
+  --pa-gauge-fill: var(--pa-info);
 }
-.pa-gauge--zones {
-  background: conic-gradient(from 0.75turn, #28a745 0deg, #28a745 90deg, #ffc107 90deg, #ffc107 135deg, #dc3545 135deg, #dc3545 180deg, rgba(0, 0, 0, 0.08) 180deg);
+.pa-gauge--zones::before {
+  background: conic-gradient(from 0.75turn at 50% 100%, var(--pa-success) 0deg, var(--pa-success) 90deg, var(--pa-warning) 90deg, var(--pa-warning) 135deg, var(--pa-danger) 135deg, var(--pa-danger) 180deg, var(--pa-surface-track) 180deg);
 }
 
 .pa-data-bar {
@@ -16352,31 +16434,31 @@ code {
 .pa-data-bar__track {
   width: 100%;
   height: 0.4rem;
-  background: rgba(0, 0, 0, 0.06);
+  background: var(--pa-surface-track);
   border-radius: var(--pa-border-radius-sm);
   overflow: hidden;
 }
 .pa-data-bar__fill {
   height: 100%;
   width: var(--value, 0%);
-  background: #007bff;
+  background: var(--pa-accent);
   border-radius: inherit;
   transition: width 0.25s ease;
 }
 .pa-data-bar--success .pa-data-bar__fill {
-  background: #28a745;
+  background: var(--pa-success);
 }
 .pa-data-bar--warning .pa-data-bar__fill {
-  background: #ffc107;
+  background: var(--pa-warning);
 }
 .pa-data-bar--danger .pa-data-bar__fill {
-  background: #dc3545;
+  background: var(--pa-danger);
 }
 .pa-data-bar--info .pa-data-bar__fill {
-  background: #17a2b8;
+  background: var(--pa-info);
 }
 .pa-data-bar--negative .pa-data-bar__fill {
-  background: #dc3545;
+  background: var(--pa-danger);
   margin-inline-start: auto;
 }
 
@@ -16388,43 +16470,43 @@ code {
 }
 .pa-heatmap__cell {
   border-radius: var(--pa-border-radius-sm);
-  background: rgba(0, 0, 0, 0.08);
+  background: var(--pa-surface-track);
 }
 .pa-heatmap__cell[data-level="1"] {
-  background: rgba(0, 123, 255, 0.2);
+  background: color-mix(in srgb, var(--pa-accent) 20%, transparent);
 }
 .pa-heatmap__cell[data-level="2"] {
-  background: rgba(0, 123, 255, 0.4);
+  background: color-mix(in srgb, var(--pa-accent) 40%, transparent);
 }
 .pa-heatmap__cell[data-level="3"] {
-  background: rgba(0, 123, 255, 0.65);
+  background: color-mix(in srgb, var(--pa-accent) 65%, transparent);
 }
 .pa-heatmap__cell[data-level="4"] {
-  background: #007bff;
+  background: var(--pa-accent);
 }
 .pa-heatmap--success .pa-heatmap__cell[data-level="1"] {
-  background: rgba(40, 167, 69, 0.2);
+  background: color-mix(in srgb, var(--pa-success) 20%, transparent);
 }
 .pa-heatmap--success .pa-heatmap__cell[data-level="2"] {
-  background: rgba(40, 167, 69, 0.4);
+  background: color-mix(in srgb, var(--pa-success) 40%, transparent);
 }
 .pa-heatmap--success .pa-heatmap__cell[data-level="3"] {
-  background: rgba(40, 167, 69, 0.65);
+  background: color-mix(in srgb, var(--pa-success) 65%, transparent);
 }
 .pa-heatmap--success .pa-heatmap__cell[data-level="4"] {
-  background: #28a745;
+  background: var(--pa-success);
 }
 .pa-heatmap--danger .pa-heatmap__cell[data-level="1"] {
-  background: rgba(220, 53, 69, 0.2);
+  background: color-mix(in srgb, var(--pa-danger) 20%, transparent);
 }
 .pa-heatmap--danger .pa-heatmap__cell[data-level="2"] {
-  background: rgba(220, 53, 69, 0.4);
+  background: color-mix(in srgb, var(--pa-danger) 40%, transparent);
 }
 .pa-heatmap--danger .pa-heatmap__cell[data-level="3"] {
-  background: rgba(220, 53, 69, 0.65);
+  background: color-mix(in srgb, var(--pa-danger) 65%, transparent);
 }
 .pa-heatmap--danger .pa-heatmap__cell[data-level="4"] {
-  background: #dc3545;
+  background: var(--pa-danger);
 }
 .pa-heatmap__legend {
   display: flex;
@@ -16438,19 +16520,19 @@ code {
   width: 1.2rem;
   height: 1.2rem;
   border-radius: var(--pa-border-radius-sm);
-  background: rgba(0, 0, 0, 0.08);
+  background: var(--pa-surface-track);
 }
 .pa-heatmap__legend-cell[data-level="1"] {
-  background: rgba(0, 123, 255, 0.2);
+  background: color-mix(in srgb, var(--pa-accent) 20%, transparent);
 }
 .pa-heatmap__legend-cell[data-level="2"] {
-  background: rgba(0, 123, 255, 0.4);
+  background: color-mix(in srgb, var(--pa-accent) 40%, transparent);
 }
 .pa-heatmap__legend-cell[data-level="3"] {
-  background: rgba(0, 123, 255, 0.65);
+  background: color-mix(in srgb, var(--pa-accent) 65%, transparent);
 }
 .pa-heatmap__legend-cell[data-level="4"] {
-  background: #007bff;
+  background: var(--pa-accent);
 }
 .pa-heatmap--compact {
   grid-template-columns: repeat(53, 1rem);
@@ -16470,22 +16552,22 @@ code {
 .pa-sparkline__bar {
   width: 0.3rem;
   height: var(--value, 50%);
-  background: #007bff;
+  background: var(--pa-accent);
   border-radius: var(--pa-border-radius-sm) var(--pa-border-radius-sm) 0 0;
   transition: height 0.25s ease;
   min-height: 1px;
 }
 .pa-sparkline--success .pa-sparkline__bar {
-  background: #28a745;
+  background: var(--pa-success);
 }
 .pa-sparkline--warning .pa-sparkline__bar {
-  background: #ffc107;
+  background: var(--pa-warning);
 }
 .pa-sparkline--danger .pa-sparkline__bar {
-  background: #dc3545;
+  background: var(--pa-danger);
 }
 .pa-sparkline--info .pa-sparkline__bar {
-  background: #17a2b8;
+  background: var(--pa-info);
 }
 .pa-sparkline--sm {
   height: 2rem;
@@ -16530,7 +16612,7 @@ code {
 .pa-bar-list__bar {
   width: 100%;
   height: 0.4rem;
-  background: rgba(0, 0, 0, 0.06);
+  background: var(--pa-surface-track);
   border-radius: var(--pa-border-radius-sm);
   overflow: hidden;
 }
@@ -16539,21 +16621,21 @@ code {
   display: block;
   height: 100%;
   width: var(--value, 0%);
-  background: #007bff;
+  background: var(--pa-accent);
   border-radius: inherit;
   transition: width 0.25s ease;
 }
 .pa-bar-list--success .pa-bar-list__bar::after {
-  background: #28a745;
+  background: var(--pa-success);
 }
 .pa-bar-list--warning .pa-bar-list__bar::after {
-  background: #ffc107;
+  background: var(--pa-warning);
 }
 .pa-bar-list--danger .pa-bar-list__bar::after {
-  background: #dc3545;
+  background: var(--pa-danger);
 }
 .pa-bar-list--info .pa-bar-list__bar::after {
-  background: #17a2b8;
+  background: var(--pa-info);
 }
 .pa-bar-list--compact {
   gap: 0.8rem;