:root {
    --firstColor: #1c362d;        /* Primary */
    --secondColor: #bac2c0;       /* Secondary */
    --thirdColor: #4f6f66;        /* Mid-tone */

    --navBGColor: #bac2c0;
    --footerBG: #bac2c0;

    --textColor: #0f1f1a;         /* dark green for readability */
    --inputBorderColor: #bac2c0;

    --svgIconColor: #4f6f66;
    --svgIconSelectedColor: #1c362d;

    --footerActiveBtnBg: #bac2c0;
    --buttonBg: #1c362d;
    --fourTabsBg: #1c362d;
    --myOrdersTabsBg: #1c362d;

    --gradient: linear-gradient(135deg, #1c362d 0%, #bac2c0 100%);
    --gradient2: linear-gradient(0deg, #1c362d 0%, #bac2c0 100%);
    --gradient3: linear-gradient(0deg, #1c362d 0%, #bac2c0 100%);

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

    --gramOptionBgGradient: linear-gradient(0deg, #1c362d 0%, #bac2c0 100%);
    --gramOptionSelectedBgGradient: linear-gradient(0deg, #1c362d 0%, #1c362d 100%);

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

    --heartColor: #1c362d;
    --heartSelectedColor: #2e554a; /* slightly lighter active */

    --coinsBalanceBoxBG: #bac2c0;
    --imgBorder: #cfd6d4;

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

    --opt4-primary-color: #12241e; /* darker accessible tone */
}