:root {
	/* Primary Colors - Matched to Theme Color Scheme */
	/* Using theme's green as primary color */
	--kp-primary: var(--color-km-green, #87b501);
	--kp-primary-dark: var(--color-km-dark-green, #789a0f);
	--kp-primary-light: var(--background-light-green, #ebf6c8);
	--kp-primary-hover: var(--color-km-dark-green, #789a0f);
	--bs-primary: var(--kp-primary); /* Bootstrap override */

	/* Semantic Colors - Matched to Theme */
	--kp-secondary: var(--color-medium-dark-gray, #7b7b7b);
	--kp-success: var(--color-km-green, #87b501);
	--kp-success-light: var(--background-light-green, #ebf6c8);
	--kp-success-dark: var(--color-km-dark-green, #789a0f);
	--kp-danger: var(--red, #b90000);
	--kp-warning: var(--color-km-orange, #f37b06);
	--kp-warning-light: var(--background-light-orange, #fbcd81);
	--kp-warning-dark: var(--color-km-orange, #f37b06);
	--kp-info: var(--light-blue, #5ba7dd);
	--kp-info-light: #d1ecf1;
	--kp-info-dark: #0c5460;

	/* Neutral Colors - Matched to Theme */
	--kp-light: var(--background-light-gray, #fafafa);
	--kp-dark: var(--color-dark-gray, #292b2c);
	--kp-border: var(--border-light-gray, #ededed);
	--kp-border-hover: var(--color-medium-light-gray, #a9a9a9);
	--kp-text-muted: var(--color-medium-dark-gray, #7b7b7b);

	/* Spacing & Layout */
	--kp-border-radius: 0.5rem;
	--kp-border-radius-lg: 0.75rem;
	--kp-spacing-xs: 0.25rem;
	--kp-spacing-sm: 0.5rem;
	--kp-spacing-md: 1rem;
	--kp-spacing-lg: 1.5rem;
	--kp-spacing-xl: 2rem;

	/* Shadows - Using theme's shadow variables */
	--kp-box-shadow: 0 0.125rem 0.25rem
		var(--boxshadow-dark-10, rgba(0, 0, 0, 0.1));
	--kp-box-shadow-lg: 0 0.5rem 1rem
		var(--boxshadow-dark-15, rgba(0, 0, 0, 0.15));
	--kp-box-shadow-focus: 0 0 0 0.25rem rgba(135, 181, 1, 0.25); /* Using green primary for focus */

	/* Transitions */
	--kp-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}