/* VARIABLES */
:root {
    --black: #080808;
    --black-hard: #080808;
    --white: #FFFFFF;
    --white-hard: #FFFFFF;

    --background: #F2F2F2;
    --background-dark: #080808;

    --gray: color-mix(in srgb, var(--black) 7%, var(--background) 93%);
    --gray-medium: color-mix(in srgb, var(--black) 50%, var(--background));
    --gray-hard: #E2E2E2;
    --gray-light: #F2F2F2;
    --gray-dark: #303030;
    /* --accent: #080808; */

    --radius: 1.25rem;
    --radius-medium: 1.5rem;
    --radius-big: 2.5rem;
    --transition: all .4s cubic-bezier(0.77, 0, 0.175, 1);
    --transition-fast: all .25s ease;

    --space-xxxl: 15rem;   /* 250px */
    --space-xxl: 10rem;    /* 160px */
    --space-xl: 7.5rem;    /* 120px */
    --space-l: 3.75rem;    /* 60px  */
    --space-m: 2.5rem;     /* 40px  */
    --space-s: 1.25rem;    /* 20px  */
    --space-xs: 0.625rem;  /* 10px  */
    --space-xxs: 0.3125rem; /* 5px  */
}

body {
    --gray: color-mix(in srgb, var(--black) 7%, var(--background) 93%);
}

/* DARK MODE */
body.dark-mode,
html.dark-mode body {
    --black: #FFFFFF;
    --white: #080808;

    --gray: color-mix(in srgb, var(--black) 10%, var(--background-dark) 90%);
    --gray-light: #191919;
    --gray-dark: #F2F2F2;
    /* --accent: #FFFFFF; */
}