:root {
    --firstColor: #122a44;        /* Primary */
    --secondColor: #d6dee8;       /* Secondary */
    --thirdColor: #5a7289;        /* Mid-tone */

    --navBGColor: #d6dee8;
    --footerBG: #d6dee8;
    --textColor: #0c1a2b;         /* dark navy for readability */

    --inputBorderColor: #d6dee8;
    --svgIconColor: #5a7289;
    --svgIconSelectedColor: #122a44;

    --footerActiveBtnBg: #d6dee8;
    --buttonBg: #122a44;
    --fourTabsBg: #122a44;
    --myOrdersTabsBg: #122a44;

    --gradient: linear-gradient(135deg, #122a44 0%, #d6dee8 100%);
    --gradient2: linear-gradient(0deg, #122a44 0%, #d6dee8 100%);
    --gradient3: linear-gradient(0deg, #122a44 0%, #d6dee8 100%);

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

    --gramOptionBgGradient: linear-gradient(0deg, #122a44 0%, #d6dee8 100%);
    --gramOptionSelectedBgGradient: linear-gradient(0deg, #122a44 0%, #122a44 100%);

    --topNavSvgColor: #ffffff;
    --topNavSvgSelectedColor: #ffffff;

    --heartColor: #122a44;
    --heartSelectedColor: #5a7289;

    --coinsBalanceBoxBG: #d6dee8;
    --imgBorder: #b8c5d3;

    --white: #ffffff;
    --black: #000000;

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