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

:root {
    --primary: hsl(239, 82%, 63%);
    --primary-strong: hsl(234, 44%, 26%);
    --primary-subtle: hsl(224, 100%, 76%);
    --secondary: hsl(60, 100%, 63%);
    --secondary-subtle: hsl(60, 100%, 88%);
}

/* Design Token Case Study Hero Color */
.cs-design-tokens .hero-cs,
.cs-design-tokens .overview,
.cs-design-tokens .body-content-color-carry-over {
    background: var(--primary);
    color: var(--gray-100);
}

.overview-item {
    background-color: var(--primary-subtle);
    color: var(--primary-strong);
}

.overview-item h3 {
    color: var(--primary-strong);
}

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

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