:root {
    --tkf-dark-blue: #00354e;
    --tkf-blue: #00425f;
    --tkf-light-blue: #eaeef2;
    --tkf-orange: #f47920;
    --tkf-slate-grey: #8ca0aa;
    --tkf-dark-slate-grey: #607783;
}

.bg-tkf-dark-blue {
    background-color: var(--tkf-dark-blue);
}

.bg-tkf-light-blue {
    background-color: var(--tkf-light-blue);
}

.bg-tkf-blue {
    background-color: var(--tkf-blue);
}

.bg-tkf-orange {
    background-color: var(--tkf-orange);
}

.bg-tkf-slate-grey {
    background-color: var(--tkf-slate-grey);
}

.bg-tkf-dark-slate-grey {
    background-color: var(--tkf-dark-slate-grey);
}


.responsiveCard {
    background-color: white;
    color: var(--text-color); /* Ensures it uses the theme color */
}

@media (min-width: 768px) {
    /* Medium (md) breakpoint */
    .responsiveCard {
        border: 1px solid var(--surface-border); /* Matches PrimeReact card borders */
        box-shadow: var(--shadow-1); /* Matches PrimeReact shadow */
        padding: 0.75rem; /* Equivalent to p-3 */
        border-radius: 0.5rem; /* Equivalent to rounded-lg */
    }
}