:root {
    /* Background / Foreground */
    --color-background-default-light: var(--color-neutral-25);
    /* era var(--color-base-light) */
    --color-background-default-dark: var(--color-neutral-900);
    --color-foreground-on-dark: var(--color-neutral-900);
    /* era var(--color-neutral-25) */
    --color-foreground-on-light: var(--color-neutral-900);
    /* era var(--color-neutral-25) */

    /* Yellow */
    --color-yellow-25: #FFF9ED;
    --color-yellow-50: #FFEFC6;
    --color-yellow-100: #FFE49C;
    --color-yellow-200: #FFD96E;
    --color-yellow-300: #FFCE3A;
    --color-yellow-400: #FFC400;
    --color-yellow-500: #D2A200;
    --color-yellow-600: #A58000;
    --color-yellow-700: #785F00;
    --color-yellow-800: #4B3C00;
    --color-yellow-900: #1F1800;

    /* Complementary */
    --color-complementary-25: #F6F7F6;
    --color-complementary-50: #E3E5E2;
    --color-complementary-100: #C6CAC5;
    --color-complementary-200: #9FA8A0;
    --color-complementary-300: #7C857C;
    --color-complementary-400: #616B61;
    --color-complementary-500: #525A52;
    --color-complementary-600: #404540;
    --color-complementary-700: #363A35;
    --color-complementary-800: #2F322F;
    --color-complementary-900: #181B18;

    /* Neutral */
    --color-neutral-25: #F8F8F8;
    --color-neutral-50: #F8F8F8;
    --color-neutral-100: #EBEBEF;
    --color-neutral-200: #D1D1DB;
    --color-neutral-300: #A9A9BC;
    --color-neutral-400: #8A8AA3;
    --color-neutral-500: #6C6C89;
    --color-neutral-600: #55556D;
    --color-neutral-700: #3F3F50;
    --color-neutral-800: #282833;
    --color-neutral-900: #121217;
}

/*TITLE*/
@font-face {
    font-family: 'Title';
    src: url('../fonts/title/thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Title';
    src: url('../fonts/title/extra-light.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Title';
    src: url('../fonts/title/light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Title';
    src: url('../fonts/title/regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Title';
    src: url('../fonts/title/medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Title';
    src: url('../fonts/title/semi-bold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Title';
    src: url('../fonts/title/bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Title';
    src: url('../fonts/title/extra-bold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Title';
    src: url('../fonts/title/black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

/*BODY*/
@font-face {
    font-family: 'Body';
    src: url('../fonts/body/thin.ttf') format('truetype');
    font-weight: 100;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Body';
    src: url('../fonts/body/extra-light.ttf') format('truetype');
    font-weight: 200;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Body';
    src: url('../fonts/body/light.ttf') format('truetype');
    font-weight: 300;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Body';
    src: url('../fonts/body/regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Body';
    src: url('../fonts/body/medium.ttf') format('truetype');
    font-weight: 500;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Body';
    src: url('../fonts/body/semi-bold.ttf') format('truetype');
    font-weight: 600;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Body';
    src: url('../fonts/body/bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Body';
    src: url('../fonts/body/extra-bold.ttf') format('truetype');
    font-weight: 800;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Body';
    src: url('../fonts/body/black.ttf') format('truetype');
    font-weight: 900;
    font-display: swap;
    font-style: normal;
}

/*MONO*/
@font-face {
    font-family: 'Mono';
    src: url('../fonts/mono/thin.ttf') format('truetype');
    font-weight: 100;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Mono';
    src: url('../fonts/mono/extra-light.ttf') format('truetype');
    font-weight: 200;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Mono';
    src: url('../fonts/mono/light.ttf') format('truetype');
    font-weight: 300;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Mono';
    src: url('../fonts/mono/regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Mono';
    src: url('../fonts/mono/medium.ttf') format('truetype');
    font-weight: 500;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Mono';
    src: url('../fonts/mono/semi-bold.ttf') format('truetype');
    font-weight: 600;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Mono';
    src: url('../fonts/mono/bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Mono';
    src: url('../fonts/mono/extra-bold.ttf') format('truetype');
    font-weight: 800;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Mono';
    src: url('../fonts/mono/black.ttf') format('truetype');
    font-weight: 900;
    font-display: swap;
    font-style: normal;
}

/*ICON*/
@font-face {
    font-family: 'Icon';
    src: url('../fonts/icons/regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
    font-style: normal;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-transform: uppercase;
}