:root {
    --firstColor: #4A102A;        /* Primary */
    --secondColor: #b69fa9;       /* Secondary */
    --thirdColor: #7a3a57;        /* Balanced mid-tone */

    --navBGColor: #b69fa9;
    --footerBG: #b69fa9;
    --textColor: #2a0f1c;         /* deep plum for readability */

    --inputBorderColor: #b69fa9;
    --svgIconColor: #7a3a57;
    --svgIconSelectedColor: #4A102A;

    --footerActiveBtnBg: #b69fa9;
    --buttonBg: #4A102A;
    --fourTabsBg: #4A102A;
    --myOrdersTabsBg: #4A102A;

    --gradient: linear-gradient(135deg, #4A102A 0%, #b69fa9 100%);
    --gradient2: linear-gradient(0deg, #4A102A 0%, #b69fa9 100%);
    --gradient3: linear-gradient(0deg, #b69fa9 0%, #4A102A 100%);

    --tabHoverColor: #d8c9cf;     /* soft hover */

    --gramOptionBgGradient: linear-gradient(0deg, #4A102A 0%, #b69fa9 100%);
    --gramOptionSelectedBgGradient: linear-gradient(0deg, #4A102A 0%, #4A102A 100%);

    --topNavSvgColor: #FFFFFF;
    --topNavSvgSelectedColor: #FFFFFF;

    --heartColor: #4A102A;
    --heartSelectedColor: #7a3a57;

    --coinsBalanceBoxBG: #b69fa9;
    --imgBorder: #d4c6cc;

    --white: #FFFFFF;
    --black: #000000;

    --opt4-primary-color: #2d0a19; /* darker accessible tone */
}