/* Global */
:root {
    --color-primary: #d46d28;
    --color-primary-light: rgba(212, 109, 40, 0.6);
    --color-text-dark: #0f031f;
    --color-text-dark-light: rgba(15, 3, 31, 0.6);

    /* Button */
    --button-height: 60px;
    --button-gap: 40px;

    --pumkin-size: 350px;
    --app-preview-3-width: 592px;
    --app-preview-leaf-width: 160px;
}

/* Desktop and large screen */
@media (min-width: 1920px) {
    :root {
        --container-width: 70%;

        /* Text */
        --text-size-xl: 60px;
        --text-size-lg: 35px;
        --text-size-md: 23px;
        --text-size-sm: 20px;
        --text-size-xs: 16px;
        --text-size-xxs: 14px;

        --text-line-height-xl: 80px;
        --text-line-height-lg: 48px;
        --text-line-height-md: 32px;
        --text-line-height-sm: 28px;
        --text-line-height-xs: 24px;
        --text-line-height-xxs: 20px;

        --text-primary-spacing-top: 270px;

        /* Button */
        --button-gap: 40px;

        /* App preview */
        --app-preview-1-width: 764px;
        --app-preview-1-right: 30px;

        --app-preview-2-width: 900px;
        --app-preview-2-left: -200px;

        /* Background */
        --bg-size: cover;
    }
}

/* Small laptop */
@media (min-width: 1440px) and (max-width: 1920px) {
    :root {
        --container-width: 80%;
        --pumkin-size: 250px;

        /* Text */
        --text-size-xl: 48px;
        --text-size-lg: 30px;
        --text-size-md: 20px;
        --text-size-sm: 16px;
        --text-size-xs: 14px;
        --text-size-xxs: 12px;

        --text-line-height-xl: 60px;
        --text-line-height-lg: 36px;
        --text-line-height-md: 32px;
        --text-line-height-sm: 24px;
        --text-line-height-xs: 20px;
        --text-line-height-xxs: 18px;

        --text-primary-spacing-top: 150px;

        /* Button */
        --button-gap: 20px;

        /* App preview */
        --app-preview-1-width: 600px;
        --app-preview-1-right: 40px;

        --app-preview-2-width: 700px;
        --app-preview-2-left: -200px;
    }
}

@media (max-width: 1280px) {
    :root {
        --text-primary-spacing-top: 100px;
    }
}

@media (max-width: 1080px) {
    :root {
        --text-primary-spacing-top: 50px;
    }
}

/* Tablet */
@media (min-width: 960px) and (max-width: 1440px) {
    :root {
        --container-width: 80%;
        --pumkin-size: 200px;
        /* Text */
        --text-size-xl: 48px;
        --text-size-lg: 30px;
        --text-size-md: 20px;
        --text-size-sm: 16px;
        --text-size-xs: 14px;
        --text-size-xxs: 12px;

        --text-line-height-xl: 60px;
        --text-line-height-lg: 36px;
        --text-line-height-md: 32px;
        --text-line-height-sm: 24px;
        --text-line-height-xs: 20px;
        --text-line-height-xxs: 18px;

        /* Button */
        --button-gap: 20px;

        /* App preview */
        --app-preview-1-width: 50%;
        --app-preview-1-right: -100px;

        --app-preview-2-width: 50%;
        --app-preview-2-left: -200px;

        --app-preview-3-width: 600px;
        --app-preview-leaf-width: 200px;
    }
}

/* Mobile */
@media (min-width: 768px) and (max-width: 960px) {
    :root {
        --container-width: 80%;
        --pumkin-size: 150px;

        /* Text */
        --text-size-xl: 48px;
        --text-size-lg: 30px;
        --text-size-md: 20px;
        --text-size-sm: 16px;
        --text-size-xs: 14px;
        --text-size-xxs: 12px;

        --text-line-height-xl: 60px;
        --text-line-height-lg: 36px;
        --text-line-height-md: 32px;
        --text-line-height-sm: 24px;
        --text-line-height-xs: 20px;
        --text-line-height-xxs: 18px;

        --text-primary-spacing-top: 0px;

        /* Button */
        --button-height: 40px;
        --button-gap: 20px;

        /* App preview */
        --app-preview-3-width: 300px;
        --app-preview-leaf-width: 160px;
    }
}

@media (max-width: 768px) {
    :root {
        --container-width: 100%;
        --pumkin-size: 30%;

        /* Text */
        --text-size-xl: 48px;
        --text-size-lg: 30px;
        --text-size-md: 20px;
        --text-size-sm: 16px;
        --text-size-xs: 14px;
        --text-size-xxs: 12px;

        --text-line-height-xl: 60px;
        --text-line-height-lg: 36px;
        --text-line-height-md: 32px;
        --text-line-height-sm: 24px;
        --text-line-height-xs: 20px;
        --text-line-height-xxs: 18px;

        --text-primary-spacing-top: 0px;

        /* Button */
        --button-height: 40px;
        --button-gap: 20px;

        /* App preview */
        --app-preview-3-width: 300px;
    }
}