:root {
    --primary-color-light-10: color-mix(in srgb, var(--primary-color), white 20%);
    --primary-color-light-20: color-mix(in srgb, var(--primary-color), white 20%);
    --primary-color-light-30: color-mix(in srgb, var(--primary-color), white 30%);
    --primary-color-light-40: color-mix(in srgb, var(--primary-color), white 40%);
    --primary-color-light-50: color-mix(in srgb, var(--primary-color), white 50%);
    --primary-color-light-60: color-mix(in srgb, var(--primary-color), white 60%);
    --primary-color-light-70: color-mix(in srgb, var(--primary-color), white 70%);
    --primary-color-light-80: color-mix(in srgb, var(--primary-color), white 80%);
    --primary-color-light-90: color-mix(in srgb, var(--primary-color), white 90%);

    --primary-color-dark-10: color-mix(in srgb, var(--primary-color), black 20%);
    --primary-color-dark-20: color-mix(in srgb, var(--primary-color), black 20%);
    --primary-color-dark-30: color-mix(in srgb, var(--primary-color), black 30%);
    --primary-color-dark-40: color-mix(in srgb, var(--primary-color), black 40%);
    --primary-color-dark-50: color-mix(in srgb, var(--primary-color), black 50%);
    --primary-color-dark-60: color-mix(in srgb, var(--primary-color), black 60%);
    --primary-color-dark-70: color-mix(in srgb, var(--primary-color), black 70%);
    --primary-color-dark-80: color-mix(in srgb, var(--primary-color), black 80%);
    --primary-color-dark-90: color-mix(in srgb, var(--primary-color), black 90%);

    --secondary-color-light-10: color-mix(in srgb, var(--secondary-color), white 20%);
    --secondary-color-light-20: color-mix(in srgb, var(--secondary-color), white 20%);
    --secondary-color-light-30: color-mix(in srgb, var(--secondary-color), white 30%);
    --secondary-color-light-40: color-mix(in srgb, var(--secondary-color), white 40%);
    --secondary-color-light-50: color-mix(in srgb, var(--secondary-color), white 50%);
    --secondary-color-light-60: color-mix(in srgb, var(--secondary-color), white 60%);
    --secondary-color-light-70: color-mix(in srgb, var(--secondary-color), white 70%);
    --secondary-color-light-80: color-mix(in srgb, var(--secondary-color), white 80%);
    --secondary-color-light-90: color-mix(in srgb, var(--secondary-color), white 90%);

    --secondary-color-dark-10: color-mix(in srgb, var(--secondary-color), black 20%);
    --secondary-color-dark-20: color-mix(in srgb, var(--secondary-color), black 20%);
    --secondary-color-dark-30: color-mix(in srgb, var(--secondary-color), black 30%);
    --secondary-color-dark-40: color-mix(in srgb, var(--secondary-color), black 40%);
    --secondary-color-dark-50: color-mix(in srgb, var(--secondary-color), black 50%);
    --secondary-color-dark-60: color-mix(in srgb, var(--secondary-color), black 60%);
    --secondary-color-dark-70: color-mix(in srgb, var(--secondary-color), black 70%);
    --secondary-color-dark-80: color-mix(in srgb, var(--secondary-color), black 80%);
    --secondary-color-dark-90: color-mix(in srgb, var(--secondary-color), black 90%);

    --text-color: var(--font-color);
    --text-color-light: color-mix(in srgb, var(--text-color), white 30%);
    --text-color-dark: color-mix(in srgb, var(--text-color), black 30%);
    --primary-color-text: color-contrast(var(--primary-color) vs white, black);

    --background-color: var(--bg-color);
}