@keenmate/pure-admin-theme-audi 1.0.0 → 1.1.1

package/dist/audi.css

@@ -136,10 +136,10 @@ figure {
 body {
   margin: 0;
   padding: 0;
-  font-family: "Fira Sans Condensed", "Arial Narrow", "Arial", sans-serif;
+  font-family: var(--base-font-family);
   font-size: 1.6rem;
-  color: var(--pa-text-primary);
-  background-color: var(--pa-primary-bg);
+  color: var(--pa-text-color-1);
+  background-color: var(--pa-main-bg);
   line-height: 1.5;
   overflow-x: hidden;
   overflow-y: scroll;
@@ -152,7 +152,7 @@ body::before {
   left: 0;
   right: 0;
   bottom: 0;
-  background: radial-gradient(circle at 20% 80%, rgba(255, 0, 0, 0.03) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255, 0, 0, 0.03) 0%, transparent 50%);
+  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%);
   pointer-events: none;
   z-index: -1;
 }
@@ -178,14 +178,14 @@ label {
 }
 
 *::-webkit-scrollbar-track {
-  background: var(--pa-primary-bg);
+  background: var(--pa-main-bg);
   border-radius: 3px;
 }
 
 *::-webkit-scrollbar-thumb {
   background: var(--pa-border-color);
   border-radius: 3px;
-  border: 1px solid var(--pa-primary-bg);
+  border: 1px solid var(--pa-main-bg);
 }
 
 *::-webkit-scrollbar-thumb:hover {
@@ -197,13 +197,13 @@ label {
 }
 
 *::-webkit-scrollbar-corner {
-  background: var(--pa-primary-bg);
+  background: var(--pa-main-bg);
 }
 
 /* Firefox */
 * {
   scrollbar-width: thin;
-  scrollbar-color: var(--pa-border-color) var(--pa-primary-bg);
+  scrollbar-color: var(--pa-border-color) var(--pa-main-bg);
 }
 
 /* ========================================
@@ -313,7 +313,7 @@ body.pa-layout--sticky {
 .pa-layout {
   max-width: 100%;
   margin: 4.8rem auto 0;
-  background-color: var(--pa-primary-bg);
+  background-color: var(--pa-main-bg);
   overflow: visible;
   display: flex;
   flex-direction: column;
@@ -454,13 +454,13 @@ body.pa-layout--sticky .pa-layout__inner {
    Sidebar navigation with nested submenus
    ======================================== */
 :root {
-  --pa-sidebar-width: 29rem;
-  --pa-sidebar-min-width: 18rem;
-  --pa-sidebar-max-width: 50rem;
+  --pa-local-sidebar-width: 28.8rem;
+  --pa-local-sidebar-min-width: 18rem;
+  --pa-local-sidebar-max-width: 50rem;
 }
 
 :where(.pa-layout__sidebar) {
-  width: var(--pa-sidebar-width);
+  width: var(--pa-local-sidebar-width);
 }
 
 .pa-layout__sidebar {
@@ -671,7 +671,7 @@ body.loaded .pa-sidebar__chevron {
   opacity: 1;
   overflow: visible !important;
   z-index: 1050;
-  border-right: 1px solid #333333;
+  border-right: 1px solid #e1e5e9;
 }
 
 .sidebar-hidden .pa-layout__sidebar--icon-collapse .pa-sidebar__item {
@@ -717,7 +717,7 @@ body.loaded .pa-sidebar__chevron {
   background-color: var(--pa-sidebar-bg);
   border: 1px solid var(--pa-border-color);
   border-left: none;
-  border-radius: 0 1px 1px 0;
+  border-radius: 0 4px 4px 0;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   white-space: nowrap;
   z-index: 10;
@@ -740,7 +740,7 @@ body.loaded .pa-sidebar__chevron {
   background-color: var(--pa-sidebar-submenu-bg);
   border: 1px solid var(--pa-border-color);
   border-left: none;
-  border-radius: 0 1px 1px 0;
+  border-radius: 0 4px 4px 0;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   z-index: 1001;
 }
@@ -822,7 +822,7 @@ body.loaded .pa-sidebar__chevron {
   background-color: var(--pa-sidebar-submenu-bg);
   border: 1px solid var(--pa-border-color);
   border-left: none;
-  border-radius: 0 1px 1px 0;
+  border-radius: 0 4px 4px 0;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   z-index: 1002;
 }
@@ -846,7 +846,7 @@ body.loaded .pa-sidebar__chevron {
 }
 
 body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse {
-  width: 29rem;
+  width: 28.8rem;
 }
 
 body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__label {
@@ -925,7 +925,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
   color: var(--pa-header-text-secondary);
   font-weight: 500;
   padding: 0.4rem 0.8rem;
-  border-radius: 1px;
+  border-radius: 4px;
   transition: all 0.1s ease-out;
   font-size: 1.4rem;
   display: flex;
@@ -959,7 +959,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
   min-width: 19.2rem;
   background-color: var(--pa-card-bg);
   border: 1px solid var(--pa-border-color);
-  border-radius: 1px;
+  border-radius: 4px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   z-index: 1100;
   padding: 0.4rem 0;
@@ -991,7 +991,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
 .pa-header__dropdown li a {
   display: block;
   padding: 0.8rem 1.6rem;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   border-radius: 0;
   white-space: nowrap;
   text-decoration: none;
@@ -1047,7 +1047,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
   width: 100%;
   height: 2px;
   background-color: var(--pa-header-text);
-  border-radius: 1px;
+  border-radius: 4px;
   transition: all 0.15s ease-out;
   transform-origin: center;
 }
@@ -1082,7 +1082,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
 .theme-switcher select {
   padding: 0.4rem 0.8rem;
   border: 1px solid var(--pa-border-color);
-  border-radius: 1px;
+  border-radius: 4px;
   background-color: var(--pa-header-bg);
   color: var(--pa-header-text);
   font-size: 1.4rem;
@@ -2776,8 +2776,8 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
    ======================================== */
 .pa-card {
   background: var(--pa-card-bg);
-  border: 2px solid var(--pa-border-color);
-  border-radius: 0;
+  border: 1px solid var(--pa-border-color);
+  border-radius: 8px;
   margin-bottom: 1.6rem;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   transition: box-shadow 0.1s ease-out;
@@ -2792,8 +2792,8 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
 .pa-card__header {
   padding: 0.5rem 1rem;
   min-height: 4rem;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
   border-bottom: 1px solid var(--pa-border-color);
   background: var(--pa-card-header-bg);
   display: flex;
@@ -2826,7 +2826,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
 .pa-card__header h4,
 .pa-card__header h5,
 .pa-card__header h6 {
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   font-size: 1.6rem;
 }
 
@@ -2854,7 +2854,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
   text-overflow: ellipsis;
   white-space: nowrap;
   margin: 0;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   font-size: 1.6rem;
   font-weight: 600;
   line-height: 1;
@@ -2876,8 +2876,8 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
 .pa-card__footer {
   padding: 1.2rem 1rem;
   border-top: 1px solid var(--pa-border-color);
-  border-bottom-left-radius: 2px;
-  border-bottom-right-radius: 2px;
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
   background: var(--pa-card-footer-bg);
   display: flex;
   justify-content: space-between;
@@ -2896,7 +2896,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
 }
 
 .pa-card__meta {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-size: 1.4rem;
 }
 
@@ -2986,15 +2986,15 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
   padding: 1.2rem 1rem;
   border: none;
   background: none;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   cursor: pointer;
   transition: all 0.1s ease-out;
   border-bottom: 2px solid transparent;
 }
 
 .pa-card__tab:hover {
-  color: var(--pa-text-primary);
-  background-color: rgba(255, 0, 0, 0.05);
+  color: var(--pa-text-color-1);
+  background-color: rgba(0, 123, 255, 0.05);
 }
 
 .pa-card__tab--active {
@@ -3021,17 +3021,17 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
 .pa-card__tabs--inline .pa-card__tab {
   padding: 0.3rem 0.8rem;
   border: none;
-  border-radius: 1px;
+  border-radius: 4px;
   font-size: 1.4rem;
   background: transparent;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   cursor: pointer;
   transition: all 0.1s ease-out;
 }
 
 .pa-card__tabs--inline .pa-card__tab:hover {
-  background-color: rgba(255, 0, 0, 0.05);
-  color: var(--pa-text-primary);
+  background-color: rgba(0, 123, 255, 0.05);
+  color: var(--pa-text-color-1);
 }
 
 .pa-card__tabs--inline .pa-card__tab--active {
@@ -3050,11 +3050,11 @@ a.pa-card:hover, a.pa-card:visited {
 }
 
 a.pa-card h1, a.pa-card h2, a.pa-card h3, a.pa-card h4, a.pa-card h5, a.pa-card h6 {
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
 }
 
 a.pa-card p {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
 }
 
 .pa-section {
@@ -3062,14 +3062,14 @@ a.pa-card p {
 }
 
 .pa-section h3 {
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   margin-bottom: 1.6rem;
   border-bottom: 2px solid var(--pa-accent);
   padding-bottom: 0.8rem;
 }
 
 .pa-section-title {
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   margin-bottom: 1.6rem;
   border-bottom: 2px solid var(--pa-accent);
   padding-bottom: 0.8rem;
@@ -3091,7 +3091,7 @@ a.pa-card p {
   padding: 0.8rem 1.2rem;
   border: none;
   background: none;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   cursor: pointer;
   transition: all 0.1s ease-out;
   border-bottom: 2px solid transparent;
@@ -3103,13 +3103,13 @@ a.pa-card p {
 }
 
 .pa-tabs__item:hover {
-  color: var(--pa-text-primary);
-  background-color: rgba(255, 0, 0, 0.05);
+  color: var(--pa-text-color-1);
+  background-color: rgba(0, 123, 255, 0.05);
 }
 
 .pa-tabs__item--active {
-  color: #ff0000;
-  border-bottom-color: #ff0000;
+  color: #007bff;
+  border-bottom-color: #007bff;
   font-weight: 600;
 }
 
@@ -3136,15 +3136,15 @@ a.pa-card p {
 }
 
 .pa-tabs--pills .pa-tabs__item {
-  border-radius: 2px;
+  border-radius: 8px;
   border: 1px solid transparent;
-  background-color: var(--pa-primary-bg);
+  background-color: var(--pa-main-bg);
 }
 
 .pa-tabs--pills .pa-tabs__item:hover {
-  background-color: rgba(255, 0, 0, 0.1);
-  border-color: rgba(255, 0, 0, 0.3);
-  color: var(--pa-text-primary);
+  background-color: rgba(0, 123, 255, 0.1);
+  border-color: rgba(0, 123, 255, 0.3);
+  color: var(--pa-text-color-1);
 }
 
 .pa-tabs--pills .pa-tabs__item--active {
@@ -3155,27 +3155,27 @@ a.pa-card p {
 
 .pa-tabs--boxed {
   border: 1px solid var(--pa-border-color);
-  border-radius: 2px;
+  border-radius: 8px;
   padding: 0.4rem;
-  background-color: var(--pa-primary-bg);
+  background-color: var(--pa-main-bg);
   gap: 0.4rem;
 }
 
 .pa-tabs--boxed .pa-tabs__item {
-  border-radius: 1px;
+  border-radius: 4px;
   border: none;
   border-bottom: none;
   padding: 0.8rem 1.2rem;
 }
 
 .pa-tabs--boxed .pa-tabs__item:hover {
-  background-color: rgba(255, 0, 0, 0.1);
-  color: var(--pa-text-primary);
+  background-color: rgba(0, 123, 255, 0.1);
+  color: var(--pa-text-color-1);
 }
 
 .pa-tabs--boxed .pa-tabs__item--active {
   background-color: var(--pa-card-bg);
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
@@ -3195,19 +3195,19 @@ a.pa-card p {
   border-bottom: none;
   border-right: 2px solid transparent;
   padding: 0.8rem;
-  border-radius: 1px 0 0 1px;
+  border-radius: 4px 0 0 4px;
   gap: 1.2rem;
   white-space: nowrap;
   min-height: 4rem;
 }
 
 .pa-tabs--vertical .pa-tabs__item:hover {
-  background-color: rgba(255, 0, 0, 0.05);
+  background-color: rgba(0, 123, 255, 0.05);
 }
 
 .pa-tabs--vertical .pa-tabs__item--active {
-  border-right-color: #ff0000;
-  background-color: rgba(255, 0, 0, 0.1);
+  border-right-color: #007bff;
+  background-color: rgba(0, 123, 255, 0.1);
 }
 
 .pa-tabs--vertical .pa-tabs__item i {
@@ -3263,8 +3263,8 @@ a.pa-card p {
   bottom: 0;
   width: 3.2rem;
   border: none;
-  background: linear-gradient(to right, color-mix(in srgb, var(--pa-primary-bg) 95%, transparent), transparent);
-  color: var(--pa-text-primary);
+  background: linear-gradient(to right, color-mix(in srgb, var(--pa-main-bg) 95%, transparent), transparent);
+  color: var(--pa-text-color-1);
   cursor: pointer;
   z-index: 1;
   display: flex;
@@ -3276,17 +3276,17 @@ a.pa-card p {
 }
 
 .pa-tabs--scrollable .pa-tabs__scroll-btn:hover {
-  background: linear-gradient(to right, var(--pa-primary-bg), color-mix(in srgb, var(--pa-primary-bg) 80%, transparent));
+  background: linear-gradient(to right, var(--pa-main-bg), color-mix(in srgb, var(--pa-main-bg) 80%, transparent));
 }
 
 .pa-tabs--scrollable .pa-tabs__scroll-btn--left {
   left: 0;
-  background: linear-gradient(to right, color-mix(in srgb, var(--pa-primary-bg) 95%, transparent), transparent);
+  background: linear-gradient(to right, color-mix(in srgb, var(--pa-main-bg) 95%, transparent), transparent);
 }
 
 .pa-tabs--scrollable .pa-tabs__scroll-btn--right {
   right: 0;
-  background: linear-gradient(to left, color-mix(in srgb, var(--pa-primary-bg) 95%, transparent), transparent);
+  background: linear-gradient(to left, color-mix(in srgb, var(--pa-main-bg) 95%, transparent), transparent);
 }
 
 .pa-tabs--scrollable .pa-tabs__scroll-btn--visible {
@@ -3330,7 +3330,7 @@ a.pa-card p {
 }
 
 .pa-tabs--border-top .pa-tabs__item--active {
-  border-top-color: #ff0000;
+  border-top-color: #007bff;
   border-bottom-color: transparent;
 }
 
@@ -3354,7 +3354,7 @@ a.pa-card p {
 
 .pa-tabs__container--bordered {
   border: 1px solid var(--pa-border-color);
-  border-radius: 2px;
+  border-radius: 8px;
   padding: 1.6rem 1rem;
   background-color: var(--pa-card-bg);
   margin-bottom: 1.6rem;
@@ -3373,8 +3373,8 @@ a.pa-card p {
 
 .pa-tabs__container--card {
   position: relative;
-  border: 2px solid var(--pa-border-color);
-  border-radius: 0;
+  border: 1px solid var(--pa-border-color);
+  border-radius: 8px;
   background-color: var(--pa-card-bg);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   margin-bottom: 1.6rem;
@@ -3386,8 +3386,8 @@ a.pa-card p {
   background: var(--pa-card-header-bg);
   border-bottom: 1px solid var(--pa-border-color);
   box-sizing: border-box;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
   margin-bottom: 0;
   align-items: center;
   gap: 0.4rem;
@@ -3419,7 +3419,7 @@ a.pa-card p {
   padding: 0;
   border: none;
   background: transparent;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   cursor: pointer;
   transition: all 0.1s ease-out;
   border-left: 1px solid var(--pa-border-color);
@@ -3429,8 +3429,8 @@ a.pa-card p {
 }
 
 .pa-tabs__container--card .pa-tabs__overflow-toggle:hover {
-  background-color: rgba(255, 0, 0, 0.05);
-  color: var(--pa-text-primary);
+  background-color: rgba(0, 123, 255, 0.05);
+  color: var(--pa-text-color-1);
 }
 
 .pa-tabs__container--card .pa-tabs__overflow-toggle--has-active {
@@ -3457,8 +3457,8 @@ a.pa-card p {
   right: 0;
   min-width: 15rem;
   background: var(--pa-card-bg);
-  border: 2px solid var(--pa-border-color);
-  border-radius: 1px;
+  border: 1px solid var(--pa-border-color);
+  border-radius: 4px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   z-index: 1000;
   display: none;
@@ -3480,11 +3480,11 @@ a.pa-card p {
 }
 
 .pa-tabs__container--card .pa-tabs__overflow-menu .pa-tabs__item:hover {
-  background-color: rgba(255, 0, 0, 0.05);
+  background-color: rgba(0, 123, 255, 0.05);
 }
 
 .pa-tabs__container--card .pa-tabs__overflow-menu .pa-tabs__item--active {
-  background-color: rgba(255, 0, 0, 0.1);
+  background-color: rgba(0, 123, 255, 0.1);
   border-bottom: none;
 }
 
@@ -3500,7 +3500,7 @@ a.pa-card p {
 
 .pa-tabs__vertical-layout--bordered {
   border: 1px solid var(--pa-border-color);
-  border-radius: 2px;
+  border-radius: 8px;
   padding: 1.6rem 1rem;
   background-color: var(--pa-card-bg);
   margin-bottom: 1.6rem;
@@ -3527,7 +3527,7 @@ a.pa-card p {
 .pa-stat__icon {
   width: 4.8rem;
   height: 4.8rem;
-  border-radius: 2px;
+  border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3535,23 +3535,23 @@ a.pa-card p {
 }
 
 .pa-stat__icon--primary {
-  background-color: rgba(255, 0, 0, 0.1);
-  color: #ff0000;
+  background-color: rgba(0, 123, 255, 0.1);
+  color: #007bff;
 }
 
 .pa-stat__icon--success {
-  background-color: rgba(0, 204, 68, 0.25);
-  color: #00cc44;
+  background-color: rgba(40, 167, 69, 0.1);
+  color: #28a745;
 }
 
 .pa-stat__icon--warning {
-  background-color: rgba(255, 102, 0, 0.25);
-  color: #ff6600;
+  background-color: rgba(255, 193, 7, 0.1);
+  color: #ffc107;
 }
 
 .pa-stat__icon--info {
-  background-color: rgba(0, 153, 255, 0.25);
-  color: #0099ff;
+  background-color: rgba(23, 162, 184, 0.1);
+  color: #17a2b8;
 }
 
 .pa-stat__content {
@@ -3561,12 +3561,12 @@ a.pa-card p {
 .pa-stat__number {
   font-size: 2.4rem;
   font-weight: 600;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   margin-bottom: 0.4rem;
 }
 
 .pa-stat__label {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-size: 1.4rem;
 }
 
@@ -3581,14 +3581,14 @@ a.pa-card p {
   text-transform: uppercase;
   letter-spacing: 0.05em;
   font-weight: 500;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   margin-bottom: 0.8rem;
 }
 
 .pa-stat--hero .pa-stat__value {
   font-size: 3.2rem;
   font-weight: 700;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   line-height: 1.1;
   margin-bottom: 0.8rem;
 }
@@ -3599,15 +3599,15 @@ a.pa-card p {
 }
 
 .pa-stat--hero .pa-stat__change--positive {
-  color: #00cc44;
+  color: #28a745;
 }
 
 .pa-stat--hero .pa-stat__change--negative {
-  color: #ff0000;
+  color: #dc3545;
 }
 
 .pa-stat--hero .pa-stat__change--neutral {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
 }
 
 .pa-stat--square {
@@ -3618,7 +3618,7 @@ a.pa-card p {
   min-height: 12.8rem;
   min-width: 12.8rem;
   position: relative;
-  border-radius: 1px;
+  border-radius: 4px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   margin: 0.8rem;
   transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;
@@ -3674,33 +3674,33 @@ a.pa-card p {
 }
 
 .pa-stat--square.pa-stat--primary {
-  background-color: #ff0000;
-  color: #1a1a1a;
+  background-color: #007bff;
+  color: #ffffff;
 }
 
 .pa-stat--square.pa-stat--success {
-  background-color: #00cc44;
+  background-color: #28a745;
   color: #ffffff;
 }
 
 .pa-stat--square.pa-stat--info {
-  background-color: #0099ff;
+  background-color: #17a2b8;
   color: #ffffff;
 }
 
 .pa-stat--square.pa-stat--warning {
-  background-color: #ff6600;
-  color: #ffffff;
+  background-color: #ffc107;
+  color: #212529;
 }
 
 .pa-stat--square.pa-stat--danger {
-  background-color: #ff0000;
+  background-color: #dc3545;
   color: #ffffff;
 }
 
 .pa-stat--square.pa-stat--secondary {
-  background-color: var(--pa-text-secondary);
-  color: #1a1a1a;
+  background-color: var(--pa-text-color-2);
+  color: #ffffff;
 }
 
 .pa-kpi-grid {
@@ -3782,24 +3782,24 @@ a.pa-card p {
 
 .pa-list-basic--icon li::before {
   content: "✓";
-  color: #00cc44;
+  color: #28a745;
   font-weight: 600;
   flex-shrink: 0;
 }
 
 .pa-list-basic--icon.pa-list-basic--danger li::before {
   content: "✗";
-  color: #ff0000;
+  color: #dc3545;
 }
 
 .pa-list-basic--icon.pa-list-basic--info li::before {
   content: "→";
-  color: #0099ff;
+  color: #17a2b8;
 }
 
 .pa-list-basic--icon.pa-list-basic--warning li::before {
   content: "!";
-  color: #ff6600;
+  color: #ffc107;
 }
 
 .pa-list-ordered {
@@ -3827,7 +3827,7 @@ a.pa-card p {
 
 .pa-list-definition dt {
   font-weight: 600;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   margin-bottom: 0.4rem;
   margin-top: 1.6rem;
 }
@@ -3839,7 +3839,7 @@ a.pa-card p {
 .pa-list-definition dd {
   margin-left: 2.4rem;
   margin-bottom: 0.8rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   line-height: 1.6;
 }
 
@@ -3876,14 +3876,14 @@ a.pa-card p {
 }
 
 .pa-list__item:hover {
-  background-color: var(--pa-primary-bg);
+  background-color: var(--pa-main-bg);
 }
 
 .pa-list__avatar {
   width: 3.5rem;
   height: 3.5rem;
   border-radius: 50%;
-  background-color: var(--pa-primary-bg);
+  background-color: var(--pa-main-bg);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3896,18 +3896,18 @@ a.pa-card p {
 
 .pa-list__title {
   font-weight: 500;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   margin-bottom: 0.4rem;
 }
 
 .pa-list__subtitle {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-size: 1.4rem;
   margin-bottom: 0.4rem;
 }
 
 .pa-list__meta {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-size: 1.2rem;
 }
 
@@ -3936,7 +3936,7 @@ a.pa-card p {
   text-align: center;
   white-space: nowrap;
   vertical-align: baseline;
-  border-radius: 1px;
+  border-radius: 4px;
   border: 1px solid transparent;
   transition: all 0.1s ease-out;
 }
@@ -4033,7 +4033,7 @@ a.pa-card p {
   height: 2.8rem;
   font-size: 1.2rem;
   font-weight: 500;
-  border-radius: 1px;
+  border-radius: 4px;
   overflow: hidden;
 }
 
@@ -4087,7 +4087,7 @@ a.pa-card p {
 
 .pa-composite-badge__button:focus {
   outline: none;
-  box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.25);
+  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25);
 }
 
 /* ========================================
@@ -4095,61 +4095,61 @@ a.pa-card p {
    Color variations for composite badges
    ======================================== */
 .pa-composite-badge--primary .pa-composite-badge__icon {
-  background-color: #ff0000;
+  background-color: #007bff;
   color: #ffffff;
 }
 
 .pa-composite-badge--primary .pa-composite-badge__label {
-  background-color: rgba(255, 0, 0, 0.25);
-  color: #ff0000;
+  background-color: rgba(0, 123, 255, 0.05);
+  color: #007bff;
 }
 
 .pa-composite-badge--primary .pa-composite-badge__label:hover {
-  background-color: rgba(255, 0, 0, 0.3);
+  background-color: rgba(0, 123, 255, 0.12);
 }
 
 .pa-composite-badge--primary .pa-composite-badge__button {
-  background-color: #ff0000;
+  background-color: #007bff;
   color: #ffffff;
 }
 
 .pa-composite-badge--primary .pa-composite-badge__button:hover {
-  background-color: #ff3333;
+  background-color: rgb(51, 149.4, 255);
 }
 
 .pa-composite-badge--primary .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.3);
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
 }
 
 .pa-composite-badge--secondary .pa-composite-badge__icon {
-  background-color: #333333;
+  background-color: #6c757d;
   color: #ffffff;
 }
 
 .pa-composite-badge--secondary .pa-composite-badge__label {
-  background-color: #0a0a0a;
-  color: var(--pa-text-secondary);
+  background-color: #f8f9fa;
+  color: var(--pa-text-color-2);
 }
 
 .pa-composite-badge--secondary .pa-composite-badge__label:hover {
-  background-color: #333333;
+  background-color: #f8f9fa;
 }
 
 .pa-composite-badge--secondary .pa-composite-badge__button {
-  background-color: #333333;
+  background-color: #6c757d;
   color: #ffffff;
 }
 
 .pa-composite-badge--secondary .pa-composite-badge__button:hover {
-  background-color: #4d4d4d;
+  background-color: #545b62;
 }
 
 .pa-composite-badge--secondary .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.3);
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
 }
 
 .pa-composite-badge--success .pa-composite-badge__icon {
-  background-color: #00cc44;
+  background-color: #28a745;
   color: #ffffff;
 }
 
@@ -4163,20 +4163,20 @@ a.pa-card p {
 }
 
 .pa-composite-badge--success .pa-composite-badge__button {
-  background-color: #00cc44;
+  background-color: #28a745;
   color: #ffffff;
 }
 
 .pa-composite-badge--success .pa-composite-badge__button:hover {
-  background-color: #009933;
+  background-color: rgb(30.1449275362, 125.8550724638, 52);
 }
 
 .pa-composite-badge--success .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.3);
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
 }
 
 .pa-composite-badge--danger .pa-composite-badge__icon {
-  background-color: #ff0000;
+  background-color: #dc3545;
   color: #ffffff;
 }
 
@@ -4190,21 +4190,21 @@ a.pa-card p {
 }
 
 .pa-composite-badge--danger .pa-composite-badge__button {
-  background-color: #ff0000;
+  background-color: #dc3545;
   color: #ffffff;
 }
 
 .pa-composite-badge--danger .pa-composite-badge__button:hover {
-  background-color: #cc0000;
+  background-color: rgb(189.2151898734, 32.7848101266, 47.7721518987);
 }
 
 .pa-composite-badge--danger .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.3);
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
 }
 
 .pa-composite-badge--warning .pa-composite-badge__icon {
-  background-color: #ff6600;
-  color: #ffffff;
+  background-color: #ffc107;
+  color: #212529;
 }
 
 .pa-composite-badge--warning .pa-composite-badge__label {
@@ -4217,20 +4217,20 @@ a.pa-card p {
 }
 
 .pa-composite-badge--warning .pa-composite-badge__button {
-  background-color: #ff6600;
-  color: #ffffff;
+  background-color: #ffc107;
+  color: #212529;
 }
 
 .pa-composite-badge--warning .pa-composite-badge__button:hover {
-  background-color: #e55a00;
+  background-color: rgb(211, 158.25, 0);
 }
 
 .pa-composite-badge--warning .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.3);
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
 }
 
 .pa-composite-badge--info .pa-composite-badge__icon {
-  background-color: #0099ff;
+  background-color: #17a2b8;
   color: #ffffff;
 }
 
@@ -4244,122 +4244,122 @@ a.pa-card p {
 }
 
 .pa-composite-badge--info .pa-composite-badge__button {
-  background-color: #0099ff;
+  background-color: #17a2b8;
   color: #ffffff;
 }
 
 .pa-composite-badge--info .pa-composite-badge__button:hover {
-  background-color: #0077cc;
+  background-color: rgb(17.3333333333, 122.0869565217, 138.6666666667);
 }
 
 .pa-composite-badge--info .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.3);
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
 }
 
 .pa-composite-badge--light .pa-composite-badge__icon {
-  background-color: #666666;
-  color: #ffffff;
+  background-color: #f8f9fa;
+  color: #2c3e50;
 }
 
 .pa-composite-badge--light .pa-composite-badge__label {
-  background-color: #000000;
-  color: #ffffff;
+  background-color: #ffffff;
+  color: #2c3e50;
 }
 
 .pa-composite-badge--light .pa-composite-badge__label:hover {
-  background-color: #808080;
+  background-color: #e9ecef;
 }
 
 .pa-composite-badge--light .pa-composite-badge__button {
-  background-color: #666666;
-  color: #ffffff;
+  background-color: #f8f9fa;
+  color: #2c3e50;
 }
 
 .pa-composite-badge--light .pa-composite-badge__button:hover {
-  background-color: #808080;
+  background-color: #e9ecef;
 }
 
 .pa-composite-badge--light .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.3);
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
 }
 
 .pa-composite-badge--dark .pa-composite-badge__icon {
-  background-color: #000000;
+  background-color: #343a40;
   color: #ffffff;
 }
 
 .pa-composite-badge--dark .pa-composite-badge__label {
-  background-color: #333333;
-  color: var(--pa-text-primary);
+  background-color: #f8f9fa;
+  color: var(--pa-text-color-1);
 }
 
 .pa-composite-badge--dark .pa-composite-badge__label:hover {
-  background-color: #333333;
+  background-color: #e1e5e9;
 }
 
 .pa-composite-badge--dark .pa-composite-badge__button {
-  background-color: #000000;
+  background-color: #343a40;
   color: #ffffff;
 }
 
 .pa-composite-badge--dark .pa-composite-badge__button:hover {
-  background-color: #1a1a1a;
+  background-color: #1d2124;
 }
 
 .pa-composite-badge--dark .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.3);
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
 }
 
 .pa-composite-badge--primary .pa-composite-badge__icon {
-  background-color: #ff0000;
+  background-color: #007bff;
 }
 
 .pa-composite-badge--secondary .pa-composite-badge__icon {
-  background-color: #333333;
+  background-color: #6c757d;
 }
 
 .pa-composite-badge--success .pa-composite-badge__icon {
-  background-color: #00cc44;
+  background-color: #28a745;
 }
 
 .pa-composite-badge--danger .pa-composite-badge__icon {
-  background-color: #ff0000;
+  background-color: #dc3545;
 }
 
 .pa-composite-badge--warning .pa-composite-badge__icon {
-  background-color: #ff6600;
-  color: #ffffff;
+  background-color: #ffc107;
+  color: #212529;
 }
 
 .pa-composite-badge--info .pa-composite-badge__icon {
-  background-color: #0099ff;
+  background-color: #17a2b8;
 }
 
 .pa-composite-badge--light .pa-composite-badge__icon {
-  background-color: #666666;
-  color: #ffffff;
+  background-color: #f8f9fa;
+  color: #2c3e50;
 }
 
 .pa-composite-badge--dark .pa-composite-badge__icon {
-  background-color: #000000;
+  background-color: #343a40;
 }
 
 .pa-composite-badge--label-primary .pa-composite-badge__label {
-  background-color: #ffcccc;
-  color: #660000;
+  background-color: rgb(204, 228.6, 255);
+  color: rgb(0, 49.2, 102);
 }
 
 .pa-composite-badge--label-primary .pa-composite-badge__label:hover {
-  background-color: rgb(255, 178.5, 178.5);
+  background-color: rgb(178.5, 215.4, 255);
 }
 
 .pa-composite-badge--label-secondary .pa-composite-badge__label {
-  background-color: rgb(140.25, 140.25, 140.25);
+  background-color: rgb(202.1566523605, 205.9613733906, 209.3433476395);
   color: #383d41;
 }
 
 .pa-composite-badge--label-secondary .pa-composite-badge__label:hover {
-  background-color: rgb(127.5, 127.5, 127.5);
+  background-color: rgb(188.4763948498, 193.2660944206, 197.5236051502);
 }
 
 .pa-composite-badge--label-success .pa-composite-badge__label {
@@ -4399,107 +4399,107 @@ a.pa-card p {
 }
 
 .pa-composite-badge--label-light .pa-composite-badge__label {
-  background-color: rgb(107.1, 107.1, 107.1);
-  color: #ffffff;
+  background-color: rgb(253.95, 254.1, 254.25);
+  color: #2c3e50;
 }
 
 .pa-composite-badge--label-light .pa-composite-badge__label:hover {
-  background-color: rgb(140.25, 140.25, 140.25);
+  background-color: rgb(202.1566523605, 205.9613733906, 209.3433476395);
 }
 
 .pa-composite-badge--label-dark .pa-composite-badge__label {
-  background-color: rgb(127.5, 127.5, 127.5);
-  color: rgb(12.75, 12.75, 12.75);
+  background-color: rgb(178.3103448276, 185.5, 192.6896551724);
+  color: rgb(63.4310344828, 70.75, 78.0689655172);
 }
 
 .pa-composite-badge--label-dark .pa-composite-badge__label:hover {
-  background-color: rgb(114.75, 114.75, 114.75);
+  background-color: rgb(164.2413793103, 172.75, 181.2586206897);
 }
 
 .pa-composite-badge--btn-primary .pa-composite-badge__button {
-  background-color: #ff0000;
+  background-color: #007bff;
 }
 
 .pa-composite-badge--btn-primary .pa-composite-badge__button:hover {
-  background-color: #ff3333;
+  background-color: rgb(51, 149.4, 255);
 }
 
 .pa-composite-badge--btn-primary .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.25);
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
 }
 
 .pa-composite-badge--btn-secondary .pa-composite-badge__button {
-  background-color: #333333;
+  background-color: #6c757d;
 }
 
 .pa-composite-badge--btn-secondary .pa-composite-badge__button:hover {
-  background-color: #4d4d4d;
+  background-color: #545b62;
 }
 
 .pa-composite-badge--btn-secondary .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(51, 51, 51, 0.25);
+  box-shadow: 0 0 0 2px rgba(108, 117, 125, 0.25);
 }
 
 .pa-composite-badge--btn-success .pa-composite-badge__button {
-  background-color: #00cc44;
+  background-color: #28a745;
 }
 
 .pa-composite-badge--btn-success .pa-composite-badge__button:hover {
-  background-color: #009933;
+  background-color: rgb(30.1449275362, 125.8550724638, 52);
 }
 
 .pa-composite-badge--btn-success .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(0, 204, 68, 0.25);
+  box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.25);
 }
 
 .pa-composite-badge--btn-warning .pa-composite-badge__button {
-  background-color: #ff6600;
-  color: #ffffff;
+  background-color: #ffc107;
+  color: #212529;
 }
 
 .pa-composite-badge--btn-warning .pa-composite-badge__button:hover {
-  background-color: #e55a00;
+  background-color: rgb(211, 158.25, 0);
 }
 
 .pa-composite-badge--btn-warning .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(255, 102, 0, 0.25);
+  box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.25);
 }
 
 .pa-composite-badge--btn-info .pa-composite-badge__button {
-  background-color: #0099ff;
+  background-color: #17a2b8;
 }
 
 .pa-composite-badge--btn-info .pa-composite-badge__button:hover {
-  background-color: #0077cc;
+  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(0, 153, 255, 0.25);
+  box-shadow: 0 0 0 2px rgba(23, 162, 184, 0.25);
 }
 
 .pa-composite-badge--btn-light .pa-composite-badge__button {
-  background-color: #666666;
-  color: #ffffff;
+  background-color: #f8f9fa;
+  color: #2c3e50;
 }
 
 .pa-composite-badge--btn-light .pa-composite-badge__button:hover {
-  background-color: #808080;
+  background-color: #e9ecef;
 }
 
 .pa-composite-badge--btn-light .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(102, 102, 102, 0.25);
+  box-shadow: 0 0 0 2px rgba(248, 249, 250, 0.25);
 }
 
 .pa-composite-badge--btn-dark .pa-composite-badge__button {
-  background-color: #000000;
+  background-color: #343a40;
 }
 
 .pa-composite-badge--btn-dark .pa-composite-badge__button:hover {
-  background-color: #1a1a1a;
+  background-color: #1d2124;
 }
 
 .pa-composite-badge--btn-dark .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 0 0 2px rgba(52, 58, 64, 0.25);
 }
 
 /* ========================================
@@ -4531,12 +4531,12 @@ a.pa-card p {
   gap: 0.4rem;
   padding: 0.4rem 0.8rem;
   background-color: var(--pa-accent-light);
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   font-size: 1.2rem;
   font-weight: 500;
   line-height: 1.2;
   text-decoration: none;
-  border-radius: 1px;
+  border-radius: 4px;
   border: 1px solid var(--pa-border-color);
   transition: all 0.1s ease-out;
 }
@@ -4680,7 +4680,7 @@ a.pa-card p {
   height: 3.5rem;
   padding: 0.8rem 1.2rem;
   border: 1px solid transparent;
-  border-radius: 1px;
+  border-radius: 4px;
   font-size: 1.4rem;
   font-weight: 500;
   text-align: center;
@@ -4688,7 +4688,7 @@ a.pa-card p {
   cursor: pointer;
   transition: all 0.1s ease-out;
   background: none;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
 }
 
 .pa-btn:hover {
@@ -4709,11 +4709,11 @@ a.pa-card p {
 .pa-btn--secondary {
   background-color: transparent;
   border-color: var(--pa-border-color);
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
 }
 
 .pa-btn--secondary:hover {
-  background-color: var(--pa-primary-bg);
+  background-color: var(--pa-main-bg);
   border-color: var(--pa-accent);
 }
 
@@ -5133,27 +5133,27 @@ a.pa-card p {
 }
 
 .pa-spinner--primary {
-  border-top-color: #ff0000;
+  border-top-color: #007bff;
 }
 
 .pa-spinner--secondary {
-  border-top-color: #333333;
+  border-top-color: #6c757d;
 }
 
 .pa-spinner--success {
-  border-top-color: #00cc44;
+  border-top-color: #28a745;
 }
 
 .pa-spinner--danger {
-  border-top-color: #ff0000;
+  border-top-color: #dc3545;
 }
 
 .pa-spinner--warning {
-  border-top-color: #ff6600;
+  border-top-color: #ffc107;
 }
 
 .pa-spinner--info {
-  border-top-color: #0099ff;
+  border-top-color: #17a2b8;
 }
 
 .pa-loader-dots {
@@ -5395,7 +5395,7 @@ a.pa-card p {
   background-color: var(--pa-tooltip-bg);
   color: var(--pa-tooltip-text);
   padding: 0.4rem 0.8rem;
-  border-radius: 1px;
+  border-radius: 4px;
   font-size: 1.2rem;
   white-space: nowrap;
   max-width: 24rem;
@@ -5552,7 +5552,7 @@ a.pa-card p {
 
 .pa-tooltip--warning::before {
   background-color: var(--pa-btn-warning-bg);
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
 }
 
 .pa-tooltip--warning::after {
@@ -5890,7 +5890,7 @@ a.pa-card p {
   border: 1px solid var(--pa-border-color);
   border-radius: 50%;
   background-color: var(--pa-popover-content-bg);
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-size: 1.2rem;
   font-weight: 700;
   cursor: pointer;
@@ -5910,7 +5910,7 @@ a.pa-card p {
   max-width: 32rem;
   background-color: var(--pa-card-bg);
   border: 1px solid var(--pa-border-color);
-  border-radius: 1px;
+  border-radius: 4px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   z-index: 1060;
 }
@@ -5924,7 +5924,7 @@ a.pa-card p {
   align-items: center;
   justify-content: space-between;
   padding: 0.8rem 0.3rem 0.8rem 0.8rem;
-  border-bottom: 1px solid #333333;
+  border-bottom: 1px solid #e1e5e9;
   background-color: var(--pa-card-header-bg);
   border-radius: 4px 4px 0 0;
 }
@@ -5933,14 +5933,14 @@ a.pa-card p {
   margin: 0;
   font-size: 1.8rem;
   font-weight: 600;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
 }
 
 .pa-popover__body {
   padding: 1.6rem;
   font-size: 1.4rem;
   line-height: 1.5;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   text-align: left;
 }
 
@@ -5968,7 +5968,7 @@ a.pa-card p {
 
 .pa-popover__body code {
   padding: 0.2rem 0.4rem;
-  background-color: color-mix(in srgb, var(--pa-text-secondary) 15%, transparent);
+  background-color: color-mix(in srgb, var(--pa-text-color-2) 15%, transparent);
   border-radius: 2px;
   font-family: monospace;
   font-size: 0.9em;
@@ -5979,7 +5979,7 @@ a.pa-card p {
   border: none;
   font-size: 1.8rem;
   line-height: 1;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   cursor: pointer;
   padding: 0;
   width: 2.4rem;
@@ -5987,13 +5987,13 @@ a.pa-card p {
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 1px;
+  border-radius: 4px;
   transition: all 0.1s ease;
 }
 
 .pa-popover__close:hover {
-  background-color: color-mix(in srgb, var(--pa-text-secondary) 10%, transparent);
-  color: var(--pa-text-primary);
+  background-color: color-mix(in srgb, var(--pa-text-color-2) 10%, transparent);
+  color: var(--pa-text-color-1);
 }
 
 .pa-popover--sm .pa-popover__content {
@@ -6018,7 +6018,7 @@ a.pa-card p {
   background-color: var(--pa-tooltip-bg);
   color: var(--pa-tooltip-text);
   padding: 0.4rem 0.8rem;
-  border-radius: 1px;
+  border-radius: 4px;
   font-size: 1.2rem;
   white-space: nowrap;
   max-width: 24rem;
@@ -6099,7 +6099,7 @@ a.pa-card p {
   padding: 1.2rem 1rem;
   margin-bottom: 1.6rem;
   border: 1px solid transparent;
-  border-radius: 1px;
+  border-radius: 4px;
   font-size: 1.4rem;
   display: flex;
   flex-wrap: wrap;
@@ -6120,13 +6120,13 @@ a.pa-card p {
 
 .pa-alert--primary {
   color: var(--pa-accent);
-  background-color: rgba(255, 0, 0, 0.08);
-  border-color: rgba(255, 0, 0, 0.2);
+  background-color: rgba(0, 123, 255, 0.08);
+  border-color: rgba(0, 123, 255, 0.2);
 }
 
 .pa-alert--secondary {
-  color: var(--pa-text-secondary);
-  background-color: color-mix(in srgb, var(--pa-text-secondary) 15%, transparent);
+  color: var(--pa-text-color-2);
+  background-color: color-mix(in srgb, var(--pa-text-color-2) 15%, transparent);
   border-color: var(--pa-border-color);
 }
 
@@ -6156,15 +6156,15 @@ a.pa-card p {
 }
 
 .pa-alert--light {
-  color: var(--pa-text-primary);
-  background-color: color-mix(in srgb, var(--pa-text-primary) 5%, transparent);
+  color: var(--pa-text-color-1);
+  background-color: color-mix(in srgb, var(--pa-text-color-1) 5%, transparent);
   border-color: var(--pa-border-color);
 }
 
 .pa-alert--dark {
-  color: var(--pa-text-primary);
-  background-color: color-mix(in srgb, var(--pa-text-primary) 5%, transparent);
-  border-color: color-mix(in srgb, var(--pa-text-primary) 10%, transparent);
+  color: var(--pa-text-color-1);
+  background-color: color-mix(in srgb, var(--pa-text-color-1) 5%, transparent);
+  border-color: color-mix(in srgb, var(--pa-text-color-1) 10%, transparent);
 }
 
 .pa-alert--outline-primary {
@@ -6303,7 +6303,7 @@ a.pa-card p {
   padding: 1.2rem 1rem;
   margin-bottom: 1.6rem;
   border-left: 0.4rem solid var(--pa-border-color);
-  border-radius: 1px;
+  border-radius: 4px;
   font-size: 1.4rem;
   background-color: var(--pa-card-bg);
 }
@@ -6318,12 +6318,12 @@ a.pa-card p {
 
 .pa-callout--primary {
   border-left-color: var(--pa-accent);
-  background-color: rgba(255, 0, 0, 0.08);
+  background-color: rgba(0, 123, 255, 0.08);
 }
 
 .pa-callout--secondary {
-  border-left-color: var(--pa-text-secondary);
-  background-color: color-mix(in srgb, var(--pa-text-secondary) 5%, transparent);
+  border-left-color: var(--pa-text-color-2);
+  background-color: color-mix(in srgb, var(--pa-text-color-2) 5%, transparent);
 }
 
 .pa-callout--success {
@@ -6452,7 +6452,7 @@ a.pa-card p {
   flex-shrink: 0;
   padding-top: 0.8rem;
   margin-bottom: 0;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   font-weight: 500;
   font-size: 1.4rem;
 }
@@ -6468,7 +6468,7 @@ a.pa-card p {
   align-items: center;
   gap: 0.8rem;
   margin-bottom: 0.3rem;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   font-weight: 500;
   font-size: 1.4rem;
 }
@@ -6489,10 +6489,10 @@ a.pa-card p {
   height: 3.5rem;
   padding: 0.8rem 0.8rem;
   border: 1px solid var(--pa-border-color);
-  border-radius: 1px;
+  border-radius: 4px;
   font-size: 1.4rem;
   background-color: var(--pa-input-bg);
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   transition: border-color 0.1s ease-out;
 }
 
@@ -6507,10 +6507,10 @@ a.pa-card p {
   height: 3.5rem;
   padding: 0.7rem 0.5rem;
   border: 1px solid var(--pa-border-color);
-  border-radius: 1px;
+  border-radius: 4px;
   font-size: 1.4rem;
   background-color: var(--pa-input-bg);
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   transition: border-color 0.1s ease-out;
 }
 
@@ -6524,10 +6524,10 @@ a.pa-card p {
   width: 100%;
   padding: 0.8rem 0.8rem;
   border: 1px solid var(--pa-border-color);
-  border-radius: 1px;
+  border-radius: 4px;
   font-size: 1.4rem;
   background-color: var(--pa-input-bg);
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   transition: border-color 0.1s ease-out;
   resize: vertical;
   min-height: 9.6rem;
@@ -6540,7 +6540,7 @@ a.pa-card p {
 }
 
 .pa-textarea::placeholder {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
 }
 
 .pa-input--xs,
@@ -6571,6 +6571,34 @@ a.pa-card p {
   font-size: 1.8rem;
 }
 
+.pa-textarea--xs {
+  height: 4rem;
+  min-height: 4rem;
+  padding: 0.6rem 0.8rem;
+  font-size: 1.2rem;
+}
+
+.pa-textarea--sm {
+  height: 6rem;
+  min-height: 6rem;
+  padding: 0.8rem 0.8rem;
+  font-size: 1.4rem;
+}
+
+.pa-textarea--lg {
+  height: 12rem;
+  min-height: 12rem;
+  padding: 0.8rem 0.8rem;
+  font-size: 1.6rem;
+}
+
+.pa-textarea--xl {
+  height: 16rem;
+  min-height: 16rem;
+  padding: 0.8rem 0.8rem;
+  font-size: 1.8rem;
+}
+
 .pa-mode-dark input[type=date]::-webkit-calendar-picker-indicator,
 .pa-mode-dark input[type=time]::-webkit-calendar-picker-indicator,
 .pa-mode-dark input[type=datetime-local]::-webkit-calendar-picker-indicator,
@@ -6653,7 +6681,7 @@ a.pa-card p {
   display: block;
   margin-top: 0.4rem;
   font-size: 1.2rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
 }
 
 .pa-form-help--error {
@@ -6664,6 +6692,163 @@ a.pa-card p {
   color: var(--pa-success-bg);
 }
 
+.pa-form-help--warning {
+  color: var(--pa-warning-bg);
+}
+
+.pa-form-help--color-1 {
+  color: var(--pa-color-1);
+}
+
+.pa-form-help--color-2 {
+  color: var(--pa-color-2);
+}
+
+.pa-form-help--color-3 {
+  color: var(--pa-color-3);
+}
+
+.pa-form-help--color-4 {
+  color: var(--pa-color-4);
+}
+
+.pa-form-help--color-5 {
+  color: var(--pa-color-5);
+}
+
+.pa-form-help--color-6 {
+  color: var(--pa-color-6);
+}
+
+.pa-form-help--color-7 {
+  color: var(--pa-color-7);
+}
+
+.pa-form-help--color-8 {
+  color: var(--pa-color-8);
+}
+
+.pa-form-help--color-9 {
+  color: var(--pa-color-9);
+}
+
+.pa-input--color-1,
+.pa-select--color-1,
+.pa-textarea--color-1 {
+  border-color: var(--pa-color-1);
+}
+
+.pa-input--color-1:focus,
+.pa-select--color-1:focus,
+.pa-textarea--color-1:focus {
+  border-color: var(--pa-color-1);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-color-1) 25%, transparent);
+}
+
+.pa-input--color-2,
+.pa-select--color-2,
+.pa-textarea--color-2 {
+  border-color: var(--pa-color-2);
+}
+
+.pa-input--color-2:focus,
+.pa-select--color-2:focus,
+.pa-textarea--color-2:focus {
+  border-color: var(--pa-color-2);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-color-2) 25%, transparent);
+}
+
+.pa-input--color-3,
+.pa-select--color-3,
+.pa-textarea--color-3 {
+  border-color: var(--pa-color-3);
+}
+
+.pa-input--color-3:focus,
+.pa-select--color-3:focus,
+.pa-textarea--color-3:focus {
+  border-color: var(--pa-color-3);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-color-3) 25%, transparent);
+}
+
+.pa-input--color-4,
+.pa-select--color-4,
+.pa-textarea--color-4 {
+  border-color: var(--pa-color-4);
+}
+
+.pa-input--color-4:focus,
+.pa-select--color-4:focus,
+.pa-textarea--color-4:focus {
+  border-color: var(--pa-color-4);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-color-4) 25%, transparent);
+}
+
+.pa-input--color-5,
+.pa-select--color-5,
+.pa-textarea--color-5 {
+  border-color: var(--pa-color-5);
+}
+
+.pa-input--color-5:focus,
+.pa-select--color-5:focus,
+.pa-textarea--color-5:focus {
+  border-color: var(--pa-color-5);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-color-5) 25%, transparent);
+}
+
+.pa-input--color-6,
+.pa-select--color-6,
+.pa-textarea--color-6 {
+  border-color: var(--pa-color-6);
+}
+
+.pa-input--color-6:focus,
+.pa-select--color-6:focus,
+.pa-textarea--color-6:focus {
+  border-color: var(--pa-color-6);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-color-6) 25%, transparent);
+}
+
+.pa-input--color-7,
+.pa-select--color-7,
+.pa-textarea--color-7 {
+  border-color: var(--pa-color-7);
+}
+
+.pa-input--color-7:focus,
+.pa-select--color-7:focus,
+.pa-textarea--color-7:focus {
+  border-color: var(--pa-color-7);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-color-7) 25%, transparent);
+}
+
+.pa-input--color-8,
+.pa-select--color-8,
+.pa-textarea--color-8 {
+  border-color: var(--pa-color-8);
+}
+
+.pa-input--color-8:focus,
+.pa-select--color-8:focus,
+.pa-textarea--color-8:focus {
+  border-color: var(--pa-color-8);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-color-8) 25%, transparent);
+}
+
+.pa-input--color-9,
+.pa-select--color-9,
+.pa-textarea--color-9 {
+  border-color: var(--pa-color-9);
+}
+
+.pa-input--color-9:focus,
+.pa-select--color-9:focus,
+.pa-textarea--color-9:focus {
+  border-color: var(--pa-color-9);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-color-9) 25%, transparent);
+}
+
 /* ========================================
    Input Groups
    Input groups with prepend/append addons and buttons
@@ -6679,13 +6864,13 @@ a.pa-card p {
 }
 
 .pa-input-group .pa-input:first-child {
-  border-top-left-radius: 1px;
-  border-bottom-left-radius: 1px;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
 }
 
 .pa-input-group .pa-input:last-child {
-  border-top-right-radius: 1px;
-  border-bottom-right-radius: 1px;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
 }
 
 .pa-input-group .pa-input:not(:first-child) {
@@ -6715,8 +6900,8 @@ a.pa-card p {
 }
 
 .pa-input-group__prepend:first-child {
-  border-top-left-radius: 1px;
-  border-bottom-left-radius: 1px;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
 }
 
 .pa-input-group__append {
@@ -6726,8 +6911,8 @@ a.pa-card p {
 }
 
 .pa-input-group__append:last-child {
-  border-top-right-radius: 1px;
-  border-bottom-right-radius: 1px;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
 }
 
 .pa-input-group__prepend + .pa-input-group__prepend {
@@ -6759,13 +6944,13 @@ a.pa-card p {
 }
 
 .pa-input-group__button:first-child {
-  border-top-left-radius: 1px;
-  border-bottom-left-radius: 1px;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
 }
 
 .pa-input-group__button:last-child {
-  border-top-right-radius: 1px;
-  border-bottom-right-radius: 1px;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
 }
 
 .pa-input-group--xs .pa-input-group__prepend,
@@ -6824,7 +7009,7 @@ a.pa-card p {
   transform: translateY(-50%);
   background: transparent;
   border: none;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   cursor: pointer;
   padding: 0.4rem;
   font-size: 1.6rem;
@@ -6835,7 +7020,7 @@ a.pa-card p {
 
 .pa-input-wrapper__clear:hover {
   opacity: 1;
-  color: #ff0000;
+  color: #dc3545;
 }
 
 .pa-input-wrapper__clear:focus {
@@ -6898,7 +7083,7 @@ a.pa-card p {
   bottom: 0;
   padding: 0.8rem 0.8rem;
   border: 1px solid transparent;
-  border-radius: 1px;
+  border-radius: 4px;
   font-size: 1.4rem;
   font-family: inherit;
   white-space: pre-wrap;
@@ -6912,13 +7097,13 @@ a.pa-card p {
   position: relative;
   z-index: 1;
   background: transparent;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
 }
 
 .pa-search-highlight__field {
   display: inline;
-  background-color: rgba(255, 0, 0, 0.15);
-  color: #ff0000;
+  background-color: rgba(0, 123, 255, 0.15);
+  color: #007bff;
   padding: 0.2rem 0.4rem;
   border-radius: 0.4rem;
   font-weight: 500;
@@ -6926,8 +7111,8 @@ a.pa-card p {
 
 .pa-search-highlight__operator {
   display: inline;
-  background-color: rgba(0, 204, 68, 0.15);
-  color: #00cc44;
+  background-color: rgba(40, 167, 69, 0.15);
+  color: #28a745;
   padding: 0.2rem 0.4rem;
   border-radius: 0.4rem;
   font-weight: 500;
@@ -6937,8 +7122,8 @@ a.pa-card p {
   position: absolute;
   z-index: 1000;
   background: var(--pa-input-bg);
-  border: 1px solid #333333;
-  border-radius: 1px;
+  border: 1px solid #e1e5e9;
+  border-radius: 4px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   max-height: 24rem;
   overflow-y: auto;
@@ -6967,7 +7152,7 @@ a.pa-card p {
 .pa-search-autocomplete__item-type {
   margin-left: auto;
   font-size: 1.2rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   opacity: 0.7;
 }
 
@@ -6975,7 +7160,7 @@ a.pa-card p {
   padding: 0.4rem 1.2rem;
   font-size: 1.2rem;
   font-weight: 500;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   text-transform: uppercase;
   letter-spacing: 0.05em;
   background-color: var(--pa-card-header-bg);
@@ -6985,18 +7170,18 @@ a.pa-card p {
 .pa-search-autocomplete__empty {
   padding: 1.2rem;
   text-align: center;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-size: 1.4rem;
 }
 
 .pa-virtual-textbox {
   width: 100%;
   padding: 0.8rem 0.8rem;
-  border: 1px solid #333333;
-  border-radius: 1px;
+  border: 1px solid #e1e5e9;
+  border-radius: 4px;
   font-size: 1.4rem;
   background-color: var(--pa-input-bg);
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   cursor: text;
   overflow-wrap: break-word;
   word-wrap: break-word;
@@ -7006,13 +7191,13 @@ a.pa-card p {
 
 .pa-virtual-textbox:focus {
   outline: none;
-  border-color: #ff0000;
-  box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.25);
+  border-color: #007bff;
+  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.05);
 }
 
 .pa-virtual-textbox:empty::before {
   content: attr(data-placeholder);
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   opacity: 0.7;
   pointer-events: none;
 }
@@ -7046,9 +7231,9 @@ a.pa-card p {
   bottom: 0;
   padding: 0.8rem 0.8rem;
   border: 1px solid transparent;
-  border-radius: 1px;
+  border-radius: 4px;
   font-size: 1.4rem;
-  font-family: "Fira Sans Condensed", "Arial Narrow", "Arial", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   white-space: pre-wrap;
   word-wrap: break-word;
   pointer-events: none;
@@ -7063,13 +7248,13 @@ a.pa-card p {
   z-index: 2;
   width: 100%;
   padding: 0.8rem 0.8rem;
-  border: 1px solid #333333;
-  border-radius: 1px;
+  border: 1px solid #e1e5e9;
+  border-radius: 4px;
   font-size: 1.4rem;
-  font-family: "Fira Sans Condensed", "Arial Narrow", "Arial", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   background: transparent;
   color: transparent;
-  caret-color: var(--pa-text-primary);
+  caret-color: var(--pa-text-color-1);
   resize: none;
   overflow: hidden;
   line-height: 1.5;
@@ -7079,12 +7264,12 @@ a.pa-card p {
 
 .pa-inline-query-editor__input:focus {
   outline: none;
-  border-color: #ff0000;
-  box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.25);
+  border-color: #007bff;
+  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.05);
 }
 
 .pa-inline-query-editor__input::placeholder {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   opacity: 0.7;
 }
 
@@ -7094,29 +7279,29 @@ a.pa-card p {
 }
 
 .pa-inline-query-token--field {
-  background-color: rgba(255, 0, 0, 0.15);
-  color: var(--pa-text-primary);
+  background-color: rgba(0, 123, 255, 0.15);
+  color: var(--pa-text-color-1);
 }
 
 .pa-inline-query-token--field.pa-inline-query-token--invalid {
-  background-color: rgba(255, 0, 0, 0.15);
-  color: var(--pa-text-primary);
+  background-color: rgba(220, 53, 69, 0.15);
+  color: var(--pa-text-color-1);
   text-decoration: wavy underline;
 }
 
 .pa-inline-query-token--operator {
-  background-color: rgba(var(--pa-text-secondary), 0.15);
-  color: var(--pa-text-primary);
+  background-color: rgba(var(--pa-text-color-2), 0.15);
+  color: var(--pa-text-color-1);
 }
 
 .pa-inline-query-token--value {
-  background-color: rgba(0, 204, 68, 0.15);
-  color: var(--pa-text-primary);
+  background-color: rgba(40, 167, 69, 0.15);
+  color: var(--pa-text-color-1);
 }
 
 .pa-inline-query-token--keyword {
-  background-color: rgba(255, 102, 0, 0.15);
-  color: var(--pa-text-primary);
+  background-color: rgba(255, 193, 7, 0.15);
+  color: var(--pa-text-color-1);
   font-style: italic;
 }
 
@@ -7124,8 +7309,8 @@ a.pa-card p {
   position: absolute;
   z-index: 1000;
   background: var(--pa-input-bg);
-  border: 1px solid #333333;
-  border-radius: 1px;
+  border: 1px solid #e1e5e9;
+  border-radius: 4px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   max-height: 24rem;
   overflow-y: auto;
@@ -7160,14 +7345,14 @@ a.pa-card p {
 .pa-inline-query-autocomplete__item-name {
   display: block;
   font-weight: 500;
-  color: #ff0000;
+  color: #007bff;
   line-height: 1.3;
 }
 
 .pa-inline-query-autocomplete__item-type {
   display: block;
   font-size: 1.2rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   opacity: 0.7;
   line-height: 1.3;
 }
@@ -7176,10 +7361,10 @@ a.pa-card p {
   flex-shrink: 0;
   font-size: 1.2rem;
   padding: 0.2rem 0.6rem;
-  background-color: rgba(var(--pa-text-secondary), 0.1);
-  color: var(--pa-text-secondary);
+  background-color: rgba(var(--pa-text-color-2), 0.1);
+  color: var(--pa-text-color-2);
   border-radius: 0.4rem;
-  font-family: "Fira Sans Condensed", "Arial Narrow", "Arial", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 }
 
 /* ========================================
@@ -7199,7 +7384,7 @@ a.pa-card p {
   gap: 0.8rem;
   cursor: pointer;
   font-size: 1.4rem;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   user-select: none;
 }
 
@@ -7340,7 +7525,7 @@ input:indeterminate + .pa-checkbox__box::after {
   gap: 0.8rem;
   cursor: pointer;
   font-size: 1.4rem;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
 }
 
 .pa-radio input {
@@ -7390,14 +7575,14 @@ input:indeterminate + .pa-checkbox__box::after {
 web-daterangepicker {
   /* ===== BASE PRIMITIVES ===== */
   /* Colors */
-  --drp-accent-color: #ff0000;
-  --drp-primary-bg: #ff0000;
-  --drp-primary-bg-hover: #ff3333;
-  --drp-text-primary: var(--pa-text-primary);
-  --drp-text-secondary: var(--pa-text-secondary);
-  --drp-border-color: #333333;
+  --drp-accent-color: #007bff;
+  --drp-primary-bg: #007bff;
+  --drp-primary-bg-hover: rgb(51, 149.4, 255);
+  --drp-text-primary: var(--pa-text-color-1);
+  --drp-text-secondary: var(--pa-text-color-2);
+  --drp-border-color: #e1e5e9;
   --drp-card-bg: var(--pa-card-bg);
-  --drp-hover-bg: #333333;
+  --drp-hover-bg: #f8f9fa;
   /* Spacing */
   --drp-spacing-xs: 0.4rem;
   --drp-spacing-sm: 0.8rem;
@@ -7424,27 +7609,27 @@ web-daterangepicker {
   --drp-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
   --drp-shadow-xl: 0 0 60px rgba(0, 0, 0, 0.12);
   /* Border radius */
-  --drp-border-radius: 1px;
+  --drp-border-radius: 4px;
   --drp-border-radius-sm: 2px;
-  --drp-border-radius-lg: 2px;
+  --drp-border-radius-lg: 8px;
   /* Border width */
   --drp-border-width-base: 1px;
   --drp-border-width-medium: 2px;
   /* ===== INPUT FIELD SEMANTIC VARIABLES ===== */
   /* Input colors */
   --drp-input-background: var(--pa-input-bg);
-  --drp-input-color: var(--pa-text-primary);
-  --drp-input-border-color: #333333;
-  --drp-input-border-color-hover: #ff0000;
-  --drp-input-border-color-focus: #ff0000;
-  --drp-input-placeholder-color: var(--pa-text-secondary);
+  --drp-input-color: var(--pa-text-color-1);
+  --drp-input-border-color: #ced4da;
+  --drp-input-border-color-hover: #007bff;
+  --drp-input-border-color-focus: #007bff;
+  --drp-input-placeholder-color: var(--pa-text-color-2);
   --drp-input-disabled-background: var(--pa-input-bg);
-  --drp-input-disabled-color: var(--pa-text-secondary);
+  --drp-input-disabled-color: var(--pa-text-color-2);
   /* Input focus effects */
-  --drp-input-focus-shadow-color: rgba(255, 0, 0, 0.25);
+  --drp-input-focus-shadow-color: rgba(0, 123, 255, 0.05);
   --drp-input-focus-shadow-size: 3px;
   /* Input icon */
-  --drp-input-icon-color: var(--pa-text-secondary);
+  --drp-input-icon-color: var(--pa-text-color-2);
   --drp-input-icon-opacity: 1;
   /* Input size variants - matched to Pure Admin .pa-input sizes (10px base)
      Heights: xs=31px, sm=33px, md=35px, lg=38px, xl=41px */
@@ -7480,127 +7665,127 @@ web-daterangepicker {
   --drp-input-size-xl-icon-size: 2rem; /* 20px (10px base) */
   /* ===== CALENDAR CONTAINER ===== */
   --drp-calendar-bg: var(--pa-card-bg);
-  --drp-calendar-border: #333333;
+  --drp-calendar-border: #e1e5e9;
   --drp-calendar-shadow: 0 0 60px rgba(0, 0, 0, 0.12);
-  --drp-calendar-border-radius: 1px;
+  --drp-calendar-border-radius: 4px;
   --drp-calendar-padding: 1.6rem;
   --drp-calendar-z-index: 1000;
   /* ===== HEADER ===== */
   --drp-header-padding: 0.8rem 1.2rem;
   --drp-header-font-size: 1.6rem;
   --drp-header-font-weight: 600;
-  --drp-header-text-color: var(--pa-text-primary);
-  --drp-header-bg-hover: rgba(255, 0, 0, 0.3);
-  --drp-header-bg-active: rgba(255, 0, 0, 0.25);
+  --drp-header-text-color: var(--pa-text-color-1);
+  --drp-header-bg-hover: rgba(0, 123, 255, 0.12);
+  --drp-header-bg-active: rgba(0, 123, 255, 0.05);
   /* ===== NAVIGATION ===== */
   --drp-nav-btn-size: 3.2rem; /* 32px (10px base) */
-  --drp-nav-text-color: var(--pa-text-primary);
-  --drp-nav-border-color: #333333;
-  --drp-nav-bg-hover: rgba(255, 0, 0, 0.3);
-  --drp-nav-bg-active: rgba(255, 0, 0, 0.25);
-  --drp-nav-border-hover: #ff0000;
+  --drp-nav-text-color: var(--pa-text-color-1);
+  --drp-nav-border-color: #e1e5e9;
+  --drp-nav-bg-hover: rgba(0, 123, 255, 0.12);
+  --drp-nav-bg-active: rgba(0, 123, 255, 0.05);
+  --drp-nav-border-hover: #007bff;
   /* ===== WEEKDAY HEADER ===== */
   --drp-weekday-font-size: 1.2rem;
   --drp-weekday-font-weight: 600;
-  --drp-weekday-color: var(--pa-text-secondary);
+  --drp-weekday-color: var(--pa-text-color-2);
   --drp-weekday-padding: 0.4rem;
   /* ===== CALENDAR GRID ===== */
   --drp-day-size: 3.6rem; /* 36px (10px base) */
   --drp-day-font-size: 1.4rem;
   --drp-day-border-radius: 2px;
   /* Day states */
-  --drp-day-text-color: var(--pa-text-primary);
-  --drp-day-bg-hover: rgba(255, 0, 0, 0.3);
+  --drp-day-text-color: var(--pa-text-color-1);
+  --drp-day-bg-hover: rgba(0, 123, 255, 0.12);
   --drp-day-border-hover: transparent;
   /* Today indicator */
-  --drp-day-today-border: #ff0000;
+  --drp-day-today-border: #007bff;
   /* Selected state */
-  --drp-day-selected-bg: #ff0000;
+  --drp-day-selected-bg: #007bff;
   --drp-day-selected-color: #ffffff;
   /* Range state */
-  --drp-day-range-bg: rgba(255, 0, 0, 0.25);
-  --drp-day-range-text: var(--pa-text-primary);
+  --drp-day-range-bg: rgba(0, 123, 255, 0.05);
+  --drp-day-range-text: var(--pa-text-color-1);
   /* Focused state */
-  --drp-day-focused-outline: #ff0000;
+  --drp-day-focused-outline: #007bff;
   /* Disabled state */
-  --drp-day-disabled-color: var(--pa-text-secondary);
+  --drp-day-disabled-color: var(--pa-text-color-2);
   --drp-day-disabled-opacity: 0.65;
   /* Other month */
-  --drp-day-other-month-color: var(--pa-text-secondary);
+  --drp-day-other-month-color: var(--pa-text-color-2);
   --drp-day-other-month-opacity: 0.5;
   /* ===== BADGES ===== */
   /* Dot badges (original style) */
   --drp-badge-size: 0.6rem; /* 6px (10px base) */
-  --drp-badge-primary: #ff0000;
-  --drp-badge-success: #00cc44;
-  --drp-badge-warning: #ff6600;
-  --drp-badge-danger: #ff0000;
-  --drp-badge-info: #0099ff;
+  --drp-badge-primary: #007bff;
+  --drp-badge-success: #28a745;
+  --drp-badge-warning: #ffc107;
+  --drp-badge-danger: #dc3545;
+  --drp-badge-info: #17a2b8;
   /* Number badges */
-  --drp-badge-number-bg: #ff0000;
+  --drp-badge-number-bg: #dc3545;
   --drp-badge-number-color: #ffffff;
   /* Count badges */
-  --drp-badge-count-bg: #ff0000;
+  --drp-badge-count-bg: #007bff;
   --drp-badge-count-color: #ffffff;
   /* Text badges */
-  --drp-badge-text-bg: rgba(255, 0, 0, 0.25);
-  --drp-badge-text-color: var(--pa-text-primary);
+  --drp-badge-text-bg: rgba(0, 123, 255, 0.05);
+  --drp-badge-text-color: var(--pa-text-color-1);
   /* ===== SUMMARY BAR ===== */
-  --drp-summary-bg: #000000;
-  --drp-summary-border-color: #333333;
-  --drp-summary-text-color: var(--pa-text-primary);
-  --drp-summary-count-color: #ff0000;
+  --drp-summary-bg: #f8f9fa;
+  --drp-summary-border-color: #e1e5e9;
+  --drp-summary-text-color: var(--pa-text-color-1);
+  --drp-summary-count-color: #007bff;
   --drp-summary-padding: 0.8rem 1.2rem;
   --drp-summary-font-size: 1.4rem;
   --drp-summary-font-weight: 500;
   /* ===== BUTTONS ===== */
   /* Today button */
-  --drp-button-today-bg: #333333;
-  --drp-button-today-bg-hover: #4d4d4d;
+  --drp-button-today-bg: #6c757d;
+  --drp-button-today-bg-hover: #545b62;
   --drp-button-today-color: #ffffff;
-  --drp-button-today-border: #333333;
+  --drp-button-today-border: #e1e5e9;
   /* Clear button */
-  --drp-button-clear-bg: #333333;
-  --drp-button-clear-bg-hover: #4d4d4d;
+  --drp-button-clear-bg: #6c757d;
+  --drp-button-clear-bg-hover: #545b62;
   --drp-button-clear-color: #ffffff;
-  --drp-button-clear-border: #333333;
+  --drp-button-clear-border: #e1e5e9;
   /* Cancel button */
-  --drp-button-cancel-bg: #333333;
-  --drp-button-cancel-bg-hover: #4d4d4d;
+  --drp-button-cancel-bg: #6c757d;
+  --drp-button-cancel-bg-hover: #545b62;
   --drp-button-cancel-color: #ffffff;
-  --drp-button-cancel-border: #333333;
+  --drp-button-cancel-border: #e1e5e9;
   /* Apply button */
-  --drp-button-apply-bg: #ff0000;
-  --drp-button-apply-bg-hover: #ff3333;
+  --drp-button-apply-bg: #007bff;
+  --drp-button-apply-bg-hover: rgb(51, 149.4, 255);
   --drp-button-apply-color: #ffffff;
-  --drp-button-apply-border: #ff0000;
+  --drp-button-apply-border: #007bff;
   /* Button sizing */
   --drp-button-padding: 0.8rem 1rem;
   --drp-button-font-size: 1.4rem;
-  --drp-button-border-radius: 1px;
+  --drp-button-border-radius: 4px;
   --drp-button-gap: 0.8rem;
   /* ===== UNIFIED NAVIGATION ===== */
   /* Range selectors in unified nav */
-  --drp-unified-range-text-color: var(--pa-text-primary);
-  --drp-unified-range-bg-hover: rgba(255, 0, 0, 0.3);
-  --drp-unified-range-bg-active: rgba(255, 0, 0, 0.25);
+  --drp-unified-range-text-color: var(--pa-text-color-1);
+  --drp-unified-range-bg-hover: rgba(0, 123, 255, 0.12);
+  --drp-unified-range-bg-active: rgba(0, 123, 255, 0.05);
   /* Month/Year display */
-  --drp-unified-month-color: var(--pa-text-primary);
+  --drp-unified-month-color: var(--pa-text-color-1);
   /* Rolling selector disabled state */
-  --drp-unified-rolling-disabled-color: var(--pa-text-secondary);
+  --drp-unified-rolling-disabled-color: var(--pa-text-color-2);
   /* ===== ROLLING SELECTOR ===== */
   --drp-rolling-bg: var(--pa-card-bg);
-  --drp-rolling-border: #333333;
+  --drp-rolling-border: #e1e5e9;
   --drp-rolling-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  --drp-rolling-item-hover-bg: rgba(255, 0, 0, 0.3);
-  --drp-rolling-item-selected-bg: #ff0000;
+  --drp-rolling-item-hover-bg: rgba(0, 123, 255, 0.12);
+  --drp-rolling-item-selected-bg: #007bff;
   --drp-rolling-item-selected-text: #ffffff;
   --drp-rolling-font-size: 1.4rem;
-  --drp-rolling-item-text-color: var(--pa-text-primary);
-  --drp-rolling-item-disabled-color: var(--pa-text-secondary);
+  --drp-rolling-item-text-color: var(--pa-text-color-1);
+  --drp-rolling-item-disabled-color: var(--pa-text-color-2);
   /* ===== LOADING OVERLAY ===== */
   --drp-loading-bg: rgba(255, 255, 255, 0.8);
-  --drp-loading-spinner-color: #ff0000;
+  --drp-loading-spinner-color: #007bff;
   --drp-loading-spinner-size: 1.6rem;
   /* ===== MULTIPLE MONTHS ===== */
   --drp-months-gap: 2.4rem;
@@ -7630,7 +7815,7 @@ web-daterangepicker {
 
 .pa-file-input__filename {
   font-size: 1.4rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -7638,8 +7823,8 @@ web-daterangepicker {
 
 .pa-file-dropzone {
   position: relative;
-  border: 3.2px dashed #333333;
-  border-radius: 1px;
+  border: 3.2px dashed #e1e5e9;
+  border-radius: 4px;
   padding: 3.2rem;
   text-align: center;
   transition: all 0.1s ease-out;
@@ -7648,13 +7833,13 @@ web-daterangepicker {
 }
 
 .pa-file-dropzone:hover {
-  border-color: #ff0000;
-  background: rgba(255, 0, 0, 0.05);
+  border-color: #007bff;
+  background: rgba(0, 123, 255, 0.05);
 }
 
 .pa-file-dropzone--active {
-  border-color: #ff0000;
-  background: rgba(255, 0, 0, 0.1);
+  border-color: #007bff;
+  background: rgba(0, 123, 255, 0.1);
   border-style: solid;
 }
 
@@ -7680,27 +7865,27 @@ web-daterangepicker {
 
 .pa-file-dropzone__text {
   font-size: 1.6rem;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   margin-bottom: 0.4rem;
 }
 
 .pa-file-dropzone__text strong {
-  color: #ff0000;
+  color: #007bff;
   font-weight: 600;
 }
 
 .pa-file-dropzone__hint {
   font-size: 1.2rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
 }
 
 .pa-file-dropzone__drop-prompt {
   padding: 1.2rem;
-  border-bottom: 1.6px dashed #333333;
+  border-bottom: 1.6px dashed #e1e5e9;
   margin: -3.2rem -3.2rem 1.2rem -3.2rem;
   text-align: center;
   font-size: 1.4rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
 }
 
 .pa-file-dropzone__drop-prompt-icon {
@@ -7730,7 +7915,7 @@ web-daterangepicker {
 }
 
 .pa-file-dropzone__file-card:hover {
-  border-color: #ff0000;
+  border-color: #007bff;
   box-shadow: 0 1.6px 4.8px rgba(0, 0, 0, 0.1);
 }
 
@@ -7741,7 +7926,7 @@ web-daterangepicker {
 
 .pa-file-dropzone__file-card-name {
   font-size: 1rem;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -7751,7 +7936,7 @@ web-daterangepicker {
 
 .pa-file-dropzone__file-card-size {
   font-size: 1rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   margin-top: 0.4rem;
 }
 
@@ -7762,7 +7947,7 @@ web-daterangepicker {
   width: 2rem;
   height: 2rem;
   border: none;
-  background: #ff0000;
+  background: #dc3545;
   color: #ffffff;
   cursor: pointer;
   border-radius: 50%;
@@ -7785,7 +7970,7 @@ web-daterangepicker {
 
 .pa-file-dropzone__file-card-remove:hover {
   transform: scale(1.1);
-  background: rgba(255, 0, 0, 0.9);
+  background: rgba(220, 53, 69, 0.9);
 }
 
 .pa-file-dropzone__image-card {
@@ -7832,7 +8017,7 @@ web-daterangepicker {
 }
 
 .pa-file-dropzone__image-card-remove:hover {
-  background: #ff0000;
+  background: #dc3545;
   transform: scale(1.1);
 }
 
@@ -7841,7 +8026,7 @@ web-daterangepicker {
   border: none;
   background: transparent;
   font-size: 1.6rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
 }
 
 .pa-file-dropzone__summary-line {
@@ -7854,7 +8039,7 @@ web-daterangepicker {
 }
 
 .pa-file-dropzone__summary-line:hover {
-  background-color: rgba(255, 0, 0, 0.1);
+  background-color: rgba(0, 123, 255, 0.1);
 }
 
 .pa-file-dropzone__summary-line:not(:last-child)::after {
@@ -7867,11 +8052,11 @@ web-daterangepicker {
 
 .pa-file-dropzone__summary-count {
   font-weight: 500;
-  color: #ff0000;
+  color: #007bff;
 }
 
 .pa-file-dropzone__summary-size {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-weight: normal;
 }
 
@@ -7879,7 +8064,7 @@ web-daterangepicker {
   display: block;
   margin-top: 0.4rem;
   font-style: italic;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -7896,7 +8081,7 @@ web-daterangepicker {
   z-index: 10000;
   background: var(--pa-card-bg);
   border: 1px solid var(--pa-border-color);
-  border-radius: 1px;
+  border-radius: 4px;
   box-shadow: 0 6.4px 32px rgba(0, 0, 0, 0.15);
   max-width: 80rem;
   width: 90vw;
@@ -7930,7 +8115,7 @@ web-daterangepicker {
 .pa-file-popover__title {
   font-size: 1.6rem;
   font-weight: 600;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
 }
 
 .pa-file-popover__close {
@@ -7938,7 +8123,7 @@ web-daterangepicker {
   height: 2.4rem;
   border: none;
   background: transparent;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   cursor: pointer;
   border-radius: 2px;
   font-size: 2rem;
@@ -7950,8 +8135,8 @@ web-daterangepicker {
 }
 
 .pa-file-popover__close:hover {
-  background: rgba(var(--pa-text-secondary), 0.1);
-  color: var(--pa-text-primary);
+  background: rgba(var(--pa-text-color-2), 0.1);
+  color: var(--pa-text-color-1);
 }
 
 .pa-file-popover__body {
@@ -7977,7 +8162,7 @@ web-daterangepicker {
   text-align: left;
   padding: 0.4rem 0.8rem;
   border-bottom: 1px solid var(--pa-border-color);
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-weight: 600;
   font-size: 1.2rem;
   text-transform: uppercase;
@@ -7986,15 +8171,15 @@ web-daterangepicker {
 .pa-file-popover__table td {
   padding: 0.4rem 0.8rem;
   border-bottom: 1px solid var(--pa-border-color);
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
 }
 
 .pa-file-popover__table tbody tr:hover {
-  background: rgba(255, 0, 0, 0.05);
+  background: rgba(0, 123, 255, 0.05);
 }
 
 .pa-file-popover__table tbody tr.uploading {
-  background: rgba(255, 0, 0, 0.1);
+  background: rgba(0, 123, 255, 0.1);
 }
 
 .pa-file-popover__file-name {
@@ -8005,7 +8190,7 @@ web-daterangepicker {
 }
 
 .pa-file-popover__file-size {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   white-space: nowrap;
 }
 
@@ -8015,7 +8200,7 @@ web-daterangepicker {
 
 .pa-file-popover__progress-bar {
   height: 6.4px;
-  background: rgba(255, 0, 0, 0.2);
+  background: rgba(0, 123, 255, 0.2);
   border-radius: 2px;
   overflow: hidden;
   margin-bottom: 0.4rem;
@@ -8023,14 +8208,14 @@ web-daterangepicker {
 
 .pa-file-popover__progress-fill {
   height: 100%;
-  background: #ff0000;
+  background: #007bff;
   border-radius: 2px;
   transition: width 0.48s ease;
 }
 
 .pa-file-popover__progress-text {
   font-size: 1rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
 }
 
 .pa-file-popover__status {
@@ -8040,19 +8225,19 @@ web-daterangepicker {
 }
 
 .pa-file-popover__status--pending {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
 }
 
 .pa-file-popover__status--uploading {
-  color: #ff0000;
+  color: #007bff;
 }
 
 .pa-file-popover__status--complete {
-  color: #00cc44;
+  color: #28a745;
 }
 
 .pa-file-popover__status--error {
-  color: #ff0000;
+  color: #dc3545;
 }
 
 .pa-file-popover__remove-cell {
@@ -8066,7 +8251,7 @@ web-daterangepicker {
   height: 3.2rem;
   border: 1px solid var(--pa-border-color);
   background: var(--pa-card-bg);
-  color: #ff0000;
+  color: #dc3545;
   cursor: pointer;
   border-radius: 2px;
   font-size: 2.4rem;
@@ -8079,9 +8264,9 @@ web-daterangepicker {
 }
 
 .pa-file-popover__remove-btn:hover {
-  background: #ff0000;
+  background: #dc3545;
   color: #ffffff;
-  border-color: #ff0000;
+  border-color: #dc3545;
   transform: scale(1.1);
 }
 
@@ -8096,7 +8281,7 @@ web-daterangepicker {
 .pa-file-list--detailed .pa-file-item {
   padding: 0.8rem;
   border: 1px solid var(--pa-border-color);
-  border-radius: 1px;
+  border-radius: 4px;
   margin-bottom: 0.8rem;
   display: flex;
   align-items: center;
@@ -8122,9 +8307,9 @@ web-daterangepicker {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(255, 0, 0, 0.1);
-  border-radius: 1px;
-  color: #ff0000;
+  background: rgba(0, 123, 255, 0.1);
+  border-radius: 4px;
+  color: #007bff;
 }
 
 .pa-file-item__info {
@@ -8135,7 +8320,7 @@ web-daterangepicker {
 .pa-file-item__name {
   font-size: 1.4rem;
   font-weight: 600;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -8143,7 +8328,7 @@ web-daterangepicker {
 
 .pa-file-item__meta {
   font-size: 1.2rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   margin-top: 0.4rem;
 }
 
@@ -8153,7 +8338,7 @@ web-daterangepicker {
   height: 2.4rem;
   border: none;
   background: transparent;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   cursor: pointer;
   border-radius: 2px;
   font-size: 1.8rem;
@@ -8165,8 +8350,8 @@ web-daterangepicker {
 }
 
 .pa-file-item__remove:hover {
-  background: rgba(255, 0, 0, 0.1);
-  color: #ff0000;
+  background: rgba(220, 53, 69, 0.1);
+  color: #dc3545;
 }
 
 .pa-file-item__remove::before {
@@ -8187,7 +8372,7 @@ web-daterangepicker {
 .pa-file-preview {
   position: relative;
   aspect-ratio: 1;
-  border-radius: 1px;
+  border-radius: 4px;
   overflow: hidden;
   border: 1px solid var(--pa-border-color);
 }
@@ -8218,7 +8403,7 @@ web-daterangepicker {
 }
 
 .pa-file-preview__remove:hover {
-  background: #ff0000;
+  background: #dc3545;
   transform: scale(1.1);
 }
 
@@ -8246,21 +8431,21 @@ web-daterangepicker {
 
 .pa-file-progress__bar {
   height: 6.4px;
-  background: rgba(255, 0, 0, 0.2);
+  background: rgba(0, 123, 255, 0.2);
   border-radius: 2px;
   overflow: hidden;
 }
 
 .pa-file-progress__fill {
   height: 100%;
-  background: #ff0000;
+  background: #007bff;
   border-radius: 2px;
   transition: width 0.48s ease;
 }
 
 .pa-file-progress__text {
   font-size: 1.2rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   margin-top: 0.4rem;
   display: flex;
   justify-content: space-between;
@@ -8273,11 +8458,11 @@ web-daterangepicker {
 }
 
 .pa-file-progress__status--complete {
-  color: #00cc44;
+  color: #28a745;
 }
 
 .pa-file-progress__status--error {
-  color: #ff0000;
+  color: #dc3545;
 }
 
 .pa-file-icon--pdf::before {
@@ -8317,10 +8502,10 @@ web-daterangepicker {
 }
 
 .pa-file-dropzone-overlay {
-  background: rgba(255, 0, 0, 0.15);
+  background: rgba(0, 123, 255, 0.15);
   backdrop-filter: blur(3.2px);
-  border: 4.8px dashed #ff0000;
-  border-radius: 1px;
+  border: 4.8px dashed #007bff;
+  border-radius: 4px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -8340,7 +8525,7 @@ web-daterangepicker {
 .pa-file-dropzone-overlay__text {
   font-size: 2rem;
   font-weight: 600;
-  color: #ff0000;
+  color: #007bff;
 }
 
 /* ========================================
@@ -8377,7 +8562,7 @@ web-daterangepicker {
   margin: 0;
   cursor: pointer;
   font-size: 1.4rem;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   user-select: none;
   width: 100%;
 }
@@ -8404,7 +8589,7 @@ web-daterangepicker {
   display: block;
   margin-top: 0.4rem;
   font-size: 1.2rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
 }
 
 .pa-checkbox-list__actions {
@@ -8432,17 +8617,17 @@ web-daterangepicker {
 
 .pa-checkbox-list--bordered {
   border: 1px solid var(--pa-border-color);
-  border-radius: 1px;
+  border-radius: 4px;
 }
 
 .pa-checkbox-list--bordered .pa-checkbox-list__item:first-child {
-  border-top-left-radius: 1px;
-  border-top-right-radius: 1px;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
 }
 
 .pa-checkbox-list--bordered .pa-checkbox-list__item:last-child {
-  border-bottom-left-radius: 1px;
-  border-bottom-right-radius: 1px;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
 }
 
 .pa-checkbox-list--striped .pa-checkbox-list__item:nth-child(even) {
@@ -8476,7 +8661,7 @@ web-daterangepicker {
 }
 
 .pa-checkbox-list__item--locked:hover {
-  background-color: rgba(255, 102, 0, 0.05);
+  background-color: rgba(255, 193, 7, 0.05);
 }
 
 .pa-checkbox-list__item--locked .pa-checkbox-list__checkbox {
@@ -8490,7 +8675,7 @@ web-daterangepicker {
 }
 
 .pa-checkbox-list__item--locked .pa-checkbox-list__label .pa-checkbox-list__text {
-  color: #ff6600;
+  color: #ffc107;
 }
 
 .pa-checkbox-list__item--locked .pa-checkbox-list__label .pa-checkbox-list__text::before {
@@ -8506,7 +8691,7 @@ web-daterangepicker {
 
 .pa-checkbox-list--inline .pa-checkbox-list__item {
   border: 1px solid var(--pa-border-color);
-  border-radius: 1px;
+  border-radius: 4px;
   flex: 0 1 auto;
 }
 
@@ -8527,7 +8712,7 @@ web-daterangepicker {
 
 .pa-checkbox-list--grid .pa-checkbox-list__item {
   border: 1px solid var(--pa-border-color);
-  border-radius: 1px;
+  border-radius: 4px;
 }
 
 .pa-checkbox-list--grid .pa-checkbox-list__item:hover {
@@ -8593,7 +8778,7 @@ web-daterangepicker {
    ======================================== */
 .pa-table-container {
   overflow-x: auto;
-  border-radius: 1px;
+  border-radius: 4px;
   border: 1px solid var(--pa-border-color);
   background-color: var(--pa-table-bg);
 }
@@ -8617,12 +8802,12 @@ web-daterangepicker {
 .pa-table th {
   background-color: var(--pa-table-header-bg);
   font-weight: 600;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   border-bottom: 2px solid var(--pa-border-color);
 }
 
 .pa-table td {
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   background-color: var(--pa-table-bg);
   height: 3.5rem0.8rem;
 }
@@ -8672,18 +8857,8 @@ web-daterangepicker {
   height: 4.1rem0.8rem;
 }
 
-.pa-table th:first-child {
-  padding-left: 1.1rem;
-}
-
-.pa-table tbody tr {
-  border-left: 0.3rem solid transparent;
-  transition: border-color 0.15s ease;
-}
-
 .pa-table tbody tr:hover {
   background-color: var(--pa-table-hover-bg);
-  border-left-color: var(--pa-table-hover-accent-color);
 }
 
 .pa-table tbody tr:hover td {
@@ -8753,7 +8928,7 @@ web-daterangepicker {
 }
 
 .pa-pager__text {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-size: 1.4rem;
 }
 
@@ -8793,8 +8968,8 @@ web-daterangepicker {
   padding: 0.8rem 1.2rem;
   background-color: transparent;
   border: 1px solid var(--pa-border-color);
-  border-radius: 1px;
-  color: var(--pa-text-primary);
+  border-radius: 4px;
+  color: var(--pa-text-color-1);
   font-size: 1.4rem;
   cursor: pointer;
   transition: all 0.1s ease-out;
@@ -8828,14 +9003,14 @@ web-daterangepicker {
 }
 
 .pa-load-more__count {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-size: 1.2rem;
   margin-left: 0.4rem;
 }
 
 .pa-virtual-table {
   border: 1px solid var(--pa-border-color);
-  border-radius: 1px;
+  border-radius: 4px;
   height: 400px;
   overflow: auto;
   position: relative;
@@ -8858,7 +9033,7 @@ web-daterangepicker {
   font-weight: 600;
   border-right: 1px solid var(--pa-border-color);
   background: var(--pa-table-header-bg);
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
 }
 
 .pa-virtual-table__header-cell:last-child {
@@ -8874,8 +9049,6 @@ web-daterangepicker {
   grid-template-columns: 80px 1fr 1fr 120px 100px 100px;
   border-bottom: 1px solid var(--pa-border-color);
   background: var(--pa-table-bg);
-  border-left: 0.3rem solid transparent;
-  transition: border-color 0.15s ease;
 }
 
 .pa-virtual-table__row:nth-child(even) {
@@ -8884,7 +9057,6 @@ web-daterangepicker {
 
 .pa-virtual-table__row:hover {
   background: var(--pa-table-hover-bg);
-  border-left-color: var(--pa-table-hover-accent-color);
 }
 
 .pa-virtual-table__cell {
@@ -8893,7 +9065,7 @@ web-daterangepicker {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   background-color: inherit;
 }
 
@@ -8917,9 +9089,8 @@ web-daterangepicker {
     display: block;
     margin-bottom: 1.6rem;
     border: 1px solid var(--pa-border-color);
-    border-radius: 1px;
+    border-radius: 4px;
     overflow: hidden;
-    border-left: 1px solid var(--pa-border-color) !important;
   }
   .pa-table--responsive tbody tr:last-child {
     margin-bottom: 0;
@@ -8981,7 +9152,7 @@ web-daterangepicker {
     display: block;
     margin-bottom: 1.6rem;
     border: 1px solid var(--pa-border-color);
-    border-radius: 1px;
+    border-radius: 4px;
     overflow: hidden;
   }
   .pa-table--responsive-grid tbody tr:last-child {
@@ -8999,7 +9170,7 @@ web-daterangepicker {
     content: attr(data-label);
     display: block;
     font-weight: 600;
-    color: var(--pa-text-secondary);
+    color: var(--pa-text-color-2);
     font-size: 1.2rem;
     margin-bottom: 0.4rem;
     text-transform: uppercase;
@@ -9078,8 +9249,8 @@ web-daterangepicker {
 
 .pa-comparison-table__label {
   font-weight: 500;
-  color: var(--pa-text-secondary);
-  background-color: var(--pa-primary-bg);
+  color: var(--pa-text-color-2);
+  background-color: var(--pa-main-bg);
 }
 
 .pa-comparison-table__value {
@@ -9149,7 +9320,7 @@ tbody tr:hover .pa-comparison-table__copy {
 .pa-comparison-table__section td {
   background-color: var(--pa-table-header-bg);
   font-weight: 600;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   padding: 0.4rem 1.6rem;
   border-top: 2px solid var(--pa-border-color);
   border-bottom: 1px solid var(--pa-border-color);
@@ -9164,7 +9335,7 @@ tbody tr:hover .pa-comparison-table__copy {
     flex-direction: column;
     margin-bottom: 1.6rem;
     border: 1px solid var(--pa-border-color);
-    border-radius: 1px;
+    border-radius: 4px;
   }
   .pa-comparison-table tbody td {
     display: flex;
@@ -9210,10 +9381,10 @@ code {
   font-family: "Courier New", Courier, monospace;
   font-size: 1.4rem;
   line-height: 1.8;
-  background-color: var(--pa-primary-bg);
-  color: var(--pa-text-primary);
+  background-color: var(--pa-main-bg);
+  color: var(--pa-text-color-1);
   border: 1px solid var(--pa-border-color);
-  border-radius: 1px;
+  border-radius: 4px;
   overflow-x: auto;
   white-space: pre;
   margin: 0;
@@ -9271,7 +9442,7 @@ code {
 
 .pa-code-block {
   border: 1px solid var(--pa-border-color);
-  border-radius: 1px;
+  border-radius: 4px;
   overflow: hidden;
 }
 
@@ -9287,7 +9458,7 @@ code {
 .pa-code-block__title {
   font-size: 1.4rem;
   font-weight: 600;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   margin: 0;
 }
 
@@ -9315,7 +9486,7 @@ code {
 }
 
 .pa-code-comment {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-style: italic;
 }
 
@@ -9384,7 +9555,7 @@ code {
 }
 
 .pa-pager__text {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-size: 1.4rem;
 }
 
@@ -9424,8 +9595,8 @@ code {
   padding: 0.8rem 1.2rem;
   background-color: transparent;
   border: 1px solid var(--pa-border-color);
-  border-radius: 1px;
-  color: var(--pa-text-primary);
+  border-radius: 4px;
+  color: var(--pa-text-color-1);
   font-size: 1.4rem;
   cursor: pointer;
   transition: all 0.1s ease-out;
@@ -9450,7 +9621,7 @@ code {
   width: 1.6rem;
   height: 1.6rem;
   border: 2px solid var(--pa-border-color);
-  border-top: 2px solid #ff0000;
+  border-top: 2px solid #007bff;
   border-radius: 50%;
 }
 
@@ -9459,7 +9630,7 @@ code {
 }
 
 .pa-load-more__count {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-size: 1.2rem;
   margin-left: 0.4rem;
 }
@@ -9469,23 +9640,24 @@ code {
    Profile panel and header button
    ======================================== */
 :root {
-  --pa-profile-panel-width: 20vw;
-  --pa-profile-panel-max-width: 48rem;
+  --pa-local-profile-panel-width: 20vw;
+  --pa-local-profile-panel-max-width: 48rem;
 }
 
 :where(.pa-profile-panel__content) {
-  width: var(--pa-profile-panel-width);
-  max-width: var(--pa-profile-panel-max-width);
+  width: var(--pa-local-profile-panel-width);
+  max-width: var(--pa-local-profile-panel-max-width);
 }
 
 .pa-header__profile-btn {
   display: flex;
   align-items: center;
+  gap: 0.4rem;
   background: none;
   border: none;
   padding: 0.4rem 0.8rem;
-  border-radius: 1px;
-  color: var(--pa-text-primary);
+  border-radius: 4px;
+  color: var(--pa-header-text);
   cursor: pointer;
   font-size: 1.4rem;
   transition: background-color 0.1s ease-out;
@@ -9502,7 +9674,7 @@ code {
 
 .pa-header__profile-name {
   font-weight: 500;
-  color: #ffffff;
+  color: var(--pa-header-profile-name-color);
 }
 
 .pa-profile-panel {
@@ -9591,7 +9763,7 @@ code {
   margin: 0 0 0.4rem 0;
   font-size: 1.8rem;
   font-weight: 600;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -9600,7 +9772,7 @@ code {
 .pa-profile-panel__email {
   margin: 0 0 0.8rem 0;
   font-size: 1.4rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -9613,7 +9785,7 @@ code {
   color: var(--pa-accent);
   font-size: 1.2rem;
   font-weight: 500;
-  border-radius: 1px;
+  border-radius: 4px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
@@ -9630,8 +9802,8 @@ code {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--pa-text-secondary);
-  border-radius: 1px;
+  color: var(--pa-text-color-2);
+  border-radius: 4px;
   transition: background-color 0.1s ease-out, color 0.1s ease-out;
 }
 
@@ -9669,9 +9841,9 @@ code {
   align-items: center;
   gap: 1.2rem;
   padding: 0.8rem 1.6rem;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   text-decoration: none;
-  border-radius: 1px;
+  border-radius: 4px;
   transition: background-color 0.1s ease-out, color 0.1s ease-out;
   font-weight: 500;
 }
@@ -9739,6 +9911,10 @@ code {
   border-bottom-color: var(--pa-accent);
 }
 
+.pa-profile-panel__tabs--icon-only .pa-profile-panel__tab-text {
+  display: none;
+}
+
 .pa-profile-panel__favorites ul {
   list-style: none;
   margin: 0;
@@ -9754,9 +9930,9 @@ code {
   align-items: center;
   gap: 1.2rem;
   padding: 0.8rem 1.6rem;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   text-decoration: none;
-  border-radius: 1px;
+  border-radius: 4px;
   cursor: pointer;
   transition: background-color 0.1s ease-out, color 0.1s ease-out;
   font-weight: 500;
@@ -9791,16 +9967,16 @@ code {
   background: none;
   border: none;
   padding: 0.4rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   cursor: pointer;
-  border-radius: 1px;
+  border-radius: 4px;
   font-size: 1.4rem;
   line-height: 1;
   transition: opacity 0.1s ease-out, color 0.1s ease-out, background-color 0.1s ease-out;
 }
 
 .pa-profile-panel__favorite-remove:hover {
-  color: var(--pa-danger);
+  color: var(--pa-danger-bg);
   background-color: var(--pa-danger-bg-light);
 }
 
@@ -9908,14 +10084,14 @@ code {
   margin: 0;
   font-size: 1.8rem;
   font-weight: 600;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
 }
 
 .pa-modal__body {
   padding: 1.2rem 1.6rem;
   flex: 1;
   overflow-y: auto;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
 }
 
 .pa-modal__footer {
@@ -10045,7 +10221,7 @@ code {
 .pa-toast {
   background-color: var(--pa-card-bg);
   border: 1px solid var(--pa-border-color);
-  border-radius: 1px;
+  border-radius: 4px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   min-width: 32rem;
   max-width: 40rem;
@@ -10103,7 +10279,7 @@ code {
   align-items: center;
   justify-content: center;
   font-size: 1.8rem;
-  border-radius: 1px;
+  border-radius: 4px;
 }
 
 .pa-toast__content {
@@ -10114,13 +10290,13 @@ code {
 .pa-toast__title {
   font-weight: 600;
   margin: 0 0 0.4rem 0;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   font-size: 1.4rem;
 }
 
 .pa-toast__message {
   margin: 0;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-size: 1.4rem;
   line-height: 1.5;
 }
@@ -10129,7 +10305,7 @@ code {
   flex-shrink: 0;
   background: none;
   border: none;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   cursor: pointer;
   padding: 0;
   width: 2.4rem;
@@ -10137,7 +10313,7 @@ code {
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 1px;
+  border-radius: 4px;
   font-size: 1.8rem;
   line-height: 1;
   transition: background-color 0.1s ease, color 0.1s ease;
@@ -10145,7 +10321,7 @@ code {
 
 .pa-toast__close:hover {
   background-color: var(--pa-accent-hover);
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
 }
 
 .pa-toast__close:focus {
@@ -10281,81 +10457,81 @@ code {
   top: 0;
   width: 15px;
   height: 15px;
-  background: var(--pa-primary-bg);
-  border: 1px solid #ff0000;
+  background: var(--pa-main-bg);
+  border: 1px solid #007bff;
   border-radius: 50%;
-  box-shadow: 3px 3px 0 rgba(255, 0, 0, 0.3);
+  box-shadow: 3px 3px 0 rgba(0, 123, 255, 0.3);
 }
 
 .pa-timeline--simple .pa-timeline__item--primary::before {
-  border-color: #ff0000;
-  box-shadow: 3px 3px 0 rgba(255, 0, 0, 0.3);
+  border-color: #007bff;
+  box-shadow: 3px 3px 0 rgba(0, 123, 255, 0.3);
 }
 
 .pa-timeline--simple .pa-timeline__item--success::before {
-  border-color: #00cc44;
-  box-shadow: 3px 3px 0 rgba(0, 204, 68, 0.3);
+  border-color: #28a745;
+  box-shadow: 3px 3px 0 rgba(40, 167, 69, 0.3);
 }
 
 .pa-timeline--simple .pa-timeline__item--warning::before {
-  border-color: #ff6600;
-  box-shadow: 3px 3px 0 rgba(255, 102, 0, 0.3);
+  border-color: #ffc107;
+  box-shadow: 3px 3px 0 rgba(255, 193, 7, 0.3);
 }
 
 .pa-timeline--simple .pa-timeline__item--danger::before {
-  border-color: #ff0000;
-  box-shadow: 3px 3px 0 rgba(255, 0, 0, 0.3);
+  border-color: #dc3545;
+  box-shadow: 3px 3px 0 rgba(220, 53, 69, 0.3);
 }
 
 .pa-timeline--simple .pa-timeline__item--info::before {
-  border-color: #0099ff;
-  box-shadow: 3px 3px 0 rgba(0, 153, 255, 0.3);
+  border-color: #17a2b8;
+  box-shadow: 3px 3px 0 rgba(23, 162, 184, 0.3);
 }
 
 .pa-timeline--simple .pa-timeline__item--secondary::before {
-  border-color: var(--pa-text-secondary);
-  box-shadow: 3px 3px 0 rgba(var(--pa-text-secondary), 0.3);
+  border-color: var(--pa-text-color-2);
+  box-shadow: 3px 3px 0 rgba(var(--pa-text-color-2), 0.3);
 }
 
 .pa-timeline--simple .pa-timeline__item--filled::before {
-  background: #ff0000;
+  background: #007bff;
 }
 
 .pa-timeline--simple .pa-timeline__item--filled.pa-timeline__item--primary::before {
-  background: #ff0000;
+  background: #007bff;
 }
 
 .pa-timeline--simple .pa-timeline__item--filled.pa-timeline__item--success::before {
-  background: #00cc44;
+  background: #28a745;
 }
 
 .pa-timeline--simple .pa-timeline__item--filled.pa-timeline__item--warning::before {
-  background: #ff6600;
+  background: #ffc107;
 }
 
 .pa-timeline--simple .pa-timeline__item--filled.pa-timeline__item--danger::before {
-  background: #ff0000;
+  background: #dc3545;
 }
 
 .pa-timeline--simple .pa-timeline__item--filled.pa-timeline__item--info::before {
-  background: #0099ff;
+  background: #17a2b8;
 }
 
 .pa-timeline--simple .pa-timeline__item--filled.pa-timeline__item--secondary::before {
-  background: var(--pa-text-secondary);
+  background: var(--pa-text-color-2);
 }
 
 .pa-timeline--simple .pa-timeline__time {
   display: block;
   font-size: 1.4rem;
   font-weight: 600;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   margin-bottom: 0.4rem;
 }
 
 .pa-timeline--simple .pa-timeline__content {
   font-size: 1.4rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   line-height: 1.8;
   margin-top: 0.6rem;
 }
@@ -10371,7 +10547,7 @@ code {
   content: "";
   position: absolute;
   width: 2px;
-  background: #ff0000;
+  background: #007bff;
   top: 0;
   bottom: 0;
   left: 50%;
@@ -10410,8 +10586,8 @@ code {
   height: 16px;
   top: calc(50% - 8px);
   right: -8px;
-  background: var(--pa-primary-bg);
-  border: 2px solid #ff0000;
+  background: var(--pa-main-bg);
+  border: 2px solid #007bff;
   border-radius: 50%;
   z-index: 1;
 }
@@ -10423,7 +10599,7 @@ code {
   height: 2px;
   top: calc(50% - 1px);
   right: 8px;
-  background: #ff0000;
+  background: #007bff;
   z-index: 1;
 }
 
@@ -10452,8 +10628,8 @@ code {
   height: 16px;
   top: calc(50% - 8px);
   left: -8px;
-  background: var(--pa-primary-bg);
-  border: 2px solid #ff0000;
+  background: var(--pa-main-bg);
+  border: 2px solid #007bff;
   border-radius: 50%;
   z-index: 1;
 }
@@ -10465,7 +10641,7 @@ code {
   height: 2px;
   top: calc(50% - 1px);
   left: 8px;
-  background: #ff0000;
+  background: #007bff;
   z-index: 1;
 }
 
@@ -10476,7 +10652,7 @@ code {
   text-align: center;
   font-size: 1.4rem;
   font-weight: 700;
-  color: #ff0000;
+  color: #007bff;
   text-transform: uppercase;
   letter-spacing: 1px;
   z-index: 1;
@@ -10490,16 +10666,16 @@ code {
   width: 40px;
   height: 40px;
   top: calc(50% - 20px);
-  background: #ff6600;
-  border: 2px solid #ff0000;
+  background: #ffc107;
+  border: 2px solid #007bff;
   border-radius: 50%;
   font-size: 1.8rem;
-  color: #ff0000;
+  color: #007bff;
   z-index: 1;
 }
 
 .pa-timeline--alternating .pa-timeline__content {
-  background: #ff6600;
+  background: #ffc107;
   position: relative;
 }
 
@@ -10507,7 +10683,7 @@ code {
   margin: 0 0 0.8rem 0;
   font-size: 1.8rem;
   font-weight: 400;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
 }
 
 .pa-timeline--alternating .pa-timeline__content p {
@@ -10674,12 +10850,12 @@ code {
 .pa-timeline--feed .pa-timeline__content {
   flex: 1;
   font-size: 1.4rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   line-height: 1.8;
 }
 
 .pa-timeline--feed .pa-timeline__content a {
-  color: #ff0000;
+  color: #007bff;
   text-decoration: none;
   font-weight: 500;
 }
@@ -10689,7 +10865,7 @@ code {
 }
 
 .pa-timeline--feed .pa-timeline__content time {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-size: 1.2rem;
 }
 
@@ -10714,12 +10890,12 @@ code {
   padding: 1.6rem;
   background: var(--pa-card-bg);
   border: 1px solid var(--pa-border-color);
-  border-radius: 1px;
+  border-radius: 4px;
 }
 
 .pa-timeline--feed .pa-timeline__comment p {
   margin: 0 0 0.8rem 0;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   line-height: 1.8;
 }
 
@@ -10747,7 +10923,7 @@ code {
 .pa-timeline--feed .pa-timeline__date-label {
   font-size: 1.4rem;
   font-weight: 600;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
@@ -10756,7 +10932,7 @@ code {
   flex-shrink: 0;
   width: 50px;
   font-size: 1.2rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-weight: 500;
   text-align: right;
   padding-right: 0.8rem;
@@ -10778,7 +10954,7 @@ code {
 .pa-timeline__loader-text {
   margin-top: 0.8rem;
   font-size: 1.4rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
 }
 
 .pa-timeline__load-more-wrapper {
@@ -10871,20 +11047,20 @@ code {
   padding: 0.8rem 0.8rem;
   font-size: 1.6rem;
   border: 1px solid var(--pa-border-color);
-  border-radius: 1px;
+  border-radius: 4px;
   background-color: var(--pa-input-bg);
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   outline: none;
   transition: border-color 0.1s ease-out;
 }
 
 .pa-command-palette__input:focus {
-  border-color: #ff0000;
-  box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.25);
+  border-color: #007bff;
+  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.05);
 }
 
 .pa-command-palette__input::placeholder {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   opacity: 0.5;
 }
 
@@ -10921,7 +11097,7 @@ code {
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(26, 26, 26, 0.7);
+  background-color: rgba(255, 255, 255, 0.7);
   pointer-events: none;
   z-index: 1;
 }
@@ -10929,7 +11105,7 @@ code {
 .pa-command-palette__empty {
   padding: 4.8rem 0.8rem;
   text-align: center;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-size: 1.4rem;
 }
 
@@ -10939,7 +11115,7 @@ code {
   align-items: center;
   justify-content: center;
   gap: 0.8rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-size: 1.4rem;
 }
 
@@ -10986,7 +11162,7 @@ code {
 .pa-command-palette__item-title {
   font-size: 1.4rem;
   font-weight: 500;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   margin: 0;
   white-space: nowrap;
   overflow: hidden;
@@ -11003,7 +11179,7 @@ code {
 
 .pa-command-palette__item-meta {
   font-size: 1.2rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   margin: 0;
   margin-top: 2px;
   white-space: nowrap;
@@ -11015,8 +11191,8 @@ code {
   flex-shrink: 0;
   font-size: 1.2rem;
   padding: 2px 0.4rem;
-  background-color: #333333;
-  color: var(--pa-text-secondary);
+  background-color: #e9ecef;
+  color: var(--pa-text-color-2);
   border-radius: 2px;
 }
 
@@ -11026,7 +11202,7 @@ code {
   display: flex;
   gap: 1.6rem;
   font-size: 1.2rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
 }
 
 .pa-command-palette__hint {
@@ -11037,10 +11213,10 @@ code {
 
 .pa-command-palette__key {
   padding: 2px 0.4rem;
-  background-color: #333333;
+  background-color: #e9ecef;
   border: 1px solid var(--pa-border-color);
   border-radius: 2px;
-  font-family: "Fira Sans Condensed", "Arial Narrow", "Arial", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   font-weight: 500;
   font-size: 1rem;
   line-height: 1;
@@ -11050,7 +11226,7 @@ code {
   padding: 0.8rem 0.8rem 0.4rem;
   font-size: 1.2rem;
   font-weight: 600;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
@@ -11059,7 +11235,7 @@ code {
   padding: 0.4rem 0.8rem;
   text-align: center;
   font-size: 1.2rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   border-top: 1px solid var(--pa-border-color);
 }
 
@@ -11103,19 +11279,19 @@ code {
   padding: 0.8rem 0.8rem;
   background-color: var(--pa-input-bg);
   border: 1px solid var(--pa-border-color);
-  border-radius: 1px;
+  border-radius: 4px;
   cursor: pointer;
   transition: border-color 0.1s ease-out;
 }
 
 .pa-navbar-search:hover {
-  border-color: #ff0000;
+  border-color: #007bff;
 }
 
 .pa-navbar-search:focus {
   outline: none;
-  border-color: #ff0000;
-  box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.25);
+  border-color: #007bff;
+  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.05);
 }
 
 .pa-navbar-search--xs {
@@ -11150,7 +11326,7 @@ code {
 
 .pa-navbar-search__placeholder {
   flex: 1;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -11170,11 +11346,11 @@ code {
   min-width: 2rem;
   height: 2rem;
   padding: 0 0.4rem;
-  font-family: "Fira Sans Condensed", "Arial Narrow", "Arial", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   font-size: 1rem;
   font-weight: 500;
-  color: var(--pa-text-secondary);
-  background-color: #333333;
+  color: var(--pa-text-color-2);
+  background-color: #e9ecef;
   border: 1px solid var(--pa-border-color);
   border-radius: 2px;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
@@ -11209,7 +11385,7 @@ code {
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.5px;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   margin: 0;
   padding-bottom: 0.4rem;
   border-bottom: 1px solid var(--pa-border-color);
@@ -11243,29 +11419,29 @@ code {
   min-width: 2.4rem;
   height: 2.4rem;
   padding: 0 0.4rem;
-  font-family: "Fira Sans Condensed", "Arial Narrow", "Arial", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   font-size: 1rem;
   font-weight: 500;
-  color: var(--pa-text-primary);
-  background-color: #333333;
+  color: var(--pa-text-color-1);
+  background-color: #e9ecef;
   border: 1px solid var(--pa-border-color);
   border-radius: 2px;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
 }
 
 .pa-shortcut-help__separator {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-size: 1.2rem;
 }
 
 .pa-shortcut-help__description {
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   font-size: 1.4rem;
 }
 
 .pa-shortcut-help__empty {
   text-align: center;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   padding: 3.2rem;
 }
 
@@ -11276,20 +11452,20 @@ code {
 .pa-logic-tree {
   padding: 1.6rem;
   background: #f9fafb;
-  border-radius: 1px;
+  border-radius: 4px;
   min-height: 6.4rem;
-  font-family: "Fira Sans Condensed", "Arial Narrow", "Arial", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 }
 
 .pa-logic-tree__empty {
   text-align: center;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   padding: 3.2rem;
   font-style: italic;
 }
 
 .pa-logic-tree__empty-branch {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-style: italic;
   padding: 0.8rem 1.2rem;
   background: #f9fafb;
@@ -11309,7 +11485,7 @@ code {
 .pa-logic-tree__block {
   background: #fff;
   border: 3.2px solid var(--pa-border-color);
-  border-radius: 1px;
+  border-radius: 4px;
   padding: 0.8rem;
   position: relative;
   transition: box-shadow 0.32s ease;
@@ -11321,7 +11497,7 @@ code {
 
 .pa-logic-tree__block--condition {
   background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
-  border-color: var(--pa-primary-bg);
+  border-color: var(--pa-main-bg);
   border-left-width: 6.4px;
 }
 
@@ -11331,12 +11507,12 @@ code {
 }
 
 .pa-logic-tree__block--and {
-  border-color: #ff6600;
+  border-color: #ffc107;
   background: linear-gradient(135deg, #fff8e1 0%, #ffffff 100%);
 }
 
 .pa-logic-tree__block--or {
-  border-color: #0099ff;
+  border-color: #17a2b8;
   background: linear-gradient(135deg, #e3f2fd 0%, #ffffff 100%);
 }
 
@@ -11428,7 +11604,7 @@ code {
   color: #e65100;
   border: 3.2px solid #ff9800;
   padding: 0.4rem 1.2rem;
-  border-radius: 1px;
+  border-radius: 4px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.05em;
@@ -11438,10 +11614,10 @@ code {
 .pa-logic-tree__group-label {
   font-weight: 500;
   font-size: 1.4rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   margin-bottom: 0.8rem;
   padding-bottom: 0.8rem;
-  border-bottom: 1.6px dashed #333333;
+  border-bottom: 1.6px dashed #e1e5e9;
 }
 
 .pa-logic-tree__group-content {
@@ -11535,8 +11711,8 @@ code {
   height: 3.2rem;
   background: none;
   border: none;
-  border-radius: 1px;
-  color: var(--pa-text-primary);
+  border-radius: 4px;
+  color: var(--pa-header-text);
   cursor: pointer;
   transition: background-color 0.1s ease-out;
 }
@@ -11562,7 +11738,7 @@ code {
   min-width: 1.6rem;
   height: 1.6rem;
   padding: 0 0.4rem;
-  background-color: #ff0000;
+  background-color: #dc3545;
   color: #ffffff;
   font-size: 1rem;
   font-weight: 600;
@@ -11581,7 +11757,7 @@ code {
   max-height: 44.8rem;
   background-color: var(--pa-card-bg);
   border: 1px solid var(--pa-border-color);
-  border-radius: 1px;
+  border-radius: 4px;
   box-shadow: 0 0 80px rgba(0, 0, 0, 0.15);
   z-index: 5000;
   display: none;
@@ -11606,14 +11782,14 @@ code {
   margin: 0;
   font-size: 1.4rem;
   font-weight: 600;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
 }
 
 .pa-notifications__mark-read {
   background: none;
   border: none;
   padding: 0;
-  color: #ff0000;
+  color: #007bff;
   font-size: 1.4rem;
   font-weight: 500;
   cursor: pointer;
@@ -11621,7 +11797,7 @@ code {
 }
 
 .pa-notifications__mark-read:hover {
-  color: rgba(255, 0, 0, 0.3);
+  color: rgba(0, 123, 255, 0.12);
 }
 
 .pa-notifications__list {
@@ -11650,11 +11826,11 @@ code {
 }
 
 .pa-notifications__item--unread {
-  background-color: rgba(255, 0, 0, 0.05);
+  background-color: rgba(0, 123, 255, 0.05);
 }
 
 .pa-notifications__item--unread:hover {
-  background-color: rgba(255, 0, 0, 0.1);
+  background-color: rgba(0, 123, 255, 0.1);
 }
 
 .pa-notifications__icon-wrapper {
@@ -11671,28 +11847,28 @@ code {
 }
 
 .pa-notifications__icon-wrapper--primary {
-  background-color: rgba(255, 0, 0, 0.1);
-  color: #ff0000;
+  background-color: rgba(0, 123, 255, 0.1);
+  color: #007bff;
 }
 
 .pa-notifications__icon-wrapper--success {
-  background-color: rgba(0, 204, 68, 0.1);
-  color: #00cc44;
+  background-color: rgba(40, 167, 69, 0.1);
+  color: #28a745;
 }
 
 .pa-notifications__icon-wrapper--warning {
-  background-color: rgba(255, 102, 0, 0.1);
-  color: #ff6600;
+  background-color: rgba(255, 193, 7, 0.1);
+  color: #ffc107;
 }
 
 .pa-notifications__icon-wrapper--danger {
-  background-color: rgba(255, 0, 0, 0.1);
-  color: #ff0000;
+  background-color: rgba(220, 53, 69, 0.1);
+  color: #dc3545;
 }
 
 .pa-notifications__icon-wrapper--secondary {
-  background-color: rgba(var(--pa-text-secondary), 0.1);
-  color: var(--pa-text-secondary);
+  background-color: rgba(var(--pa-text-color-2), 0.1);
+  color: var(--pa-text-color-2);
 }
 
 .pa-notifications__content {
@@ -11704,13 +11880,13 @@ code {
   margin: 0 0 0.2rem 0;
   font-size: 1.2rem;
   font-weight: 600;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
 }
 
 .pa-notifications__content p {
   margin: 0 0 0.2rem 0;
   font-size: 1.2rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   line-height: 1.3;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -11721,7 +11897,7 @@ code {
 
 .pa-notifications__time {
   font-size: 1rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-weight: 400;
   opacity: 0.7;
 }
@@ -11733,7 +11909,7 @@ code {
 }
 
 .pa-notifications__footer a {
-  color: #ff0000;
+  color: #007bff;
   font-size: 1.4rem;
   font-weight: 500;
   text-decoration: none;
@@ -11741,7 +11917,7 @@ code {
 }
 
 .pa-notifications__footer a:hover {
-  color: rgba(255, 0, 0, 0.3);
+  color: rgba(0, 123, 255, 0.12);
 }
 
 @media (max-width: 768px) {
@@ -11835,7 +12011,7 @@ code {
 .pa-popconfirm__content {
   background-color: var(--pa-card-bg);
   border: 1px solid var(--pa-border-color);
-  border-radius: 1px;
+  border-radius: 4px;
   box-shadow: 0 0 80px rgba(0, 0, 0, 0.15);
   overflow: hidden;
 }
@@ -11848,7 +12024,7 @@ code {
 .pa-popconfirm__message p {
   margin: 0;
   font-size: 1.4rem;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   line-height: 1.5;
 }
 
@@ -11885,7 +12061,7 @@ code {
   display: flex;
   gap: 0.8rem;
   justify-content: flex-end;
-  background-color: rgba(51, 51, 51, 0.3);
+  background-color: rgba(225, 229, 233, 0.3);
 }
 
 .pa-popconfirm__actions .pa-btn {
@@ -11972,10 +12148,10 @@ code {
   top: 0;
   width: 40px;
   height: 40px;
-  background: #ff0000;
+  background: #007bff;
   color: white;
   border: none;
-  border-radius: 1px 0 0 1px;
+  border-radius: 4px 0 0 4px;
   cursor: pointer;
   font-size: 2rem;
   display: flex;
@@ -11986,16 +12162,16 @@ code {
 }
 
 .pa-settings-panel__toggle:hover {
-  background: rgba(255, 0, 0, 0.3);
+  background: rgba(0, 123, 255, 0.12);
   width: 45px;
   right: 325px;
 }
 
 .pa-settings-panel__content {
-  background: var(--pa-content-bg);
+  background: var(--pa-subtle-bg);
   border: 1px solid var(--pa-border-color);
   border-right: none;
-  border-radius: 1px 0 0 1px;
+  border-radius: 4px 0 0 4px;
   box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
   padding: 2.4rem;
   width: 100%;
@@ -12009,7 +12185,7 @@ code {
   margin: 0 0 2.4rem 0;
   padding-bottom: 1.2rem;
   border-bottom: 2px solid var(--pa-border-color);
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   font-size: 1.8rem;
   font-weight: 600;
 }
@@ -12025,7 +12201,7 @@ code {
 .pa-settings-panel__label {
   display: block;
   margin-bottom: 0.8rem;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   font-size: 1.4rem;
   font-weight: 500;
 }
@@ -12034,17 +12210,17 @@ code {
   width: 100%;
   padding: 0.8rem;
   border: 1px solid var(--pa-border-color);
-  border-radius: 1px;
+  border-radius: 4px;
   background: var(--pa-input-bg);
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   font-size: 1.4rem;
   cursor: pointer;
 }
 
 .pa-settings-panel__select:focus {
   outline: none;
-  border-color: #ff0000;
-  box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.25);
+  border-color: #007bff;
+  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.05);
 }
 
 .pa-settings-panel__checkbox-group {
@@ -12057,7 +12233,7 @@ code {
   display: flex;
   align-items: center;
   cursor: pointer;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   font-size: 1.4rem;
 }
 
@@ -12067,7 +12243,7 @@ code {
 }
 
 .pa-settings-panel__checkbox:hover {
-  color: #ff0000;
+  color: #007bff;
 }
 
 .pa-settings-panel--open {
@@ -12075,7 +12251,7 @@ code {
 }
 
 .pa-settings-panel--open .pa-settings-panel__toggle {
-  background: rgba(255, 0, 0, 0.3);
+  background: rgba(0, 123, 255, 0.12);
   transform: rotate(180deg);
 }
 
@@ -12357,7 +12533,7 @@ html.font-size-4xl {
 
 .pa-text {
   font-size: 1.4rem;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
 }
 
 .pa-text--xs {
@@ -12377,11 +12553,11 @@ html.font-size-4xl {
 }
 
 .pa-text--primary {
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
 }
 
 .pa-text--secondary {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
 }
 
 .pa-text--left {
@@ -12398,7 +12574,7 @@ html.font-size-4xl {
 
 .pa-text--caption {
   font-size: 1.2rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   margin-bottom: 0.8rem;
 }
 
@@ -12411,124 +12587,140 @@ html.font-size-4xl {
   gap: 0;
 }
 
-.gap-xs {
-  gap: 0.4rem;
+.row-gap-0 {
+  row-gap: 0;
 }
 
-.gap-sm {
-  gap: 0.8rem;
+.column-gap-0 {
+  column-gap: 0;
 }
 
-.gap-md {
-  gap: 1.2rem;
+.gap-xs {
+  gap: 0.4rem;
 }
 
-.gap-base {
-  gap: 1.6rem;
+.row-gap-xs {
+  row-gap: 0.4rem;
 }
 
-.gap-lg {
-  gap: 2.4rem;
+.column-gap-xs {
+  column-gap: 0.4rem;
 }
 
-.gap-xl {
-  gap: 3.2rem;
-}
+.gap-sm {
+  gap: 0.8rem;
+}
 
-.gap-2xl {
-  gap: 4.8rem;
+.row-gap-sm {
+  row-gap: 0.8rem;
 }
 
-.gap-1 {
-  gap: 0.1rem;
+.column-gap-sm {
+  column-gap: 0.8rem;
 }
 
-.gap-2 {
-  gap: 0.2rem;
+.gap-md {
+  gap: 1.2rem;
 }
 
-.gap-3 {
-  gap: 0.3rem;
+.row-gap-md {
+  row-gap: 1.2rem;
 }
 
-.gap-4 {
-  gap: 0.4rem;
+.column-gap-md {
+  column-gap: 1.2rem;
 }
 
-.gap-5 {
-  gap: 0.5rem;
+.gap-base {
+  gap: 1.6rem;
 }
 
-.gap-6 {
-  gap: 0.6rem;
+.row-gap-base {
+  row-gap: 1.6rem;
 }
 
-.gap-8 {
-  gap: 0.8rem;
+.column-gap-base {
+  column-gap: 1.6rem;
 }
 
-.gap-10 {
-  gap: 1rem;
+.gap-lg {
+  gap: 2.4rem;
 }
 
-.gap-12 {
-  gap: 1.2rem;
+.row-gap-lg {
+  row-gap: 2.4rem;
 }
 
-.gap-15 {
-  gap: 1.5rem;
+.column-gap-lg {
+  column-gap: 2.4rem;
 }
 
-.gap-20 {
-  gap: 2rem;
+.gap-xl {
+  gap: 3.2rem;
 }
 
-.row-gap-0 {
-  row-gap: 0;
+.row-gap-xl {
+  row-gap: 3.2rem;
 }
 
-.row-gap-xs {
-  row-gap: 0.4rem;
+.column-gap-xl {
+  column-gap: 3.2rem;
 }
 
-.row-gap-sm {
-  row-gap: 0.8rem;
+.gap-2xl {
+  gap: 4.8rem;
 }
 
-.row-gap-md {
-  row-gap: 1.2rem;
+.row-gap-2xl {
+  row-gap: 4.8rem;
 }
 
-.row-gap-base {
-  row-gap: 1.6rem;
+.column-gap-2xl {
+  column-gap: 4.8rem;
 }
 
-.row-gap-lg {
-  row-gap: 2.4rem;
+.gap-1 {
+  gap: 0.1rem;
 }
 
-.column-gap-0 {
-  column-gap: 0;
+.gap-2 {
+  gap: 0.2rem;
 }
 
-.column-gap-xs {
-  column-gap: 0.4rem;
+.gap-3 {
+  gap: 0.3rem;
 }
 
-.column-gap-sm {
-  column-gap: 0.8rem;
+.gap-4 {
+  gap: 0.4rem;
 }
 
-.column-gap-md {
-  column-gap: 1.2rem;
+.gap-5 {
+  gap: 0.5rem;
 }
 
-.column-gap-base {
-  column-gap: 1.6rem;
+.gap-6 {
+  gap: 0.6rem;
 }
 
-.column-gap-lg {
-  column-gap: 2.4rem;
+.gap-8 {
+  gap: 0.8rem;
+}
+
+.gap-10 {
+  gap: 1rem;
+}
+
+.gap-12 {
+  gap: 1.2rem;
+}
+
+.gap-15 {
+  gap: 1.5rem;
+}
+
+.gap-20 {
+  gap: 2rem;
 }
 
 .self-start {
@@ -12613,7 +12805,7 @@ html.font-size-4xl {
   margin-bottom: 0.8rem;
   background-color: var(--pa-card-bg);
   border: 1px solid var(--pa-border-color);
-  border-radius: 1px;
+  border-radius: 4px;
 }
 
 .usage-example .user-item .user-name,
@@ -12748,6 +12940,8 @@ html.font-size-4xl {
   border-color: var(--pa-color-9);
 }
 
+/* Pure Admin Visual Framework - SCSS Variables Only */
+/* NOTE: 10px rem base - all rem values are now in 10px units (1rem = 10px) */
 .m-0 {
   margin: 0 !important;
 }
@@ -13498,6 +13692,486 @@ html.font-size-4xl {
   margin-bottom: auto !important;
 }
 
+.m-0 {
+  margin: 0 !important;
+}
+
+.mt-0 {
+  margin-top: 0 !important;
+}
+
+.mr-0 {
+  margin-right: 0 !important;
+}
+
+.mb-0 {
+  margin-bottom: 0 !important;
+}
+
+.ml-0 {
+  margin-left: 0 !important;
+}
+
+.mx-0 {
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+}
+
+.my-0 {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+.m-xs {
+  margin: 0.4rem !important;
+}
+
+.mt-xs {
+  margin-top: 0.4rem !important;
+}
+
+.mr-xs {
+  margin-right: 0.4rem !important;
+}
+
+.mb-xs {
+  margin-bottom: 0.4rem !important;
+}
+
+.ml-xs {
+  margin-left: 0.4rem !important;
+}
+
+.mx-xs {
+  margin-left: 0.4rem !important;
+  margin-right: 0.4rem !important;
+}
+
+.my-xs {
+  margin-top: 0.4rem !important;
+  margin-bottom: 0.4rem !important;
+}
+
+.m-sm {
+  margin: 0.8rem !important;
+}
+
+.mt-sm {
+  margin-top: 0.8rem !important;
+}
+
+.mr-sm {
+  margin-right: 0.8rem !important;
+}
+
+.mb-sm {
+  margin-bottom: 0.8rem !important;
+}
+
+.ml-sm {
+  margin-left: 0.8rem !important;
+}
+
+.mx-sm {
+  margin-left: 0.8rem !important;
+  margin-right: 0.8rem !important;
+}
+
+.my-sm {
+  margin-top: 0.8rem !important;
+  margin-bottom: 0.8rem !important;
+}
+
+.m-md {
+  margin: 1.2rem !important;
+}
+
+.mt-md {
+  margin-top: 1.2rem !important;
+}
+
+.mr-md {
+  margin-right: 1.2rem !important;
+}
+
+.mb-md {
+  margin-bottom: 1.2rem !important;
+}
+
+.ml-md {
+  margin-left: 1.2rem !important;
+}
+
+.mx-md {
+  margin-left: 1.2rem !important;
+  margin-right: 1.2rem !important;
+}
+
+.my-md {
+  margin-top: 1.2rem !important;
+  margin-bottom: 1.2rem !important;
+}
+
+.m-base {
+  margin: 1.6rem !important;
+}
+
+.mt-base {
+  margin-top: 1.6rem !important;
+}
+
+.mr-base {
+  margin-right: 1.6rem !important;
+}
+
+.mb-base {
+  margin-bottom: 1.6rem !important;
+}
+
+.ml-base {
+  margin-left: 1.6rem !important;
+}
+
+.mx-base {
+  margin-left: 1.6rem !important;
+  margin-right: 1.6rem !important;
+}
+
+.my-base {
+  margin-top: 1.6rem !important;
+  margin-bottom: 1.6rem !important;
+}
+
+.m-lg {
+  margin: 2.4rem !important;
+}
+
+.mt-lg {
+  margin-top: 2.4rem !important;
+}
+
+.mr-lg {
+  margin-right: 2.4rem !important;
+}
+
+.mb-lg {
+  margin-bottom: 2.4rem !important;
+}
+
+.ml-lg {
+  margin-left: 2.4rem !important;
+}
+
+.mx-lg {
+  margin-left: 2.4rem !important;
+  margin-right: 2.4rem !important;
+}
+
+.my-lg {
+  margin-top: 2.4rem !important;
+  margin-bottom: 2.4rem !important;
+}
+
+.m-xl {
+  margin: 3.2rem !important;
+}
+
+.mt-xl {
+  margin-top: 3.2rem !important;
+}
+
+.mr-xl {
+  margin-right: 3.2rem !important;
+}
+
+.mb-xl {
+  margin-bottom: 3.2rem !important;
+}
+
+.ml-xl {
+  margin-left: 3.2rem !important;
+}
+
+.mx-xl {
+  margin-left: 3.2rem !important;
+  margin-right: 3.2rem !important;
+}
+
+.my-xl {
+  margin-top: 3.2rem !important;
+  margin-bottom: 3.2rem !important;
+}
+
+.m-2xl {
+  margin: 4.8rem !important;
+}
+
+.mt-2xl {
+  margin-top: 4.8rem !important;
+}
+
+.mr-2xl {
+  margin-right: 4.8rem !important;
+}
+
+.mb-2xl {
+  margin-bottom: 4.8rem !important;
+}
+
+.ml-2xl {
+  margin-left: 4.8rem !important;
+}
+
+.mx-2xl {
+  margin-left: 4.8rem !important;
+  margin-right: 4.8rem !important;
+}
+
+.my-2xl {
+  margin-top: 4.8rem !important;
+  margin-bottom: 4.8rem !important;
+}
+
+.p-0 {
+  padding: 0 !important;
+}
+
+.pt-0 {
+  padding-top: 0 !important;
+}
+
+.pr-0 {
+  padding-right: 0 !important;
+}
+
+.pb-0 {
+  padding-bottom: 0 !important;
+}
+
+.pl-0 {
+  padding-left: 0 !important;
+}
+
+.px-0 {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+
+.py-0 {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+
+.p-xs {
+  padding: 0.4rem !important;
+}
+
+.pt-xs {
+  padding-top: 0.4rem !important;
+}
+
+.pr-xs {
+  padding-right: 0.4rem !important;
+}
+
+.pb-xs {
+  padding-bottom: 0.4rem !important;
+}
+
+.pl-xs {
+  padding-left: 0.4rem !important;
+}
+
+.px-xs {
+  padding-left: 0.4rem !important;
+  padding-right: 0.4rem !important;
+}
+
+.py-xs {
+  padding-top: 0.4rem !important;
+  padding-bottom: 0.4rem !important;
+}
+
+.p-sm {
+  padding: 0.8rem !important;
+}
+
+.pt-sm {
+  padding-top: 0.8rem !important;
+}
+
+.pr-sm {
+  padding-right: 0.8rem !important;
+}
+
+.pb-sm {
+  padding-bottom: 0.8rem !important;
+}
+
+.pl-sm {
+  padding-left: 0.8rem !important;
+}
+
+.px-sm {
+  padding-left: 0.8rem !important;
+  padding-right: 0.8rem !important;
+}
+
+.py-sm {
+  padding-top: 0.8rem !important;
+  padding-bottom: 0.8rem !important;
+}
+
+.p-md {
+  padding: 1.2rem !important;
+}
+
+.pt-md {
+  padding-top: 1.2rem !important;
+}
+
+.pr-md {
+  padding-right: 1.2rem !important;
+}
+
+.pb-md {
+  padding-bottom: 1.2rem !important;
+}
+
+.pl-md {
+  padding-left: 1.2rem !important;
+}
+
+.px-md {
+  padding-left: 1.2rem !important;
+  padding-right: 1.2rem !important;
+}
+
+.py-md {
+  padding-top: 1.2rem !important;
+  padding-bottom: 1.2rem !important;
+}
+
+.p-base {
+  padding: 1.6rem !important;
+}
+
+.pt-base {
+  padding-top: 1.6rem !important;
+}
+
+.pr-base {
+  padding-right: 1.6rem !important;
+}
+
+.pb-base {
+  padding-bottom: 1.6rem !important;
+}
+
+.pl-base {
+  padding-left: 1.6rem !important;
+}
+
+.px-base {
+  padding-left: 1.6rem !important;
+  padding-right: 1.6rem !important;
+}
+
+.py-base {
+  padding-top: 1.6rem !important;
+  padding-bottom: 1.6rem !important;
+}
+
+.p-lg {
+  padding: 2.4rem !important;
+}
+
+.pt-lg {
+  padding-top: 2.4rem !important;
+}
+
+.pr-lg {
+  padding-right: 2.4rem !important;
+}
+
+.pb-lg {
+  padding-bottom: 2.4rem !important;
+}
+
+.pl-lg {
+  padding-left: 2.4rem !important;
+}
+
+.px-lg {
+  padding-left: 2.4rem !important;
+  padding-right: 2.4rem !important;
+}
+
+.py-lg {
+  padding-top: 2.4rem !important;
+  padding-bottom: 2.4rem !important;
+}
+
+.p-xl {
+  padding: 3.2rem !important;
+}
+
+.pt-xl {
+  padding-top: 3.2rem !important;
+}
+
+.pr-xl {
+  padding-right: 3.2rem !important;
+}
+
+.pb-xl {
+  padding-bottom: 3.2rem !important;
+}
+
+.pl-xl {
+  padding-left: 3.2rem !important;
+}
+
+.px-xl {
+  padding-left: 3.2rem !important;
+  padding-right: 3.2rem !important;
+}
+
+.py-xl {
+  padding-top: 3.2rem !important;
+  padding-bottom: 3.2rem !important;
+}
+
+.p-2xl {
+  padding: 4.8rem !important;
+}
+
+.pt-2xl {
+  padding-top: 4.8rem !important;
+}
+
+.pr-2xl {
+  padding-right: 4.8rem !important;
+}
+
+.pb-2xl {
+  padding-bottom: 4.8rem !important;
+}
+
+.pl-2xl {
+  padding-left: 4.8rem !important;
+}
+
+.px-2xl {
+  padding-left: 4.8rem !important;
+  padding-right: 4.8rem !important;
+}
+
+.py-2xl {
+  padding-top: 4.8rem !important;
+  padding-bottom: 4.8rem !important;
+}
+
 .d-none {
   display: none !important;
 }
@@ -14853,7 +15527,7 @@ html.font-size-4xl {
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
 }
 
-.pa-btn--primary {
+.pa-btn--color-1 {
   font-weight: 700;
   color: #ffffff !important;
   border-radius: 0 !important;
@@ -14912,12 +15586,20 @@ html.font-size-4xl {
   --base-text-color-3: #999999;
   --base-text-color-4: #666666;
   --base-text-color-on-accent: #ffffff;
+  --base-main-bg: #1a1a1a;
+  --base-page-bg: #0a0a0a;
+  --base-subtle-bg: #2a2a2a;
+  --base-inverse-bg: #ffffff;
+  --base-overlay-bg: rgba(0, 0, 0, 0.8);
+  --base-shadow-color: rgba(0, 0, 0, 0.15);
+  --base-hover-bg: #2a2a2a;
+  --base-active-bg: #333333;
+  --base-disabled-bg: #2a2a2a;
+  --base-elevated-bg: #f5f5f5;
   --base-surface-1: #1a1a1a;
   --base-surface-2: #0a0a0a;
   --base-surface-3: #333333;
   --base-surface-inverse: #ffffff;
-  --base-overlay-bg: rgba(0, 0, 0, 0.8);
-  --base-shadow-color: rgba(0, 0, 0, 0.15);
   --base-primary-bg: #1a1a1a;
   --base-primary-bg-hover: rgb(13.25, 13.25, 13.25);
   --base-border-color: #333333;
@@ -14975,7 +15657,7 @@ html.font-size-4xl {
   --base-active-overlay: rgba(0, 0, 0, 0.08);
   --base-focus-ring-color: #ff0000;
   --base-focus-ring-width: 3px;
-  --base-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
+  --base-font-family: Fira Sans Condensed, Arial Narrow, Arial, sans-serif;
   --base-font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
   --base-font-size-2xs: 1;
   --base-font-size-xs: 1.2;
@@ -14994,11 +15676,11 @@ html.font-size-4xl {
   --base-border-radius-sm: 0;
   --base-border-radius-md: 0;
   --base-border-radius-lg: 0;
-  --pa-primary-bg: #0a0a0a;
-  --pa-bg-secondary: #0a0a0a;
-  --pa-content-bg: #1a1a1a;
-  --pa-text-primary: #ffffff;
-  --pa-text-secondary: #cccccc;
+  --pa-main-bg: #0a0a0a;
+  --pa-page-bg: #0a0a0a;
+  --pa-subtle-bg: #1a1a1a;
+  --pa-text-color-1: #ffffff;
+  --pa-text-color-2: #cccccc;
   --pa-accent: #ff0000;
   --pa-accent-hover: rgba(255, 0, 0, 0.3);
   --pa-accent-light: rgba(255, 0, 0, 0.25);
@@ -15151,12 +15833,13 @@ html.font-size-4xl {
   --pa-color-7: #8c8c8c;
   --pa-color-8: #404040;
   --pa-color-9: #6b3fa0;
+  --base-elevated-bg: #2a2a2a;
   --drp-dropdown-bg: #1a1a1a;
   --drp-border-color: #333333;
   --drp-primary-bg: #2a2a2a;
   --drp-primary-bg-hover: #333333;
-  --drp-text-primary: #ffffff;
-  --drp-text-secondary: #999999;
+  --drp-text-color-1: #ffffff;
+  --drp-text-color-2: #999999;
   --drp-button-bg: transparent;
   --drp-button-color: #ffffff;
   --drp-button-accent-text-color: #ffffff;
@@ -15180,11 +15863,11 @@ html.font-size-4xl {
   --page-loader-bg: rgba(240, 240, 240, 0.95);
   --page-loader-spinner-border: #d0d0d0;
   --page-loader-spinner-accent: #ff0000;
-  --pa-primary-bg: #f1f3f5;
-  --pa-bg-secondary: #f8f9fa;
-  --pa-content-bg: #f1f3f5;
-  --pa-text-primary: #212529;
-  --pa-text-secondary: #6c757d;
+  --pa-main-bg: #f1f3f5;
+  --pa-page-bg: #f8f9fa;
+  --pa-subtle-bg: #f1f3f5;
+  --pa-text-color-1: #212529;
+  --pa-text-color-2: #6c757d;
   --pa-accent: #ff0000;
   --pa-accent-hover: rgba(255, 0, 0, 0.1);
   --pa-accent-light: rgba(255, 0, 0, 0.05);
@@ -15231,11 +15914,16 @@ html.font-size-4xl {
   --pa-warning-bg-light: rgba(255, 102, 0, 0.1);
   --pa-danger-bg-light: rgba(255, 0, 0, 0.1);
   --pa-info-bg-light: rgba(0, 153, 255, 0.1);
+  --base-main-bg: #ffffff;
+  --base-page-bg: #f1f3f5;
+  --base-subtle-bg: #e9ecef;
+  --base-hover-bg: #e9ecef;
+  --base-active-bg: #dee2e6;
+  --base-disabled-bg: #f1f3f5;
+  --base-elevated-bg: #f1f3f5;
   --base-surface-1: #ffffff;
   --base-surface-2: #f1f3f5;
   --base-surface-3: #e9ecef;
-  --base-primary-bg: #f1f3f5;
-  --base-primary-bg-hover: #e9ecef;
   --base-text-color-1: #212529;
   --base-text-color-2: #6c757d;
   --base-text-color-3: #adb5bd;
@@ -15256,8 +15944,8 @@ html.font-size-4xl {
   --drp-border-color: #dee2e6;
   --drp-primary-bg: #f1f3f5;
   --drp-primary-bg-hover: #e9ecef;
-  --drp-text-primary: #212529;
-  --drp-text-secondary: #6c757d;
+  --drp-text-color-1: #212529;
+  --drp-text-color-2: #6c757d;
   --drp-button-bg: transparent;
   --drp-button-color: #212529;
   --drp-button-accent-text-color: #ffffff;