@font-face {
    font-family: 'Fraunces';
    src: url('../font/fraunces-variable.ttf') format('truetype');
}

@font-face {
    font-family: 'Recoleta';
    src: url('../font/recoleta-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Chewie';
    src: url('../font/chewie-bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Analogue';
    src: url('../font/analogue-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

/* app name */
h1 {
   @apply font-serif text-2xl md:text-3xl font-extrabold leading-tight;
}

/* page header */
h2 {
    @apply font-serif text-xl md:text-2xl font-extrabold leading-tight text-primary;
}

/* section dividers */
h3 {
    @apply text-xl font-semibold leading-tight text-secondary;
}

/* links */
a {
    &.text {
        @apply underline decoration-inherit underline-offset-2 text-black font-semibold;
        text-decoration-thickness: 1.5px;
        transition: color 100ms ease-in-out;

        &:hover {
            @apply text-magenta-700;
        }
    }
}

/* text */
p {
    @apply text-base leading-normal;

    &.big {
        @apply text-lg font-medium;
    }
}

.description { /* contains <p> and uses gap for spacing */
    @apply space-y-3;

    p {
        @apply text-lg;
    }
}

.error {
    @apply text-base text-red-600 font-semibold;
}
