@keenmate/pure-admin-core 1.0.0 → 1.1.0

package/dist/css/main.css

@@ -1,5 +1,7 @@
 @charset "UTF-8";
 /* Pure Admin Visual Framework - Main Entry Point */
+/* 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;
 }
@@ -750,6 +752,486 @@
   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;
 }
@@ -2113,9 +2595,6 @@
 /* ========================================
    Reset and Base Styles
    ======================================== */
-/* Pure Admin Visual Framework - Core Styles */
-/* Pure Admin Visual Framework - SCSS Variables Only */
-/* NOTE: 10px rem base - all rem values are now in 10px units (1rem = 10px) */
 html {
   font-size: 10px;
 }
@@ -2181,10 +2660,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;
@@ -2215,9 +2694,6 @@ label {
   font-size: inherit;
 }
 
-/* ========================================
-   Reset and Base Styles
-   ======================================== */
 /* Webkit browsers (Chrome, Safari, Edge) */
 *::-webkit-scrollbar {
   width: 6px;
@@ -2225,14 +2701,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 {
   background: var(--pa-accent);
@@ -2242,13 +2718,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);
 }
 
 /* ========================================
@@ -2258,9 +2734,6 @@ label {
    Layout Index
    Central import point for all layout component modules
    ======================================== */
-/* ========================================
-   Reset and Base Styles
-   ======================================== */
 /* ========================================
    Navbar Component
    Fixed navbar and constrained container widths
@@ -2349,9 +2822,6 @@ body.pa-container-2xl .pa-navbar {
   flex-shrink: 0;
 }
 
-/* ========================================
-   Reset and Base Styles
-   ======================================== */
 /* ========================================
    Layout Container
    Main layout wrapper, content areas, sticky/scroll modes
@@ -2364,7 +2834,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;
@@ -2499,21 +2969,18 @@ body.pa-layout--sticky .pa-layout__inner {
     align-items: flex-end;
   }
 }
-/* ========================================
-   Reset and Base Styles
-   ======================================== */
 /* ========================================
    Sidebar Component
    Sidebar navigation with nested submenus
    ======================================== */
 :root {
-  --pa-sidebar-width: 28.8rem;
-  --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 {
@@ -2682,9 +3149,6 @@ body.loaded .pa-sidebar__chevron {
   transform: rotate(90deg);
 }
 
-/* ========================================
-   Reset and Base Styles
-   ======================================== */
 /* ========================================
    Sidebar States
    Hidden, icon-collapse, and expanded states
@@ -2883,9 +3347,6 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
   width: 2.4rem;
 }
 
-/* ========================================
-   Reset and Base Styles
-   ======================================== */
 /* ========================================
    Navbar/Header Elements
    Burger menu, brand, navigation, title, profile button, theme switcher
@@ -2983,7 +3444,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;
@@ -3072,9 +3533,6 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
   border-color: var(--pa-accent);
 }
 
-/* ========================================
-   Reset and Base Styles
-   ======================================== */
 /* ========================================
    Layout Responsive
    Mobile and tablet media queries
@@ -3145,9 +3603,6 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
     font-size: 1.4rem;
   }
 }
-/* ========================================
-   Reset and Base Styles
-   ======================================== */
 .pa-row {
   display: flex;
   flex-wrap: wrap;
@@ -4753,9 +5208,6 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
     max-width: 100%;
   }
 }
-/* ========================================
-   Reset and Base Styles
-   ======================================== */
 /* ========================================
    Card Components
    Cards with headers, bodies, footers, variants, and card sections
@@ -4808,7 +5260,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;
 }
 .pa-card__header .pa-btn {
@@ -4832,7 +5284,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;
@@ -4867,7 +5319,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
   gap: 0.8rem;
 }
 .pa-card__meta {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-size: 1.4rem;
 }
 .pa-card--primary {
@@ -4942,13 +5394,13 @@ 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);
+  color: var(--pa-text-color-1);
   background-color: rgba(0, 123, 255, 0.05);
 }
 .pa-card__tab--active {
@@ -4974,13 +5426,13 @@ 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(0, 123, 255, 0.05);
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
 }
 .pa-card__tabs--inline .pa-card__tab--active {
   background: var(--pa-accent);
@@ -4996,32 +5448,29 @@ a.pa-card:hover, a.pa-card:visited {
   color: inherit;
 }
 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 {
   margin-bottom: 3.2rem;
 }
 .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;
 }
 
-/* ========================================
-   Reset and Base Styles
-   ======================================== */
 /* ========================================
    Tabs Component
    Standalone tabs for organizing content into separate sections
@@ -5037,7 +5486,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;
@@ -5048,7 +5497,7 @@ a.pa-card p {
   white-space: nowrap;
 }
 .pa-tabs__item:hover {
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   background-color: rgba(0, 123, 255, 0.05);
 }
 .pa-tabs__item--active {
@@ -5076,12 +5525,12 @@ 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(0, 123, 255, 0.1);
   border-color: rgba(0, 123, 255, 0.3);
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
 }
 .pa-tabs--pills .pa-tabs__item--active {
   background-color: var(--pa-accent);
@@ -5092,7 +5541,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;
 }
 .pa-tabs--boxed .pa-tabs__item {
@@ -5103,11 +5552,11 @@ a.pa-card p {
 }
 .pa-tabs--boxed .pa-tabs__item:hover {
   background-color: rgba(0, 123, 255, 0.1);
-  color: var(--pa-text-primary);
+  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);
 }
 .pa-tabs--vertical {
@@ -5182,8 +5631,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;
@@ -5194,15 +5643,15 @@ a.pa-card p {
   pointer-events: none;
 }
 .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 {
   opacity: 1;
@@ -5312,7 +5761,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);
@@ -5322,7 +5771,7 @@ a.pa-card p {
 }
 .pa-tabs__container--card .pa-tabs__overflow-toggle:hover {
   background-color: rgba(0, 123, 255, 0.05);
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
 }
 .pa-tabs__container--card .pa-tabs__overflow-toggle--has-active {
   color: var(--pa-accent);
@@ -5393,9 +5842,6 @@ a.pa-card p {
   width: 100%;
 }
 
-/* ========================================
-   Reset and Base Styles
-   ======================================== */
 /* ========================================
    Statistics Components
    Stat displays with icons, hero variant, and square variant
@@ -5436,11 +5882,11 @@ 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;
 }
 .pa-stat--hero {
@@ -5453,13 +5899,13 @@ 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;
 }
@@ -5474,7 +5920,7 @@ a.pa-card p {
   color: #dc3545;
 }
 .pa-stat--hero .pa-stat__change--neutral {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
 }
 .pa-stat--square {
   display: flex;
@@ -5555,7 +6001,7 @@ a.pa-card p {
   color: #ffffff;
 }
 .pa-stat--square.pa-stat--secondary {
-  background-color: var(--pa-text-secondary);
+  background-color: var(--pa-text-color-2);
   color: #ffffff;
 }
 
@@ -5563,9 +6009,6 @@ a.pa-card p {
   margin: -0.8rem;
 }
 
-/* ========================================
-   Reset and Base Styles
-   ======================================== */
 /* ========================================
    List Components
    List items with avatars, titles, subtitles, and meta information
@@ -5665,7 +6108,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;
 }
@@ -5675,7 +6118,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;
 }
 .pa-list-definition--inline dt {
@@ -5706,13 +6149,13 @@ a.pa-card p {
   border-bottom: none;
 }
 .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;
@@ -5723,16 +6166,16 @@ 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;
 }
 
@@ -5744,9 +6187,6 @@ a.pa-card p {
    Badges Index
    Central import point for all badge component modules
    ======================================== */
-/* ========================================
-   Reset and Base Styles
-   ======================================== */
 /* ========================================
    Badge Base
    Core badge component with sizes, colors, and modifiers
@@ -5836,9 +6276,6 @@ a.pa-card p {
   text-align: left;
 }
 
-/* ========================================
-   Reset and Base Styles
-   ======================================== */
 /* ========================================
    Composite Badge
    Multi-part badge with [icon][label][button] structure
@@ -5900,9 +6337,6 @@ a.pa-card p {
   box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25);
 }
 
-/* ========================================
-   Reset and Base Styles
-   ======================================== */
 /* ========================================
    Composite Badge Variants
    Color variations for composite badges
@@ -5934,7 +6368,7 @@ a.pa-card p {
 }
 .pa-composite-badge--secondary .pa-composite-badge__label {
   background-color: #f8f9fa;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
 }
 .pa-composite-badge--secondary .pa-composite-badge__label:hover {
   background-color: #f8f9fa;
@@ -6060,7 +6494,7 @@ 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: #e1e5e9;
@@ -6223,9 +6657,6 @@ a.pa-card p {
   box-shadow: 0 0 0 2px rgba(52, 58, 64, 0.25);
 }
 
-/* ========================================
-   Reset and Base Styles
-   ======================================== */
 /* ========================================
    Badge Group
    Container for grouped badges with visibility limits
@@ -6243,9 +6674,6 @@ a.pa-card p {
   display: inline-flex;
 }
 
-/* ========================================
-   Reset and Base Styles
-   ======================================== */
 /* ========================================
    Label Components
    Tag-like labels with colors and sizes
@@ -6256,7 +6684,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;
@@ -6371,9 +6799,6 @@ a.pa-card p {
   background-color: var(--pa-info-bg-light);
 }
 
-/* ========================================
-   Reset and Base Styles
-   ======================================== */
 /* ========================================
    Button Components
    Buttons, button groups, sizes, colors, states, and icon buttons
@@ -6391,7 +6816,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 {
   transform: translateY(-1px);
@@ -6408,10 +6833,10 @@ 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);
 }
 .pa-btn--xs {
@@ -6743,9 +7168,6 @@ a.pa-card p {
   z-index: 7000;
 }
 
-/* ========================================
-   Reset and Base Styles
-   ======================================== */
 /* ========================================
    Loader Components
    Spinners, dots, bars, pulse, ring, wave loaders and animations
@@ -6975,9 +7397,6 @@ a.pa-card p {
   text-align: center;
 }
 
-/* ========================================
-   Reset and Base Styles
-   ======================================== */
 /* ========================================
    Tooltip and Popover Components
    Tooltips with multiple positions and popovers with rich content
@@ -7134,7 +7553,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 {
   border-top-color: var(--pa-btn-warning-bg);
@@ -7405,7 +7824,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;
@@ -7443,13 +7862,13 @@ 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;
 }
 .pa-popover__body p {
@@ -7471,7 +7890,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;
@@ -7481,7 +7900,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;
@@ -7493,8 +7912,8 @@ a.pa-card p {
   transition: all 0.1s ease;
 }
 .pa-popover__close:hover {
-  background-color: color-mix(in srgb, var(--pa-text-secondary) 10%, transparent);
-  color: var(--pa-text-primary);
+  background-color: color-mix(in srgb, var(--pa-text-color-2) 10%, transparent);
+  color: var(--pa-text-color-1);
 }
 .pa-popover--sm .pa-popover__content {
   min-width: 19.2rem;
@@ -7573,9 +7992,6 @@ a.pa-card p {
   background-color: var(--pa-color-9);
 }
 
-/* ========================================
-   Reset and Base Styles
-   ======================================== */
 /* ========================================
    Alert Components
    Alerts with variants, sizes, dismissible functionality
@@ -7606,8 +8022,8 @@ a.pa-card p {
   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);
 }
 .pa-alert--success {
@@ -7632,14 +8048,14 @@ a.pa-card p {
   border-color: var(--pa-alert-info-border);
 }
 .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 {
   color: var(--pa-accent);
@@ -7747,9 +8163,6 @@ a.pa-card p {
   border-top: 1px solid rgba(0, 0, 0, 0.1);
 }
 
-/* ========================================
-   Reset and Base Styles
-   ======================================== */
 /* ========================================
    Callout Components
    Documentation-style callouts with left border accent
@@ -7775,8 +8188,8 @@ a.pa-card p {
   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 {
   border-left-color: var(--pa-success-bg);
@@ -7861,9 +8274,6 @@ a.pa-card p {
    Forms Index
    Central import point for all form component modules
    ======================================== */
-/* ========================================
-   Reset and Base Styles
-   ======================================== */
 /* ========================================
    Form Layout
    Form groups, form containers, horizontal layouts
@@ -7887,7 +8297,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;
 }
@@ -7902,7 +8312,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;
 }
@@ -7913,9 +8323,6 @@ a.pa-card p {
   flex-wrap: wrap;
 }
 
-/* ========================================
-   Reset and Base Styles
-   ======================================== */
 /* ========================================
    Form Input Elements
    Input, select, textarea base styles and sizes
@@ -7928,7 +8335,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;
 }
 .pa-input:focus {
@@ -7945,7 +8352,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;
 }
 .pa-select:focus {
@@ -7961,7 +8368,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;
@@ -7972,7 +8379,7 @@ a.pa-card p {
   box-shadow: 0 0 0 3px var(--pa-accent-light);
 }
 .pa-textarea::placeholder {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
 }
 
 .pa-input--xs,
@@ -8011,9 +8418,6 @@ a.pa-card p {
   filter: invert(1);
 }
 
-/* ========================================
-   Reset and Base Styles
-   ======================================== */
 /* ========================================
    Form Validation States
    Input states (error, success, warning), form groups with states, help text
@@ -8082,7 +8486,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 {
   color: var(--pa-danger-bg);
@@ -8091,9 +8495,6 @@ a.pa-card p {
   color: var(--pa-success-bg);
 }
 
-/* ========================================
-   Reset and Base Styles
-   ======================================== */
 /* ========================================
    Input Groups
    Input groups with prepend/append addons and buttons
@@ -8203,9 +8604,6 @@ a.pa-card p {
   font-size: 1.8rem;
 }
 
-/* ========================================
-   Reset and Base Styles
-   ======================================== */
 /* ========================================
    Input Wrapper
    Input with clear button, search tokens container
@@ -8232,7 +8630,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;
@@ -8284,9 +8682,6 @@ a.pa-card p {
   opacity: 1;
 }
 
-/* ========================================
-   Reset and Base Styles
-   ======================================== */
 /* ========================================
    Query Editor Components
    Syntax highlighting, autocomplete, virtual textbox, inline query editor
@@ -8316,7 +8711,7 @@ 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;
@@ -8365,14 +8760,14 @@ 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;
 }
 .pa-search-autocomplete__section {
   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);
@@ -8381,7 +8776,7 @@ 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;
 }
 
@@ -8392,7 +8787,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);
   cursor: text;
   overflow-wrap: break-word;
   word-wrap: break-word;
@@ -8406,7 +8801,7 @@ a.pa-card p {
 }
 .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;
 }
@@ -8438,7 +8833,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;
@@ -8455,10 +8850,10 @@ a.pa-card p {
   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;
@@ -8471,7 +8866,7 @@ a.pa-card p {
   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;
 }
 
@@ -8481,24 +8876,24 @@ a.pa-card p {
 }
 .pa-inline-query-token--field {
   background-color: rgba(0, 123, 255, 0.15);
-  color: var(--pa-text-primary);
+  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;
 }
 
@@ -8543,7 +8938,7 @@ a.pa-card p {
 .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;
 }
@@ -8551,15 +8946,12 @@ 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;
 }
 
-/* ========================================
-   Reset and Base Styles
-   ======================================== */
 /* ========================================
    Checkboxes and Radio Buttons
    Custom checkbox component with tri-state support, radio buttons
@@ -8577,7 +8969,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;
 }
 .pa-checkbox input[type=checkbox] {
@@ -8698,7 +9090,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 {
   margin: 0;
@@ -8724,9 +9116,6 @@ input:indeterminate + .pa-checkbox__box::after {
   height: 2.4rem;
 }
 
-/* ========================================
-   Reset and Base Styles
-   ======================================== */
 /* Pure Admin - Web Components Theme Integration
  * Maps Pure Admin SCSS variables to web component CSS custom properties
  *
@@ -8749,8 +9138,8 @@ web-daterangepicker {
   --drp-accent-color: #007bff;
   --drp-primary-bg: #007bff;
   --drp-primary-bg-hover: rgb(51, 149.4, 255);
-  --drp-text-primary: var(--pa-text-primary);
-  --drp-text-secondary: var(--pa-text-secondary);
+  --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;
@@ -8789,18 +9178,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-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-secondary);
+  --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(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 */
@@ -8845,12 +9234,12 @@ 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-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-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);
@@ -8858,14 +9247,14 @@ web-daterangepicker {
   /* ===== 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-text-color: var(--pa-text-color-1);
   --drp-day-bg-hover: rgba(0, 123, 255, 0.12);
   --drp-day-border-hover: transparent;
   /* Today indicator */
@@ -8875,14 +9264,14 @@ web-daterangepicker {
   --drp-day-selected-color: #ffffff;
   /* Range state */
   --drp-day-range-bg: rgba(0, 123, 255, 0.05);
-  --drp-day-range-text: var(--pa-text-primary);
+  --drp-day-range-text: var(--pa-text-color-1);
   /* Focused state */
   --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) */
@@ -8900,11 +9289,11 @@ web-daterangepicker {
   --drp-badge-count-color: #ffffff;
   /* Text badges */
   --drp-badge-text-bg: rgba(0, 123, 255, 0.05);
-  --drp-badge-text-color: var(--pa-text-primary);
+  --drp-badge-text-color: var(--pa-text-color-1);
   /* ===== SUMMARY BAR ===== */
   --drp-summary-bg: #f8f9fa;
   --drp-summary-border-color: #e1e5e9;
-  --drp-summary-text-color: var(--pa-text-primary);
+  --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;
@@ -8937,13 +9326,13 @@ 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-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: #e1e5e9;
@@ -8952,8 +9341,8 @@ web-daterangepicker {
   --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: #007bff;
@@ -8962,9 +9351,6 @@ web-daterangepicker {
   --drp-months-gap: 2.4rem;
 }
 
-/* ========================================
-   Reset and Base Styles
-   ======================================== */
 .pa-file-input {
   display: flex;
   align-items: center;
@@ -8986,7 +9372,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;
@@ -9030,7 +9416,7 @@ 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 {
@@ -9039,7 +9425,7 @@ web-daterangepicker {
 }
 .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;
@@ -9047,7 +9433,7 @@ web-daterangepicker {
   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 {
   display: inline-block;
@@ -9082,7 +9468,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;
@@ -9091,7 +9477,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;
 }
 .pa-file-dropzone__file-card-remove {
@@ -9170,7 +9556,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 {
   display: inline-block;
@@ -9194,14 +9580,14 @@ web-daterangepicker {
   color: #007bff;
 }
 .pa-file-dropzone__summary-size {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-weight: normal;
 }
 .pa-file-dropzone__summary-current {
   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;
@@ -9247,14 +9633,14 @@ 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 {
   width: 2.4rem;
   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;
@@ -9265,8 +9651,8 @@ web-daterangepicker {
   justify-content: center;
 }
 .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 {
   padding: 1.2rem;
@@ -9288,7 +9674,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;
@@ -9296,7 +9682,7 @@ 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(0, 123, 255, 0.05);
@@ -9311,7 +9697,7 @@ web-daterangepicker {
   max-width: 32rem;
 }
 .pa-file-popover__file-size {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   white-space: nowrap;
 }
 .pa-file-popover__progress-cell {
@@ -9332,7 +9718,7 @@ web-daterangepicker {
 }
 .pa-file-popover__progress-text {
   font-size: 1rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
 }
 .pa-file-popover__status {
   font-size: 1rem;
@@ -9340,7 +9726,7 @@ web-daterangepicker {
   text-transform: uppercase;
 }
 .pa-file-popover__status--pending {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
 }
 .pa-file-popover__status--uploading {
   color: #007bff;
@@ -9423,14 +9809,14 @@ 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;
 }
 .pa-file-item__meta {
   font-size: 1.2rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   margin-top: 0.4rem;
 }
 .pa-file-item__remove {
@@ -9439,7 +9825,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;
@@ -9535,7 +9921,7 @@ web-daterangepicker {
 }
 .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;
@@ -9604,9 +9990,6 @@ web-daterangepicker {
   color: #007bff;
 }
 
-/* ========================================
-   Reset and Base Styles
-   ======================================== */
 /* ========================================
    Checkbox Lists
    Styled checkbox lists with various layouts and features
@@ -9637,7 +10020,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%;
 }
@@ -9660,7 +10043,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 {
   position: absolute;
@@ -9818,9 +10201,6 @@ web-daterangepicker {
   background-color: var(--pa-accent-light);
 }
 
-/* ========================================
-   Reset and Base Styles
-   ======================================== */
 /* ========================================
    Table Components
    Tables, virtual tables, with striped, hover, and spacing variants
@@ -9849,11 +10229,11 @@ 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;
 }
@@ -9948,7 +10328,7 @@ web-daterangepicker {
   text-align: center;
 }
 .pa-pager__text {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-size: 1.4rem;
 }
 
@@ -9982,7 +10362,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;
@@ -10010,7 +10390,7 @@ web-daterangepicker {
   color: inherit;
 }
 .pa-load-more__count {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-size: 1.2rem;
   margin-left: 0.4rem;
 }
@@ -10040,7 +10420,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 {
@@ -10072,7 +10452,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;
 }
 
@@ -10178,7 +10558,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;
@@ -10227,9 +10607,6 @@ web-daterangepicker {
   }
 }
 
-/* ========================================
-   Reset and Base Styles
-   ======================================== */
 /* ========================================
    Comparison Table Component
    Two-column and three-column comparison tables for version control, data changes, and merge operations
@@ -10256,8 +10633,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 {
   display: flex;
@@ -10313,7 +10690,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);
@@ -10358,9 +10735,6 @@ tbody tr:hover .pa-comparison-table__copy {
   }
 }
 
-/* ========================================
-   Reset and Base Styles
-   ======================================== */
 /* Code Component */
 code {
   padding: 0.2rem 0.6rem;
@@ -10377,8 +10751,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;
@@ -10442,7 +10816,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;
 }
 .pa-code-block__body {
@@ -10468,7 +10842,7 @@ code {
 }
 
 .pa-code-comment {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-style: italic;
 }
 
@@ -10480,9 +10854,6 @@ code {
   color: #dd4a68;
 }
 
-/* ========================================
-   Reset and Base Styles
-   ======================================== */
 /* ========================================
    Pager and Load More Components
    Pagination controls and load more buttons
@@ -10529,7 +10900,7 @@ code {
   text-align: center;
 }
 .pa-pager__text {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-size: 1.4rem;
 }
 
@@ -10563,7 +10934,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;
@@ -10591,36 +10962,34 @@ code {
   color: inherit;
 }
 .pa-load-more__count {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-size: 1.2rem;
   margin-left: 0.4rem;
 }
 
-/* ========================================
-   Reset and Base Styles
-   ======================================== */
 /* ========================================
    Profile Panel Components
    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;
@@ -10635,7 +11004,7 @@ code {
 
 .pa-header__profile-name {
   font-weight: 500;
-  color: #2c3e50;
+  color: var(--pa-header-profile-name-color);
 }
 
 .pa-profile-panel {
@@ -10714,7 +11083,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;
@@ -10722,7 +11091,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;
@@ -10750,7 +11119,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;
 }
@@ -10783,7 +11152,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;
@@ -10842,6 +11211,9 @@ code {
   color: var(--pa-header-text);
   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;
@@ -10855,7 +11227,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;
@@ -10887,7 +11259,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;
@@ -10895,7 +11267,7 @@ code {
   transition: opacity 0.1s ease-out, color 0.1s ease-out, background-color 0.1s ease-out;
 }
 .pa-profile-panel__favorite-remove:hover {
-  color: var(--pa-danger);
+  color: var(--pa-danger-bg);
   background-color: var(--pa-danger-bg-light);
 }
 .pa-profile-panel__favorite-item:hover .pa-profile-panel__favorite-remove {
@@ -10915,9 +11287,6 @@ code {
     display: none;
   }
 }
-/* ========================================
-   Reset and Base Styles
-   ======================================== */
 /* ========================================
    Modal Components
    Modal windows with overlay, sizes, and themed headers
@@ -10997,14 +11366,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 {
@@ -11082,9 +11451,6 @@ code {
     padding: 1.2rem 1.6rem;
   }
 }
-/* ========================================
-   Reset and Base Styles
-   ======================================== */
 /* ========================================
    Toast Notifications
    Temporary notification messages that auto-dismiss
@@ -11188,13 +11554,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;
 }
@@ -11203,7 +11569,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;
@@ -11218,7 +11584,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 {
   outline: 2px solid var(--pa-accent);
@@ -11306,9 +11672,6 @@ code {
     max-width: 100%;
   }
 }
-/* ========================================
-   Reset and Base Styles
-   ======================================== */
 /* ========================================
    Timeline Component
    ======================================== */
@@ -11341,7 +11704,7 @@ code {
   top: 0;
   width: 15px;
   height: 15px;
-  background: var(--pa-primary-bg);
+  background: var(--pa-main-bg);
   border: 1px solid #007bff;
   border-radius: 50%;
   box-shadow: 3px 3px 0 rgba(0, 123, 255, 0.3);
@@ -11367,8 +11730,8 @@ code {
   box-shadow: 3px 3px 0 rgba(23, 162, 184, 0.3);
 }
 .pa-timeline--simple .pa-timeline__item--secondary::before {
-  border-color: var(--pa-text-secondary);
-  box-shadow: 3px 3px 0 rgba(var(--pa-text-secondary), 0.3);
+  border-color: var(--pa-text-color-2);
+  box-shadow: 3px 3px 0 rgba(var(--pa-text-color-2), 0.3);
 }
 .pa-timeline--simple .pa-timeline__item--filled::before {
   background: #007bff;
@@ -11389,18 +11752,18 @@ code {
   background: #17a2b8;
 }
 .pa-timeline--simple .pa-timeline__item--filled.pa-timeline__item--secondary::before {
-  background: var(--pa-text-secondary);
+  background: var(--pa-text-color-2);
 }
 .pa-timeline--simple .pa-timeline__time {
   display: block;
   font-size: 1.4rem;
   font-weight: 600;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   margin-bottom: 0.4rem;
 }
 .pa-timeline--simple .pa-timeline__content {
   font-size: 1.4rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   line-height: 1.8;
   margin-top: 0.6rem;
 }
@@ -11447,7 +11810,7 @@ code {
   height: 16px;
   top: calc(50% - 8px);
   right: -8px;
-  background: var(--pa-primary-bg);
+  background: var(--pa-main-bg);
   border: 2px solid #007bff;
   border-radius: 50%;
   z-index: 1;
@@ -11483,7 +11846,7 @@ code {
   height: 16px;
   top: calc(50% - 8px);
   left: -8px;
-  background: var(--pa-primary-bg);
+  background: var(--pa-main-bg);
   border: 2px solid #007bff;
   border-radius: 50%;
   z-index: 1;
@@ -11533,7 +11896,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 {
   margin: 0;
@@ -11673,7 +12036,7 @@ 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 {
@@ -11685,7 +12048,7 @@ code {
   text-decoration: underline;
 }
 .pa-timeline--feed .pa-timeline__content time {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-size: 1.2rem;
 }
 .pa-timeline--feed .pa-timeline__avatar {
@@ -11711,7 +12074,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;
 }
 .pa-timeline--feed .pa-timeline__comment p:last-child {
@@ -11734,7 +12097,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;
 }
@@ -11742,7 +12105,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;
@@ -11761,16 +12124,13 @@ 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 {
   text-align: center;
   margin-top: 2.4rem;
 }
 
-/* ========================================
-   Reset and Base Styles
-   ======================================== */
 /* ========================================
    Command Palette Component
    macOS Spotlight-style search with context switching
@@ -11849,7 +12209,7 @@ 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;
 }
@@ -11858,7 +12218,7 @@ code {
   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;
 }
 .pa-command-palette__context {
@@ -11898,7 +12258,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;
 }
 .pa-command-palette__loader {
@@ -11907,7 +12267,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;
 }
 .pa-command-palette__loader .pa-spinner {
@@ -11947,7 +12307,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;
@@ -11962,7 +12322,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;
@@ -11974,7 +12334,7 @@ code {
   font-size: 1.2rem;
   padding: 2px 0.4rem;
   background-color: #e9ecef;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   border-radius: 2px;
 }
 .pa-command-palette__footer {
@@ -11983,7 +12343,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 {
   display: flex;
@@ -11995,7 +12355,7 @@ code {
   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;
@@ -12004,7 +12364,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;
 }
@@ -12012,7 +12372,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);
 }
 
@@ -12094,7 +12454,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;
@@ -12112,10 +12472,10 @@ 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);
+  color: var(--pa-text-color-2);
   background-color: #e9ecef;
   border: 1px solid var(--pa-border-color);
   border-radius: 2px;
@@ -12151,7 +12511,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);
@@ -12185,10 +12545,10 @@ 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);
+  color: var(--pa-text-color-1);
   background-color: #e9ecef;
   border: 1px solid var(--pa-border-color);
   border-radius: 2px;
@@ -12196,24 +12556,21 @@ code {
 }
 
 .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;
 }
 
-/* ========================================
-   Reset and Base Styles
-   ======================================== */
 /**
  * Logic Tree Renderer - Scratch-style visual query representation
  * Renders nested blocks showing logical flow and precedence
@@ -12223,16 +12580,16 @@ 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;
@@ -12259,7 +12616,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;
 }
 .pa-logic-tree__block--logical {
@@ -12359,7 +12716,7 @@ 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 #e1e5e9;
@@ -12429,9 +12786,6 @@ code {
     opacity: 1;
   }
 }
-/* ========================================
-   Reset and Base Styles
-   ======================================== */
 /* ========================================
    Notification Bell Component
    Bell button with badge counter and dropdown panel
@@ -12451,7 +12805,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;
 }
@@ -12517,7 +12871,7 @@ 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 {
@@ -12592,8 +12946,8 @@ code {
   color: #dc3545;
 }
 .pa-notifications__icon-wrapper--secondary {
-  background-color: rgba(var(--pa-text-secondary), 0.1);
-  color: var(--pa-text-secondary);
+  background-color: rgba(var(--pa-text-color-2), 0.1);
+  color: var(--pa-text-color-2);
 }
 
 .pa-notifications__content {
@@ -12604,12 +12958,12 @@ 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;
@@ -12620,7 +12974,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;
 }
@@ -12697,9 +13051,6 @@ code {
     border-top: 1px solid var(--pa-border-color);
   }
 }
-/* ========================================
-   Reset and Base Styles
-   ======================================== */
 /* ========================================
    Popconfirm Component
    Small confirmation dialog anchored to trigger button
@@ -12741,7 +13092,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;
 }
 
@@ -12834,9 +13185,6 @@ code {
   padding: 0.4rem 0.8rem;
 }
 
-/* ========================================
-   Reset and Base Styles
-   ======================================== */
 /* ========================================
    Settings Panel Component
    Floating panel for global settings management
@@ -12873,7 +13221,7 @@ code {
   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;
@@ -12889,7 +13237,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;
 }
@@ -12902,7 +13250,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;
 }
@@ -12912,7 +13260,7 @@ 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;
 }
@@ -12930,7 +13278,7 @@ code {
   display: flex;
   align-items: center;
   cursor: pointer;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   font-size: 1.4rem;
 }
 .pa-settings-panel__checkbox input[type=checkbox] {
@@ -12948,9 +13296,6 @@ code {
   transform: rotate(180deg);
 }
 
-/* ========================================
-   Reset and Base Styles
-   ======================================== */
 /* ========================================
    Utility Components
    Font utilities, compact mode, component showcase
@@ -13226,7 +13571,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 {
   font-size: 1rem;
@@ -13241,10 +13586,10 @@ html.font-size-4xl {
   font-size: 1.8rem;
 }
 .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 {
   text-align: left;
@@ -13257,7 +13602,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;
 }
 .pa-text--lead {
@@ -13269,34 +13614,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;
 }
@@ -13341,54 +13750,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;
 }