refactor: перевёл цвета на CSS-переменные

frontend/src/components/layout/AppTopbar.vue

@@ -153,11 +153,11 @@ onBeforeUnmount(() => {
   left: 0;
   right: 0;
   height: var(--topbar-height);
-  background: rgba(255,255,255,0.8);
+  background: var(--color-white-a80);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   border-bottom: 1px solid var(--color-border-glass);
-  box-shadow: 0 2px 20px rgba(0,0,0,0.06);
+  box-shadow: 0 2px 20px var(--color-black-a06);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -198,13 +198,13 @@ onBeforeUnmount(() => {
   border-radius: 50%;
   transition: background 0.2s;
 }
-.notif-btn:hover { background: rgba(0,0,0,0.05); }
+.notif-btn:hover { background: var(--color-black-a05); }
 .notif-dot {
   position: absolute;
   top: -2px;
   right: -2px;
   background: var(--color-error);
-  color: #fff;
+  color: var(--color-white);
   font-size: 9px;
   font-weight: 700;
   width: 16px;
@@ -225,20 +225,20 @@ onBeforeUnmount(() => {
   padding: 5px 10px;
   border-radius: 20px;
   border: 1px solid var(--color-border-glass);
-  background: rgba(255,255,255,0.5);
+  background: var(--color-white-a50);
   color: var(--color-text);
   font: inherit;
   transition: all 0.2s;
 }
 .avatar:hover,
 .avatar[aria-expanded="true"] {
-  border-color: rgba(34,197,94,0.5);
-  background: rgba(255,255,255,0.8);
-  box-shadow: 0 0 0 3px rgba(34,197,94,0.12);
+  border-color: var(--color-primary-a50);
+  background: var(--color-white-a80);
+  box-shadow: 0 0 0 3px var(--color-primary-a12);
 }
 .avatar:focus-visible,
 .profile-menu-item:focus-visible {
-  outline: 2px solid rgba(34,197,94,0.45);
+  outline: 2px solid var(--color-primary-a45);
   outline-offset: 2px;
 }
 .avatar-icon { color: var(--color-text-secondary); }
@@ -251,8 +251,8 @@ onBeforeUnmount(() => {
   padding: 8px;
   border: 1px solid var(--color-border-glass);
   border-radius: var(--radius-sm);
-  background: rgba(255,255,255,0.96);
-  box-shadow: 0 18px 38px rgba(15,23,42,0.14);
+  background: var(--color-white-a96);
+  box-shadow: 0 18px 38px var(--color-slate-900-a14);
   backdrop-filter: blur(18px);
   -webkit-backdrop-filter: blur(18px);
   display: flex;
@@ -261,8 +261,8 @@ onBeforeUnmount(() => {
   z-index: 120;
 }
 .profile-menu-section {
-  border-top: 1px solid rgba(15,23,42,0.08);
-  border-bottom: 1px solid rgba(15,23,42,0.08);
+  border-top: 1px solid var(--color-slate-900-a08);
+  border-bottom: 1px solid var(--color-slate-900-a08);
   margin: 4px 0;
   padding: 6px 0;
 }
@@ -292,15 +292,15 @@ onBeforeUnmount(() => {
   transition: background 0.2s, color 0.2s;
 }
 .profile-menu-item:hover {
-  background: rgba(34,197,94,0.1);
+  background: var(--color-primary-a10);
   color: var(--color-primary-dark);
 }
 .profile-menu-item.danger {
-  color: #991B1B;
+  color: var(--color-danger-text);
 }
 .profile-menu-item.danger:hover {
-  background: rgba(239,68,68,0.1);
-  color: #991B1B;
+  background: var(--color-error-a10);
+  color: var(--color-danger-text);
 }
 
 @media (max-width: 640px) {