@layer utilities {
    .text-primary {
        color: hsl(223, 87%, 63%);
    }

    .bg-primary {
        background-color: hsl(223, 87%, 63%);
    }

    .bg-secondary {
        background-color: hsl(223, 100%, 88%);
    }

    .hover\:bg-primary:hover, .focus\:bg-primary:focus {
        background-color: hsl(223, 87%, 63%);
    }


    .text-secondary {
        color: hsl(223, 100%, 88%);
    }

    .placeholder-secondary::placeholder {
        color: hsl(223, 100%, 88%);
    }


    .border-secondary {
        border-color: hsl(223, 100%, 88%);
    }

    .text-light-red {
        color: hsl(354, 100%, 66%);
    }

    .bg-light-red {
        background-color: hsl(354, 100%, 66%);
    }

    .text-gray {
        color: hsl(0, 0%, 59%);
    }

    .text-dark-blue {
        color: hsl(209, 33%, 12%);
    }

    .font-libre {
        font-family: 'Libre Franklin', sans-serif;
    }

    .font-light {
        font-weight: 300;
    }

    .font-semibold {
        font-weight: 600;
    }

    .font-bold {
        font-weight: 700;
    }
}

@layer base {
    body {
        font-family: 'Libre Franklin', sans-serif;
    }

    h1 {
        font-family: 'Libre Franklin', sans-serif;
        font-size: 48px;
    }

    p {
        font-family: 'Libre Franklin', sans-serif;
    }

    button {
        background-color: hsl(223, 87%, 63%) !important;
    }

}