$primary-main: #FF9903;
$primary-surface: #FFEBCD;
$primary-focus: #FAC67B;
$primary-hover: #FFAA2D;
$primary-press: #D48002;

$neutral-1: #fff;
$neutral-2: #B9B9B9;
$neutral-3: #7F7F7F;
$neutral-4: #444444;
$neutral-5: #0A0A0A;
$neutral-6: #D1D1D1;

body {
    color: $neutral-5;
}

// BACKGROUND COLORS
.bg-neutral-1 {background: $neutral-1;}

.bg-neutral-5 {
    background: $neutral-5;
}

.bg-primary-main {
    background: $primary-main;

    &.with-shadow {
        box-shadow: 20px 16px 0px #9E5E00;;
        transition: .5s;

        &:hover {
            box-shadow: none;
        }
    }
}

.bg-primary-surface {
    background: $primary-surface;

    &.with-shadow {
        box-shadow: 20px 16px 0px #FDD599;
        transition: .5s;

        &:hover {
            box-shadow: none;
        }
    }
}

.bg-primary-hover {
    background: $primary-hover;

    &.with-shadow {
        box-shadow: 20px 16px 0px #C18020;
        transition: .5s;

        &:hover {
            box-shadow: none;
        }
    }
}

// TEXT COLOR
.text-primary-main {color: $primary-main;}
.text-neutral-1 {color: $neutral-1;}
.text-neutral-2 {color: $neutral-2;}
.text-neutral-4 {color: $neutral-4;}
.text-neutral-5 {color: $neutral-5;}

// BORDER COLOR
.border-primary-main {border-color: $primary-main;}

@media (max-width: 767px) {
    .bg-primary-surface.with-shadow {
        box-shadow: 0px 16px 0px #FDD599;
    }

    .bg-primary-hover.with-shadow {
        box-shadow: 0px 16px 0px #C18020;
    }

    .bg-primary-main.with-shadow {
        box-shadow: 0px 16px 0px #9E5E00;
    }
}