/* ── Typography ──────────────────────────────────────────────────────────── */

.rye {
    font-family: 'Rye', cursive, sans-serif;

    &.headline {
        font-weight: 500;
    }
}

.page-title {
    font-size: 48px;
    margin-bottom: 30px;
    font-family: 'Rye', cursive, sans-serif;
    font-weight: 500;
    text-transform: capitalize;

    @media (max-width: 768px) {
        font-size: 36px;
    }
}

.section-title {
    font-size: 32px;
    margin-bottom: 20px;
    font-family: 'Rye', cursive, sans-serif;
    font-weight: 500;
}

.small-text {
    font-size: 0.85rem;
}

.alert {
    margin: 15px 0;
    padding: 10px 15px;
    border-radius: 5px;
    background-color: var(--palette-light-gray);
    color: #000000;

    &.success {
        background-color: var(--palette-green);
    }

    &.error {
        background-color: var(--palette-red);
    }

    &.warning {
        background-color: var(--palette-orange);
    }
}