@keenmate/pure-admin-theme-express 1.0.0 → 1.1.0

package/dist/express.css

@@ -135,10 +135,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;
@@ -151,7 +151,7 @@ body::before {
   left: 0;
   right: 0;
   bottom: 0;
-  background: radial-gradient(circle at 20% 80%, rgba(212, 5, 17, 0.03) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(212, 5, 17, 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;
 }
@@ -177,14 +177,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 {
@@ -196,13 +196,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);
 }
 
 /* ========================================
@@ -312,7 +312,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;
@@ -453,13 +453,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 {
@@ -670,7 +670,7 @@ body.loaded .pa-sidebar__chevron {
   opacity: 1;
   overflow: visible !important;
   z-index: 1050;
-  border-right: 1px solid #E5E5E5;
+  border-right: 1px solid #e1e5e9;
 }
 
 .sidebar-hidden .pa-layout__sidebar--icon-collapse .pa-sidebar__item {
@@ -845,7 +845,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 {
@@ -990,7 +990,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;
@@ -2825,7 +2825,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;
 }
 
@@ -2853,7 +2853,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;
@@ -2895,7 +2895,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;
 }
 
@@ -2985,15 +2985,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(212, 5, 17, 0.05);
+  color: var(--pa-text-color-1);
+  background-color: rgba(0, 123, 255, 0.05);
 }
 
 .pa-card__tab--active {
@@ -3023,14 +3023,14 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
   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(212, 5, 17, 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 {
@@ -3049,11 +3049,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 {
@@ -3061,14 +3061,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;
@@ -3090,7 +3090,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;
@@ -3102,13 +3102,13 @@ a.pa-card p {
 }
 
 .pa-tabs__item:hover {
-  color: var(--pa-text-primary);
-  background-color: rgba(212, 5, 17, 0.05);
+  color: var(--pa-text-color-1);
+  background-color: rgba(0, 123, 255, 0.05);
 }
 
 .pa-tabs__item--active {
-  color: #D40511;
-  border-bottom-color: #D40511;
+  color: #007bff;
+  border-bottom-color: #007bff;
   font-weight: 600;
 }
 
@@ -3137,13 +3137,13 @@ a.pa-card p {
 .pa-tabs--pills .pa-tabs__item {
   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(212, 5, 17, 0.1);
-  border-color: rgba(212, 5, 17, 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 {
@@ -3156,7 +3156,7 @@ a.pa-card p {
   border: 1px solid var(--pa-border-color);
   border-radius: 8px;
   padding: 0.4rem;
-  background-color: var(--pa-primary-bg);
+  background-color: var(--pa-main-bg);
   gap: 0.4rem;
 }
 
@@ -3168,13 +3168,13 @@ a.pa-card p {
 }
 
 .pa-tabs--boxed .pa-tabs__item:hover {
-  background-color: rgba(212, 5, 17, 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);
 }
 
@@ -3201,12 +3201,12 @@ a.pa-card p {
 }
 
 .pa-tabs--vertical .pa-tabs__item:hover {
-  background-color: rgba(212, 5, 17, 0.05);
+  background-color: rgba(0, 123, 255, 0.05);
 }
 
 .pa-tabs--vertical .pa-tabs__item--active {
-  border-right-color: #D40511;
-  background-color: rgba(212, 5, 17, 0.1);
+  border-right-color: #007bff;
+  background-color: rgba(0, 123, 255, 0.1);
 }
 
 .pa-tabs--vertical .pa-tabs__item i {
@@ -3262,8 +3262,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;
@@ -3275,17 +3275,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 {
@@ -3329,7 +3329,7 @@ a.pa-card p {
 }
 
 .pa-tabs--border-top .pa-tabs__item--active {
-  border-top-color: #D40511;
+  border-top-color: #007bff;
   border-bottom-color: transparent;
 }
 
@@ -3418,7 +3418,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);
@@ -3428,8 +3428,8 @@ a.pa-card p {
 }
 
 .pa-tabs__container--card .pa-tabs__overflow-toggle:hover {
-  background-color: rgba(212, 5, 17, 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 {
@@ -3479,11 +3479,11 @@ a.pa-card p {
 }
 
 .pa-tabs__container--card .pa-tabs__overflow-menu .pa-tabs__item:hover {
-  background-color: rgba(212, 5, 17, 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(212, 5, 17, 0.1);
+  background-color: rgba(0, 123, 255, 0.1);
   border-bottom: none;
 }
 
@@ -3534,23 +3534,23 @@ a.pa-card p {
 }
 
 .pa-stat__icon--primary {
-  background-color: rgba(212, 5, 17, 0.1);
-  color: #D40511;
+  background-color: rgba(0, 123, 255, 0.1);
+  color: #007bff;
 }
 
 .pa-stat__icon--success {
-  background-color: rgba(16, 185, 129, 0.1);
-  color: #10b981;
+  background-color: rgba(40, 167, 69, 0.1);
+  color: #28a745;
 }
 
 .pa-stat__icon--warning {
-  background-color: rgba(245, 158, 11, 0.1);
-  color: #f59e0b;
+  background-color: rgba(255, 193, 7, 0.1);
+  color: #ffc107;
 }
 
 .pa-stat__icon--info {
-  background-color: rgba(6, 182, 212, 0.1);
-  color: #06b6d4;
+  background-color: rgba(23, 162, 184, 0.1);
+  color: #17a2b8;
 }
 
 .pa-stat__content {
@@ -3560,12 +3560,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;
 }
 
@@ -3580,14 +3580,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;
 }
@@ -3598,15 +3598,15 @@ a.pa-card p {
 }
 
 .pa-stat--hero .pa-stat__change--positive {
-  color: #10b981;
+  color: #28a745;
 }
 
 .pa-stat--hero .pa-stat__change--negative {
-  color: #98040C;
+  color: #dc3545;
 }
 
 .pa-stat--hero .pa-stat__change--neutral {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
 }
 
 .pa-stat--square {
@@ -3673,32 +3673,32 @@ a.pa-card p {
 }
 
 .pa-stat--square.pa-stat--primary {
-  background-color: #D40511;
+  background-color: #007bff;
   color: #ffffff;
 }
 
 .pa-stat--square.pa-stat--success {
-  background-color: #10b981;
+  background-color: #28a745;
   color: #ffffff;
 }
 
 .pa-stat--square.pa-stat--info {
-  background-color: #06b6d4;
+  background-color: #17a2b8;
   color: #ffffff;
 }
 
 .pa-stat--square.pa-stat--warning {
-  background-color: #f59e0b;
-  color: #ffffff;
+  background-color: #ffc107;
+  color: #212529;
 }
 
 .pa-stat--square.pa-stat--danger {
-  background-color: #98040C;
+  background-color: #dc3545;
   color: #ffffff;
 }
 
 .pa-stat--square.pa-stat--secondary {
-  background-color: var(--pa-text-secondary);
+  background-color: var(--pa-text-color-2);
   color: #ffffff;
 }
 
@@ -3781,24 +3781,24 @@ a.pa-card p {
 
 .pa-list-basic--icon li::before {
   content: "✓";
-  color: #10b981;
+  color: #28a745;
   font-weight: 600;
   flex-shrink: 0;
 }
 
 .pa-list-basic--icon.pa-list-basic--danger li::before {
   content: "✗";
-  color: #98040C;
+  color: #dc3545;
 }
 
 .pa-list-basic--icon.pa-list-basic--info li::before {
   content: "→";
-  color: #06b6d4;
+  color: #17a2b8;
 }
 
 .pa-list-basic--icon.pa-list-basic--warning li::before {
   content: "!";
-  color: #f59e0b;
+  color: #ffc107;
 }
 
 .pa-list-ordered {
@@ -3826,7 +3826,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;
 }
@@ -3838,7 +3838,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;
 }
 
@@ -3875,14 +3875,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;
@@ -3895,18 +3895,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;
 }
 
@@ -4086,7 +4086,7 @@ a.pa-card p {
 
 .pa-composite-badge__button:focus {
   outline: none;
-  box-shadow: 0 0 0 2px rgba(152, 4, 12, 0.25);
+  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25);
 }
 
 /* ========================================
@@ -4094,67 +4094,67 @@ a.pa-card p {
    Color variations for composite badges
    ======================================== */
 .pa-composite-badge--primary .pa-composite-badge__icon {
-  background-color: #D40511;
+  background-color: #007bff;
   color: #ffffff;
 }
 
 .pa-composite-badge--primary .pa-composite-badge__label {
-  background-color: rgba(212, 5, 17, 0.06);
-  color: #D40511;
+  background-color: rgba(0, 123, 255, 0.05);
+  color: #007bff;
 }
 
 .pa-composite-badge--primary .pa-composite-badge__label:hover {
-  background-color: rgba(212, 5, 17, 0.12);
+  background-color: rgba(0, 123, 255, 0.12);
 }
 
 .pa-composite-badge--primary .pa-composite-badge__button {
-  background-color: #D40511;
+  background-color: #007bff;
   color: #ffffff;
 }
 
 .pa-composite-badge--primary .pa-composite-badge__button:hover {
-  background-color: #F91320;
+  background-color: rgb(51, 149.4, 255);
 }
 
 .pa-composite-badge--primary .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(212, 5, 17, 0.12);
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
 }
 
 .pa-composite-badge--secondary .pa-composite-badge__icon {
-  background-color: #FFCC00;
-  color: #000000;
+  background-color: #6c757d;
+  color: #ffffff;
 }
 
 .pa-composite-badge--secondary .pa-composite-badge__label {
-  background-color: #F2F2F2;
-  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: #FFF0B2;
+  background-color: #f8f9fa;
 }
 
 .pa-composite-badge--secondary .pa-composite-badge__button {
-  background-color: #FFCC00;
-  color: #000000;
+  background-color: #6c757d;
+  color: #ffffff;
 }
 
 .pa-composite-badge--secondary .pa-composite-badge__button:hover {
-  background-color: #FFE57F;
+  background-color: #545b62;
 }
 
 .pa-composite-badge--secondary .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(212, 5, 17, 0.12);
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
 }
 
 .pa-composite-badge--success .pa-composite-badge__icon {
-  background-color: #10b981;
+  background-color: #28a745;
   color: #ffffff;
 }
 
 .pa-composite-badge--success .pa-composite-badge__label {
   background-color: #d4edda;
-  color: #065f46;
+  color: #155724;
 }
 
 .pa-composite-badge--success .pa-composite-badge__label:hover {
@@ -4162,26 +4162,26 @@ a.pa-card p {
 }
 
 .pa-composite-badge--success .pa-composite-badge__button {
-  background-color: #10b981;
+  background-color: #28a745;
   color: #ffffff;
 }
 
 .pa-composite-badge--success .pa-composite-badge__button:hover {
-  background-color: #059669;
+  background-color: rgb(30.1449275362, 125.8550724638, 52);
 }
 
 .pa-composite-badge--success .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(212, 5, 17, 0.12);
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
 }
 
 .pa-composite-badge--danger .pa-composite-badge__icon {
-  background-color: #98040C;
+  background-color: #dc3545;
   color: #ffffff;
 }
 
 .pa-composite-badge--danger .pa-composite-badge__label {
   background-color: #f8d7da;
-  color: #7f1d1d;
+  color: #721c24;
 }
 
 .pa-composite-badge--danger .pa-composite-badge__label:hover {
@@ -4189,26 +4189,26 @@ a.pa-card p {
 }
 
 .pa-composite-badge--danger .pa-composite-badge__button {
-  background-color: #98040C;
+  background-color: #dc3545;
   color: #ffffff;
 }
 
 .pa-composite-badge--danger .pa-composite-badge__button:hover {
-  background-color: #D40511;
+  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(212, 5, 17, 0.12);
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
 }
 
 .pa-composite-badge--warning .pa-composite-badge__icon {
-  background-color: #f59e0b;
-  color: #ffffff;
+  background-color: #ffc107;
+  color: #212529;
 }
 
 .pa-composite-badge--warning .pa-composite-badge__label {
   background-color: #fff3cd;
-  color: #78350f;
+  color: #856404;
 }
 
 .pa-composite-badge--warning .pa-composite-badge__label:hover {
@@ -4216,26 +4216,26 @@ a.pa-card p {
 }
 
 .pa-composite-badge--warning .pa-composite-badge__button {
-  background-color: #f59e0b;
-  color: #ffffff;
+  background-color: #ffc107;
+  color: #212529;
 }
 
 .pa-composite-badge--warning .pa-composite-badge__button:hover {
-  background-color: #d97706;
+  background-color: rgb(211, 158.25, 0);
 }
 
 .pa-composite-badge--warning .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(212, 5, 17, 0.12);
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
 }
 
 .pa-composite-badge--info .pa-composite-badge__icon {
-  background-color: #06b6d4;
+  background-color: #17a2b8;
   color: #ffffff;
 }
 
 .pa-composite-badge--info .pa-composite-badge__label {
   background-color: #d1ecf1;
-  color: #164e63;
+  color: #0c5460;
 }
 
 .pa-composite-badge--info .pa-composite-badge__label:hover {
@@ -4243,127 +4243,127 @@ a.pa-card p {
 }
 
 .pa-composite-badge--info .pa-composite-badge__button {
-  background-color: #06b6d4;
+  background-color: #17a2b8;
   color: #ffffff;
 }
 
 .pa-composite-badge--info .pa-composite-badge__button:hover {
-  background-color: #0891b2;
+  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(212, 5, 17, 0.12);
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
 }
 
 .pa-composite-badge--light .pa-composite-badge__icon {
-  background-color: #EBEBEB;
-  color: #333333;
+  background-color: #f8f9fa;
+  color: #2c3e50;
 }
 
 .pa-composite-badge--light .pa-composite-badge__label {
-  background-color: #FFCC00;
-  color: #333333;
+  background-color: #ffffff;
+  color: #2c3e50;
 }
 
 .pa-composite-badge--light .pa-composite-badge__label:hover {
-  background-color: #E5E5E5;
+  background-color: #e9ecef;
 }
 
 .pa-composite-badge--light .pa-composite-badge__button {
-  background-color: #EBEBEB;
-  color: #333333;
+  background-color: #f8f9fa;
+  color: #2c3e50;
 }
 
 .pa-composite-badge--light .pa-composite-badge__button:hover {
-  background-color: #E5E5E5;
+  background-color: #e9ecef;
 }
 
 .pa-composite-badge--light .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(212, 5, 17, 0.12);
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
 }
 
 .pa-composite-badge--dark .pa-composite-badge__icon {
-  background-color: #333333;
+  background-color: #343a40;
   color: #ffffff;
 }
 
 .pa-composite-badge--dark .pa-composite-badge__label {
-  background-color: #FFF0B2;
-  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: #E5E5E5;
+  background-color: #e1e5e9;
 }
 
 .pa-composite-badge--dark .pa-composite-badge__button {
-  background-color: #333333;
+  background-color: #343a40;
   color: #ffffff;
 }
 
 .pa-composite-badge--dark .pa-composite-badge__button:hover {
-  background-color: #000000;
+  background-color: #1d2124;
 }
 
 .pa-composite-badge--dark .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(212, 5, 17, 0.12);
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
 }
 
 .pa-composite-badge--primary .pa-composite-badge__icon {
-  background-color: #D40511;
+  background-color: #007bff;
 }
 
 .pa-composite-badge--secondary .pa-composite-badge__icon {
-  background-color: #FFCC00;
+  background-color: #6c757d;
 }
 
 .pa-composite-badge--success .pa-composite-badge__icon {
-  background-color: #10b981;
+  background-color: #28a745;
 }
 
 .pa-composite-badge--danger .pa-composite-badge__icon {
-  background-color: #98040C;
+  background-color: #dc3545;
 }
 
 .pa-composite-badge--warning .pa-composite-badge__icon {
-  background-color: #f59e0b;
-  color: #ffffff;
+  background-color: #ffc107;
+  color: #212529;
 }
 
 .pa-composite-badge--info .pa-composite-badge__icon {
-  background-color: #06b6d4;
+  background-color: #17a2b8;
 }
 
 .pa-composite-badge--light .pa-composite-badge__icon {
-  background-color: #EBEBEB;
-  color: #333333;
+  background-color: #f8f9fa;
+  color: #2c3e50;
 }
 
 .pa-composite-badge--dark .pa-composite-badge__icon {
-  background-color: #333333;
+  background-color: #343a40;
 }
 
 .pa-composite-badge--label-primary .pa-composite-badge__label {
-  background-color: rgb(252.9493087558, 168.0506912442, 172.9723502304);
-  color: rgb(62.5253456221, 1.4746543779, 5.0138248848);
+  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(252.3617511521, 143.1382488479, 149.4700460829);
+  background-color: rgb(178.5, 215.4, 255);
 }
 
 .pa-composite-badge--label-secondary .pa-composite-badge__label {
-  background-color: rgb(255, 239.7, 178.5);
+  background-color: rgb(202.1566523605, 205.9613733906, 209.3433476395);
   color: #383d41;
 }
 
 .pa-composite-badge--label-secondary .pa-composite-badge__label:hover {
-  background-color: rgb(255, 234.6, 153);
+  background-color: rgb(188.4763948498, 193.2660944206, 197.5236051502);
 }
 
 .pa-composite-badge--label-success .pa-composite-badge__label {
   background-color: #d4edda;
-  color: #065f46;
+  color: #155724;
 }
 
 .pa-composite-badge--label-success .pa-composite-badge__label:hover {
@@ -4372,7 +4372,7 @@ a.pa-card p {
 
 .pa-composite-badge--label-danger .pa-composite-badge__label {
   background-color: #f8d7da;
-  color: #7f1d1d;
+  color: #721c24;
 }
 
 .pa-composite-badge--label-danger .pa-composite-badge__label:hover {
@@ -4381,7 +4381,7 @@ a.pa-card p {
 
 .pa-composite-badge--label-warning .pa-composite-badge__label {
   background-color: #fff3cd;
-  color: #78350f;
+  color: #856404;
 }
 
 .pa-composite-badge--label-warning .pa-composite-badge__label:hover {
@@ -4390,7 +4390,7 @@ a.pa-card p {
 
 .pa-composite-badge--label-info .pa-composite-badge__label {
   background-color: #d1ecf1;
-  color: #164e63;
+  color: #0c5460;
 }
 
 .pa-composite-badge--label-info .pa-composite-badge__label:hover {
@@ -4398,107 +4398,107 @@ a.pa-card p {
 }
 
 .pa-composite-badge--label-light .pa-composite-badge__label {
-  background-color: rgb(240.1, 240.1, 240.1);
-  color: #333333;
+  background-color: rgb(253.95, 254.1, 254.25);
+  color: #2c3e50;
 }
 
 .pa-composite-badge--label-light .pa-composite-badge__label:hover {
-  background-color: rgb(255, 239.7, 178.5);
+  background-color: rgb(202.1566523605, 205.9613733906, 209.3433476395);
 }
 
 .pa-composite-badge--label-dark .pa-composite-badge__label {
-  background-color: rgb(178.5, 178.5, 178.5);
-  color: rgb(63.75, 63.75, 63.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(165.75, 165.75, 165.75);
+  background-color: rgb(164.2413793103, 172.75, 181.2586206897);
 }
 
 .pa-composite-badge--btn-primary .pa-composite-badge__button {
-  background-color: #D40511;
+  background-color: #007bff;
 }
 
 .pa-composite-badge--btn-primary .pa-composite-badge__button:hover {
-  background-color: #F91320;
+  background-color: rgb(51, 149.4, 255);
 }
 
 .pa-composite-badge--btn-primary .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(212, 5, 17, 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: #FFCC00;
+  background-color: #6c757d;
 }
 
 .pa-composite-badge--btn-secondary .pa-composite-badge__button:hover {
-  background-color: #FFE57F;
+  background-color: #545b62;
 }
 
 .pa-composite-badge--btn-secondary .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(255, 204, 0, 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: #10b981;
+  background-color: #28a745;
 }
 
 .pa-composite-badge--btn-success .pa-composite-badge__button:hover {
-  background-color: #059669;
+  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(16, 185, 129, 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: #f59e0b;
-  color: #ffffff;
+  background-color: #ffc107;
+  color: #212529;
 }
 
 .pa-composite-badge--btn-warning .pa-composite-badge__button:hover {
-  background-color: #d97706;
+  background-color: rgb(211, 158.25, 0);
 }
 
 .pa-composite-badge--btn-warning .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(245, 158, 11, 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: #06b6d4;
+  background-color: #17a2b8;
 }
 
 .pa-composite-badge--btn-info .pa-composite-badge__button:hover {
-  background-color: #0891b2;
+  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(6, 182, 212, 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: #EBEBEB;
-  color: #333333;
+  background-color: #f8f9fa;
+  color: #2c3e50;
 }
 
 .pa-composite-badge--btn-light .pa-composite-badge__button:hover {
-  background-color: #E5E5E5;
+  background-color: #e9ecef;
 }
 
 .pa-composite-badge--btn-light .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(235, 235, 235, 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: #333333;
+  background-color: #343a40;
 }
 
 .pa-composite-badge--btn-dark .pa-composite-badge__button:hover {
-  background-color: #000000;
+  background-color: #1d2124;
 }
 
 .pa-composite-badge--btn-dark .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(51, 51, 51, 0.25);
+  box-shadow: 0 0 0 2px rgba(52, 58, 64, 0.25);
 }
 
 /* ========================================
@@ -4530,7 +4530,7 @@ 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;
@@ -4687,7 +4687,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 {
@@ -4708,11 +4708,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);
 }
 
@@ -5132,27 +5132,27 @@ a.pa-card p {
 }
 
 .pa-spinner--primary {
-  border-top-color: #D40511;
+  border-top-color: #007bff;
 }
 
 .pa-spinner--secondary {
-  border-top-color: #FFCC00;
+  border-top-color: #6c757d;
 }
 
 .pa-spinner--success {
-  border-top-color: #10b981;
+  border-top-color: #28a745;
 }
 
 .pa-spinner--danger {
-  border-top-color: #98040C;
+  border-top-color: #dc3545;
 }
 
 .pa-spinner--warning {
-  border-top-color: #f59e0b;
+  border-top-color: #ffc107;
 }
 
 .pa-spinner--info {
-  border-top-color: #06b6d4;
+  border-top-color: #17a2b8;
 }
 
 .pa-loader-dots {
@@ -5551,7 +5551,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 {
@@ -5889,7 +5889,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;
@@ -5923,7 +5923,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 #E5E5E5;
+  border-bottom: 1px solid #e1e5e9;
   background-color: var(--pa-card-header-bg);
   border-radius: 4px 4px 0 0;
 }
@@ -5932,14 +5932,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;
 }
 
@@ -5967,7 +5967,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;
@@ -5978,7 +5978,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;
@@ -5991,8 +5991,8 @@ a.pa-card p {
 }
 
 .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 {
@@ -6119,13 +6119,13 @@ a.pa-card p {
 
 .pa-alert--primary {
   color: var(--pa-accent);
-  background-color: rgba(212, 5, 17, 0.08);
-  border-color: rgba(212, 5, 17, 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);
 }
 
@@ -6155,15 +6155,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 {
@@ -6317,12 +6317,12 @@ a.pa-card p {
 
 .pa-callout--primary {
   border-left-color: var(--pa-accent);
-  background-color: rgba(212, 5, 17, 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 {
@@ -6451,7 +6451,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;
 }
@@ -6467,7 +6467,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;
 }
@@ -6491,7 +6491,7 @@ a.pa-card p {
   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;
 }
 
@@ -6509,7 +6509,7 @@ a.pa-card p {
   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;
 }
 
@@ -6526,7 +6526,7 @@ a.pa-card p {
   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;
@@ -6539,7 +6539,7 @@ a.pa-card p {
 }
 
 .pa-textarea::placeholder {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
 }
 
 .pa-input--xs,
@@ -6652,7 +6652,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 {
@@ -6823,7 +6823,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;
@@ -6834,7 +6834,7 @@ a.pa-card p {
 
 .pa-input-wrapper__clear:hover {
   opacity: 1;
-  color: #98040C;
+  color: #dc3545;
 }
 
 .pa-input-wrapper__clear:focus {
@@ -6911,13 +6911,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(212, 5, 17, 0.15);
-  color: #D40511;
+  background-color: rgba(0, 123, 255, 0.15);
+  color: #007bff;
   padding: 0.2rem 0.4rem;
   border-radius: 0.4rem;
   font-weight: 500;
@@ -6925,8 +6925,8 @@ a.pa-card p {
 
 .pa-search-highlight__operator {
   display: inline;
-  background-color: rgba(16, 185, 129, 0.15);
-  color: #10b981;
+  background-color: rgba(40, 167, 69, 0.15);
+  color: #28a745;
   padding: 0.2rem 0.4rem;
   border-radius: 0.4rem;
   font-weight: 500;
@@ -6936,7 +6936,7 @@ a.pa-card p {
   position: absolute;
   z-index: 1000;
   background: var(--pa-input-bg);
-  border: 1px solid #E5E5E5;
+  border: 1px solid #e1e5e9;
   border-radius: 4px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   max-height: 24rem;
@@ -6966,7 +6966,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;
 }
 
@@ -6974,7 +6974,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);
@@ -6984,18 +6984,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 #E5E5E5;
+  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;
@@ -7005,13 +7005,13 @@ a.pa-card p {
 
 .pa-virtual-textbox:focus {
   outline: none;
-  border-color: #D40511;
-  box-shadow: 0 0 0 3px rgba(212, 5, 17, 0.06);
+  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;
 }
@@ -7047,7 +7047,7 @@ a.pa-card p {
   border: 1px solid transparent;
   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;
@@ -7062,13 +7062,13 @@ a.pa-card p {
   z-index: 2;
   width: 100%;
   padding: 0.8rem 0.8rem;
-  border: 1px solid #E5E5E5;
+  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;
@@ -7078,12 +7078,12 @@ a.pa-card p {
 
 .pa-inline-query-editor__input:focus {
   outline: none;
-  border-color: #D40511;
-  box-shadow: 0 0 0 3px rgba(212, 5, 17, 0.06);
+  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;
 }
 
@@ -7093,29 +7093,29 @@ a.pa-card p {
 }
 
 .pa-inline-query-token--field {
-  background-color: rgba(212, 5, 17, 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(152, 4, 12, 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(16, 185, 129, 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(245, 158, 11, 0.15);
-  color: var(--pa-text-primary);
+  background-color: rgba(255, 193, 7, 0.15);
+  color: var(--pa-text-color-1);
   font-style: italic;
 }
 
@@ -7123,7 +7123,7 @@ a.pa-card p {
   position: absolute;
   z-index: 1000;
   background: var(--pa-input-bg);
-  border: 1px solid #E5E5E5;
+  border: 1px solid #e1e5e9;
   border-radius: 4px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   max-height: 24rem;
@@ -7159,14 +7159,14 @@ a.pa-card p {
 .pa-inline-query-autocomplete__item-name {
   display: block;
   font-weight: 500;
-  color: #D40511;
+  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;
 }
@@ -7175,10 +7175,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;
 }
 
 /* ========================================
@@ -7198,7 +7198,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;
 }
 
@@ -7339,7 +7339,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 {
@@ -7389,14 +7389,14 @@ input:indeterminate + .pa-checkbox__box::after {
 web-daterangepicker {
   /* ===== BASE PRIMITIVES ===== */
   /* Colors */
-  --drp-accent-color: #D40511;
-  --drp-primary-bg: #D40511;
-  --drp-primary-bg-hover: #F91320;
-  --drp-text-primary: var(--pa-text-primary);
-  --drp-text-secondary: var(--pa-text-secondary);
-  --drp-border-color: #E5E5E5;
+  --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: #FFF0B2;
+  --drp-hover-bg: #f8f9fa;
   /* Spacing */
   --drp-spacing-xs: 0.4rem;
   --drp-spacing-sm: 0.8rem;
@@ -7432,18 +7432,18 @@ web-daterangepicker {
   /* ===== INPUT FIELD SEMANTIC VARIABLES ===== */
   /* Input colors */
   --drp-input-background: var(--pa-input-bg);
-  --drp-input-color: var(--pa-text-primary);
-  --drp-input-border-color: 1px solid #E5E5E5;
-  --drp-input-border-color-hover: #D40511;
-  --drp-input-border-color-focus: #D40511;
-  --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(212, 5, 17, 0.06);
+  --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 */
@@ -7479,7 +7479,7 @@ web-daterangepicker {
   --drp-input-size-xl-icon-size: 2rem; /* 20px (10px base) */
   /* ===== CALENDAR CONTAINER ===== */
   --drp-calendar-bg: var(--pa-card-bg);
-  --drp-calendar-border: #E5E5E5;
+  --drp-calendar-border: #e1e5e9;
   --drp-calendar-shadow: 0 0 60px rgba(0, 0, 0, 0.12);
   --drp-calendar-border-radius: 4px;
   --drp-calendar-padding: 1.6rem;
@@ -7488,91 +7488,91 @@ web-daterangepicker {
   --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(212, 5, 17, 0.12);
-  --drp-header-bg-active: rgba(212, 5, 17, 0.06);
+  --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: #E5E5E5;
-  --drp-nav-bg-hover: rgba(212, 5, 17, 0.12);
-  --drp-nav-bg-active: rgba(212, 5, 17, 0.06);
-  --drp-nav-border-hover: #D40511;
+  --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(212, 5, 17, 0.12);
+  --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: #D40511;
+  --drp-day-today-border: #007bff;
   /* Selected state */
-  --drp-day-selected-bg: #D40511;
+  --drp-day-selected-bg: #007bff;
   --drp-day-selected-color: #ffffff;
   /* Range state */
-  --drp-day-range-bg: rgba(212, 5, 17, 0.06);
-  --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: #D40511;
+  --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: #D40511;
-  --drp-badge-success: #10b981;
-  --drp-badge-warning: #f59e0b;
-  --drp-badge-danger: #98040C;
-  --drp-badge-info: #06b6d4;
+  --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: #98040C;
+  --drp-badge-number-bg: #dc3545;
   --drp-badge-number-color: #ffffff;
   /* Count badges */
-  --drp-badge-count-bg: #D40511;
+  --drp-badge-count-bg: #007bff;
   --drp-badge-count-color: #ffffff;
   /* Text badges */
-  --drp-badge-text-bg: rgba(212, 5, 17, 0.06);
-  --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: #EBEBEB;
-  --drp-summary-border-color: #E5E5E5;
-  --drp-summary-text-color: var(--pa-text-primary);
-  --drp-summary-count-color: #D40511;
+  --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: #FFCC00;
-  --drp-button-today-bg-hover: #FFE57F;
-  --drp-button-today-color: #000000;
-  --drp-button-today-border: #E5E5E5;
+  --drp-button-today-bg: #6c757d;
+  --drp-button-today-bg-hover: #545b62;
+  --drp-button-today-color: #ffffff;
+  --drp-button-today-border: #e1e5e9;
   /* Clear button */
-  --drp-button-clear-bg: #FFCC00;
-  --drp-button-clear-bg-hover: #FFE57F;
-  --drp-button-clear-color: #000000;
-  --drp-button-clear-border: #E5E5E5;
+  --drp-button-clear-bg: #6c757d;
+  --drp-button-clear-bg-hover: #545b62;
+  --drp-button-clear-color: #ffffff;
+  --drp-button-clear-border: #e1e5e9;
   /* Cancel button */
-  --drp-button-cancel-bg: #FFCC00;
-  --drp-button-cancel-bg-hover: #FFE57F;
-  --drp-button-cancel-color: #000000;
-  --drp-button-cancel-border: #E5E5E5;
+  --drp-button-cancel-bg: #6c757d;
+  --drp-button-cancel-bg-hover: #545b62;
+  --drp-button-cancel-color: #ffffff;
+  --drp-button-cancel-border: #e1e5e9;
   /* Apply button */
-  --drp-button-apply-bg: #D40511;
-  --drp-button-apply-bg-hover: #F91320;
+  --drp-button-apply-bg: #007bff;
+  --drp-button-apply-bg-hover: rgb(51, 149.4, 255);
   --drp-button-apply-color: #ffffff;
-  --drp-button-apply-border: #D40511;
+  --drp-button-apply-border: #007bff;
   /* Button sizing */
   --drp-button-padding: 0.8rem 1rem;
   --drp-button-font-size: 1.4rem;
@@ -7580,26 +7580,26 @@ web-daterangepicker {
   --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(212, 5, 17, 0.12);
-  --drp-unified-range-bg-active: rgba(212, 5, 17, 0.06);
+  --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: #E5E5E5;
+  --drp-rolling-border: #e1e5e9;
   --drp-rolling-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  --drp-rolling-item-hover-bg: rgba(212, 5, 17, 0.12);
-  --drp-rolling-item-selected-bg: #D40511;
+  --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: #D40511;
+  --drp-loading-spinner-color: #007bff;
   --drp-loading-spinner-size: 1.6rem;
   /* ===== MULTIPLE MONTHS ===== */
   --drp-months-gap: 2.4rem;
@@ -7629,7 +7629,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;
@@ -7637,7 +7637,7 @@ web-daterangepicker {
 
 .pa-file-dropzone {
   position: relative;
-  border: 3.2px dashed #E5E5E5;
+  border: 3.2px dashed #e1e5e9;
   border-radius: 4px;
   padding: 3.2rem;
   text-align: center;
@@ -7647,13 +7647,13 @@ web-daterangepicker {
 }
 
 .pa-file-dropzone:hover {
-  border-color: #D40511;
-  background: rgba(212, 5, 17, 0.05);
+  border-color: #007bff;
+  background: rgba(0, 123, 255, 0.05);
 }
 
 .pa-file-dropzone--active {
-  border-color: #D40511;
-  background: rgba(212, 5, 17, 0.1);
+  border-color: #007bff;
+  background: rgba(0, 123, 255, 0.1);
   border-style: solid;
 }
 
@@ -7679,27 +7679,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: #D40511;
+  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 #E5E5E5;
+  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 {
@@ -7729,7 +7729,7 @@ web-daterangepicker {
 }
 
 .pa-file-dropzone__file-card:hover {
-  border-color: #D40511;
+  border-color: #007bff;
   box-shadow: 0 1.6px 4.8px rgba(0, 0, 0, 0.1);
 }
 
@@ -7740,7 +7740,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;
@@ -7750,7 +7750,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;
 }
 
@@ -7761,7 +7761,7 @@ web-daterangepicker {
   width: 2rem;
   height: 2rem;
   border: none;
-  background: #98040C;
+  background: #dc3545;
   color: #ffffff;
   cursor: pointer;
   border-radius: 50%;
@@ -7784,7 +7784,7 @@ web-daterangepicker {
 
 .pa-file-dropzone__file-card-remove:hover {
   transform: scale(1.1);
-  background: rgba(152, 4, 12, 0.9);
+  background: rgba(220, 53, 69, 0.9);
 }
 
 .pa-file-dropzone__image-card {
@@ -7831,7 +7831,7 @@ web-daterangepicker {
 }
 
 .pa-file-dropzone__image-card-remove:hover {
-  background: #98040C;
+  background: #dc3545;
   transform: scale(1.1);
 }
 
@@ -7840,7 +7840,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 {
@@ -7853,7 +7853,7 @@ web-daterangepicker {
 }
 
 .pa-file-dropzone__summary-line:hover {
-  background-color: rgba(212, 5, 17, 0.1);
+  background-color: rgba(0, 123, 255, 0.1);
 }
 
 .pa-file-dropzone__summary-line:not(:last-child)::after {
@@ -7866,11 +7866,11 @@ web-daterangepicker {
 
 .pa-file-dropzone__summary-count {
   font-weight: 500;
-  color: #D40511;
+  color: #007bff;
 }
 
 .pa-file-dropzone__summary-size {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-weight: normal;
 }
 
@@ -7878,7 +7878,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;
@@ -7929,7 +7929,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 {
@@ -7937,7 +7937,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;
@@ -7949,8 +7949,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 {
@@ -7976,7 +7976,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;
@@ -7985,15 +7985,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(212, 5, 17, 0.05);
+  background: rgba(0, 123, 255, 0.05);
 }
 
 .pa-file-popover__table tbody tr.uploading {
-  background: rgba(212, 5, 17, 0.1);
+  background: rgba(0, 123, 255, 0.1);
 }
 
 .pa-file-popover__file-name {
@@ -8004,7 +8004,7 @@ web-daterangepicker {
 }
 
 .pa-file-popover__file-size {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   white-space: nowrap;
 }
 
@@ -8014,7 +8014,7 @@ web-daterangepicker {
 
 .pa-file-popover__progress-bar {
   height: 6.4px;
-  background: rgba(212, 5, 17, 0.2);
+  background: rgba(0, 123, 255, 0.2);
   border-radius: 2px;
   overflow: hidden;
   margin-bottom: 0.4rem;
@@ -8022,14 +8022,14 @@ web-daterangepicker {
 
 .pa-file-popover__progress-fill {
   height: 100%;
-  background: #D40511;
+  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 {
@@ -8039,19 +8039,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: #D40511;
+  color: #007bff;
 }
 
 .pa-file-popover__status--complete {
-  color: #10b981;
+  color: #28a745;
 }
 
 .pa-file-popover__status--error {
-  color: #98040C;
+  color: #dc3545;
 }
 
 .pa-file-popover__remove-cell {
@@ -8065,7 +8065,7 @@ web-daterangepicker {
   height: 3.2rem;
   border: 1px solid var(--pa-border-color);
   background: var(--pa-card-bg);
-  color: #98040C;
+  color: #dc3545;
   cursor: pointer;
   border-radius: 2px;
   font-size: 2.4rem;
@@ -8078,9 +8078,9 @@ web-daterangepicker {
 }
 
 .pa-file-popover__remove-btn:hover {
-  background: #98040C;
+  background: #dc3545;
   color: #ffffff;
-  border-color: #98040C;
+  border-color: #dc3545;
   transform: scale(1.1);
 }
 
@@ -8121,9 +8121,9 @@ web-daterangepicker {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(212, 5, 17, 0.1);
+  background: rgba(0, 123, 255, 0.1);
   border-radius: 4px;
-  color: #D40511;
+  color: #007bff;
 }
 
 .pa-file-item__info {
@@ -8134,7 +8134,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;
@@ -8142,7 +8142,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;
 }
 
@@ -8152,7 +8152,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;
@@ -8164,8 +8164,8 @@ web-daterangepicker {
 }
 
 .pa-file-item__remove:hover {
-  background: rgba(152, 4, 12, 0.1);
-  color: #98040C;
+  background: rgba(220, 53, 69, 0.1);
+  color: #dc3545;
 }
 
 .pa-file-item__remove::before {
@@ -8217,7 +8217,7 @@ web-daterangepicker {
 }
 
 .pa-file-preview__remove:hover {
-  background: #98040C;
+  background: #dc3545;
   transform: scale(1.1);
 }
 
@@ -8245,21 +8245,21 @@ web-daterangepicker {
 
 .pa-file-progress__bar {
   height: 6.4px;
-  background: rgba(212, 5, 17, 0.2);
+  background: rgba(0, 123, 255, 0.2);
   border-radius: 2px;
   overflow: hidden;
 }
 
 .pa-file-progress__fill {
   height: 100%;
-  background: #D40511;
+  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;
@@ -8272,11 +8272,11 @@ web-daterangepicker {
 }
 
 .pa-file-progress__status--complete {
-  color: #10b981;
+  color: #28a745;
 }
 
 .pa-file-progress__status--error {
-  color: #98040C;
+  color: #dc3545;
 }
 
 .pa-file-icon--pdf::before {
@@ -8316,9 +8316,9 @@ web-daterangepicker {
 }
 
 .pa-file-dropzone-overlay {
-  background: rgba(212, 5, 17, 0.15);
+  background: rgba(0, 123, 255, 0.15);
   backdrop-filter: blur(3.2px);
-  border: 4.8px dashed #D40511;
+  border: 4.8px dashed #007bff;
   border-radius: 4px;
   display: flex;
   align-items: center;
@@ -8339,7 +8339,7 @@ web-daterangepicker {
 .pa-file-dropzone-overlay__text {
   font-size: 2rem;
   font-weight: 600;
-  color: #D40511;
+  color: #007bff;
 }
 
 /* ========================================
@@ -8376,7 +8376,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%;
 }
@@ -8403,7 +8403,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 {
@@ -8475,7 +8475,7 @@ web-daterangepicker {
 }
 
 .pa-checkbox-list__item--locked:hover {
-  background-color: rgba(245, 158, 11, 0.05);
+  background-color: rgba(255, 193, 7, 0.05);
 }
 
 .pa-checkbox-list__item--locked .pa-checkbox-list__checkbox {
@@ -8489,7 +8489,7 @@ web-daterangepicker {
 }
 
 .pa-checkbox-list__item--locked .pa-checkbox-list__label .pa-checkbox-list__text {
-  color: #f59e0b;
+  color: #ffc107;
 }
 
 .pa-checkbox-list__item--locked .pa-checkbox-list__label .pa-checkbox-list__text::before {
@@ -8616,12 +8616,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;
 }
@@ -8742,7 +8742,7 @@ web-daterangepicker {
 }
 
 .pa-pager__text {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-size: 1.4rem;
 }
 
@@ -8783,7 +8783,7 @@ web-daterangepicker {
   background-color: transparent;
   border: 1px solid var(--pa-border-color);
   border-radius: 4px;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   font-size: 1.4rem;
   cursor: pointer;
   transition: all 0.1s ease-out;
@@ -8817,7 +8817,7 @@ 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;
 }
@@ -8847,7 +8847,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 {
@@ -8879,7 +8879,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;
 }
 
@@ -8984,7 +8984,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;
@@ -9063,8 +9063,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 {
@@ -9134,7 +9134,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);
@@ -9195,8 +9195,8 @@ 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: 4px;
   overflow-x: auto;
@@ -9272,7 +9272,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;
 }
 
@@ -9300,7 +9300,7 @@ code {
 }
 
 .pa-code-comment {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-style: italic;
 }
 
@@ -9369,7 +9369,7 @@ code {
 }
 
 .pa-pager__text {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-size: 1.4rem;
 }
 
@@ -9410,7 +9410,7 @@ code {
   background-color: transparent;
   border: 1px solid var(--pa-border-color);
   border-radius: 4px;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   font-size: 1.4rem;
   cursor: pointer;
   transition: all 0.1s ease-out;
@@ -9435,7 +9435,7 @@ code {
   width: 1.6rem;
   height: 1.6rem;
   border: 2px solid var(--pa-border-color);
-  border-top: 2px solid #D40511;
+  border-top: 2px solid #007bff;
   border-radius: 50%;
 }
 
@@ -9444,7 +9444,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;
 }
@@ -9454,23 +9454,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: 4px;
-  color: var(--pa-text-primary);
+  color: var(--pa-header-text);
   cursor: pointer;
   font-size: 1.4rem;
   transition: background-color 0.1s ease-out;
@@ -9487,7 +9488,7 @@ code {
 
 .pa-header__profile-name {
   font-weight: 500;
-  color: #000000;
+  color: var(--pa-header-profile-name-color);
 }
 
 .pa-profile-panel {
@@ -9576,7 +9577,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;
@@ -9585,7 +9586,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;
@@ -9615,7 +9616,7 @@ code {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   border-radius: 4px;
   transition: background-color 0.1s ease-out, color 0.1s ease-out;
 }
@@ -9654,7 +9655,7 @@ 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: 4px;
   transition: background-color 0.1s ease-out, color 0.1s ease-out;
@@ -9724,6 +9725,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;
@@ -9739,7 +9744,7 @@ 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: 4px;
   cursor: pointer;
@@ -9776,7 +9781,7 @@ code {
   background: none;
   border: none;
   padding: 0.4rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   cursor: pointer;
   border-radius: 4px;
   font-size: 1.4rem;
@@ -9785,7 +9790,7 @@ code {
 }
 
 .pa-profile-panel__favorite-remove:hover {
-  color: var(--pa-danger);
+  color: var(--pa-danger-bg);
   background-color: var(--pa-danger-bg-light);
 }
 
@@ -9893,14 +9898,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 {
@@ -10099,13 +10104,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;
 }
@@ -10114,7 +10119,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;
@@ -10130,7 +10135,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 {
@@ -10266,81 +10271,81 @@ code {
   top: 0;
   width: 15px;
   height: 15px;
-  background: var(--pa-primary-bg);
-  border: 1px solid #D40511;
+  background: var(--pa-main-bg);
+  border: 1px solid #007bff;
   border-radius: 50%;
-  box-shadow: 3px 3px 0 rgba(212, 5, 17, 0.3);
+  box-shadow: 3px 3px 0 rgba(0, 123, 255, 0.3);
 }
 
 .pa-timeline--simple .pa-timeline__item--primary::before {
-  border-color: #D40511;
-  box-shadow: 3px 3px 0 rgba(212, 5, 17, 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: #10b981;
-  box-shadow: 3px 3px 0 rgba(16, 185, 129, 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: #f59e0b;
-  box-shadow: 3px 3px 0 rgba(245, 158, 11, 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: #98040C;
-  box-shadow: 3px 3px 0 rgba(152, 4, 12, 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: #06b6d4;
-  box-shadow: 3px 3px 0 rgba(6, 182, 212, 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: #D40511;
+  background: #007bff;
 }
 
 .pa-timeline--simple .pa-timeline__item--filled.pa-timeline__item--primary::before {
-  background: #D40511;
+  background: #007bff;
 }
 
 .pa-timeline--simple .pa-timeline__item--filled.pa-timeline__item--success::before {
-  background: #10b981;
+  background: #28a745;
 }
 
 .pa-timeline--simple .pa-timeline__item--filled.pa-timeline__item--warning::before {
-  background: #f59e0b;
+  background: #ffc107;
 }
 
 .pa-timeline--simple .pa-timeline__item--filled.pa-timeline__item--danger::before {
-  background: #98040C;
+  background: #dc3545;
 }
 
 .pa-timeline--simple .pa-timeline__item--filled.pa-timeline__item--info::before {
-  background: #06b6d4;
+  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;
 }
@@ -10356,7 +10361,7 @@ code {
   content: "";
   position: absolute;
   width: 2px;
-  background: #D40511;
+  background: #007bff;
   top: 0;
   bottom: 0;
   left: 50%;
@@ -10395,8 +10400,8 @@ code {
   height: 16px;
   top: calc(50% - 8px);
   right: -8px;
-  background: var(--pa-primary-bg);
-  border: 2px solid #D40511;
+  background: var(--pa-main-bg);
+  border: 2px solid #007bff;
   border-radius: 50%;
   z-index: 1;
 }
@@ -10408,7 +10413,7 @@ code {
   height: 2px;
   top: calc(50% - 1px);
   right: 8px;
-  background: #D40511;
+  background: #007bff;
   z-index: 1;
 }
 
@@ -10437,8 +10442,8 @@ code {
   height: 16px;
   top: calc(50% - 8px);
   left: -8px;
-  background: var(--pa-primary-bg);
-  border: 2px solid #D40511;
+  background: var(--pa-main-bg);
+  border: 2px solid #007bff;
   border-radius: 50%;
   z-index: 1;
 }
@@ -10450,7 +10455,7 @@ code {
   height: 2px;
   top: calc(50% - 1px);
   left: 8px;
-  background: #D40511;
+  background: #007bff;
   z-index: 1;
 }
 
@@ -10461,7 +10466,7 @@ code {
   text-align: center;
   font-size: 1.4rem;
   font-weight: 700;
-  color: #D40511;
+  color: #007bff;
   text-transform: uppercase;
   letter-spacing: 1px;
   z-index: 1;
@@ -10475,16 +10480,16 @@ code {
   width: 40px;
   height: 40px;
   top: calc(50% - 20px);
-  background: #f59e0b;
-  border: 2px solid #D40511;
+  background: #ffc107;
+  border: 2px solid #007bff;
   border-radius: 50%;
   font-size: 1.8rem;
-  color: #D40511;
+  color: #007bff;
   z-index: 1;
 }
 
 .pa-timeline--alternating .pa-timeline__content {
-  background: #f59e0b;
+  background: #ffc107;
   position: relative;
 }
 
@@ -10492,14 +10497,14 @@ 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 {
   margin: 0;
   font-size: 1.6rem;
   line-height: 1.8;
-  color: #78350f;
+  color: #856404;
 }
 
 @media (max-width: 767px) {
@@ -10659,12 +10664,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: #D40511;
+  color: #007bff;
   text-decoration: none;
   font-weight: 500;
 }
@@ -10674,7 +10679,7 @@ code {
 }
 
 .pa-timeline--feed .pa-timeline__content time {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-size: 1.2rem;
 }
 
@@ -10704,7 +10709,7 @@ code {
 
 .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;
 }
 
@@ -10732,7 +10737,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;
 }
@@ -10741,7 +10746,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;
@@ -10763,7 +10768,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 {
@@ -10858,18 +10863,18 @@ code {
   border: 1px solid var(--pa-border-color);
   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: #D40511;
-  box-shadow: 0 0 0 3px rgba(212, 5, 17, 0.06);
+  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;
 }
 
@@ -10914,7 +10919,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;
 }
 
@@ -10924,7 +10929,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;
 }
 
@@ -10971,7 +10976,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;
@@ -10988,7 +10993,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;
@@ -11000,8 +11005,8 @@ code {
   flex-shrink: 0;
   font-size: 1.2rem;
   padding: 2px 0.4rem;
-  background-color: #E5E5E5;
-  color: var(--pa-text-secondary);
+  background-color: #e9ecef;
+  color: var(--pa-text-color-2);
   border-radius: 2px;
 }
 
@@ -11011,7 +11016,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 {
@@ -11022,10 +11027,10 @@ code {
 
 .pa-command-palette__key {
   padding: 2px 0.4rem;
-  background-color: #E5E5E5;
+  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;
@@ -11035,7 +11040,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;
 }
@@ -11044,7 +11049,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);
 }
 
@@ -11094,13 +11099,13 @@ code {
 }
 
 .pa-navbar-search:hover {
-  border-color: #D40511;
+  border-color: #007bff;
 }
 
 .pa-navbar-search:focus {
   outline: none;
-  border-color: #D40511;
-  box-shadow: 0 0 0 3px rgba(212, 5, 17, 0.06);
+  border-color: #007bff;
+  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.05);
 }
 
 .pa-navbar-search--xs {
@@ -11135,7 +11140,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;
@@ -11155,11 +11160,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: #E5E5E5;
+  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);
@@ -11194,7 +11199,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);
@@ -11228,29 +11233,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: #E5E5E5;
+  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;
 }
 
@@ -11263,18 +11268,18 @@ code {
   background: #f9fafb;
   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;
@@ -11306,7 +11311,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;
 }
 
@@ -11316,12 +11321,12 @@ code {
 }
 
 .pa-logic-tree__block--and {
-  border-color: #f59e0b;
+  border-color: #ffc107;
   background: linear-gradient(135deg, #fff8e1 0%, #ffffff 100%);
 }
 
 .pa-logic-tree__block--or {
-  border-color: #06b6d4;
+  border-color: #17a2b8;
   background: linear-gradient(135deg, #e3f2fd 0%, #ffffff 100%);
 }
 
@@ -11423,10 +11428,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 #E5E5E5;
+  border-bottom: 1.6px dashed #e1e5e9;
 }
 
 .pa-logic-tree__group-content {
@@ -11521,7 +11526,7 @@ code {
   background: none;
   border: none;
   border-radius: 4px;
-  color: var(--pa-text-primary);
+  color: var(--pa-header-text);
   cursor: pointer;
   transition: background-color 0.1s ease-out;
 }
@@ -11547,7 +11552,7 @@ code {
   min-width: 1.6rem;
   height: 1.6rem;
   padding: 0 0.4rem;
-  background-color: #98040C;
+  background-color: #dc3545;
   color: #ffffff;
   font-size: 1rem;
   font-weight: 600;
@@ -11591,14 +11596,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: #D40511;
+  color: #007bff;
   font-size: 1.4rem;
   font-weight: 500;
   cursor: pointer;
@@ -11606,7 +11611,7 @@ code {
 }
 
 .pa-notifications__mark-read:hover {
-  color: rgba(212, 5, 17, 0.12);
+  color: rgba(0, 123, 255, 0.12);
 }
 
 .pa-notifications__list {
@@ -11635,11 +11640,11 @@ code {
 }
 
 .pa-notifications__item--unread {
-  background-color: rgba(212, 5, 17, 0.05);
+  background-color: rgba(0, 123, 255, 0.05);
 }
 
 .pa-notifications__item--unread:hover {
-  background-color: rgba(212, 5, 17, 0.1);
+  background-color: rgba(0, 123, 255, 0.1);
 }
 
 .pa-notifications__icon-wrapper {
@@ -11656,28 +11661,28 @@ code {
 }
 
 .pa-notifications__icon-wrapper--primary {
-  background-color: rgba(212, 5, 17, 0.1);
-  color: #D40511;
+  background-color: rgba(0, 123, 255, 0.1);
+  color: #007bff;
 }
 
 .pa-notifications__icon-wrapper--success {
-  background-color: rgba(16, 185, 129, 0.1);
-  color: #10b981;
+  background-color: rgba(40, 167, 69, 0.1);
+  color: #28a745;
 }
 
 .pa-notifications__icon-wrapper--warning {
-  background-color: rgba(245, 158, 11, 0.1);
-  color: #f59e0b;
+  background-color: rgba(255, 193, 7, 0.1);
+  color: #ffc107;
 }
 
 .pa-notifications__icon-wrapper--danger {
-  background-color: rgba(152, 4, 12, 0.1);
-  color: #98040C;
+  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 {
@@ -11689,13 +11694,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;
@@ -11706,7 +11711,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;
 }
@@ -11718,7 +11723,7 @@ code {
 }
 
 .pa-notifications__footer a {
-  color: #D40511;
+  color: #007bff;
   font-size: 1.4rem;
   font-weight: 500;
   text-decoration: none;
@@ -11726,7 +11731,7 @@ code {
 }
 
 .pa-notifications__footer a:hover {
-  color: rgba(212, 5, 17, 0.12);
+  color: rgba(0, 123, 255, 0.12);
 }
 
 @media (max-width: 768px) {
@@ -11833,7 +11838,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;
 }
 
@@ -11870,7 +11875,7 @@ code {
   display: flex;
   gap: 0.8rem;
   justify-content: flex-end;
-  background-color: rgba(229, 229, 229, 0.3);
+  background-color: rgba(225, 229, 233, 0.3);
 }
 
 .pa-popconfirm__actions .pa-btn {
@@ -11957,7 +11962,7 @@ code {
   top: 0;
   width: 40px;
   height: 40px;
-  background: #D40511;
+  background: #007bff;
   color: white;
   border: none;
   border-radius: 4px 0 0 4px;
@@ -11971,13 +11976,13 @@ code {
 }
 
 .pa-settings-panel__toggle:hover {
-  background: rgba(212, 5, 17, 0.12);
+  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: 4px 0 0 4px;
@@ -11994,7 +11999,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;
 }
@@ -12010,7 +12015,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;
 }
@@ -12021,15 +12026,15 @@ code {
   border: 1px solid var(--pa-border-color);
   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: #D40511;
-  box-shadow: 0 0 0 3px rgba(212, 5, 17, 0.06);
+  border-color: #007bff;
+  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.05);
 }
 
 .pa-settings-panel__checkbox-group {
@@ -12042,7 +12047,7 @@ code {
   display: flex;
   align-items: center;
   cursor: pointer;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   font-size: 1.4rem;
 }
 
@@ -12052,7 +12057,7 @@ code {
 }
 
 .pa-settings-panel__checkbox:hover {
-  color: #D40511;
+  color: #007bff;
 }
 
 .pa-settings-panel--open {
@@ -12060,7 +12065,7 @@ code {
 }
 
 .pa-settings-panel--open .pa-settings-panel__toggle {
-  background: rgba(212, 5, 17, 0.12);
+  background: rgba(0, 123, 255, 0.12);
   transform: rotate(180deg);
 }
 
@@ -12342,7 +12347,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 {
@@ -12362,11 +12367,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 {
@@ -12383,7 +12388,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;
 }
 
@@ -12396,34 +12401,98 @@ html.font-size-4xl {
   gap: 0;
 }
 
+.row-gap-0 {
+  row-gap: 0;
+}
+
+.column-gap-0 {
+  column-gap: 0;
+}
+
 .gap-xs {
   gap: 0.4rem;
 }
 
+.row-gap-xs {
+  row-gap: 0.4rem;
+}
+
+.column-gap-xs {
+  column-gap: 0.4rem;
+}
+
 .gap-sm {
   gap: 0.8rem;
 }
 
+.row-gap-sm {
+  row-gap: 0.8rem;
+}
+
+.column-gap-sm {
+  column-gap: 0.8rem;
+}
+
 .gap-md {
   gap: 1.2rem;
 }
 
+.row-gap-md {
+  row-gap: 1.2rem;
+}
+
+.column-gap-md {
+  column-gap: 1.2rem;
+}
+
 .gap-base {
   gap: 1.6rem;
 }
 
+.row-gap-base {
+  row-gap: 1.6rem;
+}
+
+.column-gap-base {
+  column-gap: 1.6rem;
+}
+
 .gap-lg {
   gap: 2.4rem;
 }
 
+.row-gap-lg {
+  row-gap: 2.4rem;
+}
+
+.column-gap-lg {
+  column-gap: 2.4rem;
+}
+
 .gap-xl {
   gap: 3.2rem;
 }
 
+.row-gap-xl {
+  row-gap: 3.2rem;
+}
+
+.column-gap-xl {
+  column-gap: 3.2rem;
+}
+
 .gap-2xl {
   gap: 4.8rem;
 }
 
+.row-gap-2xl {
+  row-gap: 4.8rem;
+}
+
+.column-gap-2xl {
+  column-gap: 4.8rem;
+}
+
 .gap-1 {
   gap: 0.1rem;
 }
@@ -12468,54 +12537,6 @@ html.font-size-4xl {
   gap: 2rem;
 }
 
-.row-gap-0 {
-  row-gap: 0;
-}
-
-.row-gap-xs {
-  row-gap: 0.4rem;
-}
-
-.row-gap-sm {
-  row-gap: 0.8rem;
-}
-
-.row-gap-md {
-  row-gap: 1.2rem;
-}
-
-.row-gap-base {
-  row-gap: 1.6rem;
-}
-
-.row-gap-lg {
-  row-gap: 2.4rem;
-}
-
-.column-gap-0 {
-  column-gap: 0;
-}
-
-.column-gap-xs {
-  column-gap: 0.4rem;
-}
-
-.column-gap-sm {
-  column-gap: 0.8rem;
-}
-
-.column-gap-md {
-  column-gap: 1.2rem;
-}
-
-.column-gap-base {
-  column-gap: 1.6rem;
-}
-
-.column-gap-lg {
-  column-gap: 2.4rem;
-}
-
 .self-start {
   align-self: flex-start;
 }
@@ -12733,6 +12754,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;
 }
@@ -13483,6 +13506,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;
 }
@@ -14852,9 +15355,6 @@ html.font-size-4xl {
 .pa-header__title h2 {
   color: #333333 !important;
 }
-.pa-header__profile-btn {
-  color: #000000 !important;
-}
 .pa-header__profile-btn:hover {
   background-color: rgba(212, 5, 17, 0.12) !important;
 }
@@ -14904,12 +15404,12 @@ html.font-size-4xl {
   color: #ffffff !important;
 }
 
-.pa-btn--primary {
+.pa-btn--color-1 {
   font-weight: 700 !important;
   background-color: #D40511 !important;
   color: #ffffff !important;
 }
-.pa-btn--primary:hover {
+.pa-btn--color-1:hover {
   background-color: #F91320 !important;
   box-shadow: 0 2px 8px rgba(212, 5, 17, 0.3) !important;
 }
@@ -14958,12 +15458,20 @@ html.font-size-4xl {
   --base-text-color-3: #CCCCCC;
   --base-text-color-4: #E5E5E5;
   --base-text-color-on-accent: #ffffff;
+  --base-main-bg: #ffffff;
+  --base-page-bg: #f8f9fa;
+  --base-subtle-bg: #e9ecef;
+  --base-inverse-bg: #2c3e50;
+  --base-overlay-bg: rgba(0, 0, 0, 0.6);
+  --base-shadow-color: rgba(0, 0, 0, 0.15);
+  --base-hover-bg: #e9ecef;
+  --base-active-bg: rgb(218.2368421053, 223.25, 228.2631578947);
+  --base-disabled-bg: #e9ecef;
+  --base-elevated-bg: #f5f5f5;
   --base-surface-1: #ffffff;
   --base-surface-2: #F2F2F2;
   --base-surface-3: #E5E5E5;
   --base-surface-inverse: #333333;
-  --base-overlay-bg: rgba(0, 0, 0, 0.6);
-  --base-shadow-color: rgba(0, 0, 0, 0.15);
   --base-primary-bg: #ffffff;
   --base-primary-bg-hover: rgb(242.25, 242.25, 242.25);
   --base-border-color: #E5E5E5;
@@ -15040,11 +15548,11 @@ html.font-size-4xl {
   --base-border-radius-sm: 0.4;
   --base-border-radius-md: 0.6;
   --base-border-radius-lg: 0.8;
-  --pa-primary-bg: #ffffff;
-  --pa-bg-secondary: #F2F2F2;
-  --pa-content-bg: #F2F2F2;
-  --pa-text-primary: #333333;
-  --pa-text-secondary: #8C8C8C;
+  --pa-main-bg: #ffffff;
+  --pa-page-bg: #f8f9fa;
+  --pa-subtle-bg: #F2F2F2;
+  --pa-text-color-1: #333333;
+  --pa-text-color-2: #8C8C8C;
   --pa-accent: #D40511;
   --pa-accent-hover: rgba(212, 5, 17, 0.12);
   --pa-accent-light: rgba(212, 5, 17, 0.06);
@@ -15066,9 +15574,9 @@ html.font-size-4xl {
   --pa-btn-primary-bg-hover: #F91320;
   --pa-btn-primary-bg-light: rgba(212, 5, 17, 0.06);
   --pa-btn-primary-text: #ffffff;
-  --pa-btn-secondary-bg: #FFCC00;
-  --pa-btn-secondary-bg-hover: #FFE57F;
-  --pa-btn-secondary-text: #000000;
+  --pa-btn-secondary-bg: #6c757d;
+  --pa-btn-secondary-bg-hover: #545b62;
+  --pa-btn-secondary-text: #ffffff;
   --pa-btn-success-bg: #10b981;
   --pa-btn-success-bg-hover: #059669;
   --pa-btn-success-text: #ffffff;
@@ -15183,9 +15691,9 @@ html.font-size-4xl {
   --pa-multiselect-dropdown-bg: #ffffff;
   --pa-multiselect-dropdown-border: #E5E5E5;
   --pa-multiselect-dropdown-text: #333333;
-  --pa-multiselect-hint-bg: #F2F2F2;
+  --pa-multiselect-hint-bg: #f8f9fa;
   --pa-multiselect-hint-border: #E5E5E5;
-  --pa-multiselect-option-hover-bg: #F2F2F2;
+  --pa-multiselect-option-hover-bg: #f8f9fa;
   --pa-multiselect-pill-bg: rgba(212, 5, 17, 0.06);
   --pa-multiselect-pill-border: #D40511;
   --pa-color-1: #D40511;
@@ -15205,8 +15713,8 @@ html.font-size-4xl {
   --drp-border-color: #E5E5E5;
   --drp-primary-bg: #F2F2F2;
   --drp-primary-bg-hover: #EBEBEB;
-  --drp-text-primary: #333333;
-  --drp-text-secondary: #8C8C8C;
+  --drp-text-color-1: #333333;
+  --drp-text-bg: #8C8C8C;
   --drp-button-bg: transparent;
   --drp-button-color: #333333;
   --drp-button-accent-text-color: #ffffff;
@@ -15231,11 +15739,11 @@ html.font-size-4xl {
   --page-loader-bg: rgba(0, 0, 0, 0.95);
   --page-loader-spinner-border: #333;
   --page-loader-spinner-accent: #FFCC00;
-  --pa-primary-bg: #1a1a1a;
-  --pa-bg-secondary: #1a1a1a;
-  --pa-content-bg: #121212;
-  --pa-text-primary: #ffffff;
-  --pa-text-secondary: #aaaaaa;
+  --pa-main-bg: #1a1a1a;
+  --pa-page-bg: #1a1a1a;
+  --pa-subtle-bg: #121212;
+  --pa-text-color-1: #ffffff;
+  --pa-text-color-2: #aaaaaa;
   --pa-accent: #D40511;
   --pa-accent-hover: rgba(212, 5, 17, 0.2);
   --pa-accent-light: rgba(212, 5, 17, 0.15);
@@ -15318,6 +15826,13 @@ html.font-size-4xl {
   --pa-danger-bg-light: rgba(180, 5, 14, 0.2);
   --pa-info-bg: #06b6d4;
   --pa-info-bg-light: rgba(6, 182, 212, 0.2);
+  --base-main-bg: #242424;
+  --base-page-bg: #1a1a1a;
+  --base-subtle-bg: #2a2a2a;
+  --base-hover-bg: #2a2a2a;
+  --base-active-bg: #3a3a3a;
+  --base-disabled-bg: #2a2a2a;
+  --base-elevated-bg: #2a2a2a;
   --base-surface-1: #242424;
   --base-surface-2: #1a1a1a;
   --base-surface-3: #2a2a2a;
@@ -15348,8 +15863,8 @@ html.font-size-4xl {
   --drp-border-color: #3a3a3a;
   --drp-primary-bg: #1a1a1a;
   --drp-primary-bg-hover: #2a2a2a;
-  --drp-text-primary: #ffffff;
-  --drp-text-secondary: #aaaaaa;
+  --drp-text-color-1: #ffffff;
+  --drp-text-bg: #aaaaaa;
   --drp-button-bg: transparent;
   --drp-button-color: #ffffff;
   --drp-button-accent-text-color: #ffffff;
@@ -15378,7 +15893,7 @@ html.font-size-4xl {
 .pa-mode-dark .pa-layout__footer p {
   color: #333333 !important;
 }
-.pa-mode-dark .pa-alert--primary {
+.pa-mode-dark .pa-alert--color-1 {
   color: #ffffff !important;
   background-color: rgba(212, 5, 17, 0.25) !important;
   border-color: rgba(212, 5, 17, 0.4) !important;
@@ -15395,11 +15910,20 @@ html.font-size-4xl {
   background-color: #4a4a4a !important;
   border-color: #5a5a5a !important;
 }
-.pa-mode-dark .pa-btn--outline-secondary {
+.pa-mode-dark .pa-btn--outline-bg {
   border-color: #5a5a5a !important;
   color: #aaaaaa !important;
 }
-.pa-mode-dark .pa-btn--outline-secondary:hover {
+.pa-mode-dark .pa-btn--outline-bg:hover {
   background-color: #3a3a3a !important;
   color: #ffffff !important;
 }
+.pa-mode-dark .pa-profile-panel__header {
+  background-color: #242424;
+}
+.pa-mode-dark .pa-profile-panel__header .pa-profile-panel__name {
+  color: #ffffff;
+}
+.pa-mode-dark .pa-profile-panel__header .pa-profile-panel__email {
+  color: #aaaaaa;
+}