:root {
        /* MAIN */
        --body-color: #0b0d12ff;
        --default-color: #ffffff;
        --nav-bg-color: #333333;


        /* Colors */
        --primary-color: #d4a63aff;
        --primary-text-color: #000000;
        --primary-hover-color: #d4a63ad7; 
        /**/
        --secondary-color: #f1e7d2ff;
        --secondary-text-color: #000000;
        --secondary-hover-color: #f1e7d2ff;
        /**/
        --tertiary-color: #8b572aff;
        --tertiary-text-color: #000000;
        --tertiary-hover-color: #8b572aff;
        

        /* Text */
        --input-color: #ffffff;
        --text-color: #ffffff;
        --text-color-inv: #000000;
        --text-color-lighter: #ffffff;
        --text-color-darker: #ffffff;


        /* Surface */
        --surface-color: #ffffff;
        --surface-bg-color: #000000;
        --surface-text-color: #ffffff;
        --surface-color-darken: #ffffff;
        

        /* Generic */
        --success: #00ff00;
        --warning: #ffff00;
        --error: #ff0000;
        --info: #0000ff;
        --white: #ffffff;
        --black: #000000;
        --transparent: #ffffff00;

    }