@casoon/dragonfly/core/color-mix.css

Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.

/**
 * Auto-generiert mit generateColorMixes.js
 * base/colors.css
 */

@layer color-mix {
  :root {
    /* blue */
    --blue-lightest: color-mix(in srgb, var(--color-blue-500) 20, var(--color-white));
    --blue-lighter: color-mix(in srgb, var(--color-blue-500) 40, var(--color-white));
    --blue-light: color-mix(in srgb, var(--color-blue-500) 70, var(--color-white));
    --blue: var(--color-blue-500);
    --blue-dark: color-mix(in srgb, var(--color-blue-500) 70, var(--color-black));
    --blue-darker: color-mix(in srgb, var(--color-blue-500) 40, var(--color-black));
    --blue-darkest: color-mix(in srgb, var(--color-blue-500) 20, var(--color-black));

    /* sky */
    --sky-lightest: color-mix(in srgb, var(--color-sky-500) 20, var(--color-white));
    --sky-lighter: color-mix(in srgb, var(--color-sky-500) 40, var(--color-white));
    --sky-light: color-mix(in srgb, var(--color-sky-500) 70, var(--color-white));
    --sky: var(--color-sky-500);
    --sky-dark: color-mix(in srgb, var(--color-sky-500) 70, var(--color-black));
    --sky-darker: color-mix(in srgb, var(--color-sky-500) 40, var(--color-black));
    --sky-darkest: color-mix(in srgb, var(--color-sky-500) 20, var(--color-black));

    /* cyan */
    --cyan-lightest: color-mix(in srgb, var(--color-cyan-500) 20, var(--color-white));
    --cyan-lighter: color-mix(in srgb, var(--color-cyan-500) 40, var(--color-white));
    --cyan-light: color-mix(in srgb, var(--color-cyan-500) 70, var(--color-white));
    --cyan: var(--color-cyan-500);
    --cyan-dark: color-mix(in srgb, var(--color-cyan-500) 70, var(--color-black));
    --cyan-darker: color-mix(in srgb, var(--color-cyan-500) 40, var(--color-black));
    --cyan-darkest: color-mix(in srgb, var(--color-cyan-500) 20, var(--color-black));

    /* mint */
    --mint-lightest: color-mix(in srgb, var(--color-mint-500) 20, var(--color-white));
    --mint-lighter: color-mix(in srgb, var(--color-mint-500) 40, var(--color-white));
    --mint-light: color-mix(in srgb, var(--color-mint-500) 70, var(--color-white));
    --mint: var(--color-mint-500);
    --mint-dark: color-mix(in srgb, var(--color-mint-500) 70, var(--color-black));
    --mint-darker: color-mix(in srgb, var(--color-mint-500) 40, var(--color-black));
    --mint-darkest: color-mix(in srgb, var(--color-mint-500) 20, var(--color-black));

    /* green */
    --green-lightest: color-mix(in srgb, var(--color-green-500) 20, var(--color-white));
    --green-lighter: color-mix(in srgb, var(--color-green-500) 40, var(--color-white));
    --green-light: color-mix(in srgb, var(--color-green-500) 70, var(--color-white));
    --green: var(--color-green-500);
    --green-dark: color-mix(in srgb, var(--color-green-500) 70, var(--color-black));
    --green-darker: color-mix(in srgb, var(--color-green-500) 40, var(--color-black));
    --green-darkest: color-mix(in srgb, var(--color-green-500) 20, var(--color-black));

    /* lime */
    --lime-lightest: color-mix(in srgb, var(--color-lime-500) 20, var(--color-white));
    --lime-lighter: color-mix(in srgb, var(--color-lime-500) 40, var(--color-white));
    --lime-light: color-mix(in srgb, var(--color-lime-500) 70, var(--color-white));
    --lime: var(--color-lime-500);
    --lime-dark: color-mix(in srgb, var(--color-lime-500) 70, var(--color-black));
    --lime-darker: color-mix(in srgb, var(--color-lime-500) 40, var(--color-black));
    --lime-darkest: color-mix(in srgb, var(--color-lime-500) 20, var(--color-black));

    /* yellow */
    --yellow-lightest: color-mix(in srgb, var(--color-yellow-500) 20, var(--color-white));
    --yellow-lighter: color-mix(in srgb, var(--color-yellow-500) 40, var(--color-white));
    --yellow-light: color-mix(in srgb, var(--color-yellow-500) 70, var(--color-white));
    --yellow: var(--color-yellow-500);
    --yellow-dark: color-mix(in srgb, var(--color-yellow-500) 70, var(--color-black));
    --yellow-darker: color-mix(in srgb, var(--color-yellow-500) 40, var(--color-black));
    --yellow-darkest: color-mix(in srgb, var(--color-yellow-500) 20, var(--color-black));

    /* gold */
    --gold-lightest: color-mix(in srgb, var(--color-gold-500) 20, var(--color-white));
    --gold-lighter: color-mix(in srgb, var(--color-gold-500) 40, var(--color-white));
    --gold-light: color-mix(in srgb, var(--color-gold-500) 70, var(--color-white));
    --gold: var(--color-gold-500);
    --gold-dark: color-mix(in srgb, var(--color-gold-500) 70, var(--color-black));
    --gold-darker: color-mix(in srgb, var(--color-gold-500) 40, var(--color-black));
    --gold-darkest: color-mix(in srgb, var(--color-gold-500) 20, var(--color-black));

    /* orange */
    --orange-lightest: color-mix(in srgb, var(--color-orange-500) 20, var(--color-white));
    --orange-lighter: color-mix(in srgb, var(--color-orange-500) 40, var(--color-white));
    --orange-light: color-mix(in srgb, var(--color-orange-500) 70, var(--color-white));
    --orange: var(--color-orange-500);
    --orange-dark: color-mix(in srgb, var(--color-orange-500) 70, var(--color-black));
    --orange-darker: color-mix(in srgb, var(--color-orange-500) 40, var(--color-black));
    --orange-darkest: color-mix(in srgb, var(--color-orange-500) 20, var(--color-black));

    /* coral */
    --coral-lightest: color-mix(in srgb, var(--color-coral-500) 20, var(--color-white));
    --coral-lighter: color-mix(in srgb, var(--color-coral-500) 40, var(--color-white));
    --coral-light: color-mix(in srgb, var(--color-coral-500) 70, var(--color-white));
    --coral: var(--color-coral-500);
    --coral-dark: color-mix(in srgb, var(--color-coral-500) 70, var(--color-black));
    --coral-darker: color-mix(in srgb, var(--color-coral-500) 40, var(--color-black));
    --coral-darkest: color-mix(in srgb, var(--color-coral-500) 20, var(--color-black));

    /* red */
    --red-lightest: color-mix(in srgb, var(--color-red-500) 20, var(--color-white));
    --red-lighter: color-mix(in srgb, var(--color-red-500) 40, var(--color-white));
    --red-light: color-mix(in srgb, var(--color-red-500) 70, var(--color-white));
    --red: var(--color-red-500);
    --red-dark: color-mix(in srgb, var(--color-red-500) 70, var(--color-black));
    --red-darker: color-mix(in srgb, var(--color-red-500) 40, var(--color-black));
    --red-darkest: color-mix(in srgb, var(--color-red-500) 20, var(--color-black));

    /* pink */
    --pink-lightest: color-mix(in srgb, var(--color-pink-500) 20, var(--color-white));
    --pink-lighter: color-mix(in srgb, var(--color-pink-500) 40, var(--color-white));
    --pink-light: color-mix(in srgb, var(--color-pink-500) 70, var(--color-white));
    --pink: var(--color-pink-500);
    --pink-dark: color-mix(in srgb, var(--color-pink-500) 70, var(--color-black));
    --pink-darker: color-mix(in srgb, var(--color-pink-500) 40, var(--color-black));
    --pink-darkest: color-mix(in srgb, var(--color-pink-500) 20, var(--color-black));

    /* rose */
    --rose-lightest: color-mix(in srgb, var(--color-rose-500) 20, var(--color-white));
    --rose-lighter: color-mix(in srgb, var(--color-rose-500) 40, var(--color-white));
    --rose-light: color-mix(in srgb, var(--color-rose-500) 70, var(--color-white));
    --rose: var(--color-rose-500);
    --rose-dark: color-mix(in srgb, var(--color-rose-500) 70, var(--color-black));
    --rose-darker: color-mix(in srgb, var(--color-rose-500) 40, var(--color-black));
    --rose-darkest: color-mix(in srgb, var(--color-rose-500) 20, var(--color-black));

    /* purple */
    --purple-lightest: color-mix(in srgb, var(--color-purple-500) 20, var(--color-white));
    --purple-lighter: color-mix(in srgb, var(--color-purple-500) 40, var(--color-white));
    --purple-light: color-mix(in srgb, var(--color-purple-500) 70, var(--color-white));
    --purple: var(--color-purple-500);
    --purple-dark: color-mix(in srgb, var(--color-purple-500) 70, var(--color-black));
    --purple-darker: color-mix(in srgb, var(--color-purple-500) 40, var(--color-black));
    --purple-darkest: color-mix(in srgb, var(--color-purple-500) 20, var(--color-black));

    /* indigo */
    --indigo-lightest: color-mix(in srgb, var(--color-indigo-500) 20, var(--color-white));
    --indigo-lighter: color-mix(in srgb, var(--color-indigo-500) 40, var(--color-white));
    --indigo-light: color-mix(in srgb, var(--color-indigo-500) 70, var(--color-white));
    --indigo: var(--color-indigo-500);
    --indigo-dark: color-mix(in srgb, var(--color-indigo-500) 70, var(--color-black));
    --indigo-darker: color-mix(in srgb, var(--color-indigo-500) 40, var(--color-black));
    --indigo-darkest: color-mix(in srgb, var(--color-indigo-500) 20, var(--color-black));

    /* gray */
    --gray-lightest: color-mix(in srgb, var(--color-gray-500) 20, var(--color-white));
    --gray-lighter: color-mix(in srgb, var(--color-gray-500) 40, var(--color-white));
    --gray-light: color-mix(in srgb, var(--color-gray-500) 70, var(--color-white));
    --gray: var(--color-gray-500);
    --gray-dark: color-mix(in srgb, var(--color-gray-500) 70, var(--color-black));
    --gray-darker: color-mix(in srgb, var(--color-gray-500) 40, var(--color-black));
    --gray-darkest: color-mix(in srgb, var(--color-gray-500) 20, var(--color-black));

    /* warm-gray */
    --warm-gray-lightest: color-mix(in srgb, var(--color-warm-gray-500) 20, var(--color-white));
    --warm-gray-lighter: color-mix(in srgb, var(--color-warm-gray-500) 40, var(--color-white));
    --warm-gray-light: color-mix(in srgb, var(--color-warm-gray-500) 70, var(--color-white));
    --warm-gray: var(--color-warm-gray-500);
    --warm-gray-dark: color-mix(in srgb, var(--color-warm-gray-500) 70, var(--color-black));
    --warm-gray-darker: color-mix(in srgb, var(--color-warm-gray-500) 40, var(--color-black));
    --warm-gray-darkest: color-mix(in srgb, var(--color-warm-gray-500) 20, var(--color-black));

    /* cool-gray */
    --cool-gray-lightest: color-mix(in srgb, var(--color-cool-gray-500) 20, var(--color-white));
    --cool-gray-lighter: color-mix(in srgb, var(--color-cool-gray-500) 40, var(--color-white));
    --cool-gray-light: color-mix(in srgb, var(--color-cool-gray-500) 70, var(--color-white));
    --cool-gray: var(--color-cool-gray-500);
    --cool-gray-dark: color-mix(in srgb, var(--color-cool-gray-500) 70, var(--color-black));
    --cool-gray-darker: color-mix(in srgb, var(--color-cool-gray-500) 40, var(--color-black));
    --cool-gray-darkest: color-mix(in srgb, var(--color-cool-gray-500) 20, var(--color-black));

    /* azure */
    --azure-lightest: color-mix(in srgb, var(--color-azure-500) 20, var(--color-white));
    --azure-lighter: color-mix(in srgb, var(--color-azure-500) 40, var(--color-white));
    --azure-light: color-mix(in srgb, var(--color-azure-500) 70, var(--color-white));
    --azure: var(--color-azure-500);
    --azure-dark: color-mix(in srgb, var(--color-azure-500) 70, var(--color-black));
    --azure-darker: color-mix(in srgb, var(--color-azure-500) 40, var(--color-black));
    --azure-darkest: color-mix(in srgb, var(--color-azure-500) 20, var(--color-black));

    /* teal */
    --teal-lightest: color-mix(in srgb, var(--color-teal-500) 20, var(--color-white));
    --teal-lighter: color-mix(in srgb, var(--color-teal-500) 40, var(--color-white));
    --teal-light: color-mix(in srgb, var(--color-teal-500) 70, var(--color-white));
    --teal: var(--color-teal-500);
    --teal-dark: color-mix(in srgb, var(--color-teal-500) 70, var(--color-black));
    --teal-darker: color-mix(in srgb, var(--color-teal-500) 40, var(--color-black));
    --teal-darkest: color-mix(in srgb, var(--color-teal-500) 20, var(--color-black));

    /* emerald */
    --emerald-lightest: color-mix(in srgb, var(--color-emerald-500) 20, var(--color-white));
    --emerald-lighter: color-mix(in srgb, var(--color-emerald-500) 40, var(--color-white));
    --emerald-light: color-mix(in srgb, var(--color-emerald-500) 70, var(--color-white));
    --emerald: var(--color-emerald-500);
    --emerald-dark: color-mix(in srgb, var(--color-emerald-500) 70, var(--color-black));
    --emerald-darker: color-mix(in srgb, var(--color-emerald-500) 40, var(--color-black));
    --emerald-darkest: color-mix(in srgb, var(--color-emerald-500) 20, var(--color-black));

    /* olive */
    --olive-lightest: color-mix(in srgb, var(--color-olive-500) 20, var(--color-white));
    --olive-lighter: color-mix(in srgb, var(--color-olive-500) 40, var(--color-white));
    --olive-light: color-mix(in srgb, var(--color-olive-500) 70, var(--color-white));
    --olive: var(--color-olive-500);
    --olive-dark: color-mix(in srgb, var(--color-olive-500) 70, var(--color-black));
    --olive-darker: color-mix(in srgb, var(--color-olive-500) 40, var(--color-black));
    --olive-darkest: color-mix(in srgb, var(--color-olive-500) 20, var(--color-black));

    /* amber */
    --amber-lightest: color-mix(in srgb, var(--color-amber-500) 20, var(--color-white));
    --amber-lighter: color-mix(in srgb, var(--color-amber-500) 40, var(--color-white));
    --amber-light: color-mix(in srgb, var(--color-amber-500) 70, var(--color-white));
    --amber: var(--color-amber-500);
    --amber-dark: color-mix(in srgb, var(--color-amber-500) 70, var(--color-black));
    --amber-darker: color-mix(in srgb, var(--color-amber-500) 40, var(--color-black));
    --amber-darkest: color-mix(in srgb, var(--color-amber-500) 20, var(--color-black));

    /* copper */
    --copper-lightest: color-mix(in srgb, var(--color-copper-500) 20, var(--color-white));
    --copper-lighter: color-mix(in srgb, var(--color-copper-500) 40, var(--color-white));
    --copper-light: color-mix(in srgb, var(--color-copper-500) 70, var(--color-white));
    --copper: var(--color-copper-500);
    --copper-dark: color-mix(in srgb, var(--color-copper-500) 70, var(--color-black));
    --copper-darker: color-mix(in srgb, var(--color-copper-500) 40, var(--color-black));
    --copper-darkest: color-mix(in srgb, var(--color-copper-500) 20, var(--color-black));

    /* cherry */
    --cherry-lightest: color-mix(in srgb, var(--color-cherry-500) 20, var(--color-white));
    --cherry-lighter: color-mix(in srgb, var(--color-cherry-500) 40, var(--color-white));
    --cherry-light: color-mix(in srgb, var(--color-cherry-500) 70, var(--color-white));
    --cherry: var(--color-cherry-500);
    --cherry-dark: color-mix(in srgb, var(--color-cherry-500) 70, var(--color-black));
    --cherry-darker: color-mix(in srgb, var(--color-cherry-500) 40, var(--color-black));
    --cherry-darkest: color-mix(in srgb, var(--color-cherry-500) 20, var(--color-black));

    /* magenta */
    --magenta-lightest: color-mix(in srgb, var(--color-magenta-500) 20, var(--color-white));
    --magenta-lighter: color-mix(in srgb, var(--color-magenta-500) 40, var(--color-white));
    --magenta-light: color-mix(in srgb, var(--color-magenta-500) 70, var(--color-white));
    --magenta: var(--color-magenta-500);
    --magenta-dark: color-mix(in srgb, var(--color-magenta-500) 70, var(--color-black));
    --magenta-darker: color-mix(in srgb, var(--color-magenta-500) 40, var(--color-black));
    --magenta-darkest: color-mix(in srgb, var(--color-magenta-500) 20, var(--color-black));

    /* lavender */
    --lavender-lightest: color-mix(in srgb, var(--color-lavender-500) 20, var(--color-white));
    --lavender-lighter: color-mix(in srgb, var(--color-lavender-500) 40, var(--color-white));
    --lavender-light: color-mix(in srgb, var(--color-lavender-500) 70, var(--color-white));
    --lavender: var(--color-lavender-500);
    --lavender-dark: color-mix(in srgb, var(--color-lavender-500) 70, var(--color-black));
    --lavender-darker: color-mix(in srgb, var(--color-lavender-500) 40, var(--color-black));
    --lavender-darkest: color-mix(in srgb, var(--color-lavender-500) 20, var(--color-black));

    /* bronze */
    --bronze-lightest: color-mix(in srgb, var(--color-bronze-500) 20, var(--color-white));
    --bronze-lighter: color-mix(in srgb, var(--color-bronze-500) 40, var(--color-white));
    --bronze-light: color-mix(in srgb, var(--color-bronze-500) 70, var(--color-white));
    --bronze: var(--color-bronze-500);
    --bronze-dark: color-mix(in srgb, var(--color-bronze-500) 70, var(--color-black));
    --bronze-darker: color-mix(in srgb, var(--color-bronze-500) 40, var(--color-black));
    --bronze-darkest: color-mix(in srgb, var(--color-bronze-500) 20, var(--color-black));

    /* pearl */
    --pearl-lightest: color-mix(in srgb, var(--color-pearl-500) 20, var(--color-white));
    --pearl-lighter: color-mix(in srgb, var(--color-pearl-500) 40, var(--color-white));
    --pearl-light: color-mix(in srgb, var(--color-pearl-500) 70, var(--color-white));
    --pearl: var(--color-pearl-500);
    --pearl-dark: color-mix(in srgb, var(--color-pearl-500) 70, var(--color-black));
    --pearl-darker: color-mix(in srgb, var(--color-pearl-500) 40, var(--color-black));
    --pearl-darkest: color-mix(in srgb, var(--color-pearl-500) 20, var(--color-black));

    /* champagne */
    --champagne-lightest: color-mix(in srgb, var(--color-champagne-500) 20, var(--color-white));
    --champagne-lighter: color-mix(in srgb, var(--color-champagne-500) 40, var(--color-white));
    --champagne-light: color-mix(in srgb, var(--color-champagne-500) 70, var(--color-white));
    --champagne: var(--color-champagne-500);
    --champagne-dark: color-mix(in srgb, var(--color-champagne-500) 70, var(--color-black));
    --champagne-darker: color-mix(in srgb, var(--color-champagne-500) 40, var(--color-black));
    --champagne-darkest: color-mix(in srgb, var(--color-champagne-500) 20, var(--color-black));

    /* taupe */
    --taupe-lightest: color-mix(in srgb, var(--color-taupe-500) 20, var(--color-white));
    --taupe-lighter: color-mix(in srgb, var(--color-taupe-500) 40, var(--color-white));
    --taupe-light: color-mix(in srgb, var(--color-taupe-500) 70, var(--color-white));
    --taupe: var(--color-taupe-500);
    --taupe-dark: color-mix(in srgb, var(--color-taupe-500) 70, var(--color-black));
    --taupe-darker: color-mix(in srgb, var(--color-taupe-500) 40, var(--color-black));
    --taupe-darkest: color-mix(in srgb, var(--color-taupe-500) 20, var(--color-black));

    /* beige */
    --beige-lightest: color-mix(in srgb, var(--color-beige-500) 20, var(--color-white));
    --beige-lighter: color-mix(in srgb, var(--color-beige-500) 40, var(--color-white));
    --beige-light: color-mix(in srgb, var(--color-beige-500) 70, var(--color-white));
    --beige: var(--color-beige-500);
    --beige-dark: color-mix(in srgb, var(--color-beige-500) 70, var(--color-black));
    --beige-darker: color-mix(in srgb, var(--color-beige-500) 40, var(--color-black));
    --beige-darkest: color-mix(in srgb, var(--color-beige-500) 20, var(--color-black));

    /* khaki */
    --khaki-lightest: color-mix(in srgb, var(--color-khaki-500) 20, var(--color-white));
    --khaki-lighter: color-mix(in srgb, var(--color-khaki-500) 40, var(--color-white));
    --khaki-light: color-mix(in srgb, var(--color-khaki-500) 70, var(--color-white));
    --khaki: var(--color-khaki-500);
    --khaki-dark: color-mix(in srgb, var(--color-khaki-500) 70, var(--color-black));
    --khaki-darker: color-mix(in srgb, var(--color-khaki-500) 40, var(--color-black));
    --khaki-darkest: color-mix(in srgb, var(--color-khaki-500) 20, var(--color-black));

    /* terracotta */
    --terracotta-lightest: color-mix(in srgb, var(--color-terracotta-500) 20, var(--color-white));
    --terracotta-lighter: color-mix(in srgb, var(--color-terracotta-500) 40, var(--color-white));
    --terracotta-light: color-mix(in srgb, var(--color-terracotta-500) 70, var(--color-white));
    --terracotta: var(--color-terracotta-500);
    --terracotta-dark: color-mix(in srgb, var(--color-terracotta-500) 70, var(--color-black));
    --terracotta-darker: color-mix(in srgb, var(--color-terracotta-500) 40, var(--color-black));
    --terracotta-darkest: color-mix(in srgb, var(--color-terracotta-500) 20, var(--color-black));

    /* burgundy */
    --burgundy-lightest: color-mix(in srgb, var(--color-burgundy-500) 20, var(--color-white));
    --burgundy-lighter: color-mix(in srgb, var(--color-burgundy-500) 40, var(--color-white));
    --burgundy-light: color-mix(in srgb, var(--color-burgundy-500) 70, var(--color-white));
    --burgundy: var(--color-burgundy-500);
    --burgundy-dark: color-mix(in srgb, var(--color-burgundy-500) 70, var(--color-black));
    --burgundy-darker: color-mix(in srgb, var(--color-burgundy-500) 40, var(--color-black));
    --burgundy-darkest: color-mix(in srgb, var(--color-burgundy-500) 20, var(--color-black));

    /* silver */
    --silver-lightest: color-mix(in srgb, var(--color-silver-500) 20, var(--color-white));
    --silver-lighter: color-mix(in srgb, var(--color-silver-500) 40, var(--color-white));
    --silver-light: color-mix(in srgb, var(--color-silver-500) 70, var(--color-white));
    --silver: var(--color-silver-500);
    --silver-dark: color-mix(in srgb, var(--color-silver-500) 70, var(--color-black));
    --silver-darker: color-mix(in srgb, var(--color-silver-500) 40, var(--color-black));
    --silver-darkest: color-mix(in srgb, var(--color-silver-500) 20, var(--color-black));

    /* platinum */
    --platinum-lightest: color-mix(in srgb, var(--color-platinum-500) 20, var(--color-white));
    --platinum-lighter: color-mix(in srgb, var(--color-platinum-500) 40, var(--color-white));
    --platinum-light: color-mix(in srgb, var(--color-platinum-500) 70, var(--color-white));
    --platinum: var(--color-platinum-500);
    --platinum-dark: color-mix(in srgb, var(--color-platinum-500) 70, var(--color-black));
    --platinum-darker: color-mix(in srgb, var(--color-platinum-500) 40, var(--color-black));
    --platinum-darkest: color-mix(in srgb, var(--color-platinum-500) 20, var(--color-black));

    /* graphite */
    --graphite-lightest: color-mix(in srgb, var(--color-graphite-500) 20, var(--color-white));
    --graphite-lighter: color-mix(in srgb, var(--color-graphite-500) 40, var(--color-white));
    --graphite-light: color-mix(in srgb, var(--color-graphite-500) 70, var(--color-white));
    --graphite: var(--color-graphite-500);
    --graphite-dark: color-mix(in srgb, var(--color-graphite-500) 70, var(--color-black));
    --graphite-darker: color-mix(in srgb, var(--color-graphite-500) 40, var(--color-black));
    --graphite-darkest: color-mix(in srgb, var(--color-graphite-500) 20, var(--color-black));

    /* moss */
    --moss-lightest: color-mix(in srgb, var(--color-moss-500) 20, var(--color-white));
    --moss-lighter: color-mix(in srgb, var(--color-moss-500) 40, var(--color-white));
    --moss-light: color-mix(in srgb, var(--color-moss-500) 70, var(--color-white));
    --moss: var(--color-moss-500);
    --moss-dark: color-mix(in srgb, var(--color-moss-500) 70, var(--color-black));
    --moss-darker: color-mix(in srgb, var(--color-moss-500) 40, var(--color-black));
    --moss-darkest: color-mix(in srgb, var(--color-moss-500) 20, var(--color-black));

    /* jade */
    --jade-lightest: color-mix(in srgb, var(--color-jade-500) 20, var(--color-white));
    --jade-lighter: color-mix(in srgb, var(--color-jade-500) 40, var(--color-white));
    --jade-light: color-mix(in srgb, var(--color-jade-500) 70, var(--color-white));
    --jade: var(--color-jade-500);
    --jade-dark: color-mix(in srgb, var(--color-jade-500) 70, var(--color-black));
    --jade-darker: color-mix(in srgb, var(--color-jade-500) 40, var(--color-black));
    --jade-darkest: color-mix(in srgb, var(--color-jade-500) 20, var(--color-black));

    /* sapphire */
    --sapphire-lightest: color-mix(in srgb, var(--color-sapphire-500) 20, var(--color-white));
    --sapphire-lighter: color-mix(in srgb, var(--color-sapphire-500) 40, var(--color-white));
    --sapphire-light: color-mix(in srgb, var(--color-sapphire-500) 70, var(--color-white));
    --sapphire: var(--color-sapphire-500);
    --sapphire-dark: color-mix(in srgb, var(--color-sapphire-500) 70, var(--color-black));
    --sapphire-darker: color-mix(in srgb, var(--color-sapphire-500) 40, var(--color-black));
    --sapphire-darkest: color-mix(in srgb, var(--color-sapphire-500) 20, var(--color-black));

    /* ruby */
    --ruby-lightest: color-mix(in srgb, var(--color-ruby-500) 20, var(--color-white));
    --ruby-lighter: color-mix(in srgb, var(--color-ruby-500) 40, var(--color-white));
    --ruby-light: color-mix(in srgb, var(--color-ruby-500) 70, var(--color-white));
    --ruby: var(--color-ruby-500);
    --ruby-dark: color-mix(in srgb, var(--color-ruby-500) 70, var(--color-black));
    --ruby-darker: color-mix(in srgb, var(--color-ruby-500) 40, var(--color-black));
    --ruby-darkest: color-mix(in srgb, var(--color-ruby-500) 20, var(--color-black));

    /* amethyst */
    --amethyst-lightest: color-mix(in srgb, var(--color-amethyst-500) 20, var(--color-white));
    --amethyst-lighter: color-mix(in srgb, var(--color-amethyst-500) 40, var(--color-white));
    --amethyst-light: color-mix(in srgb, var(--color-amethyst-500) 70, var(--color-white));
    --amethyst: var(--color-amethyst-500);
    --amethyst-dark: color-mix(in srgb, var(--color-amethyst-500) 70, var(--color-black));
    --amethyst-darker: color-mix(in srgb, var(--color-amethyst-500) 40, var(--color-black));
    --amethyst-darkest: color-mix(in srgb, var(--color-amethyst-500) 20, var(--color-black));

    /* topaz */
    --topaz-lightest: color-mix(in srgb, var(--color-topaz-500) 20, var(--color-white));
    --topaz-lighter: color-mix(in srgb, var(--color-topaz-500) 40, var(--color-white));
    --topaz-light: color-mix(in srgb, var(--color-topaz-500) 70, var(--color-white));
    --topaz: var(--color-topaz-500);
    --topaz-dark: color-mix(in srgb, var(--color-topaz-500) 70, var(--color-black));
    --topaz-darker: color-mix(in srgb, var(--color-topaz-500) 40, var(--color-black));
    --topaz-darkest: color-mix(in srgb, var(--color-topaz-500) 20, var(--color-black));

    /* citrine */
    --citrine-lightest: color-mix(in srgb, var(--color-citrine-500) 20, var(--color-white));
    --citrine-lighter: color-mix(in srgb, var(--color-citrine-500) 40, var(--color-white));
    --citrine-light: color-mix(in srgb, var(--color-citrine-500) 70, var(--color-white));
    --citrine: var(--color-citrine-500);
    --citrine-dark: color-mix(in srgb, var(--color-citrine-500) 70, var(--color-black));
    --citrine-darker: color-mix(in srgb, var(--color-citrine-500) 40, var(--color-black));
    --citrine-darkest: color-mix(in srgb, var(--color-citrine-500) 20, var(--color-black));

    /* peridot */
    --peridot-lightest: color-mix(in srgb, var(--color-peridot-500) 20, var(--color-white));
    --peridot-lighter: color-mix(in srgb, var(--color-peridot-500) 40, var(--color-white));
    --peridot-light: color-mix(in srgb, var(--color-peridot-500) 70, var(--color-white));
    --peridot: var(--color-peridot-500);
    --peridot-dark: color-mix(in srgb, var(--color-peridot-500) 70, var(--color-black));
    --peridot-darker: color-mix(in srgb, var(--color-peridot-500) 40, var(--color-black));
    --peridot-darkest: color-mix(in srgb, var(--color-peridot-500) 20, var(--color-black));

    /* opal */
    --opal-lightest: color-mix(in srgb, var(--color-opal-500) 20, var(--color-white));
    --opal-lighter: color-mix(in srgb, var(--color-opal-500) 40, var(--color-white));
    --opal-light: color-mix(in srgb, var(--color-opal-500) 70, var(--color-white));
    --opal: var(--color-opal-500);
    --opal-dark: color-mix(in srgb, var(--color-opal-500) 70, var(--color-black));
    --opal-darker: color-mix(in srgb, var(--color-opal-500) 40, var(--color-black));
    --opal-darkest: color-mix(in srgb, var(--color-opal-500) 20, var(--color-black));

    /* garnet */
    --garnet-lightest: color-mix(in srgb, var(--color-garnet-500) 20, var(--color-white));
    --garnet-lighter: color-mix(in srgb, var(--color-garnet-500) 40, var(--color-white));
    --garnet-light: color-mix(in srgb, var(--color-garnet-500) 70, var(--color-white));
    --garnet: var(--color-garnet-500);
    --garnet-dark: color-mix(in srgb, var(--color-garnet-500) 70, var(--color-black));
    --garnet-darker: color-mix(in srgb, var(--color-garnet-500) 40, var(--color-black));
    --garnet-darkest: color-mix(in srgb, var(--color-garnet-500) 20, var(--color-black));

    /* onyx */
    --onyx-lightest: color-mix(in srgb, var(--color-onyx-500) 20, var(--color-white));
    --onyx-lighter: color-mix(in srgb, var(--color-onyx-500) 40, var(--color-white));
    --onyx-light: color-mix(in srgb, var(--color-onyx-500) 70, var(--color-white));
    --onyx: var(--color-onyx-500);
    --onyx-dark: color-mix(in srgb, var(--color-onyx-500) 70, var(--color-black));
    --onyx-darker: color-mix(in srgb, var(--color-onyx-500) 40, var(--color-black));
    --onyx-darkest: color-mix(in srgb, var(--color-onyx-500) 20, var(--color-black));

    /* malachite */
    --malachite-lightest: color-mix(in srgb, var(--color-malachite-500) 20, var(--color-white));
    --malachite-lighter: color-mix(in srgb, var(--color-malachite-500) 40, var(--color-white));
    --malachite-light: color-mix(in srgb, var(--color-malachite-500) 70, var(--color-white));
    --malachite: var(--color-malachite-500);
    --malachite-dark: color-mix(in srgb, var(--color-malachite-500) 70, var(--color-black));
    --malachite-darker: color-mix(in srgb, var(--color-malachite-500) 40, var(--color-black));
    --malachite-darkest: color-mix(in srgb, var(--color-malachite-500) 20, var(--color-black));

    /* lapis */
    --lapis-lightest: color-mix(in srgb, var(--color-lapis-500) 20, var(--color-white));
    --lapis-lighter: color-mix(in srgb, var(--color-lapis-500) 40, var(--color-white));
    --lapis-light: color-mix(in srgb, var(--color-lapis-500) 70, var(--color-white));
    --lapis: var(--color-lapis-500);
    --lapis-dark: color-mix(in srgb, var(--color-lapis-500) 70, var(--color-black));
    --lapis-darker: color-mix(in srgb, var(--color-lapis-500) 40, var(--color-black));
    --lapis-darkest: color-mix(in srgb, var(--color-lapis-500) 20, var(--color-black));

    /* turquoise */
    --turquoise-lightest: color-mix(in srgb, var(--color-turquoise-500) 20, var(--color-white));
    --turquoise-lighter: color-mix(in srgb, var(--color-turquoise-500) 40, var(--color-white));
    --turquoise-light: color-mix(in srgb, var(--color-turquoise-500) 70, var(--color-white));
    --turquoise: var(--color-turquoise-500);
    --turquoise-dark: color-mix(in srgb, var(--color-turquoise-500) 70, var(--color-black));
    --turquoise-darker: color-mix(in srgb, var(--color-turquoise-500) 40, var(--color-black));
    --turquoise-darkest: color-mix(in srgb, var(--color-turquoise-500) 20, var(--color-black));

    /* coral */
    --coral-lightest: color-mix(in srgb, var(--color-coral-500) 20, var(--color-white));
    --coral-lighter: color-mix(in srgb, var(--color-coral-500) 40, var(--color-white));
    --coral-light: color-mix(in srgb, var(--color-coral-500) 70, var(--color-white));
    --coral: var(--color-coral-500);
    --coral-dark: color-mix(in srgb, var(--color-coral-500) 70, var(--color-black));
    --coral-darker: color-mix(in srgb, var(--color-coral-500) 40, var(--color-black));
    --coral-darkest: color-mix(in srgb, var(--color-coral-500) 20, var(--color-black));

    /* mother-of-pearl */
    --mother-of-pearl-lightest: color-mix(in srgb, var(--color-mother-of-pearl-500) 20, var(--color-white));
    --mother-of-pearl-lighter: color-mix(in srgb, var(--color-mother-of-pearl-500) 40, var(--color-white));
    --mother-of-pearl-light: color-mix(in srgb, var(--color-mother-of-pearl-500) 70, var(--color-white));
    --mother-of-pearl: var(--color-mother-of-pearl-500);
    --mother-of-pearl-dark: color-mix(in srgb, var(--color-mother-of-pearl-500) 70, var(--color-black));
    --mother-of-pearl-darker: color-mix(in srgb, var(--color-mother-of-pearl-500) 40, var(--color-black));
    --mother-of-pearl-darkest: color-mix(in srgb, var(--color-mother-of-pearl-500) 20, var(--color-black));

    /* obsidian */
    --obsidian-lightest: color-mix(in srgb, var(--color-obsidian-500) 20, var(--color-white));
    --obsidian-lighter: color-mix(in srgb, var(--color-obsidian-500) 40, var(--color-white));
    --obsidian-light: color-mix(in srgb, var(--color-obsidian-500) 70, var(--color-white));
    --obsidian: var(--color-obsidian-500);
    --obsidian-dark: color-mix(in srgb, var(--color-obsidian-500) 70, var(--color-black));
    --obsidian-darker: color-mix(in srgb, var(--color-obsidian-500) 40, var(--color-black));
    --obsidian-darkest: color-mix(in srgb, var(--color-obsidian-500) 20, var(--color-black));

    /* jadeite */
    --jadeite-lightest: color-mix(in srgb, var(--color-jadeite-500) 20, var(--color-white));
    --jadeite-lighter: color-mix(in srgb, var(--color-jadeite-500) 40, var(--color-white));
    --jadeite-light: color-mix(in srgb, var(--color-jadeite-500) 70, var(--color-white));
    --jadeite: var(--color-jadeite-500);
    --jadeite-dark: color-mix(in srgb, var(--color-jadeite-500) 70, var(--color-black));
    --jadeite-darker: color-mix(in srgb, var(--color-jadeite-500) 40, var(--color-black));
    --jadeite-darkest: color-mix(in srgb, var(--color-jadeite-500) 20, var(--color-black));

    /* emerald */
    --emerald-lightest: color-mix(in srgb, var(--color-emerald-500) 20, var(--color-white));
    --emerald-lighter: color-mix(in srgb, var(--color-emerald-500) 40, var(--color-white));
    --emerald-light: color-mix(in srgb, var(--color-emerald-500) 70, var(--color-white));
    --emerald: var(--color-emerald-500);
    --emerald-dark: color-mix(in srgb, var(--color-emerald-500) 70, var(--color-black));
    --emerald-darker: color-mix(in srgb, var(--color-emerald-500) 40, var(--color-black));
    --emerald-darkest: color-mix(in srgb, var(--color-emerald-500) 20, var(--color-black));

    /* aquamarine */
    --aquamarine-lightest: color-mix(in srgb, var(--color-aquamarine-500) 20, var(--color-white));
    --aquamarine-lighter: color-mix(in srgb, var(--color-aquamarine-500) 40, var(--color-white));
    --aquamarine-light: color-mix(in srgb, var(--color-aquamarine-500) 70, var(--color-white));
    --aquamarine: var(--color-aquamarine-500);
    --aquamarine-dark: color-mix(in srgb, var(--color-aquamarine-500) 70, var(--color-black));
    --aquamarine-darker: color-mix(in srgb, var(--color-aquamarine-500) 40, var(--color-black));
    --aquamarine-darkest: color-mix(in srgb, var(--color-aquamarine-500) 20, var(--color-black));

    /* topaz */
    --topaz-lightest: color-mix(in srgb, var(--color-topaz-500) 20, var(--color-white));
    --topaz-lighter: color-mix(in srgb, var(--color-topaz-500) 40, var(--color-white));
    --topaz-light: color-mix(in srgb, var(--color-topaz-500) 70, var(--color-white));
    --topaz: var(--color-topaz-500);
    --topaz-dark: color-mix(in srgb, var(--color-topaz-500) 70, var(--color-black));
    --topaz-darker: color-mix(in srgb, var(--color-topaz-500) 40, var(--color-black));
    --topaz-darkest: color-mix(in srgb, var(--color-topaz-500) 20, var(--color-black));

    /* citrine */
    --citrine-lightest: color-mix(in srgb, var(--color-citrine-500) 20, var(--color-white));
    --citrine-lighter: color-mix(in srgb, var(--color-citrine-500) 40, var(--color-white));
    --citrine-light: color-mix(in srgb, var(--color-citrine-500) 70, var(--color-white));
    --citrine: var(--color-citrine-500);
    --citrine-dark: color-mix(in srgb, var(--color-citrine-500) 70, var(--color-black));
    --citrine-darker: color-mix(in srgb, var(--color-citrine-500) 40, var(--color-black));
    --citrine-darkest: color-mix(in srgb, var(--color-citrine-500) 20, var(--color-black));

    /* peridot */
    --peridot-lightest: color-mix(in srgb, var(--color-peridot-500) 20, var(--color-white));
    --peridot-lighter: color-mix(in srgb, var(--color-peridot-500) 40, var(--color-white));
    --peridot-light: color-mix(in srgb, var(--color-peridot-500) 70, var(--color-white));
    --peridot: var(--color-peridot-500);
    --peridot-dark: color-mix(in srgb, var(--color-peridot-500) 70, var(--color-black));
    --peridot-darker: color-mix(in srgb, var(--color-peridot-500) 40, var(--color-black));
    --peridot-darkest: color-mix(in srgb, var(--color-peridot-500) 20, var(--color-black));

    /* opal */
    --opal-lightest: color-mix(in srgb, var(--color-opal-500) 20, var(--color-white));
    --opal-lighter: color-mix(in srgb, var(--color-opal-500) 40, var(--color-white));
    --opal-light: color-mix(in srgb, var(--color-opal-500) 70, var(--color-white));
    --opal: var(--color-opal-500);
    --opal-dark: color-mix(in srgb, var(--color-opal-500) 70, var(--color-black));
    --opal-darker: color-mix(in srgb, var(--color-opal-500) 40, var(--color-black));
    --opal-darkest: color-mix(in srgb, var(--color-opal-500) 20, var(--color-black));

    /* moonstone */
    --moonstone-lightest: color-mix(in srgb, var(--color-moonstone-500) 20, var(--color-white));
    --moonstone-lighter: color-mix(in srgb, var(--color-moonstone-500) 40, var(--color-white));
    --moonstone-light: color-mix(in srgb, var(--color-moonstone-500) 70, var(--color-white));
    --moonstone: var(--color-moonstone-500);
    --moonstone-dark: color-mix(in srgb, var(--color-moonstone-500) 70, var(--color-black));
    --moonstone-darker: color-mix(in srgb, var(--color-moonstone-500) 40, var(--color-black));
    --moonstone-darkest: color-mix(in srgb, var(--color-moonstone-500) 20, var(--color-black));

    /* labradorite */
    --labradorite-lightest: color-mix(in srgb, var(--color-labradorite-500) 20, var(--color-white));
    --labradorite-lighter: color-mix(in srgb, var(--color-labradorite-500) 40, var(--color-white));
    --labradorite-light: color-mix(in srgb, var(--color-labradorite-500) 70, var(--color-white));
    --labradorite: var(--color-labradorite-500);
    --labradorite-dark: color-mix(in srgb, var(--color-labradorite-500) 70, var(--color-black));
    --labradorite-darker: color-mix(in srgb, var(--color-labradorite-500) 40, var(--color-black));
    --labradorite-darkest: color-mix(in srgb, var(--color-labradorite-500) 20, var(--color-black));

    /* fluorite */
    --fluorite-lightest: color-mix(in srgb, var(--color-fluorite-500) 20, var(--color-white));
    --fluorite-lighter: color-mix(in srgb, var(--color-fluorite-500) 40, var(--color-white));
    --fluorite-light: color-mix(in srgb, var(--color-fluorite-500) 70, var(--color-white));
    --fluorite: var(--color-fluorite-500);
    --fluorite-dark: color-mix(in srgb, var(--color-fluorite-500) 70, var(--color-black));
    --fluorite-darker: color-mix(in srgb, var(--color-fluorite-500) 40, var(--color-black));
    --fluorite-darkest: color-mix(in srgb, var(--color-fluorite-500) 20, var(--color-black));

    /* pastel-pink */
    --pastel-pink-lightest: color-mix(in srgb, var(--color-pastel-pink-500) 20, var(--color-white));
    --pastel-pink-lighter: color-mix(in srgb, var(--color-pastel-pink-500) 40, var(--color-white));
    --pastel-pink-light: color-mix(in srgb, var(--color-pastel-pink-500) 70, var(--color-white));
    --pastel-pink: var(--color-pastel-pink-500);
    --pastel-pink-dark: color-mix(in srgb, var(--color-pastel-pink-500) 70, var(--color-black));
    --pastel-pink-darker: color-mix(in srgb, var(--color-pastel-pink-500) 40, var(--color-black));
    --pastel-pink-darkest: color-mix(in srgb, var(--color-pastel-pink-500) 20, var(--color-black));

    /* pastel-blue */
    --pastel-blue-lightest: color-mix(in srgb, var(--color-pastel-blue-500) 20, var(--color-white));
    --pastel-blue-lighter: color-mix(in srgb, var(--color-pastel-blue-500) 40, var(--color-white));
    --pastel-blue-light: color-mix(in srgb, var(--color-pastel-blue-500) 70, var(--color-white));
    --pastel-blue: var(--color-pastel-blue-500);
    --pastel-blue-dark: color-mix(in srgb, var(--color-pastel-blue-500) 70, var(--color-black));
    --pastel-blue-darker: color-mix(in srgb, var(--color-pastel-blue-500) 40, var(--color-black));
    --pastel-blue-darkest: color-mix(in srgb, var(--color-pastel-blue-500) 20, var(--color-black));

    /* pastel-green */
    --pastel-green-lightest: color-mix(in srgb, var(--color-pastel-green-500) 20, var(--color-white));
    --pastel-green-lighter: color-mix(in srgb, var(--color-pastel-green-500) 40, var(--color-white));
    --pastel-green-light: color-mix(in srgb, var(--color-pastel-green-500) 70, var(--color-white));
    --pastel-green: var(--color-pastel-green-500);
    --pastel-green-dark: color-mix(in srgb, var(--color-pastel-green-500) 70, var(--color-black));
    --pastel-green-darker: color-mix(in srgb, var(--color-pastel-green-500) 40, var(--color-black));
    --pastel-green-darkest: color-mix(in srgb, var(--color-pastel-green-500) 20, var(--color-black));

    /* pastel-yellow */
    --pastel-yellow-lightest: color-mix(in srgb, var(--color-pastel-yellow-500) 20, var(--color-white));
    --pastel-yellow-lighter: color-mix(in srgb, var(--color-pastel-yellow-500) 40, var(--color-white));
    --pastel-yellow-light: color-mix(in srgb, var(--color-pastel-yellow-500) 70, var(--color-white));
    --pastel-yellow: var(--color-pastel-yellow-500);
    --pastel-yellow-dark: color-mix(in srgb, var(--color-pastel-yellow-500) 70, var(--color-black));
    --pastel-yellow-darker: color-mix(in srgb, var(--color-pastel-yellow-500) 40, var(--color-black));
    --pastel-yellow-darkest: color-mix(in srgb, var(--color-pastel-yellow-500) 20, var(--color-black));

    /* pastel-purple */
    --pastel-purple-lightest: color-mix(in srgb, var(--color-pastel-purple-500) 20, var(--color-white));
    --pastel-purple-lighter: color-mix(in srgb, var(--color-pastel-purple-500) 40, var(--color-white));
    --pastel-purple-light: color-mix(in srgb, var(--color-pastel-purple-500) 70, var(--color-white));
    --pastel-purple: var(--color-pastel-purple-500);
    --pastel-purple-dark: color-mix(in srgb, var(--color-pastel-purple-500) 70, var(--color-black));
    --pastel-purple-darker: color-mix(in srgb, var(--color-pastel-purple-500) 40, var(--color-black));
    --pastel-purple-darkest: color-mix(in srgb, var(--color-pastel-purple-500) 20, var(--color-black));

    /* neon-pink */
    --neon-pink-lightest: color-mix(in srgb, var(--color-neon-pink-500) 20, var(--color-white));
    --neon-pink-lighter: color-mix(in srgb, var(--color-neon-pink-500) 40, var(--color-white));
    --neon-pink-light: color-mix(in srgb, var(--color-neon-pink-500) 70, var(--color-white));
    --neon-pink: var(--color-neon-pink-500);
    --neon-pink-dark: color-mix(in srgb, var(--color-neon-pink-500) 70, var(--color-black));
    --neon-pink-darker: color-mix(in srgb, var(--color-neon-pink-500) 40, var(--color-black));
    --neon-pink-darkest: color-mix(in srgb, var(--color-neon-pink-500) 20, var(--color-black));

    /* neon-blue */
    --neon-blue-lightest: color-mix(in srgb, var(--color-neon-blue-500) 20, var(--color-white));
    --neon-blue-lighter: color-mix(in srgb, var(--color-neon-blue-500) 40, var(--color-white));
    --neon-blue-light: color-mix(in srgb, var(--color-neon-blue-500) 70, var(--color-white));
    --neon-blue: var(--color-neon-blue-500);
    --neon-blue-dark: color-mix(in srgb, var(--color-neon-blue-500) 70, var(--color-black));
    --neon-blue-darker: color-mix(in srgb, var(--color-neon-blue-500) 40, var(--color-black));
    --neon-blue-darkest: color-mix(in srgb, var(--color-neon-blue-500) 20, var(--color-black));

    /* neon-green */
    --neon-green-lightest: color-mix(in srgb, var(--color-neon-green-500) 20, var(--color-white));
    --neon-green-lighter: color-mix(in srgb, var(--color-neon-green-500) 40, var(--color-white));
    --neon-green-light: color-mix(in srgb, var(--color-neon-green-500) 70, var(--color-white));
    --neon-green: var(--color-neon-green-500);
    --neon-green-dark: color-mix(in srgb, var(--color-neon-green-500) 70, var(--color-black));
    --neon-green-darker: color-mix(in srgb, var(--color-neon-green-500) 40, var(--color-black));
    --neon-green-darkest: color-mix(in srgb, var(--color-neon-green-500) 20, var(--color-black));

    /* neon-yellow */
    --neon-yellow-lightest: color-mix(in srgb, var(--color-neon-yellow-500) 20, var(--color-white));
    --neon-yellow-lighter: color-mix(in srgb, var(--color-neon-yellow-500) 40, var(--color-white));
    --neon-yellow-light: color-mix(in srgb, var(--color-neon-yellow-500) 70, var(--color-white));
    --neon-yellow: var(--color-neon-yellow-500);
    --neon-yellow-dark: color-mix(in srgb, var(--color-neon-yellow-500) 70, var(--color-black));
    --neon-yellow-darker: color-mix(in srgb, var(--color-neon-yellow-500) 40, var(--color-black));
    --neon-yellow-darkest: color-mix(in srgb, var(--color-neon-yellow-500) 20, var(--color-black));

    /* neon-orange */
    --neon-orange-lightest: color-mix(in srgb, var(--color-neon-orange-500) 20, var(--color-white));
    --neon-orange-lighter: color-mix(in srgb, var(--color-neon-orange-500) 40, var(--color-white));
    --neon-orange-light: color-mix(in srgb, var(--color-neon-orange-500) 70, var(--color-white));
    --neon-orange: var(--color-neon-orange-500);
    --neon-orange-dark: color-mix(in srgb, var(--color-neon-orange-500) 70, var(--color-black));
    --neon-orange-darker: color-mix(in srgb, var(--color-neon-orange-500) 40, var(--color-black));
    --neon-orange-darkest: color-mix(in srgb, var(--color-neon-orange-500) 20, var(--color-black));

    /* neon-purple */
    --neon-purple-lightest: color-mix(in srgb, var(--color-neon-purple-500) 20, var(--color-white));
    --neon-purple-lighter: color-mix(in srgb, var(--color-neon-purple-500) 40, var(--color-white));
    --neon-purple-light: color-mix(in srgb, var(--color-neon-purple-500) 70, var(--color-white));
    --neon-purple: var(--color-neon-purple-500);
    --neon-purple-dark: color-mix(in srgb, var(--color-neon-purple-500) 70, var(--color-black));
    --neon-purple-darker: color-mix(in srgb, var(--color-neon-purple-500) 40, var(--color-black));
    --neon-purple-darkest: color-mix(in srgb, var(--color-neon-purple-500) 20, var(--color-black));

  }
}