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

package/dist/minimal.css

@@ -72,10 +72,10 @@ figure {
 body {
   margin: 0;
   padding: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", 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;
@@ -88,7 +88,7 @@ body::before {
   left: 0;
   right: 0;
   bottom: 0;
-  background: radial-gradient(circle at 20% 80%, rgba(85, 85, 85, 0.03) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(85, 85, 85, 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;
 }
@@ -114,14 +114,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 {
@@ -133,13 +133,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);
 }
 
 /* ========================================
@@ -249,7 +249,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;
@@ -322,7 +322,7 @@ body.pa-layout--sticky .pa-layout__inner {
 }
 
 .pa-layout__footer {
-  min-height: 3.2rem;
+  min-height: 4.8rem;
   background-color: var(--pa-footer-bg);
   border-top: 1px solid var(--pa-footer-border-color);
   display: flex;
@@ -390,13 +390,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 {
@@ -607,7 +607,7 @@ body.loaded .pa-sidebar__chevron {
   opacity: 1;
   overflow: visible !important;
   z-index: 1050;
-  border-right: 1px solid #e8e8e8;
+  border-right: 1px solid #e1e5e9;
 }
 
 .sidebar-hidden .pa-layout__sidebar--icon-collapse .pa-sidebar__item {
@@ -782,7 +782,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 {
@@ -927,7 +927,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;
@@ -2762,7 +2762,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;
 }
 
@@ -2790,7 +2790,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;
@@ -2832,7 +2832,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;
 }
 
@@ -2922,15 +2922,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(85, 85, 85, 0.05);
+  color: var(--pa-text-color-1);
+  background-color: rgba(0, 123, 255, 0.05);
 }
 
 .pa-card__tab--active {
@@ -2960,14 +2960,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(85, 85, 85, 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 {
@@ -2986,11 +2986,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 {
@@ -2998,14 +2998,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;
@@ -3027,7 +3027,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;
@@ -3039,13 +3039,13 @@ a.pa-card p {
 }
 
 .pa-tabs__item:hover {
-  color: var(--pa-text-primary);
-  background-color: rgba(85, 85, 85, 0.05);
+  color: var(--pa-text-color-1);
+  background-color: rgba(0, 123, 255, 0.05);
 }
 
 .pa-tabs__item--active {
-  color: #555555;
-  border-bottom-color: #555555;
+  color: #007bff;
+  border-bottom-color: #007bff;
   font-weight: 600;
 }
 
@@ -3074,13 +3074,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(85, 85, 85, 0.1);
-  border-color: rgba(85, 85, 85, 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 {
@@ -3093,7 +3093,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;
 }
 
@@ -3105,13 +3105,13 @@ a.pa-card p {
 }
 
 .pa-tabs--boxed .pa-tabs__item:hover {
-  background-color: rgba(85, 85, 85, 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);
 }
 
@@ -3138,12 +3138,12 @@ a.pa-card p {
 }
 
 .pa-tabs--vertical .pa-tabs__item:hover {
-  background-color: rgba(85, 85, 85, 0.05);
+  background-color: rgba(0, 123, 255, 0.05);
 }
 
 .pa-tabs--vertical .pa-tabs__item--active {
-  border-right-color: #555555;
-  background-color: rgba(85, 85, 85, 0.1);
+  border-right-color: #007bff;
+  background-color: rgba(0, 123, 255, 0.1);
 }
 
 .pa-tabs--vertical .pa-tabs__item i {
@@ -3199,8 +3199,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;
@@ -3212,17 +3212,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 {
@@ -3266,7 +3266,7 @@ a.pa-card p {
 }
 
 .pa-tabs--border-top .pa-tabs__item--active {
-  border-top-color: #555555;
+  border-top-color: #007bff;
   border-bottom-color: transparent;
 }
 
@@ -3355,7 +3355,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);
@@ -3365,8 +3365,8 @@ a.pa-card p {
 }
 
 .pa-tabs__container--card .pa-tabs__overflow-toggle:hover {
-  background-color: rgba(85, 85, 85, 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 {
@@ -3416,11 +3416,11 @@ a.pa-card p {
 }
 
 .pa-tabs__container--card .pa-tabs__overflow-menu .pa-tabs__item:hover {
-  background-color: rgba(85, 85, 85, 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(85, 85, 85, 0.1);
+  background-color: rgba(0, 123, 255, 0.1);
   border-bottom: none;
 }
 
@@ -3471,8 +3471,8 @@ a.pa-card p {
 }
 
 .pa-stat__icon--primary {
-  background-color: rgba(85, 85, 85, 0.1);
-  color: #555555;
+  background-color: rgba(0, 123, 255, 0.1);
+  color: #007bff;
 }
 
 .pa-stat__icon--success {
@@ -3497,12 +3497,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;
 }
 
@@ -3517,14 +3517,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;
 }
@@ -3543,7 +3543,7 @@ a.pa-card p {
 }
 
 .pa-stat--hero .pa-stat__change--neutral {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
 }
 
 .pa-stat--square {
@@ -3610,7 +3610,7 @@ a.pa-card p {
 }
 
 .pa-stat--square.pa-stat--primary {
-  background-color: #555555;
+  background-color: #007bff;
   color: #ffffff;
 }
 
@@ -3635,7 +3635,7 @@ a.pa-card p {
 }
 
 .pa-stat--square.pa-stat--secondary {
-  background-color: var(--pa-text-secondary);
+  background-color: var(--pa-text-color-2);
   color: #ffffff;
 }
 
@@ -3763,7 +3763,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;
 }
@@ -3775,7 +3775,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;
 }
 
@@ -3812,14 +3812,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;
@@ -3832,18 +3832,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;
 }
 
@@ -4031,40 +4031,40 @@ a.pa-card p {
    Color variations for composite badges
    ======================================== */
 .pa-composite-badge--primary .pa-composite-badge__icon {
-  background-color: #555555;
+  background-color: #007bff;
   color: #ffffff;
 }
 
 .pa-composite-badge--primary .pa-composite-badge__label {
-  background-color: rgba(85, 85, 85, 0.05);
-  color: #555555;
+  background-color: rgba(0, 123, 255, 0.05);
+  color: #007bff;
 }
 
 .pa-composite-badge--primary .pa-composite-badge__label:hover {
-  background-color: rgba(85, 85, 85, 0.1);
+  background-color: rgba(0, 123, 255, 0.12);
 }
 
 .pa-composite-badge--primary .pa-composite-badge__button {
-  background-color: #555555;
+  background-color: #007bff;
   color: #ffffff;
 }
 
 .pa-composite-badge--primary .pa-composite-badge__button:hover {
-  background-color: #444444;
+  background-color: rgb(51, 149.4, 255);
 }
 
 .pa-composite-badge--primary .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(85, 85, 85, 0.1);
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
 }
 
 .pa-composite-badge--secondary .pa-composite-badge__icon {
-  background-color: #e8e8e8;
+  background-color: #6c757d;
   color: #ffffff;
 }
 
 .pa-composite-badge--secondary .pa-composite-badge__label {
-  background-color: #fafafa;
-  color: var(--pa-text-secondary);
+  background-color: #f8f9fa;
+  color: var(--pa-text-color-2);
 }
 
 .pa-composite-badge--secondary .pa-composite-badge__label:hover {
@@ -4072,16 +4072,16 @@ a.pa-card p {
 }
 
 .pa-composite-badge--secondary .pa-composite-badge__button {
-  background-color: #e8e8e8;
+  background-color: #6c757d;
   color: #ffffff;
 }
 
 .pa-composite-badge--secondary .pa-composite-badge__button:hover {
-  background-color: #d8d8d8;
+  background-color: #545b62;
 }
 
 .pa-composite-badge--secondary .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(85, 85, 85, 0.1);
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
 }
 
 .pa-composite-badge--success .pa-composite-badge__icon {
@@ -4104,11 +4104,11 @@ a.pa-card p {
 }
 
 .pa-composite-badge--success .pa-composite-badge__button:hover {
-  background-color: #218838;
+  background-color: rgb(30.1449275362, 125.8550724638, 52);
 }
 
 .pa-composite-badge--success .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(85, 85, 85, 0.1);
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
 }
 
 .pa-composite-badge--danger .pa-composite-badge__icon {
@@ -4131,11 +4131,11 @@ a.pa-card p {
 }
 
 .pa-composite-badge--danger .pa-composite-badge__button:hover {
-  background-color: #c82333;
+  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(85, 85, 85, 0.1);
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
 }
 
 .pa-composite-badge--warning .pa-composite-badge__icon {
@@ -4158,11 +4158,11 @@ a.pa-card p {
 }
 
 .pa-composite-badge--warning .pa-composite-badge__button:hover {
-  background-color: #e0a800;
+  background-color: rgb(211, 158.25, 0);
 }
 
 .pa-composite-badge--warning .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(85, 85, 85, 0.1);
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
 }
 
 .pa-composite-badge--info .pa-composite-badge__icon {
@@ -4185,38 +4185,38 @@ a.pa-card p {
 }
 
 .pa-composite-badge--info .pa-composite-badge__button:hover {
-  background-color: #138496;
+  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(85, 85, 85, 0.1);
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
 }
 
 .pa-composite-badge--light .pa-composite-badge__icon {
   background-color: #f8f9fa;
-  color: #333333;
+  color: #2c3e50;
 }
 
 .pa-composite-badge--light .pa-composite-badge__label {
-  background-color: #fafafa;
-  color: #333333;
+  background-color: #ffffff;
+  color: #2c3e50;
 }
 
 .pa-composite-badge--light .pa-composite-badge__label:hover {
-  background-color: #e2e6ea;
+  background-color: #e9ecef;
 }
 
 .pa-composite-badge--light .pa-composite-badge__button {
   background-color: #f8f9fa;
-  color: #333333;
+  color: #2c3e50;
 }
 
 .pa-composite-badge--light .pa-composite-badge__button:hover {
-  background-color: #e2e6ea;
+  background-color: #e9ecef;
 }
 
 .pa-composite-badge--light .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(85, 85, 85, 0.1);
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
 }
 
 .pa-composite-badge--dark .pa-composite-badge__icon {
@@ -4226,11 +4226,11 @@ a.pa-card p {
 
 .pa-composite-badge--dark .pa-composite-badge__label {
   background-color: #f8f9fa;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
 }
 
 .pa-composite-badge--dark .pa-composite-badge__label:hover {
-  background-color: #e8e8e8;
+  background-color: #e1e5e9;
 }
 
 .pa-composite-badge--dark .pa-composite-badge__button {
@@ -4239,19 +4239,19 @@ a.pa-card p {
 }
 
 .pa-composite-badge--dark .pa-composite-badge__button:hover {
-  background-color: #23272b;
+  background-color: #1d2124;
 }
 
 .pa-composite-badge--dark .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(85, 85, 85, 0.1);
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
 }
 
 .pa-composite-badge--primary .pa-composite-badge__icon {
-  background-color: #555555;
+  background-color: #007bff;
 }
 
 .pa-composite-badge--secondary .pa-composite-badge__icon {
-  background-color: #e8e8e8;
+  background-color: #6c757d;
 }
 
 .pa-composite-badge--success .pa-composite-badge__icon {
@@ -4273,7 +4273,7 @@ a.pa-card p {
 
 .pa-composite-badge--light .pa-composite-badge__icon {
   background-color: #f8f9fa;
-  color: #333333;
+  color: #2c3e50;
 }
 
 .pa-composite-badge--dark .pa-composite-badge__icon {
@@ -4281,21 +4281,21 @@ a.pa-card p {
 }
 
 .pa-composite-badge--label-primary .pa-composite-badge__label {
-  background-color: #bbbbbb;
-  color: rgb(8.5, 8.5, 8.5);
+  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(174.25, 174.25, 174.25);
+  background-color: rgb(178.5, 215.4, 255);
 }
 
 .pa-composite-badge--label-secondary .pa-composite-badge__label {
-  background-color: hsl(0, 0%, 125.9803921569%);
+  background-color: rgb(202.1566523605, 205.9613733906, 209.3433476395);
   color: #383d41;
 }
 
 .pa-composite-badge--label-secondary .pa-composite-badge__label:hover {
-  background-color: hsl(0, 0%, 120.9803921569%);
+  background-color: rgb(188.4763948498, 193.2660944206, 197.5236051502);
 }
 
 .pa-composite-badge--label-success .pa-composite-badge__label {
@@ -4336,11 +4336,11 @@ a.pa-card p {
 
 .pa-composite-badge--label-light .pa-composite-badge__label {
   background-color: rgb(253.95, 254.1, 254.25);
-  color: #333333;
+  color: #2c3e50;
 }
 
 .pa-composite-badge--label-light .pa-composite-badge__label:hover {
-  background-color: hsl(0, 0%, 125.9803921569%);
+  background-color: rgb(202.1566523605, 205.9613733906, 209.3433476395);
 }
 
 .pa-composite-badge--label-dark .pa-composite-badge__label {
@@ -4353,27 +4353,27 @@ a.pa-card p {
 }
 
 .pa-composite-badge--btn-primary .pa-composite-badge__button {
-  background-color: #555555;
+  background-color: #007bff;
 }
 
 .pa-composite-badge--btn-primary .pa-composite-badge__button:hover {
-  background-color: #444444;
+  background-color: rgb(51, 149.4, 255);
 }
 
 .pa-composite-badge--btn-primary .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(85, 85, 85, 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: #e8e8e8;
+  background-color: #6c757d;
 }
 
 .pa-composite-badge--btn-secondary .pa-composite-badge__button:hover {
-  background-color: #d8d8d8;
+  background-color: #545b62;
 }
 
 .pa-composite-badge--btn-secondary .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(232, 232, 232, 0.25);
+  box-shadow: 0 0 0 2px rgba(108, 117, 125, 0.25);
 }
 
 .pa-composite-badge--btn-success .pa-composite-badge__button {
@@ -4381,7 +4381,7 @@ a.pa-card p {
 }
 
 .pa-composite-badge--btn-success .pa-composite-badge__button:hover {
-  background-color: #218838;
+  background-color: rgb(30.1449275362, 125.8550724638, 52);
 }
 
 .pa-composite-badge--btn-success .pa-composite-badge__button:focus {
@@ -4394,7 +4394,7 @@ a.pa-card p {
 }
 
 .pa-composite-badge--btn-warning .pa-composite-badge__button:hover {
-  background-color: #e0a800;
+  background-color: rgb(211, 158.25, 0);
 }
 
 .pa-composite-badge--btn-warning .pa-composite-badge__button:focus {
@@ -4406,7 +4406,7 @@ a.pa-card p {
 }
 
 .pa-composite-badge--btn-info .pa-composite-badge__button:hover {
-  background-color: #138496;
+  background-color: rgb(17.3333333333, 122.0869565217, 138.6666666667);
 }
 
 .pa-composite-badge--btn-info .pa-composite-badge__button:focus {
@@ -4415,11 +4415,11 @@ a.pa-card p {
 
 .pa-composite-badge--btn-light .pa-composite-badge__button {
   background-color: #f8f9fa;
-  color: #333333;
+  color: #2c3e50;
 }
 
 .pa-composite-badge--btn-light .pa-composite-badge__button:hover {
-  background-color: #e2e6ea;
+  background-color: #e9ecef;
 }
 
 .pa-composite-badge--btn-light .pa-composite-badge__button:focus {
@@ -4431,7 +4431,7 @@ a.pa-card p {
 }
 
 .pa-composite-badge--btn-dark .pa-composite-badge__button:hover {
-  background-color: #23272b;
+  background-color: #1d2124;
 }
 
 .pa-composite-badge--btn-dark .pa-composite-badge__button:focus {
@@ -4467,7 +4467,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;
@@ -4624,7 +4624,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 {
@@ -4645,11 +4645,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);
 }
 
@@ -5069,11 +5069,11 @@ a.pa-card p {
 }
 
 .pa-spinner--primary {
-  border-top-color: #555555;
+  border-top-color: #007bff;
 }
 
 .pa-spinner--secondary {
-  border-top-color: #e8e8e8;
+  border-top-color: #6c757d;
 }
 
 .pa-spinner--success {
@@ -5488,7 +5488,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 {
@@ -5826,7 +5826,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;
@@ -5860,7 +5860,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 #e8e8e8;
+  border-bottom: 1px solid #e1e5e9;
   background-color: var(--pa-card-header-bg);
   border-radius: 4px 4px 0 0;
 }
@@ -5869,14 +5869,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;
 }
 
@@ -5904,7 +5904,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;
@@ -5915,7 +5915,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;
@@ -5928,8 +5928,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 {
@@ -6056,13 +6056,13 @@ a.pa-card p {
 
 .pa-alert--primary {
   color: var(--pa-accent);
-  background-color: rgba(85, 85, 85, 0.08);
-  border-color: rgba(85, 85, 85, 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);
 }
 
@@ -6092,15 +6092,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 {
@@ -6254,12 +6254,12 @@ a.pa-card p {
 
 .pa-callout--primary {
   border-left-color: var(--pa-accent);
-  background-color: rgba(85, 85, 85, 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 {
@@ -6388,7 +6388,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;
 }
@@ -6404,7 +6404,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;
 }
@@ -6428,7 +6428,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;
 }
 
@@ -6446,7 +6446,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;
 }
 
@@ -6463,7 +6463,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;
@@ -6476,7 +6476,7 @@ a.pa-card p {
 }
 
 .pa-textarea::placeholder {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
 }
 
 .pa-input--xs,
@@ -6589,7 +6589,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 {
@@ -6760,7 +6760,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;
@@ -6848,13 +6848,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(85, 85, 85, 0.15);
-  color: #555555;
+  background-color: rgba(0, 123, 255, 0.15);
+  color: #007bff;
   padding: 0.2rem 0.4rem;
   border-radius: 0.4rem;
   font-weight: 500;
@@ -6873,7 +6873,7 @@ a.pa-card p {
   position: absolute;
   z-index: 1000;
   background: var(--pa-input-bg);
-  border: 1px solid #e8e8e8;
+  border: 1px solid #e1e5e9;
   border-radius: 4px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   max-height: 24rem;
@@ -6903,7 +6903,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;
 }
 
@@ -6911,7 +6911,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);
@@ -6921,18 +6921,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 #e8e8e8;
+  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;
@@ -6942,13 +6942,13 @@ a.pa-card p {
 
 .pa-virtual-textbox:focus {
   outline: none;
-  border-color: #555555;
-  box-shadow: 0 0 0 3px rgba(85, 85, 85, 0.05);
+  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;
 }
@@ -6984,7 +6984,7 @@ a.pa-card p {
   border: 1px solid transparent;
   border-radius: 4px;
   font-size: 1.4rem;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", 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;
@@ -6999,13 +6999,13 @@ a.pa-card p {
   z-index: 2;
   width: 100%;
   padding: 0.8rem 0.8rem;
-  border: 1px solid #e8e8e8;
+  border: 1px solid #e1e5e9;
   border-radius: 4px;
   font-size: 1.4rem;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", 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;
@@ -7015,12 +7015,12 @@ a.pa-card p {
 
 .pa-inline-query-editor__input:focus {
   outline: none;
-  border-color: #555555;
-  box-shadow: 0 0 0 3px rgba(85, 85, 85, 0.05);
+  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;
 }
 
@@ -7030,29 +7030,29 @@ a.pa-card p {
 }
 
 .pa-inline-query-token--field {
-  background-color: rgba(85, 85, 85, 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(220, 53, 69, 0.15);
-  color: var(--pa-text-primary);
+  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(40, 167, 69, 0.15);
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
 }
 
 .pa-inline-query-token--keyword {
   background-color: rgba(255, 193, 7, 0.15);
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   font-style: italic;
 }
 
@@ -7060,7 +7060,7 @@ a.pa-card p {
   position: absolute;
   z-index: 1000;
   background: var(--pa-input-bg);
-  border: 1px solid #e8e8e8;
+  border: 1px solid #e1e5e9;
   border-radius: 4px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   max-height: 24rem;
@@ -7096,14 +7096,14 @@ a.pa-card p {
 .pa-inline-query-autocomplete__item-name {
   display: block;
   font-weight: 500;
-  color: #555555;
+  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;
 }
@@ -7112,10 +7112,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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 }
 
 /* ========================================
@@ -7135,7 +7135,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;
 }
 
@@ -7276,7 +7276,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 {
@@ -7326,12 +7326,12 @@ input:indeterminate + .pa-checkbox__box::after {
 web-daterangepicker {
   /* ===== BASE PRIMITIVES ===== */
   /* Colors */
-  --drp-accent-color: #555555;
-  --drp-primary-bg: #555555;
-  --drp-primary-bg-hover: #444444;
-  --drp-text-primary: var(--pa-text-primary);
-  --drp-text-secondary: var(--pa-text-secondary);
-  --drp-border-color: #e8e8e8;
+  --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: #f8f9fa;
   /* Spacing */
@@ -7369,18 +7369,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 #e8e8e8;
-  --drp-input-border-color-hover: #555555;
-  --drp-input-border-color-focus: #555555;
-  --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(85, 85, 85, 0.05);
+  --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 */
@@ -7416,7 +7416,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: #e8e8e8;
+  --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;
@@ -7425,49 +7425,49 @@ 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(85, 85, 85, 0.1);
-  --drp-header-bg-active: rgba(85, 85, 85, 0.05);
+  --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: #e8e8e8;
-  --drp-nav-bg-hover: rgba(85, 85, 85, 0.1);
-  --drp-nav-bg-active: rgba(85, 85, 85, 0.05);
-  --drp-nav-border-hover: #555555;
+  --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(85, 85, 85, 0.1);
+  --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: #555555;
+  --drp-day-today-border: #007bff;
   /* Selected state */
-  --drp-day-selected-bg: #555555;
+  --drp-day-selected-bg: #007bff;
   --drp-day-selected-color: #ffffff;
   /* Range state */
-  --drp-day-range-bg: rgba(85, 85, 85, 0.05);
-  --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: #555555;
+  --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: #555555;
+  --drp-badge-primary: #007bff;
   --drp-badge-success: #28a745;
   --drp-badge-warning: #ffc107;
   --drp-badge-danger: #dc3545;
@@ -7476,40 +7476,40 @@ web-daterangepicker {
   --drp-badge-number-bg: #dc3545;
   --drp-badge-number-color: #ffffff;
   /* Count badges */
-  --drp-badge-count-bg: #555555;
+  --drp-badge-count-bg: #007bff;
   --drp-badge-count-color: #ffffff;
   /* Text badges */
-  --drp-badge-text-bg: rgba(85, 85, 85, 0.05);
-  --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: #fafafa;
-  --drp-summary-border-color: #e8e8e8;
-  --drp-summary-text-color: var(--pa-text-primary);
-  --drp-summary-count-color: #555555;
+  --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: #e8e8e8;
-  --drp-button-today-bg-hover: #d8d8d8;
+  --drp-button-today-bg: #6c757d;
+  --drp-button-today-bg-hover: #545b62;
   --drp-button-today-color: #ffffff;
-  --drp-button-today-border: #e8e8e8;
+  --drp-button-today-border: #e1e5e9;
   /* Clear button */
-  --drp-button-clear-bg: #e8e8e8;
-  --drp-button-clear-bg-hover: #d8d8d8;
+  --drp-button-clear-bg: #6c757d;
+  --drp-button-clear-bg-hover: #545b62;
   --drp-button-clear-color: #ffffff;
-  --drp-button-clear-border: #e8e8e8;
+  --drp-button-clear-border: #e1e5e9;
   /* Cancel button */
-  --drp-button-cancel-bg: #e8e8e8;
-  --drp-button-cancel-bg-hover: #d8d8d8;
+  --drp-button-cancel-bg: #6c757d;
+  --drp-button-cancel-bg-hover: #545b62;
   --drp-button-cancel-color: #ffffff;
-  --drp-button-cancel-border: #e8e8e8;
+  --drp-button-cancel-border: #e1e5e9;
   /* Apply button */
-  --drp-button-apply-bg: #555555;
-  --drp-button-apply-bg-hover: #444444;
+  --drp-button-apply-bg: #007bff;
+  --drp-button-apply-bg-hover: rgb(51, 149.4, 255);
   --drp-button-apply-color: #ffffff;
-  --drp-button-apply-border: #555555;
+  --drp-button-apply-border: #007bff;
   /* Button sizing */
   --drp-button-padding: 0.8rem 1rem;
   --drp-button-font-size: 1.4rem;
@@ -7517,26 +7517,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(85, 85, 85, 0.1);
-  --drp-unified-range-bg-active: rgba(85, 85, 85, 0.05);
+  --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: #e8e8e8;
+  --drp-rolling-border: #e1e5e9;
   --drp-rolling-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  --drp-rolling-item-hover-bg: rgba(85, 85, 85, 0.1);
-  --drp-rolling-item-selected-bg: #555555;
+  --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: #555555;
+  --drp-loading-spinner-color: #007bff;
   --drp-loading-spinner-size: 1.6rem;
   /* ===== MULTIPLE MONTHS ===== */
   --drp-months-gap: 2.4rem;
@@ -7566,7 +7566,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;
@@ -7574,7 +7574,7 @@ web-daterangepicker {
 
 .pa-file-dropzone {
   position: relative;
-  border: 3.2px dashed #e8e8e8;
+  border: 3.2px dashed #e1e5e9;
   border-radius: 4px;
   padding: 3.2rem;
   text-align: center;
@@ -7584,13 +7584,13 @@ web-daterangepicker {
 }
 
 .pa-file-dropzone:hover {
-  border-color: #555555;
-  background: rgba(85, 85, 85, 0.05);
+  border-color: #007bff;
+  background: rgba(0, 123, 255, 0.05);
 }
 
 .pa-file-dropzone--active {
-  border-color: #555555;
-  background: rgba(85, 85, 85, 0.1);
+  border-color: #007bff;
+  background: rgba(0, 123, 255, 0.1);
   border-style: solid;
 }
 
@@ -7616,27 +7616,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: #555555;
+  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 #e8e8e8;
+  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 {
@@ -7666,7 +7666,7 @@ web-daterangepicker {
 }
 
 .pa-file-dropzone__file-card:hover {
-  border-color: #555555;
+  border-color: #007bff;
   box-shadow: 0 1.6px 4.8px rgba(0, 0, 0, 0.1);
 }
 
@@ -7677,7 +7677,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;
@@ -7687,7 +7687,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;
 }
 
@@ -7777,7 +7777,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 {
@@ -7790,7 +7790,7 @@ web-daterangepicker {
 }
 
 .pa-file-dropzone__summary-line:hover {
-  background-color: rgba(85, 85, 85, 0.1);
+  background-color: rgba(0, 123, 255, 0.1);
 }
 
 .pa-file-dropzone__summary-line:not(:last-child)::after {
@@ -7803,11 +7803,11 @@ web-daterangepicker {
 
 .pa-file-dropzone__summary-count {
   font-weight: 500;
-  color: #555555;
+  color: #007bff;
 }
 
 .pa-file-dropzone__summary-size {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-weight: normal;
 }
 
@@ -7815,7 +7815,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;
@@ -7866,7 +7866,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 {
@@ -7874,7 +7874,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;
@@ -7886,8 +7886,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 {
@@ -7913,7 +7913,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;
@@ -7922,15 +7922,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(85, 85, 85, 0.05);
+  background: rgba(0, 123, 255, 0.05);
 }
 
 .pa-file-popover__table tbody tr.uploading {
-  background: rgba(85, 85, 85, 0.1);
+  background: rgba(0, 123, 255, 0.1);
 }
 
 .pa-file-popover__file-name {
@@ -7941,7 +7941,7 @@ web-daterangepicker {
 }
 
 .pa-file-popover__file-size {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   white-space: nowrap;
 }
 
@@ -7951,7 +7951,7 @@ web-daterangepicker {
 
 .pa-file-popover__progress-bar {
   height: 6.4px;
-  background: rgba(85, 85, 85, 0.2);
+  background: rgba(0, 123, 255, 0.2);
   border-radius: 2px;
   overflow: hidden;
   margin-bottom: 0.4rem;
@@ -7959,14 +7959,14 @@ web-daterangepicker {
 
 .pa-file-popover__progress-fill {
   height: 100%;
-  background: #555555;
+  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 {
@@ -7976,11 +7976,11 @@ web-daterangepicker {
 }
 
 .pa-file-popover__status--pending {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
 }
 
 .pa-file-popover__status--uploading {
-  color: #555555;
+  color: #007bff;
 }
 
 .pa-file-popover__status--complete {
@@ -8058,9 +8058,9 @@ web-daterangepicker {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(85, 85, 85, 0.1);
+  background: rgba(0, 123, 255, 0.1);
   border-radius: 4px;
-  color: #555555;
+  color: #007bff;
 }
 
 .pa-file-item__info {
@@ -8071,7 +8071,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;
@@ -8079,7 +8079,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;
 }
 
@@ -8089,7 +8089,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;
@@ -8182,21 +8182,21 @@ web-daterangepicker {
 
 .pa-file-progress__bar {
   height: 6.4px;
-  background: rgba(85, 85, 85, 0.2);
+  background: rgba(0, 123, 255, 0.2);
   border-radius: 2px;
   overflow: hidden;
 }
 
 .pa-file-progress__fill {
   height: 100%;
-  background: #555555;
+  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;
@@ -8253,9 +8253,9 @@ web-daterangepicker {
 }
 
 .pa-file-dropzone-overlay {
-  background: rgba(85, 85, 85, 0.15);
+  background: rgba(0, 123, 255, 0.15);
   backdrop-filter: blur(3.2px);
-  border: 4.8px dashed #555555;
+  border: 4.8px dashed #007bff;
   border-radius: 4px;
   display: flex;
   align-items: center;
@@ -8276,7 +8276,7 @@ web-daterangepicker {
 .pa-file-dropzone-overlay__text {
   font-size: 2rem;
   font-weight: 600;
-  color: #555555;
+  color: #007bff;
 }
 
 /* ========================================
@@ -8313,7 +8313,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%;
 }
@@ -8340,7 +8340,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 {
@@ -8553,12 +8553,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;
 }
@@ -8679,7 +8679,7 @@ web-daterangepicker {
 }
 
 .pa-pager__text {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-size: 1.4rem;
 }
 
@@ -8720,7 +8720,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;
@@ -8754,7 +8754,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;
 }
@@ -8784,7 +8784,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 {
@@ -8816,7 +8816,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;
 }
 
@@ -8921,7 +8921,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;
@@ -9000,8 +9000,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 {
@@ -9071,7 +9071,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);
@@ -9132,8 +9132,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;
@@ -9209,7 +9209,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;
 }
 
@@ -9237,7 +9237,7 @@ code {
 }
 
 .pa-code-comment {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-style: italic;
 }
 
@@ -9306,7 +9306,7 @@ code {
 }
 
 .pa-pager__text {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-size: 1.4rem;
 }
 
@@ -9347,7 +9347,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;
@@ -9372,7 +9372,7 @@ code {
   width: 1.6rem;
   height: 1.6rem;
   border: 2px solid var(--pa-border-color);
-  border-top: 2px solid #555555;
+  border-top: 2px solid #007bff;
   border-radius: 50%;
 }
 
@@ -9381,7 +9381,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;
 }
@@ -9391,23 +9391,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;
@@ -9424,7 +9425,7 @@ code {
 
 .pa-header__profile-name {
   font-weight: 500;
-  color: #333333;
+  color: var(--pa-header-profile-name-color);
 }
 
 .pa-profile-panel {
@@ -9513,7 +9514,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;
@@ -9522,7 +9523,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;
@@ -9552,7 +9553,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;
 }
@@ -9591,7 +9592,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;
@@ -9661,6 +9662,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;
@@ -9676,7 +9681,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;
@@ -9713,7 +9718,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;
@@ -9722,7 +9727,7 @@ code {
 }
 
 .pa-profile-panel__favorite-remove:hover {
-  color: var(--pa-danger);
+  color: var(--pa-danger-bg);
   background-color: var(--pa-danger-bg-light);
 }
 
@@ -9830,14 +9835,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 {
@@ -10036,13 +10041,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;
 }
@@ -10051,7 +10056,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;
@@ -10067,7 +10072,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 {
@@ -10203,15 +10208,15 @@ code {
   top: 0;
   width: 15px;
   height: 15px;
-  background: var(--pa-primary-bg);
-  border: 1px solid #555555;
+  background: var(--pa-main-bg);
+  border: 1px solid #007bff;
   border-radius: 50%;
-  box-shadow: 3px 3px 0 rgba(85, 85, 85, 0.3);
+  box-shadow: 3px 3px 0 rgba(0, 123, 255, 0.3);
 }
 
 .pa-timeline--simple .pa-timeline__item--primary::before {
-  border-color: #555555;
-  box-shadow: 3px 3px 0 rgba(85, 85, 85, 0.3);
+  border-color: #007bff;
+  box-shadow: 3px 3px 0 rgba(0, 123, 255, 0.3);
 }
 
 .pa-timeline--simple .pa-timeline__item--success::before {
@@ -10235,16 +10240,16 @@ code {
 }
 
 .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: #555555;
+  background: #007bff;
 }
 
 .pa-timeline--simple .pa-timeline__item--filled.pa-timeline__item--primary::before {
-  background: #555555;
+  background: #007bff;
 }
 
 .pa-timeline--simple .pa-timeline__item--filled.pa-timeline__item--success::before {
@@ -10264,20 +10269,20 @@ code {
 }
 
 .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;
 }
@@ -10293,7 +10298,7 @@ code {
   content: "";
   position: absolute;
   width: 2px;
-  background: #555555;
+  background: #007bff;
   top: 0;
   bottom: 0;
   left: 50%;
@@ -10332,8 +10337,8 @@ code {
   height: 16px;
   top: calc(50% - 8px);
   right: -8px;
-  background: var(--pa-primary-bg);
-  border: 2px solid #555555;
+  background: var(--pa-main-bg);
+  border: 2px solid #007bff;
   border-radius: 50%;
   z-index: 1;
 }
@@ -10345,7 +10350,7 @@ code {
   height: 2px;
   top: calc(50% - 1px);
   right: 8px;
-  background: #555555;
+  background: #007bff;
   z-index: 1;
 }
 
@@ -10374,8 +10379,8 @@ code {
   height: 16px;
   top: calc(50% - 8px);
   left: -8px;
-  background: var(--pa-primary-bg);
-  border: 2px solid #555555;
+  background: var(--pa-main-bg);
+  border: 2px solid #007bff;
   border-radius: 50%;
   z-index: 1;
 }
@@ -10387,7 +10392,7 @@ code {
   height: 2px;
   top: calc(50% - 1px);
   left: 8px;
-  background: #555555;
+  background: #007bff;
   z-index: 1;
 }
 
@@ -10398,7 +10403,7 @@ code {
   text-align: center;
   font-size: 1.4rem;
   font-weight: 700;
-  color: #555555;
+  color: #007bff;
   text-transform: uppercase;
   letter-spacing: 1px;
   z-index: 1;
@@ -10413,10 +10418,10 @@ code {
   height: 40px;
   top: calc(50% - 20px);
   background: #ffc107;
-  border: 2px solid #555555;
+  border: 2px solid #007bff;
   border-radius: 50%;
   font-size: 1.8rem;
-  color: #555555;
+  color: #007bff;
   z-index: 1;
 }
 
@@ -10429,7 +10434,7 @@ code {
   margin: 0 0 0.8rem 0;
   font-size: 1.8rem;
   font-weight: 400;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
 }
 
 .pa-timeline--alternating .pa-timeline__content p {
@@ -10596,12 +10601,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: #555555;
+  color: #007bff;
   text-decoration: none;
   font-weight: 500;
 }
@@ -10611,7 +10616,7 @@ code {
 }
 
 .pa-timeline--feed .pa-timeline__content time {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-size: 1.2rem;
 }
 
@@ -10641,7 +10646,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;
 }
 
@@ -10669,7 +10674,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;
 }
@@ -10678,7 +10683,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;
@@ -10700,7 +10705,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 {
@@ -10795,18 +10800,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: #555555;
-  box-shadow: 0 0 0 3px rgba(85, 85, 85, 0.05);
+  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;
 }
 
@@ -10851,7 +10856,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;
 }
 
@@ -10861,7 +10866,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;
 }
 
@@ -10908,7 +10913,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;
@@ -10925,7 +10930,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;
@@ -10937,8 +10942,8 @@ code {
   flex-shrink: 0;
   font-size: 1.2rem;
   padding: 2px 0.4rem;
-  background-color: #e8e8e8;
-  color: var(--pa-text-secondary);
+  background-color: #e9ecef;
+  color: var(--pa-text-color-2);
   border-radius: 2px;
 }
 
@@ -10948,7 +10953,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 {
@@ -10959,10 +10964,10 @@ code {
 
 .pa-command-palette__key {
   padding: 2px 0.4rem;
-  background-color: #e8e8e8;
+  background-color: #e9ecef;
   border: 1px solid var(--pa-border-color);
   border-radius: 2px;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   font-weight: 500;
   font-size: 1rem;
   line-height: 1;
@@ -10972,7 +10977,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;
 }
@@ -10981,7 +10986,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);
 }
 
@@ -11031,13 +11036,13 @@ code {
 }
 
 .pa-navbar-search:hover {
-  border-color: #555555;
+  border-color: #007bff;
 }
 
 .pa-navbar-search:focus {
   outline: none;
-  border-color: #555555;
-  box-shadow: 0 0 0 3px rgba(85, 85, 85, 0.05);
+  border-color: #007bff;
+  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.05);
 }
 
 .pa-navbar-search--xs {
@@ -11072,7 +11077,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;
@@ -11092,11 +11097,11 @@ code {
   min-width: 2rem;
   height: 2rem;
   padding: 0 0.4rem;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", 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: #e8e8e8;
+  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);
@@ -11131,7 +11136,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);
@@ -11165,29 +11170,29 @@ code {
   min-width: 2.4rem;
   height: 2.4rem;
   padding: 0 0.4rem;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", 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: #e8e8e8;
+  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;
 }
 
@@ -11200,18 +11205,18 @@ code {
   background: #f9fafb;
   border-radius: 4px;
   min-height: 6.4rem;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", 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;
@@ -11243,7 +11248,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;
 }
 
@@ -11360,10 +11365,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 #e8e8e8;
+  border-bottom: 1.6px dashed #e1e5e9;
 }
 
 .pa-logic-tree__group-content {
@@ -11458,7 +11463,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;
 }
@@ -11528,14 +11533,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: #555555;
+  color: #007bff;
   font-size: 1.4rem;
   font-weight: 500;
   cursor: pointer;
@@ -11543,7 +11548,7 @@ code {
 }
 
 .pa-notifications__mark-read:hover {
-  color: rgba(85, 85, 85, 0.1);
+  color: rgba(0, 123, 255, 0.12);
 }
 
 .pa-notifications__list {
@@ -11572,11 +11577,11 @@ code {
 }
 
 .pa-notifications__item--unread {
-  background-color: rgba(85, 85, 85, 0.05);
+  background-color: rgba(0, 123, 255, 0.05);
 }
 
 .pa-notifications__item--unread:hover {
-  background-color: rgba(85, 85, 85, 0.1);
+  background-color: rgba(0, 123, 255, 0.1);
 }
 
 .pa-notifications__icon-wrapper {
@@ -11593,8 +11598,8 @@ code {
 }
 
 .pa-notifications__icon-wrapper--primary {
-  background-color: rgba(85, 85, 85, 0.1);
-  color: #555555;
+  background-color: rgba(0, 123, 255, 0.1);
+  color: #007bff;
 }
 
 .pa-notifications__icon-wrapper--success {
@@ -11613,8 +11618,8 @@ code {
 }
 
 .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 {
@@ -11626,13 +11631,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;
@@ -11643,7 +11648,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;
 }
@@ -11655,7 +11660,7 @@ code {
 }
 
 .pa-notifications__footer a {
-  color: #555555;
+  color: #007bff;
   font-size: 1.4rem;
   font-weight: 500;
   text-decoration: none;
@@ -11663,7 +11668,7 @@ code {
 }
 
 .pa-notifications__footer a:hover {
-  color: rgba(85, 85, 85, 0.1);
+  color: rgba(0, 123, 255, 0.12);
 }
 
 @media (max-width: 768px) {
@@ -11770,7 +11775,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;
 }
 
@@ -11807,7 +11812,7 @@ code {
   display: flex;
   gap: 0.8rem;
   justify-content: flex-end;
-  background-color: rgba(232, 232, 232, 0.3);
+  background-color: rgba(225, 229, 233, 0.3);
 }
 
 .pa-popconfirm__actions .pa-btn {
@@ -11894,7 +11899,7 @@ code {
   top: 0;
   width: 40px;
   height: 40px;
-  background: #555555;
+  background: #007bff;
   color: white;
   border: none;
   border-radius: 4px 0 0 4px;
@@ -11908,13 +11913,13 @@ code {
 }
 
 .pa-settings-panel__toggle:hover {
-  background: rgba(85, 85, 85, 0.1);
+  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;
@@ -11931,7 +11936,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;
 }
@@ -11947,7 +11952,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;
 }
@@ -11958,15 +11963,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: #555555;
-  box-shadow: 0 0 0 3px rgba(85, 85, 85, 0.05);
+  border-color: #007bff;
+  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.05);
 }
 
 .pa-settings-panel__checkbox-group {
@@ -11979,7 +11984,7 @@ code {
   display: flex;
   align-items: center;
   cursor: pointer;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   font-size: 1.4rem;
 }
 
@@ -11989,7 +11994,7 @@ code {
 }
 
 .pa-settings-panel__checkbox:hover {
-  color: #555555;
+  color: #007bff;
 }
 
 .pa-settings-panel--open {
@@ -11997,7 +12002,7 @@ code {
 }
 
 .pa-settings-panel--open .pa-settings-panel__toggle {
-  background: rgba(85, 85, 85, 0.1);
+  background: rgba(0, 123, 255, 0.12);
   transform: rotate(180deg);
 }
 
@@ -12279,7 +12284,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 {
@@ -12299,11 +12304,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 {
@@ -12320,7 +12325,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;
 }
 
@@ -12333,34 +12338,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;
 }
@@ -12405,54 +12474,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;
 }
@@ -12670,6 +12691,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;
 }
@@ -13420,6 +13443,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;
 }
@@ -14789,12 +15292,20 @@ html.font-size-4xl {
   --base-text-color-3: #e2e6ea;
   --base-text-color-4: #d8d8d8;
   --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.4);
+  --base-shadow-color: rgba(0, 0, 0, 0.1);
+  --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: #fafafa;
   --base-surface-3: #e8e8e8;
   --base-surface-inverse: #333333;
-  --base-overlay-bg: rgba(0, 0, 0, 0.4);
-  --base-shadow-color: rgba(0, 0, 0, 0.1);
   --base-primary-bg: #ffffff;
   --base-primary-bg-hover: rgb(242.25, 242.25, 242.25);
   --base-border-color: #e8e8e8;
@@ -14871,11 +15382,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: #fafafa;
-  --pa-content-bg: #ffffff;
-  --pa-text-primary: #333333;
-  --pa-text-secondary: #777777;
+  --pa-main-bg: #ffffff;
+  --pa-page-bg: #f8f9fa;
+  --pa-subtle-bg: #ffffff;
+  --pa-text-color-1: #333333;
+  --pa-text-color-2: #777777;
   --pa-accent: #555555;
   --pa-accent-hover: rgba(85, 85, 85, 0.1);
   --pa-accent-light: rgba(85, 85, 85, 0.05);
@@ -14894,11 +15405,11 @@ html.font-size-4xl {
   --pa-footer-bg: #fafafa;
   --pa-footer-border-color: #e8e8e8;
   --pa-btn-primary-bg: #555555;
-  --pa-btn-primary-bg-hover: #444444;
+  --pa-btn-primary-bg-hover: rgb(110.5, 110.5, 110.5);
   --pa-btn-primary-bg-light: rgba(85, 85, 85, 0.05);
   --pa-btn-primary-text: #ffffff;
-  --pa-btn-secondary-bg: #e8e8e8;
-  --pa-btn-secondary-bg-hover: #d8d8d8;
+  --pa-btn-secondary-bg: #6c757d;
+  --pa-btn-secondary-bg-hover: #545b62;
   --pa-btn-secondary-text: #ffffff;
   --pa-btn-success-bg: #28a745;
   --pa-btn-success-bg-hover: #218838;
@@ -15014,9 +15525,9 @@ html.font-size-4xl {
   --pa-multiselect-dropdown-bg: #ffffff;
   --pa-multiselect-dropdown-border: #e8e8e8;
   --pa-multiselect-dropdown-text: #333333;
-  --pa-multiselect-hint-bg: #fafafa;
+  --pa-multiselect-hint-bg: #f8f9fa;
   --pa-multiselect-hint-border: #e8e8e8;
-  --pa-multiselect-option-hover-bg: #fafafa;
+  --pa-multiselect-option-hover-bg: #f8f9fa;
   --pa-multiselect-pill-bg: rgba(85, 85, 85, 0.05);
   --pa-multiselect-pill-border: #555555;
   --pa-color-1: #374151;
@@ -15036,8 +15547,8 @@ html.font-size-4xl {
   --drp-border-color: #e8e8e8;
   --drp-primary-bg: #fafafa;
   --drp-primary-bg-hover: #f8f9fa;
-  --drp-text-primary: #333333;
-  --drp-text-secondary: #777777;
+  --drp-text-color-1: #333333;
+  --drp-text-bg: #777777;
   --drp-button-bg: transparent;
   --drp-button-color: #333333;
   --drp-button-accent-text-color: #ffffff;
@@ -15062,11 +15573,11 @@ html.font-size-4xl {
   --page-loader-bg: rgba(26, 26, 26, 0.95);
   --page-loader-spinner-border: #404040;
   --page-loader-spinner-accent: #e8e8e8;
-  --pa-primary-bg: #1a1a1a;
-  --pa-bg-secondary: #1a1a1a;
-  --pa-content-bg: #141414;
-  --pa-text-primary: #e8e8e8;
-  --pa-text-secondary: #a0a0a0;
+  --pa-main-bg: #1a1a1a;
+  --pa-page-bg: #1a1a1a;
+  --pa-subtle-bg: #141414;
+  --pa-text-color-1: #e8e8e8;
+  --pa-text-color-2: #a0a0a0;
   --pa-accent: #e8e8e8;
   --pa-accent-hover: rgba(232, 232, 232, 0.15);
   --pa-accent-light: rgba(232, 232, 232, 0.08);
@@ -15152,6 +15663,13 @@ html.font-size-4xl {
   --pa-danger-bg-light: rgba(220, 53, 69, 0.2);
   --pa-info-bg: #17a2b8;
   --pa-info-bg-light: rgba(23, 162, 184, 0.2);
+  --base-main-bg: #242424;
+  --base-page-bg: #1a1a1a;
+  --base-subtle-bg: #2e2e2e;
+  --base-hover-bg: #2e2e2e;
+  --base-active-bg: #404040;
+  --base-disabled-bg: #2e2e2e;
+  --base-elevated-bg: #2e2e2e;
   --base-surface-1: #242424;
   --base-surface-2: #1a1a1a;
   --base-surface-3: #2e2e2e;
@@ -15182,8 +15700,8 @@ html.font-size-4xl {
   --drp-border-color: #404040;
   --drp-primary-bg: #1a1a1a;
   --drp-primary-bg-hover: #2e2e2e;
-  --drp-text-primary: #e8e8e8;
-  --drp-text-secondary: #a0a0a0;
+  --drp-text-color-1: #e8e8e8;
+  --drp-text-bg: #a0a0a0;
   --drp-button-bg: transparent;
   --drp-button-color: #e8e8e8;
   --drp-button-accent-text-color: #1a1a1a;
@@ -15209,11 +15727,11 @@ html.font-size-4xl {
 .pa-mode-dark .pa-card {
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
 }
-.pa-mode-dark .pa-btn--primary {
+.pa-mode-dark .pa-btn--color-1 {
   background-color: #e8e8e8 !important;
   color: #1a1a1a !important;
 }
-.pa-mode-dark .pa-btn--primary:hover {
+.pa-mode-dark .pa-btn--color-1:hover {
   background-color: #ffffff !important;
 }
 .pa-mode-dark .pa-btn--secondary {
@@ -15225,11 +15743,11 @@ html.font-size-4xl {
   background-color: #505050 !important;
   border-color: #606060 !important;
 }
-.pa-mode-dark .pa-btn--outline-secondary {
+.pa-mode-dark .pa-btn--outline-bg {
   border-color: #606060 !important;
   color: #a0a0a0 !important;
 }
-.pa-mode-dark .pa-btn--outline-secondary:hover {
+.pa-mode-dark .pa-btn--outline-bg:hover {
   background-color: #404040 !important;
   color: #e8e8e8 !important;
 }