: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 */
	}
}

html.tkf-theme-override {
	--primary-color: #f47920;
	--primary-color-text: #212121;
	--primary-50: #fffaf2;
	--primary-100: #ffe6c2;
	--primary-200: #ffd391;
	--primary-300: #ffbf61;
	--primary-400: #ffac30;
	--primary-500: #f47920;
	--primary-600: #d98100;
	--primary-700: #b36a00;
	--primary-800: #8c5400;
	--primary-900: #663d00;
	--topbar-bg: #00425f !important;
	--topbar-start-bg: #00425f !important;
	--topbar-menu-button-bg: #607783 !important;
	--topbar-menu-button-hover-bg: #42515a !important;
	--topbar-menu-button-text-color: #000000 !important;
	--topbar-item-text-color: #ffffff !important;
	--topbar-item-hover-bg: rgba(255, 255, 255, 0.12) !important;
}