:root {
    --firstColor: #0f2e2a;
    /* Primary */
    --secondColor: #b7c0bf;
    /* Secondary */
    --thirdColor: #2f4f4b;
    /* Balanced mid-tone */

    --navBGColor: #b7c0bf;
    --footerBG: #b7c0bf;
    --textColor: #0a1f1c;
    /* darker tone for readability */

    --inputBorderColor: #b7c0bf;
    --svgIconColor: #2f4f4b;
    --svgIconSelectedColor: #0f2e2a;

    --footerActiveBtnBg: #b7c0bf;
    --buttonBg: #0f2e2a;
    --fourTabsBg: #0f2e2a;
    --myOrdersTabsBg: #0f2e2a;

    --gradient: linear-gradient(135deg, #0f2e2a 0%, #b7c0bf 100%);
    --gradient2: linear-gradient(0deg, #0f2e2a 0%, #b7c0bf 100%);
    --gradient3: linear-gradient(0deg, #b7c0bf 0%, #0f2e2a 100%);

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

    --gramOptionBgGradient: linear-gradient(0deg, #0f2e2a 0%, #b7c0bf 100%);
    --gramOptionSelectedBgGradient: linear-gradient(0deg, #0f2e2a 0%, #0f2e2a 100%);

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

    --heartColor: #0f2e2a;
    --heartSelectedColor: #2f4f4b;

    --coinsBalanceBoxBG: #b7c0bf;
    --imgBorder: #cfd6d5;

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

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