.blue {
    color: #63a9d8;
}

.teal {
    color: #43a295;
}

.pink {
    color: #a1429d;
}

.purple {
    color: #9B66E5;
}

.brown {
    color: #723757;
}

.green {
    color: #4D7C76;
}

.cta-button-pink {
    border: 2px solid #f8cdf6;
    color: #63a9d8;
    background: linear-gradient(135deg, rgb(227, 241, 252) 0%, #ffdefd 100%);

    border-radius: 12px;
    padding: 16px 40px;
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cta-button-pink:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(218, 130, 80, 0.2);
    background: linear-gradient(135deg, #ffccfc 0%, #d1a8ce 100%);
}

.cta-button-teal {
    border: 2px solid #d0efe9;
    color: #43a295;
    background: linear-gradient(135deg, #e8f7f4 0%, #e8f7f4 100%);
    border-radius: 12px;
    padding: 16px 40px;
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cta-button-teal:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(218, 130, 80, 0.2);
    background: linear-gradient(135deg, #e8f7f4 0%, #d1eee8 100%);
}

/* Color Modifiers */
.archive-card--pink {
    background: #f7d6f5;
    border: solid #eaafed 1px;
}

.archive-card--purple {
    background: #f4effc;
    border: solid #e2d4f7 1px;
}

.archive-card--brown {
    background: #f8eff4;
    border: solid #e8d0dd 1px;
}

.archive-card--green {
    background: #edf5f4;
    border: solid #d1e5e2 1px;
}

/* Text Colors by Modifier */
.archive-card--pink .archive-card__label,
.archive-card--pink .archive-card__title {
    color: #a1429d;
}

.archive-card--purple .archive-card__label,
.archive-card--purple .archive-card__title {
    color: #9B66E5;
}

.archive-card--brown .archive-card__label,
.archive-card--brown .archive-card__title {
    color: #723757;
}

.archive-card--green .archive-card__label,
.archive-card--green .archive-card__title {
    color: #4D7C76;
}