/**
 * Kind Recards — Utilities
 * ----------------------------------------------------------------------------
 * Single-purpose helper classes. Keep these last in the cascade so they win.
 */

/* ---- Text colour ------------------------------------------------------- */
.kr-text-navy {
    color: var(--kr-color-navy);
}
.kr-text-pink {
    color: var(--kr-color-pink);
}
.kr-text-cream {
    color: var(--kr-color-cream);
}
.kr-text-white {
    color: var(--kr-color-white);
}

/* ---- Background colour -------------------------------------------------- */
.kr-bg-navy {
    background-color: var(--kr-color-navy);
    color: var(--kr-text-on-dark);
}
.kr-bg-pink {
    background-color: var(--kr-color-pink);
    color: var(--kr-color-white);
}
.kr-bg-peach {
    background-color: var(--kr-color-peach);
}
.kr-bg-pink-light {
    background-color: var(--kr-color-pink-light);
}
.kr-bg-cyan {
    background-color: var(--kr-color-cyan);
}
.kr-bg-cream {
    background-color: var(--kr-color-cream);
}
.kr-bg-pink-pale {
    background-color: var(--kr-color-pink-pale);
}
.kr-bg-cyan-pale {
    background-color: var(--kr-color-cyan-pale);
}
.kr-bg-peach-pale {
    background-color: var(--kr-color-peach-pale);
}
.kr-bg-mint-pale {
    background-color: var(--kr-color-mint-pale);
}

/* ---- Typography helpers ------------------------------------------------ */
.kr-font-heading {
    font-family: var(--kr-font-heading);
}
.kr-font-button {
    font-family: var(--kr-font-button);
}
.kr-font-body {
    font-family: var(--kr-font-body);
}
.kr-uppercase {
    text-transform: uppercase;
}
.kr-italic {
    font-style: italic;
}
.kr-weight-light {
    font-weight: var(--kr-weight-light);
}
.kr-weight-semibold {
    font-weight: var(--kr-weight-semibold);
}
.kr-text-center {
    text-align: center;
}
.kr-text-left {
    text-align: left;
}
.kr-text-right {
    text-align: right;
}

/* ---- Spacing (margin / padding shorthands) ----------------------------- */
.kr-mt-0 {
    margin-top: 0;
}
.kr-mb-0 {
    margin-bottom: 0;
}
.kr-mt-4 {
    margin-top: var(--kr-space-4);
}
.kr-mb-4 {
    margin-bottom: var(--kr-space-4);
}
.kr-mt-6 {
    margin-top: var(--kr-space-6);
}
.kr-mb-6 {
    margin-bottom: var(--kr-space-6);
}
.kr-my-section {
    margin-block: var(--kr-section-gap);
}
.kr-py-section {
    padding-block: var(--kr-section-gap);
}

/* ---- Radius ------------------------------------------------------------ */
.kr-rounded {
    border-radius: var(--kr-radius-md);
}
.kr-rounded-lg {
    border-radius: var(--kr-radius-lg);
}
.kr-rounded-pill {
    border-radius: var(--kr-radius-pill);
}
.kr-rounded-circle {
    border-radius: var(--kr-radius-circle);
}

/* ---- Elevation --------------------------------------------------------- */
.kr-shadow {
    box-shadow: var(--kr-shadow-md);
}
.kr-shadow-lg {
    box-shadow: var(--kr-shadow-lg);
}

/* ---- Display / flex ---------------------------------------------------- */
.kr-flex {
    display: flex;
}
.kr-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
.kr-flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.kr-flex-col {
    display: flex;
    flex-direction: column;
}
.kr-gap-2 {
    gap: var(--kr-space-2);
}
.kr-gap-4 {
    gap: var(--kr-space-4);
}
.kr-wrap {
    flex-wrap: wrap;
}
.kr-hidden {
    display: none !important;
}

/* ---- Visibility -------------------------------------------------------- */
@media (max-width: 768px) {
    .kr-hide-mobile {
        display: none !important;
    }
}
@media (min-width: 769px) {
    .kr-hide-desktop {
        display: none !important;
    }
}