:root {
    --primary-color: #fff;
    --highlight-color: #FBDC95;
    --background-color: #555555;
    --background-color-1:#f7e9c7;
    --background-color-2:#000000;
    --background-color-3:#ffffff;
    --background-color-4: #FBDC95;
    --background-color-5: #6c2625;
    --background-color-6:#1a1919;
    --background-color-7:#611818;
    --background-color-8:#e0dfdf;
    --background-color-9:#f2f2f2;
    --background-color-10:#403e3e;
    --modal-background-1: #2d2c2c;
    --modal-background-2: #f3e1b6;

    --hover-bg-1: #d8d5d5;
    --hover-bg-2: #191919;


    /* Font-color */
    --text-color-1: #fad37c;
    --text-color-2: #000000;
    --text-color-3: #ffffff;
    --text-color-4: #459FFF;
    --text-color-5: rgb(95, 95, 95);
    --text-color-6: #67d275;
    --text-color-7: #fff3d8;
    --text-color-9: #d4cece;
    --text-color-error: #fa263f;



    --border-color-1: #ffffff;
    --button-color-3: #DBB741;
    --button-color-hover: #e9d8af;

    --font-heading: 'Playfair Display', serif;
    --font-subtitle: 'Libre Baskerville', serif;
    --font-body: 'Inter', sans-serif; /* or any clean default */

    /* background*/
    --error-bg:#ffe6e6;
    --stale-bg: #E0E0E0;

    /* border */
    --border-1:rgb(186, 186, 186);
    --border-2: white ;
    --border-3: rgb(250, 0, 0) ;


    /* font sizes */
    --font-base: 1rem;
    --font-loading-ui: 0.8rem;
    --font-nav: 0.8rem;

    --font-cn: 0.8rem;
    --font-en: 0.7rem;

    --font-xxsm: 0.8rem;
    --font-xsm: 0.9rem; /* mostly used for buttons*/
    --font-sm: 0.9rem;    /* mostly used for p tags*/
    --font-lg: 2rem;
    --font-xl: 3rem;
    --font-xll: 6rem;
    --font-xxl: 10rem;

    --font-xsm-mobile: 13.5px;
    --font-sm-mobile: 14px;
    --font-lg-mobile: 18px;
    --font-xl-mobile: 20px;
    --font-xll-mobile: 30px;
    --font-xxl-mobile: 60px

}