:root {
    /*--Fonts--*/

    --font-heading: 'Caveat', cursive;
    --font-body: 'Neucha', cursive;
    --font-classic: 'Inter', sans-serif;

    /*--Font-Size--*/

    --fs-3xs: 14px;
    --fs-2xs: 16px;
    --fs-xs: 18px;
    --fs-sm: 20px;
    --fs-md: 24px;
    --fs-lg: 28px;
    --fs-xl: 32px;
    --fs-2xl: 36px;
    --fs-3xl: 40px;

    /*--Font-Weight--*/

    --fw-regular: 400;
    --fw-semibold: 600;
    --fw-bold: 700;

    /*--Font-Color--*/

    --text-dark: #000;
    --text-white: #fff;

    /*--System-Colors--*/

    --bg-main: #FDF2ED;
    --bg-contrast: #FBFBFB;
    --bg-soft-container: #FDECD5;
    --bg-dark-container: #FEDBA0;
    --bg-common-btn: #FFD674;
    --bg-inverse-btn: #808080;

    /*--Accent--*/

    --accent-main: #FECD56;
    --accent-dark: #DC7B56;

    /*--Shadow--*/

    --inner-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3) inset;

    /*--Semantic-Aliases--*/

    --text-primary: var(--text-dark);
    --text-inverse: var(--text-white);

    --soft-container: var(--bg-soft-container);
    --dark-container: var(--bg-dark-container);

    /*--Spacing--*/

    --space-2xs: 4px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 20px;
    --space-xl: 24px;
    --space-2xl: 28px;
    --space-3xl: 32px;
    --space-4xl: 36px;

    /*--Transition-Duration--*/

    --transition-base: 0.3s ease;
    --transition-fast: 0.15s ease;

    /*--Border-Radius--*/

    --br-xs: 4px;
    --br-sm: 8px;
    --br-ct: 12px;
    --br-md: 16px;
    --br-lg: 24px;
    --br-xl: 28px;
    --br-2xl: 32px;
    --br-full: 50%;
}

@media screen and (max-width: 768px) {
    :root {
        /*--Font-Size--*/

        --fs-3xs-m: 8px;
        --fs-2xs-m: 10px;
        --fs-xs-m: 12px;
        --fs-sm-m: 14px;
        --fs-md-m: 14px;
        --fs-lg-m: 16px;
        --fs-xl-m: 16px;
        --fs-2xl-m: 18px;
        --fs-3xl-m: 18px;

        /*--Shadow--*/

        --inner-shadow-m: 0 0 2px 1px rgba(0, 0, 0, 0.2) inset;

        /*--Spacing--*/

        --space-2xs-m: 2px;
        --space-xs-m: 4px;
        --space-sm-m: 8px;
        --space-md-m: 8px;
        --space-lg-m: 16px;
        --space-xl-m: 16px;
        --space-2xl-m: 24px;
        --space-3xl-m: 24px;
        --space-4xl-m: 32px;

        /*--Border-Radius--*/

        --br-xs-m: 2px;
        --br-sm-m: 4px;
        --br-ct-m: 6px;
        --br-md-m: 8px;
        --br-lg-m: 12px;
        --br-xl-m: 14px;
        --br-2xl-m: 16px;
        --br-full-m: 50%;
    }
}