:root{

    /* ---- Foundations ---- */

    /* Text color */
    --text-color-dark: rgba(21, 29, 23, 1);
    --text-color-light-100: rgba(255, 255, 255, 1);
    --text-color-light-200: rgba(255, 255, 255, 0.7);

    /* Box shadow */
    --box-shadow-none: drop-shadow(0 2px 15.1px rgba(255, 255, 255, 0));
    --box-shadow-100: drop-shadow(0 2px 15.1px rgba(255, 255, 255, 0.08));
    --box-shadow-200: drop-shadow(0 2px 15.1px rgba(255, 255, 255, 0.25));
    --box-shadow-300: drop-shadow(0 2px 15.1px rgba(255, 255, 255, 0.4));

    /* Transition */
    --transition-hover-50: all .2s ease-in-out;
    --transition-hover-100: all .3s ease-in-out;
    --transition-hover-200: all .4s ease-in;
    --transition-slider: all .3s ease-in-out;

    /* Border Color */
    --border-color-none: rgba(255, 255, 255, 0);
    --border-color-100: #625e5e;
    --border-color-200: #A1A1A1;
    --border-color-300: #FFF;

    /* Background Color - Primary */
    --background-color-primary-none: rgba(0, 0, 0, 0);
    --background-color-primary-100: #DDD1D1;
    --background-color-primary-200: #FFF;

    /* Background Color - Secondary */
    --background-color-secondary-none: rgba(255, 255, 255, 0);
    --background-color-secondary-100: #393333;
    --background-color-secondary-200: #222;


    /* ---- Composant ---- */

    /* -- Button -- */

    /* Button padding */
    --button-padding-100: 0.5rem 1.2rem;
    --button-padding-200: 0.7rem 1.4rem;
    --button-padding-300: 0.8rem;
    --button-padding-400: 0.6rem;
    
    /* Button margin */
    --button-margin-100: 0.5rem 1.2rem;
    --button-margin-200: 0.7rem 1.4rem;
    --button-margin-300: 0.6rem;
    --button-margin-400: 0.8rem;

    /* Button font-size */
    --button-font-size-100: 0.75rem;
    --button-font-size-200: 0.9rem;

    /* Button font-weight */
    --button-font-weight-100: 400;
    --button-font-weight-200: 500;

    /* Button border */
    --button-border-50: 0.8px solid var(--border-color-100);
    --button-border-100: 1px solid var(--border-color-200);
    --button-border-200: 1px solid var(--border-color-300);

    /* Button Primary */
    --button-primary-color: var(--text-color-dark);
    --button-primary-bg: var(--background-color-primary-200);

    /* Button Primary Hover */
    --button-primary-hover-bg: var(--background-color-primary-100);

    /* Button Secondary */
    --button-secondary-color: var(--text-color-light-200);
    --button-secondary-bg: var(--background-color-secondary-200);
    
    /* Button Secondary Hover */
    --button-secondary-hover-bg: var(--background-color-secondary-100);


    /* -- Input -- */

    /* Input font-size */
    --input-font-size-100: 0.75rem;
    --input-font-size-200: 0.9rem;

    /* Input margin */
    --input-margin-100: 0.6rem;
    --input-margin-200: 0.8rem;


    /* -- Text -- */

    /* Input font-size */
    --text-font-size-100: 0.9rem;
    --text-font-size-200: 1.1rem;

}

@font-face{
    font-family: "Non Bureau";
    src: url("../font/nonbureau/NonBureau-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face{
    font-family: "Non Bureau";
    src: url("../font/nonbureau/NonBureau-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face{
    font-family: "Non Bureau";
    src: url("../font/nonbureau/NonBureau-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face{
    font-family: "Non Bureau";
    src: url("../font/nonbureau/NonBureau-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}