:root {
    --firstColor: #8C2C85;
    /* Primary */
    --secondColor: #D1AACE;
    /* Secondary */
    --thirdColor: #AF6BAA;
    /* Mid-tone between first & second */

    --navBGColor: #D1AACE;
    --footerBG: #D1AACE;
    --textColor: #2d2d2d;
    --footertextColor: var(--textColor);
    --footertextHoverColor: var(--firstColor);
    --menuTextColor: var(--textColor);
    --menuTextHoverColor: var(--firstColor);
--menuBurgerColor: var(--firstColor);
    --inputBorderColor: #D1AACE;

    --svgIconColor: #AF6BAA;
    --svgIconSelectedColor: #8C2C85;

    --footerActiveBtnBg: #D1AACE;
    --buttonBg: #8C2C85;
    --fourTabsBg: #8C2C85;
    --myOrdersTabsBg: #8C2C85;

    --gradient: linear-gradient(135deg, #8C2C85 0%, #D1AACE 100%);
    --gradient2: linear-gradient(0deg, #8C2C85 0%, #D1AACE 100%);
    --gradient3: linear-gradient(0deg, #8C2C85 0%, #D1AACE 100%);

    --tabHoverColor: #F3E6F2;
    /* soft hover derived from palette */

    --gramOptionBgGradient: linear-gradient(0deg, #8C2C85 0%, #D1AACE 100%);
    --gramOptionSelectedBgGradient: linear-gradient(0deg, #8C2C85 0%, #8C2C85 100%);

    --topNavSvgColor: #000;
    --topNavSvgSelectedColor: #000;

    --heartColor: #8C2C85;
    --heartSelectedColor: #6F1F69;
    /* slightly darker for active state */

    --coinsBalanceBoxBG: #D1AACE;
    --imgBorder: #ccc;

    --white: #fff;
    --black: #000;

    --opt4-primary-color: #4A0F46;
    /* darker accessible tone */
}