paulnicoue/assets/styles/_variables.scss

// --------------------------------------------------
// VARIABLES
// --------------------------------------------------

:root {

    // Fonts

    --text-font-family: 'Cairo', sans-serif;
    --title-font-family: 'Cairo', sans-serif;
    --extra-light-font-weight: 200;
    --light-font-weight: 300;
    --regular-font-weight: 400;
    --medium-font-weight: 500;
    --semi-bold-font-weight: 600;
    --bold-font-weight: 700;
    --extra-bold-font-weight: 800;
    --black-font-weight: 900;
    --h1-font-size: 2rem;
    --h2-font-size: 1.8rem;
    --h3-font-size: 1.6rem;
    --button-font-size: 1.4rem;
    --text-font-size: 1.2rem;
    --caption-font-size: 1.1rem;
    --footnote-font-size: 1rem;
    --line-height: 1.2;

    // Dimensions

    --regular-icon-size: 2.5rem;
    --small-icon-size: 1.2rem;


    // Colors

    --eerie-black: #212121;
    --jet: #333333;
    --silver: #C2C2C2;
    --emerald: #72C080;
    --granny-smith-apple: #A3F3B0;
    --middle-green: #428F53;

    --primary-color: var(--eerie-black);
    --primary-color-light: var(--jet);
    --primary-color-dark: black;
    --secondary-color: white;
    --secondary-color-dark: var(--silver);
    --accent-color: var(--emerald);
    --accent-color-light: var(--granny-smith-apple);
    --accent-color-dark: var(--middle-green);
    --button-gradient: linear-gradient(
        30deg,
        hsl(131deg 38% 60%) 1%,
        hsl(131deg 40% 62%) 34%,
        hsl(130deg 43% 64%) 46%,
        hsl(130deg 46% 66%) 54%,
        hsl(130deg 49% 69%) 60%,
        hsl(130deg 53% 71%) 66%,
        hsl(130deg 58% 73%) 71%,
        hsl(130deg 63% 75%) 76%,
        hsl(130deg 69% 77%) 83%,
        hsl(130deg 77% 80%) 100%
    );
}

// Media queries

$tablet-media-query: 48rem;
$desktop-media-query: 62rem;