:root {
    --montserrat: "Montserrat", "Arial", "sans-serif";
    --helvetica: "Helvetica", "Arial", "sans-serif";
    --plusjakarta: "Plus Jakarta Sans", "PlusJakarta-fallback", "sans-serif";

    /* TM26 */
    --mudik-green: #1E9D6F;
    --mudik-green-dark: #2E7259;
    --mudik-green-dark2: #295243;
    --mudik-green-light: #E0EAE6;
    --mudik-green-light2: #F2F7F5;
    --mudik-yellow: #F2B705;
    --mudik-yellow-light: #FFDD00;
    --mudik-blue: #0564A8;
    --mudik-livechat: #057CD1;
    --mudik-spklu: #F7931D;
    --mudik-darurat: #ED131B;
    --mudik-kiblat: #2F7D5C;
    --mudik-sholat: #00988F;

     /* gradient */
     --mudikgradient: linear-gradient(127deg, #295243 3.89%, #295243 52.48%, #1E9D6F 90.47%);
     --instagramgradient: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);

     /* social */
    --facebook: #3d5a99;
    --twitter: #00aced;
    --linkedin: #007bb6;
    --pinterest: #cb2027;
    --whatsapp: #25d366;
    --telegram: #0088cc;
    --youtube: #bb0000;
    --instagram: #e1306c;

    --placeholder: #E3E8EB;

    /* black */
    --black: #000000;
    --black-night: #232323;
    --black-light1: #333333;
    --black-light2: #666666;
    --black-light3: #999999;
    --black-light4: #CCCCCC;
    --black-light5: #E6E6E6;

    /* gray */
    --gray: #6D8591;
    --gray-light1: #879BA5;
    --gray-light2: #A7B6BD;
    --gray-light3: #C7D0D5;
    --gray-light4: #E0E5E8;
    --gray-light5: #F0F3F4;

    /* white */
    --white: #FFFFFF;
    --white-light1: #F7F7F7;
    --white-light2: #F0F0F0;

    /* blue */
    --blue: #21409A;
    --blue-light1: #2C5498;
    --blue-light2: #007CBD;
    --blue-light3: #3EA6DD;
    --blue-light4: #84C6E9;
    --blue-light5: #E3F5FE;

    /* bondiblue */
    --bondiblue: #00A6BA;
    --bondiblue-light1: #2EB6C6;
    --bondiblue-light2: #57BECF;
    --bondiblue-light3: #9EDCE4;
    --bondiblue-light4: #CAEBF0;
    --bondiblue-light5: #E6F5F8;

    /* bluelagoon */
    --bluelagoon: #007D8E;
    --bluelagoon-light1: #2E94A2;
    --bluelagoon-light2: #5CACB7;
    --bluelagoon-light3: #97CAD1;
    --bluelagoon-light4: #C6E2E5;
    --bluelagoon-light5: #E2F0F2;

    /* orange */
    --orange: #EE4023;
    --orange-light1: #EF672F;
    --orange-light2: #F7931D;
    --orange-light3: #F9BA6F;
    --orange-light4: #FBD3A3;
    --orange-light5: #FCE7CC;

    /* red */
    --red: #C72026;
    --red-light1: #ED131B;
    --red-light2: #FF0000;
    --red-light3: #FF5C5C;
    --red-light4: #FFA6A6;
    --red-light5: #FFD6D6;

    /* cerisered */
    --cerisered: #C31F47;
    --cerisered-light1: #DB284E;
    --cerisered-light2: #E8768E;
    --cerisered-light3: #F0A7B8;
    --cerisered-light4: #F6CFD7;
    --cerisered-light5: #FAE9EC;

    /* maroon */
    --maroon: #8B0304;
    --maroon-light1: #A03031;
    --maroon-light2: #BF595B;
    --maroon-light3: #D69597;
    --maroon-light4: #E8C5C6;
    --maroon-light5: #F4E4E5;

    /* yellow */
    --yellow: #FCB715;
    --yellow-light1: #FCC43F;
    --yellow-light2: #FCD373;
    --yellow-light3: #FDE3A5;
    --yellow-light4: #FDEFCD;
    --yellow-light5: #FEF7E8;

    /* purple */
    --purple: #332070;
    --purple-light1: #562B77;
    --purple-light2: #812E88;
    --purple-light3: #AA248C;
    --purple-light4: #D087C0;
    --purple-light5: #E5BDDC;

    /* green */
    --green: #006536;
    --green-light1: #068C45;
    --green-light2: #11AA3D;
    --green-light3: #75B72E;
    --green-light4: #BED82E;
    --green-light5: #E1EDA0;

    /* forestgreen */
    --forestgreen: #295243;
    --forestgreen-light1: #2E7259;
    --forestgreen-light2: #1E9D6F;
    --forestgreen-light3: #7EBFA7;
    --forestgreen-light4: #A9D4C4;
    --forestgreen-light5: #D4EAE2;
}

@layer components {
    h1 {
        font-size: var(--text-4xl);
        font-weight: var(--font-weight-semibold);
    }

    h2 {
        font-size: var(--text-3xl);
        font-weight: var(--font-weight-semibold);
    }

    h3 {
        font-size: var(--text-2xl);
        font-weight: var(--font-weight-semibold);
    }

    h4 {
        font-size: var(--text-xl);
        font-weight: var(--font-weight-semibold);
    }

    h5 {
        font-size: var(--text-lg);
        font-weight: var(--font-weight-semibold);
    }

    h6 {
        font-size: var(--text-base);
        font-weight: var(--font-weight-semibold);
    }
}