:root {
    --firstColor: #022e71;        /* Primary */
    --secondColor: #99abc6;       /* Secondary */
    --thirdColor: #4a6fa3;        /* Mid-tone */

    --navBGColor: #99abc6;
    --footerBG: #99abc6;

    --textColor: #0d1b3d;
    --footertextColor: #fff;
    --footertextHoverColor: var(--secondColor);         /* dark navy for readability */

    --menuTextColor: var(--textColor);
    --menuTextHoverColor: var(--firstColor);
    --menuBurgerColor: var(--firstColor);
    
    --inputBorderColor: #99abc6;

    --svgIconColor: #4a6fa3;
    --svgIconSelectedColor: #022e71;

    --footerActiveBtnBg: #99abc6;
    --buttonBg: #022e71;
    --fourTabsBg: #022e71;
    --myOrdersTabsBg: #022e71;

    --gradient: linear-gradient(135deg, #022e71 0%, #99abc6 100%);
    --gradient2: linear-gradient(0deg, #022e71 0%, #99abc6 100%);
    --gradient3: linear-gradient(0deg, #022e71 0%, #99abc6 100%);

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

    --gramOptionBgGradient: linear-gradient(0deg, #022e71 0%, #99abc6 100%);
    --gramOptionSelectedBgGradient: linear-gradient(0deg, #022e71 0%, #022e71 100%);

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

    --heartColor: #022e71;
    --heartSelectedColor: #1f4f8f; /* darker active */

    --coinsBalanceBoxBG: #99abc6;
    --imgBorder: #c2ccdd;

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

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