/* =========================================
   VARIABLES DE FONTS
   ========================================= */
@font-face {
    font-family: 'Sora';
    src: url("/assets/fonts/sora/Sora-Light.woff2") format("woff2"),
         url("/assets/fonts/sora/Sora-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sora';
    src: url("/assets/fonts/sora/Sora-Regular.woff2") format("woff2"),
         url("/assets/fonts/sora/Sora-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sora';
    src: url("/assets/fonts/sora/Sora-SemiBold.woff2") format("woff2"),
         url("/assets/fonts/sora/Sora-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sora';
    src: url("/assets/fonts/sora/Sora-Bold.woff2") format("woff2"),
         url("/assets/fonts/sora/Sora-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrainsMono';
    src: url("/assets/fonts/JetBrainMono_Md.woff2") format("woff2"),
         url("/assets/fonts/JetBrainMono_Md.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TuskerGrotesk';
    src: url("/assets/fonts/TuskerGrotesk_Sb.woff2") format("woff2"),
         url("/assets/fonts/TuskerGrotesk_Sb.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* =========================================
   VARIABLES DE COULEURS
   ========================================= */

:root {
    /* ==== BASIQUE ==== */
    --couleur-noir: #000000;
    --couleur-blanc: #ffffff;

    /* ==== PRINCIPAUX ==== */
    --couleur-gris-fond: rgb(34 34 34 / 0.3);
    --couleur-jaune: #DAB537;
    --couleur-vert: #0E433C;
    --couleur-jaune-casse: #F7F5EE;

    /* ==== SECONDAIRE ==== */
    --couleur-gris: #787878;
    --couleur-gris-clair: #C4C4C4;
    --couleur-gris-bordure: rgba(255,255,255,.12);

    --couleur-vert-clair: #A9C3AF;
    --couleur-vert-moyen: #5F7D5E;

    --couleur-marron: #4A3A08;

    /* ==== FONTS ==== */
    --SORA: 'Sora', sans-serif;
    --JBM: 'JetBrainsMono', sans-serif;
    --TG: 'TuskerGrotesk', sans-serif;

    /* ==== ANIMATIONS ==== */
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --dur-1: .5s;
    --dur-2: .7s;
    --dur-3: .9s;
    --reveal-stagger: 90ms;
}

html {
    scroll-behavior: smooth;
}