.k56-level-1 { --k56-level-master: var(--k56-level-1-color); }
.k56-level-2 { --k56-level-master: var(--k56-level-2-color); }
.k56-level-3 { --k56-level-master: var(--k56-level-3-color); }
.k56-level-4 { --k56-level-master: var(--k56-level-4-color); }
.k56-level-5 { --k56-level-master: var(--k56-level-5-color); }

/*
 * One semantic class for the complete level-dependent card design. The level
 * itself is supplied by the projected post class above; Elementor templates
 * therefore never contain a level number or a concrete colour.
 */
.k56-level-design,
.k56-color-design {
    --k56-level-color: var(--k56-level-master);
    --k56-level-bg: color-mix(in srgb, var(--k56-level-master) 10%, #fff);
    --k56-level-border: color-mix(in srgb, var(--k56-level-master) 72%, #fff);
    --k56-level-button: var(--k56-level-master);
    --k56-level-button-hover: color-mix(in srgb, var(--k56-level-master) 78%, #000);
    --k56-level-text: #17213f;
    --k56-level-button-text: #fff;
    --k56-level-button-hover-text: #fff;
    --k56-level-focus: color-mix(in srgb, var(--k56-level-master) 55%, #fff);

    color: var(--k56-level-text);
    background-color: var(--k56-level-bg);
    border-color: var(--k56-level-border);
}

.k56-level-design :is(button, .elementor-button),
.k56-color-design :is(button, .elementor-button) {
    color: var(--k56-level-button-text);
    background-color: var(--k56-level-button);
    border-color: var(--k56-level-border);
}

.k56-level-design :is(button, .elementor-button):hover,
.k56-color-design :is(button, .elementor-button):hover {
    color: var(--k56-level-button-hover-text);
    background-color: var(--k56-level-button-hover);
}

.k56-level-design :is(button, .elementor-button):focus-visible,
.k56-color-design :is(button, .elementor-button):focus-visible {
    outline: 3px solid var(--k56-level-focus);
    outline-offset: 2px;
}

/* Context colours reuse the shared design; the owning item supplies the tokens. */
.k56-crew-design.k56-color-design {
    --k56-level-master: var(--k56-crew-color);
    --k56-level-button-text: var(--k56-crew-contrast);
    --k56-level-button-hover-text: var(--k56-crew-hover-contrast);
}
.k56-team-design.k56-color-design {
    --k56-level-master: var(--k56-team-color);
    --k56-level-button-text: var(--k56-team-contrast);
    --k56-level-button-hover-text: var(--k56-team-hover-contrast);
}