:root {
    /* Primary Color Variables */
    --primary-color: #00387A;
    --primary-hue: 212;
    --primary-saturation: 100%;
    --primary-lightness: 24%;
    --dark-color: #0B1626;

    --primary-r: 0;
    --primary-g: 56;
    --primary-b: 122;
    --extra: 16%;
    --primary-hsl: var(--primary-hue), var(--primary-saturation), var(--primary-lightness);
    --primary-hsl-lighter: var(--primary-hue), var(--primary-saturation), clamp(0%, calc(var(--primary-lightness) + var(--extra)), 100%);
    --primary-hsl-darker: var(--primary-hue), var(--primary-saturation), calc(var(--primary-lightness) - var(--extra));
    --primary-rgb: var(--primary-r), var(--primary-g), var(--primary-b);
    --light-color: hsl(var(--primary-hue), var(--primary-saturation), clamp(0%, calc(var(--primary-lightness) + 80%), 100%));

    /* Secondary Color Variables */
    --secondary-color: #F26522;
    --secondary-rgb: 242,101,34;
    --secondary-hue: 19;
    --secondary-saturation: 89%;
    --secondary-lightness: 54%;

    /* New: Generated Lighter/Darker Colors */
    --secondary-color-lighter: hsl(var(--secondary-hue), var(--secondary-saturation), calc(var(--secondary-lightness) + var(--extra)));
    --secondary-color-darker: hsl(var(--secondary-hue), var(--secondary-saturation), calc(var(--secondary-lightness) - var(--extra)));

    --secondary-r: 242;
    --secondary-g: 101;
    --secondary-b: 34;

    --secondary-hsl: var(--secondary-hue), var(--secondary-saturation), var(--secondary-lightness);
    --secondary-hsl-lighter: var(--secondary-hue), var(--secondary-saturation), calc(var(--secondary-lightness) + var(--extra));
    --secondary-hsl-darker: var(--secondary-hue), var(--secondary-saturation), calc(var(--secondary-lightness) - var(--extra));

    --bs-primary: var(--primary-color);
    --bs-secondary: var(--secondary-color);
    --bs-primary-rgb: var(--secondary-rgb);
    --bs-primary-rgba: rgba(var(--secondary-rgb), 0.8);
    --bs-secondary-rgb: var(--secondary-rgb);
    --bs-secondary-bg: var(--secondary-color);
}