fix: replace hardcoded green with theme-aware accent color

Normal traffic zone now uses configurable accent palette instead of
hardcoded success/green. Added useTrafficZone hook that resolves
mainHex dynamically from theme colors. Replaced emerald/teal classes
with success palette in SuccessNotificationModal. Fixed hardcoded
green hex values in Subscription and SubscriptionPurchase pages.

src/components/SuccessNotificationModal.tsx

@@ -159,13 +159,13 @@ export default function SuccessNotificationModal() {
   let title = data.title;
   const message = data.message;
   let icon = <CheckCircleIcon />;
-  let gradientClass = 'from-success-500 to-emerald-600';
+  let gradientClass = 'from-success-500 to-success-600';
 
   if (!title) {
     if (isBalanceTopup) {
       title = t('successNotification.balanceTopup.title', 'Balance topped up!');
       icon = <WalletIcon />;
-      gradientClass = 'from-success-500 to-emerald-600';
+      gradientClass = 'from-success-500 to-success-600';
     } else if (data.type === 'subscription_activated') {
       title = t('successNotification.subscriptionActivated.title', 'Subscription activated!');
       icon = <RocketIcon />;
@@ -185,7 +185,7 @@ export default function SuccessNotificationModal() {
     } else if (data.type === 'traffic_purchased') {
       title = t('successNotification.trafficPurchased.title', 'Traffic added!');
       icon = <TrafficIcon />;
-      gradientClass = 'from-emerald-500 to-teal-600';
+      gradientClass = 'from-success-500 to-success-600';
     }
   }
 
@@ -273,7 +273,7 @@ export default function SuccessNotificationModal() {
               <span className="text-dark-400">
                 {t('successNotification.trafficAdded', 'Traffic added')}
               </span>
-              <span className="text-lg font-bold text-emerald-400">+{data.trafficGbAdded} GB</span>
+              <span className="text-lg font-bold text-success-400">+{data.trafficGbAdded} GB</span>
             </div>
           )}
 
@@ -329,7 +329,7 @@ export default function SuccessNotificationModal() {
             {isBalanceTopup && (
               <button
                 onClick={handleGoToBalance}
-                className="flex w-full items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-success-500 to-emerald-600 py-3.5 font-bold text-white shadow-lg shadow-success-500/25 transition-all hover:from-success-400 hover:to-emerald-500 active:from-success-600 active:to-emerald-700"
+                className="flex w-full items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-success-500 to-success-600 py-3.5 font-bold text-white shadow-lg shadow-success-500/25 transition-all hover:from-success-400 hover:to-success-500 active:from-success-600 active:to-success-700"
               >
                 <WalletIcon />
                 <span>{t('successNotification.goToBalance', 'Go to Balance')}</span>
@@ -349,7 +349,7 @@ export default function SuccessNotificationModal() {
             {isTrafficPurchased && (
               <button
                 onClick={handleGoToSubscription}
-                className="flex w-full items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-emerald-500 to-teal-600 py-3.5 font-bold text-white shadow-lg shadow-emerald-500/25 transition-all hover:from-emerald-400 hover:to-teal-500 active:from-emerald-600 active:to-teal-700"
+                className="flex w-full items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-success-500 to-success-600 py-3.5 font-bold text-white shadow-lg shadow-success-500/25 transition-all hover:from-success-400 hover:to-success-500 active:from-success-600 active:to-success-700"
               >
                 <TrafficIcon />
                 <span>{t('successNotification.goToSubscription', 'Go to Subscription')}</span>

src/components/dashboard/StatsGrid.tsx

@@ -1,10 +1,9 @@
-import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router';
 import type { Subscription } from '../../types';
 import { useCurrency } from '../../hooks/useCurrency';
 import { useTheme } from '../../hooks/useTheme';
-import { getTrafficZone } from '../../utils/trafficZone';
+import { useTrafficZone } from '../../hooks/useTrafficZone';
 import { getGlassColors } from '../../utils/glassTheme';
 
 interface StatsGridProps {
@@ -46,10 +45,7 @@ export default function StatsGrid({
   const { isDark } = useTheme();
   const g = getGlassColors(isDark);
 
-  const zone = useMemo(
+  const zone = useTrafficZone(subscription?.traffic_used_percent ?? 0);
-    () => getTrafficZone(subscription?.traffic_used_percent ?? 0),
-    [subscription?.traffic_used_percent],
-  );
 
   const cards = [
     {

src/components/dashboard/SubscriptionCardActive.tsx

@@ -1,4 +1,3 @@
-import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router';
 import { Link } from 'react-router';
@@ -7,7 +6,7 @@ import TrafficProgressBar from './TrafficProgressBar';
 import Sparkline from './Sparkline';
 import { useAnimatedNumber } from '../../hooks/useAnimatedNumber';
 import { useTheme } from '../../hooks/useTheme';
-import { getTrafficZone } from '../../utils/trafficZone';
+import { useTrafficZone } from '../../hooks/useTrafficZone';
 import { formatTraffic } from '../../utils/formatTraffic';
 import { getGlassColors } from '../../utils/glassTheme';
 import { HoverBorderGradient } from '../ui/hover-border-gradient';
@@ -57,7 +56,7 @@ export default function SubscriptionCardActive({
   const usedPercent = trafficData?.traffic_used_percent ?? subscription.traffic_used_percent;
   const usedGb = trafficData?.traffic_used_gb ?? subscription.traffic_used_gb;
   const isUnlimited = trafficData?.is_unlimited ?? subscription.traffic_limit_gb === 0;
-  const zone = useMemo(() => getTrafficZone(usedPercent), [usedPercent]);
+  const zone = useTrafficZone(usedPercent);
   const animatedPercent = useAnimatedNumber(usedPercent);
 
   const formattedDate = new Date(subscription.end_date).toLocaleDateString();

src/components/dashboard/TrafficProgressBar.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { getTrafficZone } from '../../utils/trafficZone';
+import { useTrafficZone } from '../../hooks/useTrafficZone';
 import { formatTraffic } from '../../utils/formatTraffic';
 import { useTheme } from '../../hooks/useTheme';
 import { getGlassColors } from '../../utils/glassTheme';
@@ -25,17 +25,20 @@ export default function TrafficProgressBar({
   const { t } = useTranslation();
   const { isDark } = useTheme();
   const g = getGlassColors(isDark);
-  const zone = useMemo(() => getTrafficZone(percent), [percent]);
+  const zone = useTrafficZone(percent);
+  // Gradient always starts from the accent color (normal zone)
+  const startHex = zone.colors.accent || '#3b82f6';
   const clampedPercent = Math.min(percent, 100);
   const barHeight = compact ? 8 : 14;
 
   // Multi-segment gradient matching prototype
   const fillGradient = useMemo(() => {
-    if (percent < 50) return `linear-gradient(90deg, #00C987, ${zone.mainHex})`;
+    if (percent < 50) return `linear-gradient(90deg, ${startHex}, ${zone.mainHex})`;
-    if (percent < 75) return `linear-gradient(90deg, #00C987, #FFB800, ${zone.mainHex})`;
+    if (percent < 75) return `linear-gradient(90deg, ${startHex}, #FFB800, ${zone.mainHex})`;
-    if (percent < 90) return `linear-gradient(90deg, #00C987, #FFB800, #FF6B35, ${zone.mainHex})`;
+    if (percent < 90)
-    return 'linear-gradient(90deg, #00C987, #FFB800, #FF6B35, #FF3B5C)';
+      return `linear-gradient(90deg, ${startHex}, #FFB800, #FF6B35, ${zone.mainHex})`;
-  }, [percent, zone.mainHex]);
+    return `linear-gradient(90deg, ${startHex}, #FFB800, #FF6B35, #FF3B5C)`;
+  }, [percent, zone.mainHex, startHex]);
 
   if (isUnlimited) {
     return (

src/hooks/useTrafficZone.ts

@@ -0,0 +1,27 @@
+import { useMemo } from 'react';
+import { getTrafficZone, TrafficColorKey } from '../utils/trafficZone';
+import { useThemeColors } from './useThemeColors';
+import type { ThemeColors } from '../types/theme';
+
+const FALLBACKS: Record<TrafficColorKey, string> = {
+  accent: '#3b82f6',
+  warning: '#FFB800',
+  error: '#FF3B5C',
+};
+
+const COLOR_MAP: Record<TrafficColorKey, keyof ThemeColors> = {
+  accent: 'accent',
+  warning: 'warning',
+  error: 'error',
+};
+
+export function useTrafficZone(percent: number) {
+  const { colors } = useThemeColors();
+  const zone = useMemo(() => getTrafficZone(percent), [percent]);
+  const mainHex = useMemo(() => {
+    const key = zone.colorKey;
+    return colors[COLOR_MAP[key]] || FALLBACKS[key];
+  }, [zone.colorKey, colors]);
+
+  return { ...zone, mainHex, colors };
+}

src/pages/Subscription.tsx

@@ -5,7 +5,7 @@ import { useNavigate } from 'react-router';
 import { subscriptionApi } from '../api/subscription';
 import TrafficProgressBar from '../components/dashboard/TrafficProgressBar';
 import { HoverBorderGradient } from '../components/ui/hover-border-gradient';
-import { getTrafficZone } from '../utils/trafficZone';
+import { useTrafficZone } from '../hooks/useTrafficZone';
 import { formatTraffic } from '../utils/formatTraffic';
 import { getGlassColors } from '../utils/glassTheme';
 import { useTheme } from '../hooks/useTheme';
@@ -203,6 +203,10 @@ export default function Subscription() {
   // Extract subscription from response (null if no subscription)
   const subscription = subscriptionResponse?.subscription ?? null;
 
+  // Traffic zone (theme-aware) — called unconditionally at top level
+  const usedPercent = trafficData?.traffic_used_percent ?? subscription?.traffic_used_percent ?? 0;
+  const zone = useTrafficZone(usedPercent);
+
   // Purchase options (needed for balance_kopeks in device/traffic/server management)
   const { data: purchaseOptions } = useQuery({
     queryKey: ['purchase-options'],
@@ -432,12 +436,9 @@ export default function Subscription() {
       {/* Current Subscription */}
       {subscription ? (
         (() => {
-          const usedPercent =
-            trafficData?.traffic_used_percent ?? subscription.traffic_used_percent;
           const usedGb = trafficData?.traffic_used_gb ?? subscription.traffic_used_gb;
           const isUnlimited =
             (trafficData?.is_unlimited ?? false) || subscription.traffic_limit_gb === 0;
-          const zone = getTrafficZone(usedPercent);
           const connectedDevices = devicesData?.total ?? 0;
 
           return (
@@ -1089,7 +1090,8 @@ export default function Subscription() {
                       className="absolute inset-0 rounded-full transition-[width] duration-500"
                       style={{
                         width: `${progress}%`,
-                        background: 'linear-gradient(90deg, #00E5A0, #00C987)',
+                        background:
+                          'linear-gradient(90deg, rgb(var(--color-accent-500)), rgb(var(--color-accent-400)))',
                       }}
                     />
                   </div>
@@ -1244,14 +1246,14 @@ export default function Subscription() {
                       {/* Discount badge */}
                       {devicePriceData.discount_percent && devicePriceData.discount_percent > 0 && (
                         <div className="mb-2">
-                          <span className="inline-block rounded-full bg-green-500/20 px-2.5 py-0.5 text-sm font-medium text-green-400">
+                          <span className="inline-block rounded-full bg-success-500/20 px-2.5 py-0.5 text-sm font-medium text-success-400">
                             -{devicePriceData.discount_percent}%
                           </span>
                         </div>
                       )}
                       {/* Total price - show as free if 100% discount or 0 */}
                       {devicePriceData.total_price_kopeks === 0 ? (
-                        <div className="text-2xl font-bold text-green-400">
+                        <div className="text-2xl font-bold text-success-400">
                           {t('subscription.switchTariff.free')}
                         </div>
                       ) : (
@@ -1570,7 +1572,7 @@ export default function Subscription() {
                             {/* Discount badge */}
                             {pkg.discount_percent && pkg.discount_percent > 0 && (
                               <div className="mb-1">
-                                <span className="inline-block rounded-full bg-green-500/20 px-2 py-0.5 text-xs font-medium text-green-400">
+                                <span className="inline-block rounded-full bg-success-500/20 px-2 py-0.5 text-xs font-medium text-success-400">
                                   -{pkg.discount_percent}%
                                 </span>
                               </div>
@@ -1971,7 +1973,10 @@ export default function Subscription() {
             <div className="flex items-center justify-center py-8">
               <div
                 className="h-8 w-8 animate-spin rounded-full border-2 border-t-transparent"
-                style={{ borderColor: '#00E5A0', borderTopColor: 'transparent' }}
+                style={{
+                  borderColor: 'rgb(var(--color-accent-500))',
+                  borderTopColor: 'transparent',
+                }}
               />
             </div>
           ) : devicesData && devicesData.devices.length > 0 ? (

src/pages/SubscriptionPurchase.tsx

@@ -577,7 +577,7 @@ export default function SubscriptionPurchase() {
                             {t('subscription.switchTariff.upgradeCost')}
                           </span>
                           {switchPreview.discount_percent && switchPreview.discount_percent > 0 && (
-                            <span className="ml-2 inline-block rounded-full bg-green-500/20 px-2 py-0.5 text-xs font-medium text-green-400">
+                            <span className="ml-2 inline-block rounded-full bg-success-500/20 px-2 py-0.5 text-xs font-medium text-success-400">
                               -{switchPreview.discount_percent}%
                             </span>
                           )}
@@ -592,7 +592,7 @@ export default function SubscriptionPurchase() {
                               </span>
                             )}
                           <span
-                            className={`text-lg font-bold ${switchPreview.upgrade_cost_kopeks === 0 ? 'text-green-400' : 'text-accent-400'}`}
+                            className={`text-lg font-bold ${switchPreview.upgrade_cost_kopeks === 0 ? 'text-success-400' : 'text-accent-400'}`}
                           >
                             {switchPreview.upgrade_cost_kopeks > 0
                               ? switchPreview.upgrade_cost_label

src/utils/trafficZone.ts

@@ -1,5 +1,7 @@
 export type TrafficZone = 'normal' | 'warning' | 'danger' | 'critical';
 
+export type TrafficColorKey = 'accent' | 'warning' | 'error';
+
 interface TrafficZoneResult {
   zone: TrafficZone;
   textClass: string;
@@ -8,19 +10,19 @@ interface TrafficZoneResult {
   labelKey: string;
   gradientFrom: string;
   gradientTo: string;
-  /** Hex color for inline styles */
+  /** Key into ThemeColors for resolving mainHex at runtime */
-  mainHex: string;
+  colorKey: TrafficColorKey;
 }
 
 const ZONES: Record<TrafficZone, Omit<TrafficZoneResult, 'zone'>> = {
   normal: {
-    textClass: 'text-success-400',
+    textClass: 'text-accent-400',
-    dotClass: 'bg-success-400',
+    dotClass: 'bg-accent-400',
-    glowColor: 'rgba(var(--color-success-500), 0.5)',
+    glowColor: 'rgba(var(--color-accent-500), 0.5)',
     labelKey: 'dashboard.zone.normal',
-    gradientFrom: 'rgb(var(--color-success-500))',
+    gradientFrom: 'rgb(var(--color-accent-500))',
-    gradientTo: 'rgb(var(--color-success-400))',
+    gradientTo: 'rgb(var(--color-accent-400))',
-    mainHex: '#00E5A0',
+    colorKey: 'accent',
   },
   warning: {
     textClass: 'text-warning-400',
@@ -29,7 +31,7 @@ const ZONES: Record<TrafficZone, Omit<TrafficZoneResult, 'zone'>> = {
     labelKey: 'dashboard.zone.warning',
     gradientFrom: 'rgb(var(--color-warning-500))',
     gradientTo: 'rgb(var(--color-warning-400))',
-    mainHex: '#FFB800',
+    colorKey: 'warning',
   },
   danger: {
     textClass: 'text-warning-300',
@@ -38,7 +40,7 @@ const ZONES: Record<TrafficZone, Omit<TrafficZoneResult, 'zone'>> = {
     labelKey: 'dashboard.zone.danger',
     gradientFrom: 'rgb(var(--color-warning-600))',
     gradientTo: 'rgb(var(--color-warning-400))',
-    mainHex: '#FF6B35',
+    colorKey: 'warning',
   },
   critical: {
     textClass: 'text-error-400',
@@ -47,7 +49,7 @@ const ZONES: Record<TrafficZone, Omit<TrafficZoneResult, 'zone'>> = {
     labelKey: 'dashboard.zone.critical',
     gradientFrom: 'rgb(var(--color-error-500))',
     gradientTo: 'rgb(var(--color-error-400))',
-    mainHex: '#FF3B5C',
+    colorKey: 'error',
   },
 };