:root {
    --color-background-default-light: var(--color-base-light);
    --color-background-default-dark: var(--color-neutral-900);
    --color-foreground-on-dark: var(--color-neutral-25);
    --color-foreground-on-light: var(--color-neutral-25);

    --color-brand-25: #F7F5FF;
    --color-brand-50: #F1EDFF;
    --color-brand-100: #E3DBFF;
    --color-brand-200: #C1B0FF;
    --color-brand-300: #7746FF;
    --color-brand-400: #6236E0;
    --color-brand-500: #4F28C2;
    --color-brand-600: #3E1E9E;
    --color-brand-700: #2E167A;
    --color-brand-800: #1F0E54;
    --color-brand-900: #110730;

    --color-brand-secondary-25: #F5F9FF;
    --color-brand-secondary-50: #EDF5FF;
    --color-brand-secondary-100: #D9EBFF;
    --color-brand-secondary-200: #B2D5FF;
    --color-brand-secondary-300: #59A5FF;
    --color-brand-secondary-400: #468EE6;
    --color-brand-secondary-500: #3577CC;
    --color-brand-secondary-600: #265FB3;
    --color-brand-secondary-700: #1A4999;
    --color-brand-secondary-800: #103480;
    --color-brand-secondary-900: #08204D;

    --color-complementary-25: #FFF9F6;
    --color-complementary-50: #FFF3ED;
    --color-complementary-100: #FFE6D9;
    --color-complementary-200: #FFDCC8;
    --color-complementary-300: #FFD2B9;
    --color-complementary-400: #E6B495;
    --color-complementary-500: #CC9874;
    --color-complementary-600: #A67859;
    --color-complementary-700: #8C6246;
    --color-complementary-800: #664632;
    --color-complementary-900: #332218;

    --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/regular.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

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

@font-face {
    font-family: 'Title';
    src: url('../fonts/title/regular.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/bold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

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

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

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

@font-face {
    font-family: 'Body';
    src: url('../fonts/body/regular.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/bold.ttf') format('truetype');
    font-weight: 800;
    font-display: swap;
    font-style: normal;
}

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

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

@font-face {
    font-family: 'Mono';
    src: url('../fonts/mono/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/regular.ttf') format('truetype');
    font-weight: 500;
    font-display: swap;
    font-style: normal;
}

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

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

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

@font-face {
    font-family: 'Mono';
    src: url('../fonts/mono/medium.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;
}