:root {
    /* TODO : add div's dimension */
    --topbar-height: 80px;
    /* TODO : add var padding/margin/gap */
    --space-20: 20px;
    --space-10: 10px;
    /* TODO : add var font-size */
    /* Petites tailles : variation limitée */
    --fs-12: clamp(0.75rem, 0.70rem + 0.3vw, 0.85rem);          /* 12px → max ~13.6px */
    --fs-14: clamp(0.875rem, 0.84rem + 0.4vw, 0.95rem);         /* 14px → max ~15.2px */
    --fs-15: clamp(0.938rem, 0.90rem + 0.4vw, 1rem);            /* 15px → max 16px */
    --fs-16: clamp(1rem, 0.96rem + 0.5vw, 1.125rem);            /* 16px → max 18px */

    /* Grandes tailles : variation plus large */
    --fs-18: clamp(1.125rem, 1rem + 0.8vw, 1.5rem);             /* 18px → max 24px */
    --fs-24: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);               /* 24px → max 32px */
    --fs-28: clamp(1.75rem, 1.4rem + 1.8vw, 2.5rem);            /* 28px → max 40px */
    --fs-32: clamp(2rem, 1.5rem + 2.5vw, 3rem);                 /* 32px → max 48px */
    --fs-48: clamp(3rem, 2.2rem + 3.5vw, 4.5rem);               /* 48px → max 72px */

    /* Variable : variation très large */
    --ffs-12: clamp(0.75rem, 0.5rem + 1.5vw, 1.5rem);           /* 12px → max 24px */
    --ffs-14: clamp(0.875rem, 0.625rem + 1.5vw, 1.75rem);       /* 14px → max 28px */
    --ffs-15: clamp(0.938rem, 0.688rem + 1.5vw, 1.875rem);      /* 15px → max 30px */
    --ffs-16: clamp(1rem, 0.75rem + 1.5vw, 2rem);               /* 16px → max 32px */
    --ffs-18: clamp(1.125rem, 0.875rem + 1.5vw, 2.25rem);       /* 18px → max 36px */

    /* Variable : Homepage, min -> infini */
    --hp-ffs-18: calc(1.125rem + 2vw);
    --hp-ffs-14: calc(.875rem + 1vw);

    /* TODO : add color background */
    --white: #fafafa;
    --white-low-dark: #f4f4f4;
    --white-rly-low-opacity: #fafafaef;
    --white-low-opacity: #fafaface;
    --black: #222222;
    --black-low-opacity: #222222af;
    --black-rly-low-opacity: #22222288;
    --gray: #a1a1a1;
    --beige-low-dark: #b49b87;
    --beige: #d3c2b2;
    --beige-for-gradient: #AFA198;
    --beige-linear-gradient: linear-gradient(to right, var(--beige-for-gradient), var(--beige), var(--beige), var(--beige-for-gradient));
    --instagram-linear-gradient: linear-gradient(to right, #833ab4,#fd1d1d,#fcb045);
    --facebook-linear-gradient: linear-gradient(to top, #1877F2, #68A7FF);
    --google-blue: #4285F4;
    --google-red: #EA4335;
    --google-yellow: #FBBC05;
    --google-green: #34A853;
    --google-star-yellow: ;
    /* TODO : add color border */
    --border-black: #1d1b1b;
    --border-gray: #333333;
    /* TODO : add color text */
    --font-white: #fafafa;
    --font-black: #272323;
    --font-black-a: #3a3939;
    --font-beige: #b49b87;
    /* Fixed variable color */
    --white-fixed: #fafafa;
    --white-low-dark-fixed: #f4f4f4;
    --white-rly-low-opacity-fixed: #fafafaef;
    --white-low-opacity-fixed: #fafaface;
    --black-fixed: #222222;
    --black-low-opacity-fixed: #222222af;
    --black-rly-low-opacity-fixed: #22222288;
    --font-white-fixed: #fafafa;
    --font-black-fixed: #272323;
    --font-black-a-fixed: #3a3939;
    --font-beige-fixed: #b49b87;

    /* TODO : add transition time */
    --transition-1: .15s;
    --transition-2: .2s;
    --transition-3: .3s;
    --transition-4: .4s;
    --transition-10: 1s;
    /* TODO : add z-index */
    --z-index-loading-screen: 100;
    --z-index-header: 90;
    --z-index-lightbox: 9999;
    --z-index-select-menu: 80;
}

@media (prefers-color-scheme: dark) {
    :root {
        --white: #222222;
        --white-low-dark: #2d2d2d;
        --white-rly-low-opacity: #22222288;
        --white-low-opacity: #222222af;
        --black: #fafafa;
        --black-low-opacity: #fafaface;
        --black-rly-low-opacity: #fafafaef;
        --gray: #a1a1a1;
        --beige-low-dark: #d3c2b2;
        --beige: #d3c2b2;
        --beige-for-gradient: #AFA198;
        --beige-linear-gradient: linear-gradient(to right, var(--beige-for-gradient), var(--beige), var(--beige), var(--beige-for-gradient));
        --instagram-linear-gradient: linear-gradient(to right, #833ab4,#fd1d1d,#fcb045);
        --facebook-linear-gradient: linear-gradient(to top, #1877F2, #68A7FF);
        /* TODO : add color border */
        --border-black: #fafafa;
        --border-gray: #cccccc;
        /* TODO : add color text */
        --font-white: #272323;
        --font-black: #fafafa;
        --font-black-a: #faf9f9;
        --font-beige: #d3c2b2;

        /* Fixed variable color */
        --white-fixed: #fafafa;
        --white-low-dark-fixed: #f4f4f4;
        --white-rly-low-opacity-fixed: #fafafaef;
        --white-low-opacity-fixed: #fafaface;
        --black-fixed: #222222;
        --black-low-opacity-fixed: #222222af;
        --black-rly-low-opacity-fixed: #22222288;
        --font-white-fixed: #fafafa;
        --font-black-fixed: #272323;
        --font-black-a-fixed: #3a3939;
        --font-beige-fixed: #b49b87;
    }
}

@media screen and (min-width: 1024px) {
    :root {
        --topbar-height: 80px;
    }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
    :root {
        --topbar-height: 70px;
    }
}
@media screen and (max-width: 767px) {
    :root {
        --topbar-height: 55px;
    }
}