:root {
    --firstColor: #351651;  
    --secondColor: #F2E5FF;  
    --thirdColor: #6B4A9B;  /* medium purple for contrast */
    
    --navBGColor: #351651;  
    --footerBG: #351651;  
    --textColor: #2a1b4a;
    --footertextColor: var(--textColor);
    --footertextHoverColor: var(--firstColor);   /* darker purple for readability */

    --menuTextColor: var(--textColor);
    --menuTextHoverColor: var(--firstColor);
--menuBurgerColor: var(--firstColor);
    
    --inputBorderColor: #F2E5FF;  
    --svgIconColor: #F2E5FF;  
    --svgIconSelectedColor: #351651;  
    
    --footerActiveBtnBg: #6B4A9B;  
    --buttonBg: #351651;  
    --fourTabsBg: #351651;  
    --myOrdersTabsBg: #351651;  
    
    --gradient: linear-gradient(135deg, #351651 0%, #F2E5FF 100%);  
    --gradient2: linear-gradient(0deg, #351651 0%, #F2E5FF 100%);  
    --gradient3: linear-gradient(0deg, #351651 0%, #F2E5FF 100%);  
    
    --tabHoverColor: #fbf7ff;  
    --gramOptionBgGradient: linear-gradient(0deg, #351651 0%, #F2E5FF 100%);  
    --gramOptionSelectedBgGradient: linear-gradient(0deg, #351651 0%, #351651 100%);  
    
    --topNavSvgColor: #F2E5FF;  
    --topNavSvgSelectedColor: #ffffff;  
    
    --heartColor: #F2E5FF;  
    --heartSelectedColor: #e63946;  /* keeps red heart accent */
    
    --coinsBalanceBoxBG: #6B4A9B;  
    --imgBorder: #F2E5FF;       
    --white: #ffffff;     
    --black: #000000;   
    
    --opt4-primary-color: #4A2C78; /* lighter accent tone */
}