/* ----------------------------- */
/* COLOR VARIABLES               */
/* ----------------------------- */

:root {
    --mercari-yellow: hsl(60, 100%, 75%);
    --mercari-green: hsl(145, 80%, 65%);
    --mercari-highlight: hsl(103, 100%, 92%);
}

/* Design Token Case Study Hero Color */
.cs-mercari-rebrand .hero-cs,
.cs-mercari-rebrand .overview,
.cs-mercari-rebrand .body-content-color-carry-over {
    background: var(--mercari-green);
    color: var(--gray-900);
}

.overview-item {
    background-color: var(--mercari-yellow);
    color: var(--gray-900);
}

.overview-item h3 {
    color: var(--gray-900);
}

.body-content .img-cap {
    border-left: var(--primary-cyan) solid 4px;
}

.highlight-box {
    background-color: var(--mercari-highlight);
}