:root {
    /* Primary color base and shades */
    --primary-base-h: 208.26; /* Adjust the hue for your primary color */
    --primary-base-s: 100%; /* Adjust the saturation for your primary color */
    --primary-base-l: 30.39%; /* Adjust the lightness for your primary color */

    /* Secondary color base and shades */
    --secondary-base-h: 224.42; /* Adjust the hue for your secondary color */
    --secondary-base-s: 61.9%; /* Adjust the saturation for your secondary color */
    --secondary-base-l: 32.94%; /* Adjust the lightness for your secondary color */

    /* Generating shades for primary and secondary colors */
    --color-step: 3%; /* Adjust this to control the contrast between shades */

    /* Primary shades */
    --primary-100: hsl(var(--primary-base-h), var(--primary-base-s), calc(var(--primary-base-l) + (4 * var(--color-step))));
    --primary-200: hsl(var(--primary-base-h), var(--primary-base-s), calc(var(--primary-base-l) + (3 * var(--color-step))));
    --primary-300: hsl(var(--primary-base-h), var(--primary-base-s), calc(var(--primary-base-l) + (2 * var(--color-step))));
    --primary-400: hsl(var(--primary-base-h), var(--primary-base-s), calc(var(--primary-base-l) + var(--color-step)));
    --primary-500: hsl(var(--primary-base-h), var(--primary-base-s), var(--primary-base-l));
    --primary-600: hsl(var(--primary-base-h), var(--primary-base-s), calc(var(--primary-base-l) - var(--color-step)));
    --primary-700: hsl(var(--primary-base-h), var(--primary-base-s), calc(var(--primary-base-l) - (2 * var(--color-step))));
    --primary-800: hsl(var(--primary-base-h), var(--primary-base-s), calc(var(--primary-base-l) - (3 * var(--color-step))));
    --primary-900: hsl(var(--primary-base-h), var(--primary-base-s), calc(var(--primary-base-l) - (4 * var(--color-step))));

    /* Secondary shades */
    --secondary-100: hsl(var(--secondary-base-h), var(--secondary-base-s), calc(var(--secondary-base-l) + (4 * var(--color-step))));
    --secondary-200: hsl(var(--secondary-base-h), var(--secondary-base-s), calc(var(--secondary-base-l) + (3 * var(--color-step))));
    --secondary-300: hsl(var(--secondary-base-h), var(--secondary-base-s), calc(var(--secondary-base-l) + (2 * var(--color-step))));
    --secondary-400: hsl(var(--secondary-base-h), var(--secondary-base-s), calc(var(--secondary-base-l) + var(--color-step)));
    --secondary-500: hsl(var(--secondary-base-h), var(--secondary-base-s), var(--secondary-base-l));
    --secondary-600: hsl(var(--secondary-base-h), var(--secondary-base-s), calc(var(--secondary-base-l) - var(--color-step)));
    --secondary-700: hsl(var(--secondary-base-h), var(--secondary-base-s), calc(var(--secondary-base-l) - (2 * var(--color-step))));
    --secondary-800: hsl(var(--secondary-base-h), var(--secondary-base-s), calc(var(--secondary-base-l) - (3 * var(--color-step))));
    --secondary-900: hsl(var(--secondary-base-h), var(--secondary-base-s), calc(var(--secondary-base-l) - (4 * var(--color-step))));
}

/* Utility classes for text and background colors */
.text-primary-100 { color: var(--primary-100); }
.text-primary-200 { color: var(--primary-200); }
.text-primary-300 { color: var(--primary-300); }
.text-primary-400 { color: var(--primary-400); }
.text-primary-500 { color: var(--primary-500); }
.text-primary-600 { color: var(--primary-600); }
.text-primary-700 { color: var(--primary-700); }
.text-primary-800 { color: var(--primary-800); }
.text-primary-900 { color: var(--primary-900); }

.text-secondary-100 { color: var(--secondary-100); }
.text-secondary-200 { color: var(--secondary-200); }
.text-secondary-300 { color: var(--secondary-300); }
.text-secondary-400 { color: var(--secondary-400); }
.text-secondary-500 { color: var(--secondary-500); }
.text-secondary-600 { color: var(--secondary-600); }
.text-secondary-700 { color: var(--secondary-700); }
.text-secondary-800 { color: var(--secondary-800); }
.text-secondary-900 { color: var(--secondary-900); }

.bg-primary-100 { background-color: var(--primary-100); }
.bg-primary-200 { background-color: var(--primary-200); }
.bg-primary-300 { background-color: var(--primary-300); }
.bg-primary-400 { background-color: var(--primary-400); }
.bg-primary-500 { background-color: var(--primary-500); }
.bg-primary-600 { background-color: var(--primary-600); }
.bg-primary-700 { background-color: var(--primary-700); }
.bg-primary-800 { background-color: var(--primary-800); }
.bg-primary-900 { background-color: var(--primary-900); }

.bg-secondary-100 { background-color: var(--secondary-100); }
.bg-secondary-200 { background-color: var(--secondary-200); }
.bg-secondary-300 { background-color: var(--secondary-300); }
.bg-secondary-400 { background-color: var(--secondary-400); }
.bg-secondary-500 { background-color: var(--secondary-500); }
.bg-secondary-600 { background-color: var(--secondary-600); }
.bg-secondary-700 { background-color: var(--secondary-700); }
.bg-secondary-800 { background-color: var(--secondary-800); }
.bg-secondary-900 { background-color: var(--secondary-900); }

.border-primary-100 { border-color: var(--primary-100); }
.border-primary-200 { border-color: var(--primary-200); }
.border-primary-300 { border-color: var(--primary-300); }
.border-primary-400 { border-color: var(--primary-400); }
.border-primary-500 { border-color: var(--primary-500); }
.border-primary-600 { border-color: var(--primary-600); }
.border-primary-700 { border-color: var(--primary-700); }
.border-primary-800 { border-color: var(--primary-800); }
.border-primary-900 { border-color: var(--primary-900); }

.border-secondary-100 { border-color: var(--secondary-100); }
.border-secondary-200 { border-color: var(--secondary-200); }
.border-secondary-300 { border-color: var(--secondary-300); }
.border-secondary-400 { border-color: var(--secondary-400); }
.border-secondary-500 { border-color: var(--secondary-500); }
.border-secondary-600 { border-color: var(--secondary-600); }
.border-secondary-700 { border-color: var(--secondary-700); }
.border-secondary-800 { border-color: var(--secondary-800); }
.border-secondary-900 { border-color: var(--secondary-900); }