:root {
   /*** spacing size base multipliers */
    --spacing-base2: 2px;
    --spacing-base4: 4px;
    --spacing-base8: 8px;

    --base-radius: 0.25rem;
    --radius-mutliplier: 0;
    --base-spacing: 0.25rem;
    --min-grid-col-size: 248px;
    --list-item-height: 42px;
    --base-bgcolor-accent: var(--indigo-600);
    --base-bgcolor-primary: var(--blue-400);
    /* --base-color-secondary: black; */
    /* --base-color-tertiary: black; */

    --base-background-primary: oklch(0.25 0.04 250);
    --base-foreground-primary: oklch(0.98 0 0);
    --base-color-secondary: oklch(0.58 0 0);
    --base-color-tertiary: oklch(0.83 0 0);

    /* ================================================================================================
        COLORS
       ================================================================================================ */
    /* GRAY */
    --base-color-gray:#868e96;
    --gray-00: hsl(from var(--base-color-gray) h s 98%);
    --gray-01: hsl(from var(--base-color-gray) h s 95%);
    --gray-02: hsl(from var(--base-color-gray) h s 85%);
    --gray-03: hsl(from var(--base-color-gray) h s 75%);
    --gray-04: hsl(from var(--base-color-gray) h s 65%);
    --gray-05: hsl(from var(--base-color-gray) h s 55%);
    --gray-06: hsl(from var(--base-color-gray) h s 50%);
    --gray-07: hsl(from var(--base-color-gray) h s 45%);
    --gray-08: hsl(from var(--base-color-gray) h s 35%);
    --gray-09: hsl(from var(--base-color-gray) h s 25%);
    --gray-10: hsl(from var(--base-color-gray) h s 15%);
    --gray-11: hsl(from var(--base-color-gray) h s 5%);
    --gray-12: hsl(from var(--base-color-gray) h s 1%);
    /* STONE */
    --base-color-stone:#979b9d;
    --stone-00: hsl(from var(--base-color-stone) h s 98%);
    --stone-01: hsl(from var(--base-color-stone) h s 95%);
    --stone-02: hsl(from var(--base-color-stone) h s 85%);
    --stone-03: hsl(from var(--base-color-stone) h s 75%);
    --stone-04: hsl(from var(--base-color-stone) h s 65%);
    --stone-05: hsl(from var(--base-color-stone) h s 55%);
    --stone-06: hsl(from var(--base-color-stone) h s 50%);
    --stone-07: hsl(from var(--base-color-stone) h s 45%);
    --stone-08: hsl(from var(--base-color-stone) h s 35%);
    --stone-09: hsl(from var(--base-color-stone) h s 25%);
    --stone-10: hsl(from var(--base-color-stone) h s 15%);
    --stone-11: hsl(from var(--base-color-stone) h s 5%);
    --stone-12: hsl(from var(--base-color-stone) h s 1%);
    /* RED */
    --base-color-red:#fa5252;
    --red-00: hsl(from var(--base-color-red) h s 98%);
    --red-01: hsl(from var(--base-color-red) h s 95%);
    --red-02: hsl(from var(--base-color-red) h s 85%);
    --red-03: hsl(from var(--base-color-red) h s 75%);
    --red-04: hsl(from var(--base-color-red) h s 65%);
    --red-05: hsl(from var(--base-color-red) h s 55%);
    --red-06: hsl(from var(--base-color-red) h s 50%);
    --red-07: hsl(from var(--base-color-red) h s 45%);
    --red-08: hsl(from var(--base-color-red) h s 35%);
    --red-09: hsl(from var(--base-color-red) h s 25%);
    --red-10: hsl(from var(--base-color-red) h s 15%);
    --red-11: hsl(from var(--base-color-red) h s 5%);
    --red-12: hsl(from var(--base-color-red) h s 1%);
    /* PINK */
    --base-color-pink:#e64980;
    --pink-00: hsl(from var(--base-color-pink) h s 98%);
    --pink-01: hsl(from var(--base-color-pink) h s 95%);
    --pink-02: hsl(from var(--base-color-pink) h s 85%);
    --pink-03: hsl(from var(--base-color-pink) h s 75%);
    --pink-04: hsl(from var(--base-color-pink) h s 65%);
    --pink-05: hsl(from var(--base-color-pink) h s 55%);
    --pink-06: hsl(from var(--base-color-pink) h s 50%);
    --pink-07: hsl(from var(--base-color-pink) h s 45%);
    --pink-08: hsl(from var(--base-color-pink) h s 35%);
    --pink-09: hsl(from var(--base-color-pink) h s 25%);
    --pink-10: hsl(from var(--base-color-pink) h s 15%);
    --pink-11: hsl(from var(--base-color-pink) h s 5%);
    --pink-12: hsl(from var(--base-color-pink) h s 1%);
    /* PURPLE */
    --base-color-purple:#be4bdb;
    --purple-00: hsl(from var(--base-color-purple) h s 98%);
    --purple-01: hsl(from var(--base-color-purple) h s 95%);
    --purple-02: hsl(from var(--base-color-purple) h s 85%);
    --purple-03: hsl(from var(--base-color-purple) h s 75%);
    --purple-04: hsl(from var(--base-color-purple) h s 65%);
    --purple-05: hsl(from var(--base-color-purple) h s 55%);
    --purple-06: hsl(from var(--base-color-purple) h s 50%);
    --purple-07: hsl(from var(--base-color-purple) h s 45%);
    --purple-08: hsl(from var(--base-color-purple) h s 35%);
    --purple-09: hsl(from var(--base-color-purple) h s 25%);
    --purple-10: hsl(from var(--base-color-purple) h s 15%);
    --purple-11: hsl(from var(--base-color-purple) h s 5%);
    --purple-12: hsl(from var(--base-color-purple) h s 1%);
    /* VIOLET */
    --base-color-violet:#7950f2;
    --violet-00: hsl(from var(--base-color-violet) h s 98%);
    --violet-01: hsl(from var(--base-color-violet) h s 95%);
    --violet-02: hsl(from var(--base-color-violet) h s 85%);
    --violet-03: hsl(from var(--base-color-violet) h s 75%);
    --violet-04: hsl(from var(--base-color-violet) h s 65%);
    --violet-05: hsl(from var(--base-color-violet) h s 55%);
    --violet-06: hsl(from var(--base-color-violet) h s 50%);
    --violet-07: hsl(from var(--base-color-violet) h s 45%);
    --violet-08: hsl(from var(--base-color-violet) h s 35%);
    --violet-09: hsl(from var(--base-color-violet) h s 25%);
    --violet-10: hsl(from var(--base-color-violet) h s 15%);
    --violet-11: hsl(from var(--base-color-violet) h s 5%);
    --violet-12: hsl(from var(--base-color-violet) h s 1%);
    /* INDIGO */
    --base-color-indigo:#4c6ef5;
    --indigo-00: hsl(from var(--base-color-indigo) h s 98%);
    --indigo-01: hsl(from var(--base-color-indigo) h s 95%);
    --indigo-02: hsl(from var(--base-color-indigo) h s 85%);
    --indigo-03: hsl(from var(--base-color-indigo) h s 75%);
    --indigo-04: hsl(from var(--base-color-indigo) h s 65%);
    --indigo-05: hsl(from var(--base-color-indigo) h s 55%);
    --indigo-06: hsl(from var(--base-color-indigo) h s 50%);
    --indigo-07: hsl(from var(--base-color-indigo) h s 45%);
    --indigo-08: hsl(from var(--base-color-indigo) h s 35%);
    --indigo-09: hsl(from var(--base-color-indigo) h s 25%);
    --indigo-10: hsl(from var(--base-color-indigo) h s 15%);
    --indigo-11: hsl(from var(--base-color-indigo) h s 5%);
    --indigo-12: hsl(from var(--base-color-indigo) h s 1%);
    /* BLUE */
    --base-color-blue:#228be6;
    --blue-00: hsl(from var(--base-color-blue) h s 98%);
    --blue-01: hsl(from var(--base-color-blue) h s 95%);
    --blue-02: hsl(from var(--base-color-blue) h s 85%);
    --blue-03: hsl(from var(--base-color-blue) h s 75%);
    --blue-04: hsl(from var(--base-color-blue) h s 65%);
    --blue-05: hsl(from var(--base-color-blue) h s 55%);
    --blue-06: hsl(from var(--base-color-blue) h s 50%);
    --blue-07: hsl(from var(--base-color-blue) h s 45%);
    --blue-08: hsl(from var(--base-color-blue) h s 35%);
    --blue-09: hsl(from var(--base-color-blue) h s 25%);
    --blue-10: hsl(from var(--base-color-blue) h s 15%);
    --blue-11: hsl(from var(--base-color-blue) h s 5%);
    --blue-12: hsl(from var(--base-color-blue) h s 1%);
    /* CYAN */
    --base-color-cyan:#15aabf;
    --cyan-00: hsl(from var(--base-color-cyan) h s 98%);
    --cyan-01: hsl(from var(--base-color-cyan) h s 95%);
    --cyan-02: hsl(from var(--base-color-cyan) h s 85%);
    --cyan-03: hsl(from var(--base-color-cyan) h s 75%);
    --cyan-04: hsl(from var(--base-color-cyan) h s 65%);
    --cyan-05: hsl(from var(--base-color-cyan) h s 55%);
    --cyan-06: hsl(from var(--base-color-cyan) h s 50%);
    --cyan-07: hsl(from var(--base-color-cyan) h s 45%);
    --cyan-08: hsl(from var(--base-color-cyan) h s 35%);
    --cyan-09: hsl(from var(--base-color-cyan) h s 25%);
    --cyan-10: hsl(from var(--base-color-cyan) h s 15%);
    --cyan-11: hsl(from var(--base-color-cyan) h s 5%);
    --cyan-12: hsl(from var(--base-color-cyan) h s 1%);
    /* TEAL */
    --base-color-teal:#12b886;
    --teal-00: hsl(from var(--base-color-teal) h s 98%);
    --teal-01: hsl(from var(--base-color-teal) h s 95%);
    --teal-02: hsl(from var(--base-color-teal) h s 85%);
    --teal-03: hsl(from var(--base-color-teal) h s 75%);
    --teal-04: hsl(from var(--base-color-teal) h s 65%);
    --teal-05: hsl(from var(--base-color-teal) h s 55%);
    --teal-06: hsl(from var(--base-color-teal) h s 50%);
    --teal-07: hsl(from var(--base-color-teal) h s 45%);
    --teal-08: hsl(from var(--base-color-teal) h s 35%);
    --teal-09: hsl(from var(--base-color-teal) h s 25%);
    --teal-10: hsl(from var(--base-color-teal) h s 15%);
    --teal-11: hsl(from var(--base-color-teal) h s 5%);
    --teal-12: hsl(from var(--base-color-teal) h s 1%);
    /* GREEN */
    --base-color-green:#40c057;
    --green-00: hsl(from var(--base-color-green) h s 98%);
    --green-01: hsl(from var(--base-color-green) h s 95%);
    --green-02: hsl(from var(--base-color-green) h s 85%);
    --green-03: hsl(from var(--base-color-green) h s 75%);
    --green-04: hsl(from var(--base-color-green) h s 65%);
    --green-05: hsl(from var(--base-color-green) h s 55%);
    --green-06: hsl(from var(--base-color-green) h s 50%);
    --green-07: hsl(from var(--base-color-green) h s 45%);
    --green-08: hsl(from var(--base-color-green) h s 35%);
    --green-09: hsl(from var(--base-color-green) h s 25%);
    --green-10: hsl(from var(--base-color-green) h s 15%);
    --green-11: hsl(from var(--base-color-green) h s 5%);
    --green-12: hsl(from var(--base-color-green) h s 1%);
    /*LIME */
    --base-color-lime:#82c91e;
    --lime-00: hsl(from var(--base-color-lime) h s 98%);
    --lime-01: hsl(from var(--base-color-lime) h s 95%);
    --lime-02: hsl(from var(--base-color-lime) h s 85%);
    --lime-03: hsl(from var(--base-color-lime) h s 75%);
    --lime-04: hsl(from var(--base-color-lime) h s 65%);
    --lime-05: hsl(from var(--base-color-lime) h s 55%);
    --lime-06: hsl(from var(--base-color-lime) h s 50%);
    --lime-07: hsl(from var(--base-color-lime) h s 45%);
    --lime-08: hsl(from var(--base-color-lime) h s 35%);
    --lime-09: hsl(from var(--base-color-lime) h s 25%);
    --lime-10: hsl(from var(--base-color-lime) h s 15%);
    --lime-11: hsl(from var(--base-color-lime) h s 5%);
    --lime-12: hsl(from var(--base-color-lime) h s 1%);
    /* YELLOW */
    --base-color-yellow:#fab005;
    --yellow-00: hsl(from var(--base-color-yellow) h s 98%);
    --yellow-01: hsl(from var(--base-color-yellow) h s 95%);
    --yellow-02: hsl(from var(--base-color-yellow) h s 85%);
    --yellow-03: hsl(from var(--base-color-yellow) h s 75%);
    --yellow-04: hsl(from var(--base-color-yellow) h s 65%);
    --yellow-05: hsl(from var(--base-color-yellow) h s 55%);
    --yellow-06: hsl(from var(--base-color-yellow) h s 50%);
    --yellow-07: hsl(from var(--base-color-yellow) h s 45%);
    --yellow-08: hsl(from var(--base-color-yellow) h s 35%);
    --yellow-09: hsl(from var(--base-color-yellow) h s 25%);
    --yellow-10: hsl(from var(--base-color-yellow) h s 15%);
    --yellow-11: hsl(from var(--base-color-yellow) h s 5%);
    --yellow-12: hsl(from var(--base-color-yellow) h s 1%);
    /* ORANGE */
    --base-color-orange:#fd7e14;
    --orange-00: hsl(from var(--base-color-orange) h s 98%);
    --orange-01: hsl(from var(--base-color-orange) h s 95%);
    --orange-02: hsl(from var(--base-color-orange) h s 85%);
    --orange-03: hsl(from var(--base-color-orange) h s 75%);
    --orange-04: hsl(from var(--base-color-orange) h s 65%);
    --orange-05: hsl(from var(--base-color-orange) h s 55%);
    --orange-06: hsl(from var(--base-color-orange) h s 50%);
    --orange-07: hsl(from var(--base-color-orange) h s 45%);
    --orange-08: hsl(from var(--base-color-orange) h s 35%);
    --orange-09: hsl(from var(--base-color-orange) h s 25%);
    --orange-10: hsl(from var(--base-color-orange) h s 15%);
    --orange-11: hsl(from var(--base-color-orange) h s 5%);
    --orange-12: hsl(from var(--base-color-orange) h s 1%);
    /* CHOCO */
    --base-color-choco:#d46e25;
    --choco-00: hsl(from var(--base-color-choco) h s 98%);
    --choco-01: hsl(from var(--base-color-choco) h s 95%);
    --choco-02: hsl(from var(--base-color-choco) h s 85%);
    --choco-03: hsl(from var(--base-color-choco) h s 75%);
    --choco-04: hsl(from var(--base-color-choco) h s 65%);
    --choco-05: hsl(from var(--base-color-choco) h s 55%);
    --choco-06: hsl(from var(--base-color-choco) h s 50%);
    --choco-07: hsl(from var(--base-color-choco) h s 45%);
    --choco-08: hsl(from var(--base-color-choco) h s 35%);
    --choco-09: hsl(from var(--base-color-choco) h s 25%);
    --choco-10: hsl(from var(--base-color-choco) h s 15%);
    --choco-11: hsl(from var(--base-color-choco) h s 5%);
    --choco-12: hsl(from var(--base-color-choco) h s 1%);
    /* BROWN */
    --base-color-brown:#a87c56;
    --brown-00: hsl(from var(--base-color-brown) h s 98%);
    --brown-01: hsl(from var(--base-color-brown) h s 95%);
    --brown-02: hsl(from var(--base-color-brown) h s 85%);
    --brown-03: hsl(from var(--base-color-brown) h s 75%);
    --brown-04: hsl(from var(--base-color-brown) h s 65%);
    --brown-05: hsl(from var(--base-color-brown) h s 55%);
    --brown-06: hsl(from var(--base-color-brown) h s 50%);
    --brown-07: hsl(from var(--base-color-brown) h s 45%);
    --brown-08: hsl(from var(--base-color-brown) h s 35%);
    --brown-09: hsl(from var(--base-color-brown) h s 25%);
    --brown-10: hsl(from var(--base-color-brown) h s 15%);
    --brown-11: hsl(from var(--base-color-brown) h s 5%);
    --brown-12: hsl(from var(--base-color-brown) h s 1%);
    /* SAND */
    --base-color-sand:#867c65;
    --sand-00: hsl(from var(--base-color-sand) h s 98%);
    --sand-01: hsl(from var(--base-color-sand) h s 95%);
    --sand-02: hsl(from var(--base-color-sand) h s 85%);
    --sand-03: hsl(from var(--base-color-sand) h s 75%);
    --sand-04: hsl(from var(--base-color-sand) h s 65%);
    --sand-05: hsl(from var(--base-color-sand) h s 55%);
    --sand-06: hsl(from var(--base-color-sand) h s 50%);
    --sand-07: hsl(from var(--base-color-sand) h s 45%);
    --sand-08: hsl(from var(--base-color-sand) h s 35%);
    --sand-09: hsl(from var(--base-color-sand) h s 25%);
    --sand-10: hsl(from var(--base-color-sand) h s 15%);
    --sand-11: hsl(from var(--base-color-sand) h s 5%);
    --sand-12: hsl(from var(--base-color-sand) h s 1%);
    /* CAMO */
    --base-color-camo:#999621; 
    --camo-00: hsl(from var(--base-color-camo) h s 98%);
    --camo-01: hsl(from var(--base-color-camo) h s 95%);
    --camo-02: hsl(from var(--base-color-camo) h s 85%);
    --camo-03: hsl(from var(--base-color-camo) h s 75%);
    --camo-04: hsl(from var(--base-color-camo) h s 65%);
    --camo-05: hsl(from var(--base-color-camo) h s 55%);
    --camo-06: hsl(from var(--base-color-camo) h s 50%);
    --camo-07: hsl(from var(--base-color-camo) h s 45%);
    --camo-08: hsl(from var(--base-color-camo) h s 35%);
    --camo-09: hsl(from var(--base-color-camo) h s 25%);
    --camo-10: hsl(from var(--base-color-camo) h s 15%);
    --camo-11: hsl(from var(--base-color-camo) h s 5%);
    --camo-12: hsl(from var(--base-color-camo) h s 1%);
    /* JUNGLE */
    --base-color-jungle:#9bbb36; 
    --jungle-00: hsl(from var(--base-color-jungle) h s 98%);
    --jungle-01: hsl(from var(--base-color-jungle) h s 95%);
    --jungle-02: hsl(from var(--base-color-jungle) h s 85%);
    --jungle-03: hsl(from var(--base-color-jungle) h s 75%);
    --jungle-04: hsl(from var(--base-color-jungle) h s 65%);
    --jungle-05: hsl(from var(--base-color-jungle) h s 55%);
    --jungle-06: hsl(from var(--base-color-jungle) h s 50%);
    --jungle-07: hsl(from var(--base-color-jungle) h s 45%);
    --jungle-08: hsl(from var(--base-color-jungle) h s 35%);
    --jungle-09: hsl(from var(--base-color-jungle) h s 25%);
    --jungle-10: hsl(from var(--base-color-jungle) h s 15%);
    --jungle-11: hsl(from var(--base-color-jungle) h s 5%);
    --jungle-12: hsl(from var(--base-color-jungle) h s 1%);
    /* neutral */
    --neutral-050: oklch(0.99 0.00 0);
    --neutral-100: oklch(0.97 0.00 0);
    --neutral-200: oklch(0.92 0.00 0);
    --neutral-300: oklch(0.87 0.00 0);
    --neutral-400: oklch(0.72 0.00 0);
    --neutral-500: oklch(0.56 0.00 0);
    --neutral-600: oklch(0.44 0.00 0);
    --neutral-700: oklch(0.37 0.00 0);
    --neutral-800: oklch(0.27 0.00 0);
    --neutral-900: oklch(0.20 0.00 0);
    --neutral-950: oklch(0.14 0.00 0);
    /* stone */
    --stone-050: oklch(0.98 0.00 106);
    --stone-100: oklch(0.97 0.00 106);
    --stone-200: oklch(0.92 0.00 49);
    --stone-300: oklch(0.87 0.00 56);
    --stone-400: oklch(0.72 0.01 56);
    --stone-500: oklch(0.55 0.01 58);
    --stone-600: oklch(0.44 0.01 74);
    --stone-700: oklch(0.37 0.01 68);
    --stone-800: oklch(0.27 0.01 34);
    --stone-900: oklch(0.22 0.01 56);
    --stone-950: oklch(0.15 0.00 49);
    /* zinc */
    --zinc-050: oklch(0.99 0.00 0);
    --zinc-100: oklch(0.97 0.00 286);
    --zinc-200: oklch(0.92 0.00 286);
    --zinc-300: oklch(0.87 0.01 286);
    --zinc-400: oklch(0.71 0.01 286);
    --zinc-500: oklch(0.55 0.01 286);
    --zinc-600: oklch(0.44 0.01 286);
    --zinc-700: oklch(0.37 0.01 286);
    --zinc-800: oklch(0.27 0.01 286);
    --zinc-900: oklch(0.21 0.01 286);
    --zinc-950: oklch(0.14 0.00 286);
    /* slate */
    --slate-050: oklch(0.98 0.00 248);
    --slate-100: oklch(0.97 0.01 248);
    --slate-200: oklch(0.93 0.01 256);
    --slate-300: oklch(0.87 0.02 253);
    --slate-400: oklch(0.71 0.04 257);
    --slate-500: oklch(0.55 0.04 257);
    --slate-600: oklch(0.45 0.04 257);
    --slate-700: oklch(0.37 0.04 257);
    --slate-800: oklch(0.28 0.04 260);
    --slate-900: oklch(0.21 0.04 266);
    --slate-950: oklch(0.13 0.04 265);
    /* gray */
    --gray-050: oklch(0.98 0.00 248);
    --gray-100: oklch(0.97 0.00 265);
    --gray-200: oklch(0.93 0.01 265);
    --gray-300: oklch(0.87 0.01 258);
    --gray-400: oklch(0.71 0.02 261);
    --gray-500: oklch(0.55 0.02 264);
    --gray-600: oklch(0.45 0.03 257);
    --gray-700: oklch(0.37 0.03 260);
    --gray-800: oklch(0.28 0.03 257);
    --gray-900: oklch(0.21 0.03 265);
    --gray-950: oklch(0.13 0.03 262);
    /* mauve */
    --mauve-050: oklch(0.98 0.00 310);
    --mauve-100: oklch(0.96 0.01 310);
    --mauve-200: oklch(0.92 0.01 310);
    --mauve-300: oklch(0.84 0.02 310);
    --mauve-400: oklch(0.70 0.03 310);
    --mauve-500: oklch(0.58 0.04 310);
    --mauve-600: oklch(0.49 0.03 310);
    --mauve-700: oklch(0.42 0.03 310);
    --mauve-800: oklch(0.34 0.02 310);
    --mauve-900: oklch(0.28 0.02 310);
    --mauve-950: oklch(0.19 0.01 310);
    /* olive */
    --olive-050: oklch(0.98 0.00 155);
    --olive-100: oklch(0.96 0.01 155);
    --olive-200: oklch(0.92 0.01 155);
    --olive-300: oklch(0.84 0.02 155);
    --olive-400: oklch(0.70 0.03 155);
    --olive-500: oklch(0.58 0.03 155);
    --olive-600: oklch(0.49 0.03 155);
    --olive-700: oklch(0.42 0.02 155);
    --olive-800: oklch(0.34 0.02 155);
    --olive-900: oklch(0.28 0.02 155);
    --olive-950: oklch(0.19 0.01 155);
    /* mist */
    --mist-050: oklch(0.98 0.00 210);
    --mist-100: oklch(0.96 0.01 210);
    --mist-200: oklch(0.92 0.01 210);
    --mist-300: oklch(0.84 0.02 210);
    --mist-400: oklch(0.70 0.03 210);
    --mist-500: oklch(0.58 0.03 210);
    --mist-600: oklch(0.49 0.03 210);
    --mist-700: oklch(0.42 0.03 210);
    --mist-800: oklch(0.34 0.02 210);
    --mist-900: oklch(0.28 0.02 210);
    --mist-950: oklch(0.19 0.01 210);
    /* taupe */
    --taupe-050: oklch(0.98 0.00 75);
    --taupe-100: oklch(0.96 0.01 75);
    --taupe-200: oklch(0.92 0.01 75);
    --taupe-300: oklch(0.84 0.02 75);
    --taupe-400: oklch(0.70 0.03 75);
    --taupe-500: oklch(0.58 0.03 75);
    --taupe-600: oklch(0.49 0.03 75);
    --taupe-700: oklch(0.42 0.03 75);
    --taupe-800: oklch(0.34 0.02 75);
    --taupe-900: oklch(0.28 0.02 75);
    --taupe-950: oklch(0.19 0.01 75);
    /* red */
    --red-050: oklch(0.97 0.01 17);
    --red-100: oklch(0.94 0.03 18);
    --red-200: oklch(0.88 0.06 18);
    --red-300: oklch(0.81 0.10 20);
    --red-400: oklch(0.71 0.17 22);
    --red-500: oklch(0.64 0.21 25);
    --red-600: oklch(0.58 0.22 27);
    --red-700: oklch(0.51 0.19 28);
    --red-800: oklch(0.44 0.16 27);
    --red-900: oklch(0.40 0.13 26);
    --red-950: oklch(0.26 0.09 26);
    /* orange */
    --orange-050: oklch(0.98 0.02 74);
    --orange-100: oklch(0.95 0.04 75);
    --orange-200: oklch(0.90 0.07 71);
    --orange-300: oklch(0.84 0.12 66);
    --orange-400: oklch(0.76 0.16 56);
    --orange-500: oklch(0.70 0.19 48);
    --orange-600: oklch(0.65 0.19 41);
    --orange-700: oklch(0.55 0.17 38);
    --orange-800: oklch(0.47 0.14 37);
    --orange-900: oklch(0.41 0.12 38);
    --orange-950: oklch(0.27 0.08 36);
    /* amber */
    --amber-050: oklch(0.99 0.02 95);
    --amber-100: oklch(0.96 0.06 96);
    --amber-200: oklch(0.92 0.12 96);
    --amber-300: oklch(0.88 0.15 92);
    --amber-400: oklch(0.84 0.16 84);
    --amber-500: oklch(0.77 0.16 70);
    --amber-600: oklch(0.67 0.16 58);
    --amber-700: oklch(0.56 0.15 49);
    --amber-800: oklch(0.47 0.12 46);
    --amber-900: oklch(0.41 0.11 46);
    --amber-950: oklch(0.28 0.07 46);
    /* yellow */
    --yellow-050: oklch(0.99 0.03 102);
    --yellow-100: oklch(0.97 0.07 103);
    --yellow-200: oklch(0.95 0.12 102);
    --yellow-300: oklch(0.91 0.17 98);
    --yellow-400: oklch(0.86 0.17 92);
    --yellow-500: oklch(0.80 0.16 86);
    --yellow-600: oklch(0.68 0.14 76);
    --yellow-700: oklch(0.55 0.12 66);
    --yellow-800: oklch(0.48 0.10 62);
    --yellow-900: oklch(0.42 0.09 58);
    --yellow-950: oklch(0.29 0.06 54);
    /* lime */
    --lime-050: oklch(0.99 0.03 121);
    --lime-100: oklch(0.97 0.07 122);
    --lime-200: oklch(0.94 0.12 124);
    --lime-300: oklch(0.90 0.18 127);
    --lime-400: oklch(0.85 0.21 129);
    --lime-500: oklch(0.77 0.20 131);
    --lime-600: oklch(0.65 0.18 132);
    --lime-700: oklch(0.53 0.14 132);
    --lime-800: oklch(0.45 0.11 131);
    --lime-900: oklch(0.41 0.10 131);
    --lime-950: oklch(0.27 0.07 132);
    /* green */
    --green-050: oklch(0.98 0.02 156);
    --green-100: oklch(0.96 0.04 157);
    --green-200: oklch(0.93 0.08 156);
    --green-300: oklch(0.87 0.14 154);
    --green-400: oklch(0.80 0.18 152);
    --green-500: oklch(0.72 0.19 150);
    --green-600: oklch(0.63 0.17 149);
    --green-700: oklch(0.53 0.14 150);
    --green-800: oklch(0.45 0.11 151);
    --green-900: oklch(0.39 0.09 153);
    --green-950: oklch(0.27 0.06 153);
    /* emerald */
    --emerald-050: oklch(0.98 0.02 166);
    --emerald-100: oklch(0.95 0.05 163);
    --emerald-200: oklch(0.90 0.09 164);
    --emerald-300: oklch(0.85 0.13 165);
    --emerald-400: oklch(0.77 0.15 163);
    --emerald-500: oklch(0.70 0.15 162);
    --emerald-600: oklch(0.60 0.13 163);
    --emerald-700: oklch(0.51 0.10 166);
    --emerald-800: oklch(0.43 0.09 167);
    --emerald-900: oklch(0.38 0.07 169);
    --emerald-950: oklch(0.26 0.05 173);
    /* teal */
    --teal-050: oklch(0.98 0.01 181);
    --teal-100: oklch(0.95 0.05 181);
    --teal-200: oklch(0.91 0.09 180);
    --teal-300: oklch(0.85 0.13 181);
    --teal-400: oklch(0.78 0.13 182);
    --teal-500: oklch(0.70 0.12 183);
    --teal-600: oklch(0.60 0.10 185);
    --teal-700: oklch(0.51 0.09 186);
    --teal-800: oklch(0.44 0.07 188);
    --teal-900: oklch(0.39 0.06 188);
    --teal-950: oklch(0.28 0.04 193);
    /* cyan */
    --cyan-050: oklch(0.98 0.02 201);
    --cyan-100: oklch(0.96 0.04 203);
    --cyan-200: oklch(0.92 0.08 205);
    --cyan-300: oklch(0.87 0.12 207);
    --cyan-400: oklch(0.80 0.13 212);
    --cyan-500: oklch(0.71 0.13 215);
    --cyan-600: oklch(0.61 0.11 222);
    --cyan-700: oklch(0.52 0.09 223);
    --cyan-800: oklch(0.45 0.08 224);
    --cyan-900: oklch(0.40 0.07 227);
    --cyan-950: oklch(0.30 0.05 230);
    /* sky */
    --sky-050: oklch(0.98 0.01 237);
    --sky-100: oklch(0.95 0.03 237);
    --sky-200: oklch(0.90 0.06 231);
    --sky-300: oklch(0.83 0.10 230);
    --sky-400: oklch(0.75 0.14 233);
    --sky-500: oklch(0.68 0.15 237);
    --sky-600: oklch(0.59 0.14 242);
    --sky-700: oklch(0.50 0.12 243);
    --sky-800: oklch(0.44 0.10 241);
    --sky-900: oklch(0.39 0.08 241);
    --sky-950: oklch(0.29 0.06 243);
    /* blue */
    --blue-050: oklch(0.97 0.01 255);
    --blue-100: oklch(0.93 0.03 256);
    --blue-200: oklch(0.88 0.06 254);
    --blue-300: oklch(0.81 0.10 252);
    --blue-400: oklch(0.71 0.14 255);
    --blue-500: oklch(0.62 0.19 260);
    --blue-600: oklch(0.55 0.22 263);
    --blue-700: oklch(0.49 0.22 264);
    --blue-800: oklch(0.42 0.18 266);
    --blue-900: oklch(0.38 0.14 266);
    --blue-950: oklch(0.28 0.09 268);
    /* indigo */
    --indigo-050: oklch(0.96 0.02 272);
    --indigo-100: oklch(0.93 0.03 273);
    --indigo-200: oklch(0.87 0.06 274);
    --indigo-300: oklch(0.79 0.10 275);
    --indigo-400: oklch(0.68 0.16 277);
    --indigo-500: oklch(0.59 0.20 277);
    --indigo-600: oklch(0.51 0.23 277);
    --indigo-700: oklch(0.46 0.21 277);
    --indigo-800: oklch(0.40 0.18 277);
    --indigo-900: oklch(0.36 0.14 279);
    --indigo-950: oklch(0.26 0.09 281);
    /* violet */
    --violet-050: oklch(0.97 0.02 294);
    --violet-100: oklch(0.94 0.03 295);
    --violet-200: oklch(0.89 0.05 293);
    --violet-300: oklch(0.81 0.10 294);
    --violet-400: oklch(0.71 0.16 294);
    --violet-500: oklch(0.61 0.22 293);
    --violet-600: oklch(0.54 0.25 293);
    --violet-700: oklch(0.49 0.24 293);
    --violet-800: oklch(0.43 0.21 293);
    --violet-900: oklch(0.38 0.18 294);
    --violet-950: oklch(0.28 0.14 291);
    /* purple */
    --purple-050: oklch(0.98 0.01 308);
    --purple-100: oklch(0.95 0.03 307);
    --purple-200: oklch(0.90 0.06 307);
    --purple-300: oklch(0.83 0.11 306);
    --purple-400: oklch(0.72 0.18 306);
    --purple-500: oklch(0.63 0.23 304);
    --purple-600: oklch(0.56 0.25 302);
    --purple-700: oklch(0.50 0.24 302);
    --purple-800: oklch(0.44 0.20 304);
    --purple-900: oklch(0.38 0.17 305);
    --purple-950: oklch(0.29 0.14 303);
    /* fuchsia */
    --fuchsia-050: oklch(0.98 0.02 320);
    --fuchsia-100: oklch(0.95 0.04 319);
    --fuchsia-200: oklch(0.90 0.07 320);
    --fuchsia-300: oklch(0.83 0.13 321);
    --fuchsia-400: oklch(0.75 0.21 322);
    --fuchsia-500: oklch(0.67 0.26 322);
    --fuchsia-600: oklch(0.59 0.26 323);
    --fuchsia-700: oklch(0.52 0.23 324);
    --fuchsia-800: oklch(0.45 0.19 325);
    --fuchsia-900: oklch(0.40 0.16 326);
    --fuchsia-950: oklch(0.29 0.13 326);
    /* pink */
    --pink-050: oklch(0.97 0.01 343);
    --pink-100: oklch(0.95 0.03 342);
    --pink-200: oklch(0.90 0.06 343);
    --pink-300: oklch(0.82 0.11 346);
    --pink-400: oklch(0.73 0.18 350);
    --pink-500: oklch(0.66 0.21 354);
    --pink-600: oklch(0.59 0.22 1);
    --pink-700: oklch(0.52 0.20 4);
    --pink-800: oklch(0.46 0.17 4);
    --pink-900: oklch(0.41 0.14 2);
    --pink-950: oklch(0.28 0.10 4);
    /* red */
    --rose-050: oklch(0.97 0.02 12);
    --rose-100: oklch(0.94 0.03 13);
    --rose-200: oklch(0.89 0.06 10);
    --rose-300: oklch(0.81 0.11 12);
    --rose-400: oklch(0.72 0.17 13);
    --rose-500: oklch(0.65 0.22 16);
    --rose-600: oklch(0.59 0.22 18);
    --rose-700: oklch(0.51 0.20 17);
    --rose-800: oklch(0.45 0.17 14);
    --rose-900: oklch(0.41 0.15 10);
    --rose-950: oklch(0.27 0.10 12);
}

@layer utilities {

/* ================================================================================================
   Font weights
   ================================================================================================ */
    .fw-thin,.fw-100 {
        font-weight: 100!important;
    }

    .fw-extralight,.fw-200 {
        font-weight: 200!important;
    }

    .fw-light,.fw-300 {
        font-weight: 300!important;
    }

    .fw-regular,.fw-400 {
        font-weight: 400!important;
    }

    .fw-medium,.fw-500 {
        font-weight: 500!important;
    }

    .fw-semibold,.fw-600 {
        font-weight: 600!important;
    }

    .fw-bold,.fw-700 {
        font-weight: 700!important;
    }

    .fw-extrabold,.fw-800 {
        font-weight: 800!important;
    }

    .fw-black,.fw-900 {
        font-weight: 900!important;
    }
    /* ================================================================================================
   Font styles
   ================================================================================================ */
    .font-italic {
        font-style: italic;
    }

    .font-oblique {
        font-style: oblique;
    }

    .font-normal {
        font-style: normal;
    }

    .font-capitalize {
        text-transform: capitalize;
    }

    .font-lowercase {
        text-transform: lowercase;
    }

    .font-uppercase {
        text-transform: uppercase;
    }
    /* ================================================================================================
    GRID LAYOUT
    ================================================================================================ */
    .grid-col-1 {
        display: grid;
        grid-template-columns: repeat(1, minmax(min(var(--min-column-width), 100%), 1fr));
    }
    .grid-col-2 {
        display: grid;
        grid-template-columns: repeat(2, minmax(min(var(--min-column-width), 100%), 1fr));
    }
    .grid-col-3 {
        display: grid;
        grid-template-columns: repeat(3,minmax(min(var(--min-column-width), 100%), 1fr));
    }
    .grid-col-4 {
        display: grid;
        grid-template-columns: repeat(4, minmax(min(var(--min-column-width), 100%), 1fr));
    }
    .grid-col-5 {
        display: grid;
        grid-template-columns: repeat(5, minmax(min(var(--min-column-width), 100%), 1fr));
    }
    .grid-col-6 {
        display: grid;
        grid-template-columns: repeat(6, minmax(min(var(--min-column-width), 100%), 1fr));
    }
    .grid-col-7 {
        display: grid;
        grid-template-columns: repeat(7, minmax(min(var(--min-column-width), 100%), 1fr));
    }
    .grid-col-8 {
        display: grid;
        grid-template-columns: repeat(8, minmax(min(var(--min-column-width), 100%), 1fr));
    }
    .grid-col-9 {
        display: grid;
        grid-template-columns: repeat(9, minmax(min(var(--min-column-width), 100%), 1fr));
    }
    .grid-col-10 {
        display: grid;
        grid-template-columns: repeat(10, minmax(min(var(--min-column-width), 100%), 1fr));
    }
    .grid-col-11 {
        display: grid;
        grid-template-columns: repeat(11, minmax(min(var(--min-column-width), 100%), 1fr));
    }
    .grid-col-12, .grid-col {
        display: grid;
        grid-template-columns: repeat(12, minmax(min(var(--min-column-width), 100%), 1fr));
    }
    .grid-col-2-auto {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
    }
    .grid-col-3-auto {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        align-items: center;
    }
    .grid-col-4-auto {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        align-items: center;
    }
    .col-12 {grid-column: span 12;}
    .col-11 {grid-column: span 11;}
    .col-10 {grid-column: span 10;}
    .col-9 {grid-column: span 9;}
    .col-8 {grid-column: span 8;}
    .col-7 {grid-column: span 7;}
    .col-6 {grid-column: span 6;}
    .col-5 {grid-column: span 5;}
    .col-4 {grid-column: span 4;}
    .col-3 {grid-column: span 3;}
    .col-2 {grid-column: span 2;}
    .col-1 {grid-column: span 1;}
    /* ================================================================================================
    FLEX LAYOUT
    ================================================================================================ */
    .flex-row {display: flex;flex-direction: row;align-items: center;}
    .flex-column {display: flex;flex-direction: column;}
    .flex-row-reverse {display: flex;flex-direction: row-reverse;align-items: center;}
    .flex-column-reverse {display: flex;flex-direction: column-reverse;}
    .flex-1 {flex: 1;}
    .flex-grow-1 {flex-grow: 1;}
    .flex-grow-0 {flex-grow: 0;}
    .flex-shrink-1 {flex-shrink: 1;}
    .flex-shrink-0 {flex-shrink: 0;}
    .flex-basis-0 {flex-basis: 0;}
    .flex-basis-auto {flex-basis: auto;}
    .self-align-start {align-self: start;}
    .self-align-center {align-self: center;}
    .self-align-end {align-self: end;}
    .self-align-baseline {align-self: baseline;}
    .self-justfiy-start {justify-self: stretch;}
    .self-justfiy-start {justify-self: start;}
    .self-justfiy-center {justify-self: center;}
    .self-justfiy-end {justify-self: end;}
    .self-justfiy-baseline {justify-self: baseline;}
    .align-items-stretch {align-items: stretch;}
    .align-items-start {align-items: start;}
    .align-items-center {align-items: center;}
    .align-items-end {align-items: end;}
    .align-items-baseline {align-items: baseline;}
    .align-content-stretch {align-content: stretch;}
    .align-content-start {align-content: start;}
    .align-content-center {align-content: center;}
    .align-content-end {align-content: end;}
    .align-content-baseline {align-content: baseline;}
    .justify-content-stretch {justify-content: stretch;}
    .justify-content-start {justify-content: start;}
    .justify-content-center {justify-content: center;}
    .justify-content-end {justify-content: end;}
    .justify-content-between {justify-content: space-between;}
    .justify-content-around {justify-content: space-around;}
    .justify-content-evenly {justify-content: space-evenly;}
    /* ================================================================================================
  GAPS
    ================================================================================================ */
    .gap-0 {gap: 0;}
    .gap-1 {gap: 0.25rem;}
    .gap-2 {gap: 0.5rem;}
    .gap-3 {gap: 0.625rem;}
    .gap-4 {gap: 0.75rem;}
    .gap-5 {gap: 0.875rem;}
    .gap-6 {gap: 1rem;}
    .gap-7 {gap: 1.25rem;}
    .gap-8 {gap: 1.5rem;}
    .gap-9 {gap: 1.625rem;}
    .gap-10 {gap: 1.75rem;}
    .gap-11 {gap: 1.875rem;}
    .gap-12 {gap: 2rem;}
    .row-gap-1 {row-gap:0.25rem;}
    .row-gap-2 {row-gap: 0.5rem;}
    .row-gap-3 {row-gap: 0.75rem;}
    .row-gap-4 {row-gap: 1rem;}
/* ================================================================================================
   Content overflow and scroll
   ================================================================================================ */
    .overflow-hidden {overflow: hidden;}
    .overflow-clip {overflow: clip;}
    .overflow-auto {overflow: auto;}
    .overflow-x-hidden {overflow-x: hidden;}
    .overflow-x-clip {overflow-x: clip;}
    .overflow-x-auto {overflow-x: auto;}
    .overflow-y-hidden {overflow-y: hidden;}
    .overflow-y-clip {overflow-y: clip;}
    .overflow-y-auto {overflow-y: auto;}
    .scrollbar-thin {scrollbar-width: thin;}
    .scrollbar-none {scrollbar-width: none;}
/* ================================================================================================
   Text wrapping and text overflows 
   ================================================================================================ */
    .text-nowrap {white-space: nowrap; text-wrap-mode: nowrap;}
    .text-overflow-ellipsis {text-overflow: ellipsis;}
    .text-overflow-clip {text-overflow: clip;}
/* ================================================================================================
   Margins
   ================================================================================================ */
   /*- bottom margin */
   .mb-01 {margin-bottom: calc(var(--spacing-base2) * 1);} 
   .mb-02 {margin-bottom: calc(var(--spacing-base2) * 2);} 
   .mb-03 {margin-bottom: calc(var(--spacing-base2) * 3);}     
   .mb-04 {margin-bottom: calc(var(--spacing-base2) * 4);}
   .mb-05 {margin-bottom: calc(var(--spacing-base2) * 5);}
   .mb-06 {margin-bottom: calc(var(--spacing-base2) * 6);}
   .mb-07 {margin-bottom: calc(var(--spacing-base2) * 7);}
   .mb-08 {margin-bottom: calc(var(--spacing-base2) * 8);}
   .mb-09 {margin-bottom: calc(var(--spacing-base2) * 9);}
   .mb-10 {margin-bottom: calc(var(--spacing-base2) * 10);}
   .mb-11 {margin-bottom: calc(var(--spacing-base2) * 11);}
   .mb-12 {margin-bottom: calc(var(--spacing-base2) * 12);}
   .mb-13 {margin-bottom: calc(var(--spacing-base2) * 13);}
   .mb-14 {margin-bottom: calc(var(--spacing-base2) * 14);}
   .mb-15 {margin-bottom: calc(var(--spacing-base2) * 15);}
   .mb-16 {margin-bottom: calc(var(--spacing-base2) * 16);}
   .mb-17 {margin-bottom: calc(var(--spacing-base2) * 17);}
   .mb-18 {margin-bottom: calc(var(--spacing-base2) * 18);}
   /*- top margin */
   .mt-01 {margin-top: calc(var(--spacing-base2) * 1);} 
   .mt-02 {margin-top: calc(var(--spacing-base2) * 2);} 
   .mt-03 {margin-top: calc(var(--spacing-base2) * 3);}     
   .mt-04 {margin-top: calc(var(--spacing-base2) * 4);}
   .mt-05 {margin-top: calc(var(--spacing-base2) * 5);}
   .mt-06 {margin-top: calc(var(--spacing-base2) * 6);}
   .mt-07 {margin-top: calc(var(--spacing-base2) * 7);}
   .mt-08 {margin-top: calc(var(--spacing-base2) * 8);}
   .mt-09 {margin-top: calc(var(--spacing-base2) * 9);}
   .mt-10 {margin-top: calc(var(--spacing-base2) * 10);}
   .mt-11 {margin-top: calc(var(--spacing-base2) * 11);}
   .mt-12 {margin-top: calc(var(--spacing-base2) * 12);}
   .mt-13 {margin-top: calc(var(--spacing-base2) * 13);}
   .mt-14 {margin-top: calc(var(--spacing-base2) * 14);}
   .mt-15 {margin-top: calc(var(--spacing-base2) * 15);}
   .mt-16 {margin-top: calc(var(--spacing-base2) * 16);}
   .mt-17 {margin-top: calc(var(--spacing-base2) * 17);}
   .mt-18 {margin-top: calc(var(--spacing-base2) * 18);}
   /*- left margin */
   .ml-01 {margin-left: calc(var(--spacing-base2) * 1);} 
   .ml-02 {margin-left: calc(var(--spacing-base2) * 2);} 
   .ml-03 {margin-left: calc(var(--spacing-base2) * 3);} 
   .ml-04 {margin-left: calc(var(--spacing-base2) * 4);}
   .ml-05 {margin-left: calc(var(--spacing-base2) * 5);}
   .ml-06 {margin-left: calc(var(--spacing-base2) * 6);}
   .ml-07 {margin-left: calc(var(--spacing-base2) * 7);}
   .ml-08 {margin-left: calc(var(--spacing-base2) * 8);}
   .ml-09 {margin-left: calc(var(--spacing-base2) * 9);}
   .ml-10 {margin-left: calc(var(--spacing-base2) * 10);}
   .ml-11 {margin-left: calc(var(--spacing-base2) * 11);}
   .ml-12 {margin-left: calc(var(--spacing-base2) * 12);}
   .ml-13 {margin-left: calc(var(--spacing-base2) * 13);}
   .ml-14 {margin-left: calc(var(--spacing-base2) * 14);}
   .ml-15 {margin-left: calc(var(--spacing-base2) * 15);}
   .ml-16 {margin-left: calc(var(--spacing-base2) * 16);}
   .ml-17 {margin-left: calc(var(--spacing-base2) * 17);}
   .ml-18 {margin-left: calc(var(--spacing-base2) * 18);}
   /*- right margin */
   .mr-01 {margin-right: calc(var(--spacing-base2) * 1);} 
   .mr-02 {margin-right: calc(var(--spacing-base2) * 2);} 
   .mr-03 {margin-right: calc(var(--spacing-base2) * 3);} 
   .mr-04 {margin-right: calc(var(--spacing-base2) * 4);}
   .mr-05 {margin-right: calc(var(--spacing-base2) * 5);}
   .mr-06 {margin-right: calc(var(--spacing-base2) * 6);}
   .mr-07 {margin-right: calc(var(--spacing-base2) * 7);}
   .mr-08 {margin-right: calc(var(--spacing-base2) * 8);}
   .mr-09 {margin-right: calc(var(--spacing-base2) * 9);}
   .mr-10 {margin-right: calc(var(--spacing-base2) * 10);}
   .mr-11 {margin-right: calc(var(--spacing-base2) * 11);}
   .mr-12 {margin-right: calc(var(--spacing-base2) * 12);}
   .mr-13 {margin-right: calc(var(--spacing-base2) * 13);}
   .mr-14 {margin-right: calc(var(--spacing-base2) * 14);}
   .mr-15 {margin-right: calc(var(--spacing-base2) * 15);}
   .mr-16 {margin-right: calc(var(--spacing-base2) * 16);}
   .mr-17 {margin-right: calc(var(--spacing-base2) * 17);}
   .mr-18 {margin-right: calc(var(--spacing-base2) * 18);}
   /*- left and right margin */
   .mx-01 {margin-inline: calc(var(--spacing-base2) * 1);} 
   .mx-02 {margin-inline: calc(var(--spacing-base2) * 2);} 
   .mx-03 {margin-inline: calc(var(--spacing-base2) * 3);} 
   .mx-04 {margin-inline: calc(var(--spacing-base2) * 4);}
   .mx-05 {margin-inline: calc(var(--spacing-base2) * 5);}
   .mx-06 {margin-inline: calc(var(--spacing-base2) * 6);}
   .mx-07 {margin-inline: calc(var(--spacing-base2) * 7);}
   .mx-08 {margin-inline: calc(var(--spacing-base2) * 8);}
   .mx-09 {margin-inline: calc(var(--spacing-base2) * 9);}
   .mx-10 {margin-inline: calc(var(--spacing-base2) * 10);}
   .mx-11 {margin-inline: calc(var(--spacing-base2) * 11);}
   .mx-12 {margin-inline: calc(var(--spacing-base2) * 12);}
   .mx-13 {margin-inline: calc(var(--spacing-base2) * 13);}
   .mx-14 {margin-inline: calc(var(--spacing-base2) * 14);}
   .mx-15 {margin-inline: calc(var(--spacing-base2) * 15);}
   .mx-16 {margin-inline: calc(var(--spacing-base2) * 16);}
   .mx-17 {margin-inline: calc(var(--spacing-base2) * 17);}
   .mx-18 {margin-inline: calc(var(--spacing-base2) * 18);}
   /*- top and bottom margin */
   .my-01 {margin-block: calc(var(--spacing-base2) * 1);} 
   .my-02 {margin-block: calc(var(--spacing-base2) * 2);} 
   .my-03 {margin-block: calc(var(--spacing-base2) * 3);} 
   .my-04 {margin-block: calc(var(--spacing-base2) * 4);}
   .my-05 {margin-block: calc(var(--spacing-base2) * 5);}
   .my-06 {margin-block: calc(var(--spacing-base2) * 6);}
   .my-07 {margin-block: calc(var(--spacing-base2) * 7);}
   .my-08 {margin-block: calc(var(--spacing-base2) * 8);}
   .my-09 {margin-block: calc(var(--spacing-base2) * 9);}
   .my-10 {margin-block: calc(var(--spacing-base2) * 10);}
   .my-11 {margin-block: calc(var(--spacing-base2) * 11);}
   .my-12 {margin-block: calc(var(--spacing-base2) * 12);}
   .my-13 {margin-block: calc(var(--spacing-base2) * 13);}
   .my-14 {margin-block: calc(var(--spacing-base2) * 14);}
   .my-15 {margin-block: calc(var(--spacing-base2) * 15);}
   .my-16 {margin-block: calc(var(--spacing-base2) * 16);}
   .my-17 {margin-block: calc(var(--spacing-base2) * 17);}
   .my-18 {margin-block: calc(var(--spacing-base2) * 18);}
   /*- margin all corners */
   .m-01 {margin: calc(var(--spacing-base2) * 1);} 
   .m-02 {margin: calc(var(--spacing-base2) * 2);} 
   .m-03 {margin: calc(var(--spacing-base2) * 3);} 
   .m-04 {margin: calc(var(--spacing-base2) * 4);}
   .m-05 {margin: calc(var(--spacing-base2) * 5);}
   .m-06 {margin: calc(var(--spacing-base2) * 6);}
   .m-07 {margin: calc(var(--spacing-base2) * 7);}
   .m-08 {margin: calc(var(--spacing-base2) * 8);}
   .m-09 {margin: calc(var(--spacing-base2) * 9);}
   .m-10 {margin: calc(var(--spacing-base2) * 10);}
   .m-11 {margin: calc(var(--spacing-base2) * 11);}
   .m-12 {margin: calc(var(--spacing-base2) * 12);}
   .m-13 {margin: calc(var(--spacing-base2) * 13);}
   .m-14 {margin: calc(var(--spacing-base2) * 14);}
   .m-15 {margin: calc(var(--spacing-base2) * 15);}
   .m-16 {margin: calc(var(--spacing-base2) * 16);}
   .m-17 {margin: calc(var(--spacing-base2) * 17);}
   .m-18 {margin: calc(var(--spacing-base2) * 18);}
   .mt-auto {margin-top: auto;}
   .mt-00 {margin-top: 0;}
   .mr-auto {margin-right: auto;}
   .mr-00 {margin-right: 0;}
   .mb-auto {margin-bottom: auto;}
   .mb-00 {margin-bottom: 0;}
   .ml-auto {margin-left: auto;}
   .ml-00 {margin-left: 0;}
   .mx-auto {margin-inline:auto;}
   .mx-00 {margin-inline: 0;}
   .my-auto {margin-block: auto;}
   .my-00 {margin-block: 0;}
   .m-auto {margin: auto;}
    /* ================================================================================================
        Paddings
       ================================================================================================ */
    /*- bottom padding */
    .pb-01 {padding-bottom: calc(var(--spacing-base2) * 1);}
    .pb-02 {padding-bottom: calc(var(--spacing-base2) * 2);}
    .pb-03 {padding-bottom: calc(var(--spacing-base2) * 3);}
    .pb-04 {padding-bottom: calc(var(--spacing-base2) * 4);}
    .pb-05 {padding-bottom: calc(var(--spacing-base2) * 5);}
    .pb-06 {padding-bottom: calc(var(--spacing-base2) * 6);}
    .pb-07 {padding-bottom: calc(var(--spacing-base2) * 7);}
    .pb-08 {padding-bottom: calc(var(--spacing-base2) * 8);}
    .pb-09 {padding-bottom: calc(var(--spacing-base2) * 9);}
    .pb-10 {padding-bottom: calc(var(--spacing-base2) * 10);}
    .pb-11 {padding-bottom: calc(var(--spacing-base2) * 11);}
    .pb-12 {padding-bottom: calc(var(--spacing-base2) * 12);}
    .pb-13 {padding-bottom: calc(var(--spacing-base2) * 13);}
    .pb-14 {padding-bottom: calc(var(--spacing-base2) * 14);}
    .pb-15 {padding-bottom: calc(var(--spacing-base2) * 15);}
    .pb-16 {padding-bottom: calc(var(--spacing-base2) * 16);}
    .pb-17 {padding-bottom: calc(var(--spacing-base2) * 17);}
    .pb-18 {padding-bottom: calc(var(--spacing-base2) * 18);}
    .pb-19 {padding-bottom: calc(var(--spacing-base2) * 19);}
    .pb-20 {padding-bottom: calc(var(--spacing-base2) * 20);}
    .pb-21 {padding-bottom: calc(var(--spacing-base2) * 21);}
    .pb-22 {padding-bottom: calc(var(--spacing-base2) * 22);}
    .pb-23 {padding-bottom: calc(var(--spacing-base2) * 23);}
    .pb-24 {padding-bottom: calc(var(--spacing-base2) * 24);}
    /*- top padding */
    .pt-01 {padding-top: calc(var(--spacing-base2) * 1);}
    .pt-02 {padding-top: calc(var(--spacing-base2) * 2);}
    .pt-03 {padding-top: calc(var(--spacing-base2) * 3);}
    .pt-04 {padding-top: calc(var(--spacing-base2) * 4);}
    .pt-05 {padding-top: calc(var(--spacing-base2) * 5);}
    .pt-06 {padding-top: calc(var(--spacing-base2) * 6);}
    .pt-07 {padding-top: calc(var(--spacing-base2) * 7);}
    .pt-08 {padding-top: calc(var(--spacing-base2) * 8);}
    .pt-09 {padding-top: calc(var(--spacing-base2) * 9);}
    .pt-10 {padding-top: calc(var(--spacing-base2) * 10);}
    .pt-11 {padding-top: calc(var(--spacing-base2) * 11);}
    .pt-12 {padding-top: calc(var(--spacing-base2) * 12);}
    .pt-13 {padding-top: calc(var(--spacing-base2) * 13);}
    .pt-14 {padding-top: calc(var(--spacing-base2) * 14);}
    .pt-15 {padding-top: calc(var(--spacing-base2) * 15);}
    .pt-16 {padding-top: calc(var(--spacing-base2) * 16);}
    .pt-17 {padding-top: calc(var(--spacing-base2) * 17);}
    .pt-18 {padding-top: calc(var(--spacing-base2) * 18);}
    .pt-19 {padding-top: calc(var(--spacing-base2) * 19);}
    .pt-20 {padding-top: calc(var(--spacing-base2) * 20);}
    .pt-21 {padding-top: calc(var(--spacing-base2) * 21);}
    .pt-22 {padding-top: calc(var(--spacing-base2) * 22);}
    .pt-23 {padding-top: calc(var(--spacing-base2) * 23);}
    .pt-24 {padding-top: calc(var(--spacing-base2) * 24);}
    /*- left padding */
    .pl-01 {padding-left: calc(var(--spacing-base2) * 1);}
    .pl-02 {padding-left: calc(var(--spacing-base2) * 2);}
    .pl-03 {padding-left: calc(var(--spacing-base2) * 3);}
    .pl-04 {padding-left: calc(var(--spacing-base2) * 4);}
    .pl-05 {padding-left: calc(var(--spacing-base2) * 5);}
    .pl-06 {padding-left: calc(var(--spacing-base2) * 6);}
    .pl-07 {padding-left: calc(var(--spacing-base2) * 7);}
    .pl-08 {padding-left: calc(var(--spacing-base2) * 8);}
    .pl-09 {padding-left: calc(var(--spacing-base2) * 9);}
    .pl-10 {padding-left: calc(var(--spacing-base2) * 10);}
    .pl-11 {padding-left: calc(var(--spacing-base2) * 11);}
    .pl-12 {padding-left: calc(var(--spacing-base2) * 12);}
    .pl-13 {padding-left: calc(var(--spacing-base2) * 13);}
    .pl-14 {padding-left: calc(var(--spacing-base2) * 14);}
    .pl-15 {padding-left: calc(var(--spacing-base2) * 15);}
    .pl-16 {padding-left: calc(var(--spacing-base2) * 16);}
    .pl-17 {padding-left: calc(var(--spacing-base2) * 17);}
    .pl-18 {padding-left: calc(var(--spacing-base2) * 18);}
    .pl-19 {padding-left: calc(var(--spacing-base2) * 19);}
    .pl-20 {padding-left: calc(var(--spacing-base2) * 20);}
    .pl-21 {padding-left: calc(var(--spacing-base2) * 21);}
    .pl-22 {padding-left: calc(var(--spacing-base2) * 22);}
    .pl-23 {padding-left: calc(var(--spacing-base2) * 23);}
    .pl-24 {padding-left: calc(var(--spacing-base2) * 24);}
    /*- right padding */
    .pr-01 {padding-right: calc(var(--spacing-base2) * 1);}
    .pr-02 {padding-right: calc(var(--spacing-base2) * 2);}
    .pr-03 {padding-right: calc(var(--spacing-base2) * 3);}
    .pr-04 {padding-right: calc(var(--spacing-base2) * 4);}
    .pr-05 {padding-right: calc(var(--spacing-base2) * 5);}
    .pr-06 {padding-right: calc(var(--spacing-base2) * 6);}
    .pr-07 {padding-right: calc(var(--spacing-base2) * 7);}
    .pr-08 {padding-right: calc(var(--spacing-base2) * 8);}
    .pr-09 {padding-right: calc(var(--spacing-base2) * 9);}
    .pr-10 {padding-right: calc(var(--spacing-base2) * 10);}
    .pr-11 {padding-right: calc(var(--spacing-base2) * 11);}
    .pr-12 {padding-right: calc(var(--spacing-base2) * 12);}
    .pr-13 {padding-right: calc(var(--spacing-base2) * 13);}
    .pr-14 {padding-right: calc(var(--spacing-base2) * 14);}
    .pr-15 {padding-right: calc(var(--spacing-base2) * 15);}
    .pr-16 {padding-right: calc(var(--spacing-base2) * 16);}
    .pr-17 {padding-right: calc(var(--spacing-base2) * 17);}
    .pr-18 {padding-right: calc(var(--spacing-base2) * 18);}
    .pr-19 {padding-right: calc(var(--spacing-base2) * 19);}
    .pr-20 {padding-right: calc(var(--spacing-base2) * 20);}
    .pr-21 {padding-right: calc(var(--spacing-base2) * 21);}
    .pr-22 {padding-right: calc(var(--spacing-base2) * 22);}
    .pr-23 {padding-right: calc(var(--spacing-base2) * 23);}
    .pr-24 {padding-right: calc(var(--spacing-base2) * 24);}
    /*- left and right padding */
    .px-01 {padding-inline: calc(var(--spacing-base2) * 1);}
    .px-02 {padding-inline: calc(var(--spacing-base2) * 2);}
    .px-03 {padding-inline: calc(var(--spacing-base2) * 3);}
    .px-04 {padding-inline: calc(var(--spacing-base2) * 4);}
    .px-05 {padding-inline: calc(var(--spacing-base2) * 5);}
    .px-06 {padding-inline: calc(var(--spacing-base2) * 6);}
    .px-07 {padding-inline: calc(var(--spacing-base2) * 7);}
    .px-08 {padding-inline: calc(var(--spacing-base2) * 8);}
    .px-09 {padding-inline: calc(var(--spacing-base2) * 9);}
    .px-10 {padding-inline: calc(var(--spacing-base2) * 10);}
    .px-11 {padding-inline: calc(var(--spacing-base2) * 11);}
    .px-12 {padding-inline: calc(var(--spacing-base2) * 12);}
    .px-13 {padding-inline: calc(var(--spacing-base2) * 13);}
    .px-14 {padding-inline: calc(var(--spacing-base2) * 14);}
    .px-15 {padding-inline: calc(var(--spacing-base2) * 15);}
    .px-16 {padding-inline: calc(var(--spacing-base2) * 16);}
    .px-17 {padding-inline: calc(var(--spacing-base2) * 17);}
    .px-18 {padding-inline: calc(var(--spacing-base2) * 18);}
    .px-19 {padding-inline: calc(var(--spacing-base2) * 19);}
    .px-20 {padding-inline: calc(var(--spacing-base2) * 20);}
    .px-21 {padding-inline: calc(var(--spacing-base2) * 21);}
    .px-22 {padding-inline: calc(var(--spacing-base2) * 22);}
    .px-23 {padding-inline: calc(var(--spacing-base2) * 23);}
    .px-24 {padding-inline: calc(var(--spacing-base2) * 24);}
    /*- top and bottom padding */
    .py-01 {padding-block: calc(var(--spacing-base2) * 1);}
    .py-02 {padding-block: calc(var(--spacing-base2) * 2);}
    .py-03 {padding-block: calc(var(--spacing-base2) * 3);}
    .py-04 {padding-block: calc(var(--spacing-base2) * 4);}
    .py-05 {padding-block: calc(var(--spacing-base2) * 5);}
    .py-06 {padding-block: calc(var(--spacing-base2) * 6);}
    .py-07 {padding-block: calc(var(--spacing-base2) * 7);}
    .py-08 {padding-block: calc(var(--spacing-base2) * 8);}
    .py-09 {padding-block: calc(var(--spacing-base2) * 9);}
    .py-10 {padding-block: calc(var(--spacing-base2) * 10);}
    .py-11 {padding-block: calc(var(--spacing-base2) * 11);}
    .py-12 {padding-block: calc(var(--spacing-base2) * 12);}
    .py-13 {padding-block: calc(var(--spacing-base2) * 13);}
    .py-14 {padding-block: calc(var(--spacing-base2) * 14);}
    .py-15 {padding-block: calc(var(--spacing-base2) * 15);}
    .py-16 {padding-block: calc(var(--spacing-base2) * 16);}
    .py-17 {padding-block: calc(var(--spacing-base2) * 17);}
    .py-18 {padding-block: calc(var(--spacing-base2) * 18);}
    .py-19 {padding-block: calc(var(--spacing-base2) * 19);}
    .py-20 {padding-block: calc(var(--spacing-base2) * 20);}
    .py-21 {padding-block: calc(var(--spacing-base2) * 21);}
    .py-22 {padding-block: calc(var(--spacing-base2) * 22);}
    .py-23 {padding-block: calc(var(--spacing-base2) * 23);}
    .py-24 {padding-block: calc(var(--spacing-base2) * 24);}
    /*- padding all corner */
    .p-01 {padding: calc(var(--spacing-base2) * 1);}
    .p-02 {padding: calc(var(--spacing-base2) * 2);}
    .p-03 {padding: calc(var(--spacing-base2) * 3);}
    .p-04 {padding: calc(var(--spacing-base2) * 4);}
    .p-05 {padding: calc(var(--spacing-base2) * 5);}
    .p-06 {padding: calc(var(--spacing-base2) * 6);}
    .p-07 {padding: calc(var(--spacing-base2) * 7);}
    .p-08 {padding: calc(var(--spacing-base2) * 8);}
    .p-09 {padding: calc(var(--spacing-base2) * 9);}
    .p-10 {padding: calc(var(--spacing-base2) * 10);}
    .p-11 {padding: calc(var(--spacing-base2) * 11);}
    .p-12 {padding: calc(var(--spacing-base2) * 12);}
    .p-13 {padding: calc(var(--spacing-base2) * 13);}
    .p-14 {padding: calc(var(--spacing-base2) * 14);}
    .p-15 {padding: calc(var(--spacing-base2) * 15);}
    .p-16 {padding: calc(var(--spacing-base2) * 16);}
    .p-17 {padding: calc(var(--spacing-base2) * 17);}
    .p-18 {padding: calc(var(--spacing-base2) * 18);}
    .p-19 {padding: calc(var(--spacing-base2) * 19);}
    .p-20 {padding: calc(var(--spacing-base2) * 20);}
    .p-21 {padding: calc(var(--spacing-base2) * 21);}
    .p-22 {padding: calc(var(--spacing-base2) * 22);}
    .p-23 {padding: calc(var(--spacing-base2) * 23);}
    .p-24 {padding: calc(var(--spacing-base2) * 24);}
    .pt-00 {padding-top: 0;}
    .pr-00 {padding-right: 0;}
    .pb-00 {padding-bottom: 0;}
    .pl-00 {padding-left: 0;}
    .py-00 {padding-block: 0;}
    .px-00 {padding-inline: 0;}
    .p-00 {padding: 0;}
/* ================================================================================================
   Shadows
================================================================================================ */
    .shadow-1 {box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.13 -0.00404584 -0.0277062 / 0.08) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;}
    .shadow-2 {box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;}
    .shadow-3 {box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;}
    .shadow-4 {box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;}
    .shadow-5 {box-shadow: rgb(60 64 67 / 1%) 0px 1px 2px 0px, rgb(60 64 67 / 5%) 0px 1px 3px 1px;}
    .shadow-6 {box-shadow: rgb(60 64 67 / 10%) 0px 1px 2px 0px, rgb(60 64 67 / 8%) 0px 2px 6px 2px;}
    .shadow-7 {box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;}
    .shadow-8 {box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;}
    .shadow-9 {box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;}
    .shadow-10 {box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;}
    .shadow-11 {box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;}
    .shadow-inset-1 {box-shadow: rgb(0 0 0 / 4%) 0px 0px 3px 1px inset, rgb(0 0 0 / 2%) 0px 0px 0px 1px inset;}
    .shadow-inset-2 {box-shadow: rgb(204 219 232) 0px 0px 2px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;}
    .shadow-card {box-shadow: 1px 1px 10px 0px rgb(0 0 0 / 20%);}
    .props-shadow-1 {box-shadow: var(--shadow-1);}
    .props-shadow-2 {box-shadow: var(--shadow-2);}
    .props-shadow-3 {box-shadow: var(--shadow-3);}
    .props-shadow-4 {box-shadow: var(--shadow-4);}
    .props-shadow-5 {box-shadow: var(--shadow-5);}
    .props-shadow-6 {box-shadow: var(--shadow-6);}
    .props-inner-shadow-1 {box-shadow:var(--inner-shadow-1);}
    .props-inner-shadow-2 {box-shadow:var(--inner-shadow-2);}
    .props-inner-shadow-3 {box-shadow:var(--inner-shadow-3);}
    .props-inner-shadow-4 {box-shadow:var(--inner-shadow-4);}
    .props-inner-shadow-5 {box-shadow:var(--inner-shadow-5);}

/* ================================================================================================
   Border Radius
   ================================================================================================ */
    .round-01 {border-radius: calc(var(--spacing-base2) * 1);}
    .round-02 {border-radius: calc(var(--spacing-base2) * 2);}
    .round-03 {border-radius: calc(var(--spacing-base2) * 3);}
    .round-04 {border-radius: calc(var(--spacing-base2) * 4);}
    .round-05 {border-radius: calc(var(--spacing-base2) * 5);}
    .round-06 {border-radius: calc(var(--spacing-base2) * 6);}
    .round-07 {border-radius: calc(var(--spacing-base2) * 7);}
    .round-08 {border-radius: calc(var(--spacing-base2) * 8);}
    .round-09 {border-radius: calc(var(--spacing-base2) * 9);}
    .round-10 {border-radius: calc(var(--spacing-base2) * 10);}
    .round-11 {border-radius: calc(var(--spacing-base2) * 11);}
    .round-12 {border-radius: calc(var(--spacing-base2) * 12);}
    .round-00 {border-radius: 0;}

    .outline-gray {
        outline: 2px dashed gray;
        outline-offset: -2px;
    }

    .outline {
        outline: 1px dashed pink;
        outline-offset: -1px;
    }

    .outline > * {
        outline: 1px dashed gray;
        outline-offset: -1px;
    }

    .border-none {
        border: none;
    }

    .outline-none {
        outline: none;
    }

    .stroke-none {
        stroke: none;
    }

    .hidden {
        display: none;
    }

    .d-none {
        display: none;
    }

    .sticky-top {
        position: sticky;
        top: 0;
        z-index: 999;
    }

    .sticky-bottom {
        position: sticky;
        bottom: 0;
        z-index: 999;
    }

    .separator {
        --border: var(--separator-background);
        /* margin: 0.5rem 0; */
        flex-shrink: 0;
        line-height: 1;
        height: 1px;
        background: var(--border);
    }

    .w-stretch {width: -webkit-fill-available; width: -moz-available; width: stretch;}
    .w-100 {width: 100%;}
    .w-auto {width: auto;}
    .w-100vh {width: 100vw;}
    .w-webkit-fill-available {width:-webkit-fill-available;}
    .min-w-auto {min-width: auto;}

    .h-stretch {height: stretch;}
    .h-100 {height: 100%;}
    .h-auto {height: auto;}
    .h-100vw {height: 100vh;}
    .min-h-auto {min-height: auto;}

    .max-w-100p {max-width: 100%;}
    .max-w-90p {max-width: 90%;}
    .max-w-80p {max-width: 80%;}
    .max-w-70p {max-width: 70%;}
    .max-w-60p {max-width: 60%;}
    .max-w-50p {max-width: 50%;}
    .max-w-40p {max-width: 40%;}
    .max-w-30p {max-width: 40%;}    
    .max-w-25p {max-width: 25%;}
    .max-w-20p {max-width: 20%;}
    .max-w-10p {max-width: 10%;}

    .lh-1 {line-height: 1!important;}
    .lh-auto{line-height: auto;}
    .text-center {text-align: center !important;}
    .text-left {text-align: left !important;}
    .text-right {text-align: right !important;}
    .text-start {text-align: start !important;}
    .text-end {text-align: end !important;}
    .d-none {display: none !important;}

    .outline-0 {outline: 0 !important;}
    .outline-dashed {
        outline: 2px dashed gray;
        outline-offset: -1px;
    }

    .border-radius-0 {border-radius: 0 !important;}
    .border-left-radius-0 {
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
    }
    .border-0 {border: 0 ;}
    .border-right-radius-0 {
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }
    .border-radius-0 {border-radius: 0 !important;}

    .text-overline {
        font-size: var(--body-xs);
        font-weight: 700;
        text-transform: uppercase;
        color: var(--text-muted);
        letter-spacing: 0.05em;
        display: block;
    }

    .overline {
        font-size: var(--body-xs);
        font-weight: 700;
        text-transform: uppercase;
        color: var(--text-muted);
        letter-spacing: 0.05em;
        display: block;
    }

    .body-2xl {
        font-size: var(--body-2xl);
        line-height: var(--line-height);
        /*margin-bottom: 1rem;*/
    }

    .body-xxl {
        font-size: var(--body-xxl);
        line-height: var(--line-height);
        /*margin-bottom: 1rem;*/
    }
    .body-xl {
        font-size: var(--body-xl);
        line-height: var(--line-height);
        /*margin-bottom: 1rem;*/
    }
    .body-lg {
        font-size: var(--body-lg);
        line-height: var(--line-height);
        /*margin-bottom: 1rem;*/
    }
    .body-md {
        font-size: var(--body-md);
        line-height: var(--line-height);
        /*margin-bottom: 1rem;*/
    }
    .body-sm {
        font-size: var(--body-sm);
        line-height: var(--line-height);
        /*margin-bottom: 1rem;*/
    }
    .body-xs {
        font-size: var(--body-xs);
        line-height: var(--line-height);
        /*margin-bottom: 1rem;*/
    }
    .body-xxs {
        font-size: var(--body-xxs);
        line-height: var(--line-height);
        /*margin-bottom: 1rem;*/
    }
    .body-2xs {
        font-size: var(--body-2xs);
        line-height: var(--line-height);
        /*margin-bottom: 1rem;*/
    }
    .text-2xs {font-size: 0.675rem;font-weight: 400;}
    .text-1xs {font-size: 0.75rem;font-weight: 400;}
    .text-xs {font-size: 0.8rem;}
    .text-sm {font-size: 0.9rem;}
    .text-md {font-size: 1rem;}
    .text-lg {font-size: 1.25rem;}
    .text-xl {font-size: 1.5rem;}
    .text-1xl {font-size: 2.25rem;}
    .text-2xl {font-size: 2.5rem;}
    .text-3xl {font-size: 2.75rem;}
    .caption {
        font-size: var(--body-xxs);
        opacity: 0.7;
    }
    .smalltext {
        font-size: 9.75px;
    }
    .touppercase {text-transform: uppercase;}
    .tolowercase {text-transform: lowercase;}
    .tocapitalize {text-transform: capitalize;}
/* ================================================================================================
   Animations
   ================================================================================================ */
    .rotate-0 {transform: rotate(0deg);}
    .rotate-45 {transform: rotate(45deg);}
    .rotate-90 {transform: rotate(-90deg);}
    .rotate-180 {transform: rotate(-180deg);}

    @keyframes spin {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
    .animate-spin {
        display: inline-block; 
        animation: spin 5s linear infinite;
    }

    /* LOADER ANIMATION */
    .spinner {
      position: relative;
    }
    .spinner:before {
        position: absolute;
        content: "";
        block-size: 1em;
        border-color: transparent currentColor currentColor;
        border-radius: 50%;
        border-style: solid;
        border-width: 3px;
        display: inline-block;
        inline-size: 1em;
        opacity: 0.5;
        align-self: center;
        left: -24px;
        animation: spin 0.7s linear infinite;
    }
    @keyframes spin {
      to {
        transform: rotate(1turn);
      }
    }

       /*---------------------------------------------------*/
    /*** C O L O R  P A L E T T E S ***/
    /*---------------------------------------------------*/
    /* fallback colors */
    .bg-inherit { background-color:inherit; }
    .clr-inherit { color:inherit; }
   /* GRAY */
  .clr-gray-00 {color:var(--gray-00);}
  .clr-gray-01 {color:var(--gray-01);}
  .clr-gray-02 {color:var(--gray-02);}
  .clr-gray-03 {color:var(--gray-03);}
  .clr-gray-04 {color:var(--gray-04);}
  .clr-gray-05 {color:var(--gray-05);}
  .clr-gray-06 {color:var(--gray-06);}
  .clr-gray-07 {color:var(--gray-07);}
  .clr-gray-08 {color:var(--gray-08);}
  .clr-gray-09 {color:var(--gray-09);}
  .clr-gray-10 {color:var(--gray-10);}
  .clr-gray-11 {color:var(--gray-11);}
  .clr-gray-12 {color:var(--gray-12);}
  .bg-gray-00 {background-color:var(--gray-00);}
  .bg-gray-01 {background-color:var(--gray-01);}
  .bg-gray-02 {background-color:var(--gray-02);}
  .bg-gray-03 {background-color:var(--gray-03);}
  .bg-gray-04 {background-color:var(--gray-04);}
  .bg-gray-05 {background-color:var(--gray-05);}
  .bg-gray-06 {background-color:var(--gray-06);}
  .bg-gray-07 {background-color:var(--gray-07);}
  .bg-gray-08 {background-color:var(--gray-08);}
  .bg-gray-09 {background-color:var(--gray-09);}
  .bg-gray-10 {background-color:var(--gray-10);}
  .bg-gray-11 {background-color:var(--gray-11);}
  .bg-gray-12 {background-color:var(--gray-12);}
  /* STONE */
  .clr-stone-00 {color:var(--stone-00);}
  .clr-stone-01 {color:var(--stone-01);}
  .clr-stone-02 {color:var(--stone-02);}
  .clr-stone-03 {color:var(--stone-03);}
  .clr-stone-04 {color:var(--stone-04);}
  .clr-stone-05 {color:var(--stone-05);}
  .clr-stone-06 {color:var(--stone-06);}
  .clr-stone-07 {color:var(--stone-07);}
  .clr-stone-08 {color:var(--stone-08);}
  .clr-stone-09 {color:var(--stone-09);}
  .clr-stone-10 {color:var(--stone-10);}
  .clr-stone-11 {color:var(--stone-11);}
  .clr-stone-12 {color:var(--stone-12);}
  .bg-stone-00 {background-color:var(--stone-00);}
  .bg-stone-01 {background-color:var(--stone-01);}
  .bg-stone-02 {background-color:var(--stone-02);}
  .bg-stone-03 {background-color:var(--stone-03);}
  .bg-stone-04 {background-color:var(--stone-04);}
  .bg-stone-05 {background-color:var(--stone-05);}
  .bg-stone-06 {background-color:var(--stone-06);}
  .bg-stone-07 {background-color:var(--stone-07);}
  .bg-stone-08 {background-color:var(--stone-08);}
  .bg-stone-09 {background-color:var(--stone-09);}
  .bg-stone-10 {background-color:var(--stone-10);}
  .bg-stone-11 {background-color:var(--stone-11);}
  .bg-stone-12 {background-color:var(--stone-12);}
  /* RED */
  .clr-red-00 {color:var(--red-00);}
  .clr-red-01 {color:var(--red-01);}
  .clr-red-02 {color:var(--red-02);}
  .clr-red-03 {color:var(--red-03);}
  .clr-red-04 {color:var(--red-04);}
  .clr-red-05 {color:var(--red-05);}
  .clr-red-06 {color:var(--red-06);}
  .clr-red-07 {color:var(--red-07);}
  .clr-red-08 {color:var(--red-08);}
  .clr-red-09 {color:var(--red-09);}
  .clr-red-10 {color:var(--red-10);}
  .clr-red-11 {color:var(--red-11);}
  .clr-red-12 {color:var(--red-12);}
  .bg-red-00 {background-color:var(--red-00);}
  .bg-red-01 {background-color:var(--red-01);}
  .bg-red-02 {background-color:var(--red-02);}
  .bg-red-03 {background-color:var(--red-03);}
  .bg-red-04 {background-color:var(--red-04);}
  .bg-red-05 {background-color:var(--red-05);}
  .bg-red-06 {background-color:var(--red-06);}
  .bg-red-07 {background-color:var(--red-07);}
  .bg-red-08 {background-color:var(--red-08);}
  .bg-red-09 {background-color:var(--red-09);}
  .bg-red-10 {background-color:var(--red-10);}
  .bg-red-11 {background-color:var(--red-11);}
  .bg-red-12 {background-color:var(--red-12);}
  /* PINK */
  .clr-pink-00 {color:var(--pink-00);}
  .clr-pink-01 {color:var(--pink-01);}
  .clr-pink-02 {color:var(--pink-02);}
  .clr-pink-03 {color:var(--pink-03);}
  .clr-pink-04 {color:var(--pink-04);}
  .clr-pink-05 {color:var(--pink-05);}
  .clr-pink-06 {color:var(--pink-06);}
  .clr-pink-07 {color:var(--pink-07);}
  .clr-pink-08 {color:var(--pink-08);}
  .clr-pink-09 {color:var(--pink-09);}
  .clr-pink-10 {color:var(--pink-10);}
  .clr-pink-11 {color:var(--pink-11);}
  .clr-pink-12 {color:var(--pink-12);}
  .bg-pink-00 {background-color:var(--pink-00);}
  .bg-pink-01 {background-color:var(--pink-01);}
  .bg-pink-02 {background-color:var(--pink-02);}
  .bg-pink-03 {background-color:var(--pink-03);}
  .bg-pink-04 {background-color:var(--pink-04);}
  .bg-pink-05 {background-color:var(--pink-05);}
  .bg-pink-06 {background-color:var(--pink-06);}
  .bg-pink-07 {background-color:var(--pink-07);}
  .bg-pink-08 {background-color:var(--pink-08);}
  .bg-pink-09 {background-color:var(--pink-09);}
  .bg-pink-10 {background-color:var(--pink-10);}
  .bg-pink-11 {background-color:var(--pink-11);}
  .bg-pink-12 {background-color:var(--pink-12);}
  /* PURPLE */
  .clr-purple-00 {color:var(--purple-00);}
  .clr-purple-01 {color:var(--purple-01);}
  .clr-purple-02 {color:var(--purple-02);}
  .clr-purple-03 {color:var(--purple-03);}
  .clr-purple-04 {color:var(--purple-04);}
  .clr-purple-05 {color:var(--purple-05);}
  .clr-purple-06 {color:var(--purple-06);}
  .clr-purple-07 {color:var(--purple-07);}
  .clr-purple-08 {color:var(--purple-08);}
  .clr-purple-09 {color:var(--purple-09);}
  .clr-purple-10 {color:var(--purple-10);}
  .clr-purple-11 {color:var(--purple-11);}
  .clr-purple-12 {color:var(--purple-12);}
  .bg-purple-00 {background-color:var(--purple-00);}
  .bg-purple-01 {background-color:var(--purple-01);}
  .bg-purple-02 {background-color:var(--purple-02);}
  .bg-purple-03 {background-color:var(--purple-03);}
  .bg-purple-04 {background-color:var(--purple-04);}
  .bg-purple-05 {background-color:var(--purple-05);}
  .bg-purple-06 {background-color:var(--purple-06);}
  .bg-purple-07 {background-color:var(--purple-07);}
  .bg-purple-08 {background-color:var(--purple-08);}
  .bg-purple-09 {background-color:var(--purple-09);}
  .bg-purple-10 {background-color:var(--purple-10);}
  .bg-purple-11 {background-color:var(--purple-11);}
  .bg-purple-12 {background-color:var(--purple-12);}  
  /* VIOLET */
  .clr-violet-00 {color:var(--violet-00);}
  .clr-violet-01 {color:var(--violet-01);}
  .clr-violet-02 {color:var(--violet-02);}
  .clr-violet-03 {color:var(--violet-03);}
  .clr-violet-04 {color:var(--violet-04);}
  .clr-violet-05 {color:var(--violet-05);}
  .clr-violet-06 {color:var(--violet-06);}
  .clr-violet-07 {color:var(--violet-07);}
  .clr-violet-08 {color:var(--violet-08);}
  .clr-violet-09 {color:var(--violet-09);}
  .clr-violet-10 {color:var(--violet-10);}
  .clr-violet-11 {color:var(--violet-11);}
  .clr-violet-12 {color:var(--violet-12);}
  .bg-violet-00 {background-color:var(--violet-00);}
  .bg-violet-01 {background-color:var(--violet-01);}
  .bg-violet-02 {background-color:var(--violet-02);}
  .bg-violet-03 {background-color:var(--violet-03);}
  .bg-violet-04 {background-color:var(--violet-04);}
  .bg-violet-05 {background-color:var(--violet-05);}
  .bg-violet-06 {background-color:var(--violet-06);}
  .bg-violet-07 {background-color:var(--violet-07);}
  .bg-violet-08 {background-color:var(--violet-08);}
  .bg-violet-09 {background-color:var(--violet-09);}
  .bg-violet-10 {background-color:var(--violet-10);}
  .bg-violet-11 {background-color:var(--violet-11);}
  .bg-violet-12 {background-color:var(--violet-12);}
  /* INDIGO */
  .clr-indigo-00 {color:var(--indigo-00);}
  .clr-indigo-01 {color:var(--indigo-01);}
  .clr-indigo-02 {color:var(--indigo-02);}
  .clr-indigo-03 {color:var(--indigo-03);}
  .clr-indigo-04 {color:var(--indigo-04);}
  .clr-indigo-05 {color:var(--indigo-05);}
  .clr-indigo-06 {color:var(--indigo-06);}
  .clr-indigo-07 {color:var(--indigo-07);}
  .clr-indigo-08 {color:var(--indigo-08);}
  .clr-indigo-09 {color:var(--indigo-09);}
  .clr-indigo-10 {color:var(--indigo-10);}
  .clr-indigo-11 {color:var(--indigo-11);}
  .clr-indigo-12 {color:var(--indigo-12);}
  .bg-indigo-00 {background-color:var(--indigo-00);}
  .bg-indigo-01 {background-color:var(--indigo-01);}
  .bg-indigo-02 {background-color:var(--indigo-02);}
  .bg-indigo-03 {background-color:var(--indigo-03);}
  .bg-indigo-04 {background-color:var(--indigo-04);}
  .bg-indigo-05 {background-color:var(--indigo-05);}
  .bg-indigo-06 {background-color:var(--indigo-06);}
  .bg-indigo-07 {background-color:var(--indigo-07);}
  .bg-indigo-08 {background-color:var(--indigo-08);}
  .bg-indigo-09 {background-color:var(--indigo-09);}
  .bg-indigo-10 {background-color:var(--indigo-10);}
  .bg-indigo-11 {background-color:var(--indigo-11);}
  .bg-indigo-12 {background-color:var(--indigo-12);}
  /* BLUE */
  .clr-blue-00 {color:var(--blue-00);}
  .clr-blue-01 {color:var(--blue-01);}
  .clr-blue-02 {color:var(--blue-02);}
  .clr-blue-03 {color:var(--blue-03);}
  .clr-blue-04 {color:var(--blue-04);}
  .clr-blue-05 {color:var(--blue-05);}
  .clr-blue-06 {color:var(--blue-06);}
  .clr-blue-07 {color:var(--blue-07);}
  .clr-blue-08 {color:var(--blue-08);}
  .clr-blue-09 {color:var(--blue-09);}
  .clr-blue-10 {color:var(--blue-10);}
  .clr-blue-11 {color:var(--blue-11);}
  .clr-blue-12 {color:var(--blue-12);}
  .bg-blue-00 {background-color:var(--blue-00);}
  .bg-blue-01 {background-color:var(--blue-01);}
  .bg-blue-02 {background-color:var(--blue-02);}
  .bg-blue-03 {background-color:var(--blue-03);}
  .bg-blue-04 {background-color:var(--blue-04);}
  .bg-blue-05 {background-color:var(--blue-05);}
  .bg-blue-06 {background-color:var(--blue-06);}
  .bg-blue-07 {background-color:var(--blue-07);}
  .bg-blue-08 {background-color:var(--blue-08);}
  .bg-blue-09 {background-color:var(--blue-09);}
  .bg-blue-10 {background-color:var(--blue-10);}
  .bg-blue-11 {background-color:var(--blue-11);}
  .bg-blue-12 {background-color:var(--blue-12);}
  /* CYAN */
  .clr-cyan-00 {color:var(--cyan-00);}
  .clr-cyan-01 {color:var(--cyan-01);}
  .clr-cyan-02 {color:var(--cyan-02);}
  .clr-cyan-03 {color:var(--cyan-03);}
  .clr-cyan-04 {color:var(--cyan-04);}
  .clr-cyan-05 {color:var(--cyan-05);}
  .clr-cyan-06 {color:var(--cyan-06);}
  .clr-cyan-07 {color:var(--cyan-07);}
  .clr-cyan-08 {color:var(--cyan-08);}
  .clr-cyan-09 {color:var(--cyan-09);}
  .clr-cyan-10 {color:var(--cyan-10);}
  .clr-cyan-11 {color:var(--cyan-11);}
  .clr-cyan-12 {color:var(--cyan-12);}
  .bg-cyan-00 {background-color:var(--cyan-00);}
  .bg-cyan-01 {background-color:var(--cyan-01);}
  .bg-cyan-02 {background-color:var(--cyan-02);}
  .bg-cyan-03 {background-color:var(--cyan-03);}
  .bg-cyan-04 {background-color:var(--cyan-04);}
  .bg-cyan-05 {background-color:var(--cyan-05);}
  .bg-cyan-06 {background-color:var(--cyan-06);}
  .bg-cyan-07 {background-color:var(--cyan-07);}
  .bg-cyan-08 {background-color:var(--cyan-08);}
  .bg-cyan-09 {background-color:var(--cyan-09);}
  .bg-cyan-10 {background-color:var(--cyan-10);}
  .bg-cyan-11 {background-color:var(--cyan-11);}
  .bg-cyan-12 {background-color:var(--cyan-12);}
  /* TEAL */
  .clr-teal-00 {color:var(--teal-00);}
  .clr-teal-01 {color:var(--teal-01);}
  .clr-teal-02 {color:var(--teal-02);}
  .clr-teal-03 {color:var(--teal-03);}
  .clr-teal-04 {color:var(--teal-04);}
  .clr-teal-05 {color:var(--teal-05);}
  .clr-teal-06 {color:var(--teal-06);}
  .clr-teal-07 {color:var(--teal-07);}
  .clr-teal-08 {color:var(--teal-08);}
  .clr-teal-09 {color:var(--teal-09);}
  .clr-teal-10 {color:var(--teal-10);}
  .clr-teal-11 {color:var(--teal-11);}
  .clr-teal-12 {color:var(--teal-12);}
  .bg-teal-00 {background-color:var(--teal-00);}
  .bg-teal-01 {background-color:var(--teal-01);}
  .bg-teal-02 {background-color:var(--teal-02);}
  .bg-teal-03 {background-color:var(--teal-03);}
  .bg-teal-04 {background-color:var(--teal-04);}
  .bg-teal-05 {background-color:var(--teal-05);}
  .bg-teal-06 {background-color:var(--teal-06);}
  .bg-teal-07 {background-color:var(--teal-07);}
  .bg-teal-08 {background-color:var(--teal-08);}
  .bg-teal-09 {background-color:var(--teal-09);}
  .bg-teal-10 {background-color:var(--teal-10);}
  .bg-teal-11 {background-color:var(--teal-11);}
  .bg-teal-12 {background-color:var(--teal-12);}
  /* GREEN */
  .clr-green-00 {color:var(--green-00);}
  .clr-green-01 {color:var(--green-01);}
  .clr-green-02 {color:var(--green-02);}
  .clr-green-03 {color:var(--green-03);}
  .clr-green-04 {color:var(--green-04);}
  .clr-green-05 {color:var(--green-05);}
  .clr-green-06 {color:var(--green-06);}
  .clr-green-07 {color:var(--green-07);}
  .clr-green-08 {color:var(--green-08);}
  .clr-green-09 {color:var(--green-09);}
  .clr-green-10 {color:var(--green-10);}
  .clr-green-11 {color:var(--green-11);}
  .clr-green-12 {color:var(--green-12);}
  .bg-green-00 {background-color:var(--green-00);}
  .bg-green-01 {background-color:var(--green-01);}
  .bg-green-02 {background-color:var(--green-02);}
  .bg-green-03 {background-color:var(--green-03);}
  .bg-green-04 {background-color:var(--green-04);}
  .bg-green-05 {background-color:var(--green-05);}
  .bg-green-06 {background-color:var(--green-06);}
  .bg-green-07 {background-color:var(--green-07);}
  .bg-green-08 {background-color:var(--green-08);}
  .bg-green-09 {background-color:var(--green-09);}
  .bg-green-10 {background-color:var(--green-10);}
  .bg-green-11 {background-color:var(--green-11);}
  .bg-green-12 {background-color:var(--green-12);}
  /* LIME */
  .clr-lime-00 {color:var(--lime-00);}
  .clr-lime-01 {color:var(--lime-01);}
  .clr-lime-02 {color:var(--lime-02);}
  .clr-lime-03 {color:var(--lime-03);}
  .clr-lime-04 {color:var(--lime-04);}
  .clr-lime-05 {color:var(--lime-05);}
  .clr-lime-06 {color:var(--lime-06);}
  .clr-lime-07 {color:var(--lime-07);}
  .clr-lime-08 {color:var(--lime-08);}
  .clr-lime-09 {color:var(--lime-09);}
  .clr-lime-10 {color:var(--lime-10);}
  .clr-lime-11 {color:var(--lime-11);}
  .clr-lime-12 {color:var(--lime-12);}
  .bg-lime-00 {background-color:var(--lime-00);}
  .bg-lime-01 {background-color:var(--lime-01);}
  .bg-lime-02 {background-color:var(--lime-02);}
  .bg-lime-03 {background-color:var(--lime-03);}
  .bg-lime-04 {background-color:var(--lime-04);}
  .bg-lime-05 {background-color:var(--lime-05);}
  .bg-lime-06 {background-color:var(--lime-06);}
  .bg-lime-07 {background-color:var(--lime-07);}
  .bg-lime-08 {background-color:var(--lime-08);}
  .bg-lime-09 {background-color:var(--lime-09);}
  .bg-lime-10 {background-color:var(--lime-10);}
  .bg-lime-11 {background-color:var(--lime-11);}
  .bg-lime-12 {background-color:var(--lime-12);}
  /* YELLOW */
  .clr-yellow-00 {color:var(--yellow-00);}
  .clr-yellow-01 {color:var(--yellow-01);}
  .clr-yellow-02 {color:var(--yellow-02);}
  .clr-yellow-03 {color:var(--yellow-03);}
  .clr-yellow-04 {color:var(--yellow-04);}
  .clr-yellow-05 {color:var(--yellow-05);}
  .clr-yellow-06 {color:var(--yellow-06);}
  .clr-yellow-07 {color:var(--yellow-07);}
  .clr-yellow-08 {color:var(--yellow-08);}
  .clr-yellow-09 {color:var(--yellow-09);}
  .clr-yellow-10 {color:var(--yellow-10);}
  .clr-yellow-11 {color:var(--yellow-11);}
  .clr-yellow-12 {color:var(--yellow-12);}
  .bg-yellow-00 {background-color:var(--yellow-00);}
  .bg-yellow-01 {background-color:var(--yellow-01);}
  .bg-yellow-02 {background-color:var(--yellow-02);}
  .bg-yellow-03 {background-color:var(--yellow-03);}
  .bg-yellow-04 {background-color:var(--yellow-04);}
  .bg-yellow-05 {background-color:var(--yellow-05);}
  .bg-yellow-06 {background-color:var(--yellow-06);}
  .bg-yellow-07 {background-color:var(--yellow-07);}
  .bg-yellow-08 {background-color:var(--yellow-08);}
  .bg-yellow-09 {background-color:var(--yellow-09);}
  .bg-yellow-10 {background-color:var(--yellow-10);}
  .bg-yellow-11 {background-color:var(--yellow-11);}
  .bg-yellow-12 {background-color:var(--yellow-12);}
  /* ORANGE */
  .clr-orange-00 {color:var(--orange-00);}
  .clr-orange-01 {color:var(--orange-01);}
  .clr-orange-02 {color:var(--orange-02);}
  .clr-orange-03 {color:var(--orange-03);}
  .clr-orange-04 {color:var(--orange-04);}
  .clr-orange-05 {color:var(--orange-05);}
  .clr-orange-06 {color:var(--orange-06);}
  .clr-orange-07 {color:var(--orange-07);}
  .clr-orange-08 {color:var(--orange-08);}
  .clr-orange-09 {color:var(--orange-09);}
  .clr-orange-10 {color:var(--orange-10);}
  .clr-orange-11 {color:var(--orange-11);}
  .clr-orange-12 {color:var(--orange-12);}
  .bg-orange-00 {background-color:var(--orange-00);}
  .bg-orange-01 {background-color:var(--orange-01);}
  .bg-orange-02 {background-color:var(--orange-02);}
  .bg-orange-03 {background-color:var(--orange-03);}
  .bg-orange-04 {background-color:var(--orange-04);}
  .bg-orange-05 {background-color:var(--orange-05);}
  .bg-orange-06 {background-color:var(--orange-06);}
  .bg-orange-07 {background-color:var(--orange-07);}
  .bg-orange-08 {background-color:var(--orange-08);}
  .bg-orange-09 {background-color:var(--orange-09);}
  .bg-orange-10 {background-color:var(--orange-10);}
  .bg-orange-11 {background-color:var(--orange-11);}
  .bg-orange-12 {background-color:var(--orange-12);}
  /* CHOCO */
  .clr-choco-00 {color:var(--choco-00);}
  .clr-choco-01 {color:var(--choco-01);}
  .clr-choco-02 {color:var(--choco-02);}
  .clr-choco-03 {color:var(--choco-03);}
  .clr-choco-04 {color:var(--choco-04);}
  .clr-choco-05 {color:var(--choco-05);}
  .clr-choco-06 {color:var(--choco-06);}
  .clr-choco-07 {color:var(--choco-07);}
  .clr-choco-08 {color:var(--choco-08);}
  .clr-choco-09 {color:var(--choco-09);}
  .clr-choco-10 {color:var(--choco-10);}
  .clr-choco-11 {color:var(--choco-11);}
  .clr-choco-12 {color:var(--choco-12);}
  .bg-choco-00 {background-color:var(--choco-00);}
  .bg-choco-01 {background-color:var(--choco-01);}
  .bg-choco-02 {background-color:var(--choco-02);}
  .bg-choco-03 {background-color:var(--choco-03);}
  .bg-choco-04 {background-color:var(--choco-04);}
  .bg-choco-05 {background-color:var(--choco-05);}
  .bg-choco-06 {background-color:var(--choco-06);}
  .bg-choco-07 {background-color:var(--choco-07);}
  .bg-choco-08 {background-color:var(--choco-08);}
  .bg-choco-09 {background-color:var(--choco-09);}
  .bg-choco-10 {background-color:var(--choco-10);}
  .bg-choco-11 {background-color:var(--choco-11);}
  .bg-choco-12 {background-color:var(--choco-12);}
  /* BROWN */
  .clr-brown-00 {color:var(--brown-00);}
  .clr-brown-01 {color:var(--brown-01);}
  .clr-brown-02 {color:var(--brown-02);}
  .clr-brown-03 {color:var(--brown-03);}
  .clr-brown-04 {color:var(--brown-04);}
  .clr-brown-05 {color:var(--brown-05);}
  .clr-brown-06 {color:var(--brown-06);}
  .clr-brown-07 {color:var(--brown-07);}
  .clr-brown-08 {color:var(--brown-08);}
  .clr-brown-09 {color:var(--brown-09);}
  .clr-brown-10 {color:var(--brown-10);}
  .clr-brown-11 {color:var(--brown-11);}
  .clr-brown-12 {color:var(--brown-12);}
  .bg-brown-00 {background-color:var(--brown-00);}
  .bg-brown-01 {background-color:var(--brown-01);}
  .bg-brown-02 {background-color:var(--brown-02);}
  .bg-brown-03 {background-color:var(--brown-03);}
  .bg-brown-04 {background-color:var(--brown-04);}
  .bg-brown-05 {background-color:var(--brown-05);}
  .bg-brown-06 {background-color:var(--brown-06);}
  .bg-brown-07 {background-color:var(--brown-07);}
  .bg-brown-08 {background-color:var(--brown-08);}
  .bg-brown-09 {background-color:var(--brown-09);}
  .bg-brown-10 {background-color:var(--brown-10);}
  .bg-brown-11 {background-color:var(--brown-11);}
  .bg-brown-12 {background-color:var(--brown-12);}
  /* SAND */
  .clr-sand-00 {color:var(--sand-00);}
  .clr-sand-01 {color:var(--sand-01);}
  .clr-sand-02 {color:var(--sand-02);}
  .clr-sand-03 {color:var(--sand-03);}
  .clr-sand-04 {color:var(--sand-04);}
  .clr-sand-05 {color:var(--sand-05);}
  .clr-sand-06 {color:var(--sand-06);}
  .clr-sand-07 {color:var(--sand-07);}
  .clr-sand-08 {color:var(--sand-08);}
  .clr-sand-09 {color:var(--sand-09);}
  .clr-sand-10 {color:var(--sand-10);}
  .clr-sand-11 {color:var(--sand-11);}
  .clr-sand-12 {color:var(--sand-12);}
  .bg-sand-00 {background-color:var(--sand-00);}
  .bg-sand-01 {background-color:var(--sand-01);}
  .bg-sand-02 {background-color:var(--sand-02);}
  .bg-sand-03 {background-color:var(--sand-03);}
  .bg-sand-04 {background-color:var(--sand-04);}
  .bg-sand-05 {background-color:var(--sand-05);}
  .bg-sand-06 {background-color:var(--sand-06);}
  .bg-sand-07 {background-color:var(--sand-07);}
  .bg-sand-08 {background-color:var(--sand-08);}
  .bg-sand-09 {background-color:var(--sand-09);}
  .bg-sand-10 {background-color:var(--sand-10);}
  .bg-sand-11 {background-color:var(--sand-11);}
  .bg-sand-12 {background-color:var(--sand-12);}
  /* CAMO */
  .clr-camo-00 {color:var(--camo-00);}
  .clr-camo-01 {color:var(--camo-01);}
  .clr-camo-02 {color:var(--camo-02);}
  .clr-camo-03 {color:var(--camo-03);}
  .clr-camo-04 {color:var(--camo-04);}
  .clr-camo-05 {color:var(--camo-05);}
  .clr-camo-06 {color:var(--camo-06);}
  .clr-camo-07 {color:var(--camo-07);}
  .clr-camo-08 {color:var(--camo-08);}
  .clr-camo-09 {color:var(--camo-09);}
  .clr-camo-10 {color:var(--camo-10);}
  .clr-camo-11 {color:var(--camo-11);}
  .clr-camo-12 {color:var(--camo-12);}
  .bg-camo-00 {background-color:var(--camo-00);}
  .bg-camo-01 {background-color:var(--camo-01);}
  .bg-camo-02 {background-color:var(--camo-02);}
  .bg-camo-03 {background-color:var(--camo-03);}
  .bg-camo-04 {background-color:var(--camo-04);}
  .bg-camo-05 {background-color:var(--camo-05);}
  .bg-camo-06 {background-color:var(--camo-06);}
  .bg-camo-07 {background-color:var(--camo-07);}
  .bg-camo-08 {background-color:var(--camo-08);}
  .bg-camo-09 {background-color:var(--camo-09);}
  .bg-camo-10 {background-color:var(--camo-10);}
  .bg-camo-11 {background-color:var(--camo-11);}
  .bg-camo-12 {background-color:var(--camo-12);}
  /* JUNGLE */
  .clr-jungle-00 {color:var(--jungle-00);}
  .clr-jungle-01 {color:var(--jungle-01);}
  .clr-jungle-02 {color:var(--jungle-02);}
  .clr-jungle-03 {color:var(--jungle-03);}
  .clr-jungle-04 {color:var(--jungle-04);}
  .clr-jungle-05 {color:var(--jungle-05);}
  .clr-jungle-06 {color:var(--jungle-06);}
  .clr-jungle-07 {color:var(--jungle-07);}
  .clr-jungle-08 {color:var(--jungle-08);}
  .clr-jungle-09 {color:var(--jungle-09);}
  .clr-jungle-10 {color:var(--jungle-10);}
  .clr-jungle-11 {color:var(--jungle-11);}
  .clr-jungle-12 {color:var(--jungle-12);}
  .bg-jungle-00 {background-color:var(--jungle-00);}
  .bg-jungle-01 {background-color:var(--jungle-01);}
  .bg-jungle-02 {background-color:var(--jungle-02);}
  .bg-jungle-03 {background-color:var(--jungle-03);}
  .bg-jungle-04 {background-color:var(--jungle-04);}
  .bg-jungle-05 {background-color:var(--jungle-05);}
  .bg-jungle-06 {background-color:var(--jungle-06);}
  .bg-jungle-07 {background-color:var(--jungle-07);}
  .bg-jungle-08 {background-color:var(--jungle-08);}
  .bg-jungle-09 {background-color:var(--jungle-09);}
  .bg-jungle-10 {background-color:var(--jungle-10);}
  .bg-jungle-11 {background-color:var(--jungle-11);}
  .bg-jungle-12 {background-color:var(--jungle-12);}
    /* neutral */
    .bg-neutral-050 {background-color: var(--neutral-050) !important;}
    .bg-neutral-100 {background-color: var(--neutral-100) !important;}
    .bg-neutral-200 {background-color: var(--neutral-200) !important;}
    .bg-neutral-300 {background-color: var(--neutral-300) !important;}
    .bg-neutral-400 {background-color: var(--neutral-400) !important;}
    .bg-neutral-500 {background-color: var(--neutral-500) !important;}
    .bg-neutral-600 {background-color: var(--neutral-600) !important;}
    .bg-neutral-700 {background-color: var(--neutral-700) !important;}
    .bg-neutral-800 {background-color: var(--neutral-800) !important;}
    .bg-neutral-900 {background-color: var(--neutral-900) !important;}
    .bg-neutral-950 {background-color: var(--neutral-950) !important;}
    .clr-neutral-050 {
        color: var(--neutral-050) !important;
    }
    .clr-neutral-100 {
        color: var(--neutral-100) !important;
    }
    .clr-neutral-200 {
        color: var(--neutral-200) !important;
    }
    .clr-neutral-300 {
        color: var(--neutral-300) !important;
    }
    .clr-neutral-400 {
        color: var(--neutral-400) !important;
    }
    .clr-neutral-500 {
        color: var(--neutral-500) !important;
    }
    .clr-neutral-600 {
        color: var(--neutral-600) !important;
    }
    .clr-neutral-700 {
        color: var(--neutral-700) !important;
    }
    .clr-neutral-800 {
        color: var(--neutral-800) !important;
    }
    .clr-neutral-900 {
        color: var(--neutral-900) !important;
    }
    .clr-neutral-950 {
        color: var(--neutral-950);
    }
    /* stone */
    .bg-stone-050 {
        background-color: var(--stone-050);
    }

    .bg-stone-100 {
        background-color: var(--stone-100);
    }

    .bg-stone-200 {
        background-color: var(--stone-200);
    }

    .bg-stone-300 {
        background-color: var(--stone-300);
    }

    .bg-stone-400 {
        background-color: var(--stone-400);
    }

    .bg-stone-500 {
        background-color: var(--stone-500);
    }

    .bg-stone-600 {
        background-color: var(--stone-600);
    }

    .bg-stone-700 {
        background-color: var(--stone-700);
    }

    .bg-stone-800 {
        background-color: var(--stone-800);
    }

    .bg-stone-900 {
        background-color: var(--stone-900);
    }

    .bg-stone-950 {
        background-color: var(--stone-950);
    }

    .clr-stone-050 {
        color: var(--stonel-050);
    }

    .clr-stone-100 {
        color: var(--stonel-100);
    }

    .clr-stone-200 {
        color: var(--stonel-200);
    }

    .clr-stone-300 {
        color: var(--stonel-300);
    }

    .clr-stone-400 {
        color: var(--stonel-400);
    }

    .clr-stone-500 {
        color: var(--stonel-500);
    }

    .clr-stone-600 {
        color: var(--stonel-600);
    }

    .clr-stone-700 {
        color: var(--stonel-700);
    }

    .clr-stone-800 {
        color: var(--stonel-800);
    }

    .clr-stone-900 {
        color: var(--stonel-900);
    }

    .clr-stone-950 {
        color: var(--stonel-950);
    }
    /* zinc */
    .bg-zinc-050 {
        background-color: var(--zinc-050);
    }

    .bg-zinc-100 {
        background-color: var(--zinc-100);
    }

    .bg-zinc-200 {
        background-color: var(--zinc-200);
    }

    .bg-zinc-300 {
        background-color: var(--zinc-300);
    }

    .bg-zinc-400 {
        background-color: var(--zinc-400);
    }

    .bg-zinc-500 {
        background-color: var(--zinc-500);
    }

    .bg-zinc-600 {
        background-color: var(--zinc-600);
    }

    .bg-zinc-700 {
        background-color: var(--zinc-700);
    }

    .bg-zinc-800 {
        background-color: var(--zinc-800);
    }

    .bg-zinc-900 {
        background-color: var(--zinc-900);
    }

    .bg-zinc-950 {
        background-color: var(--zinc-950);
    }

    .clr-zinc-050 {
        color: var(--zinc-050) !important;
    }

    .clr-zinc-100 {
        color: var(--zinc-100) !important;
    }

    .clr-zinc-200 {
        color: var(--zinc-200) !important;
    }

    .clr-zinc-300 {
        color: var(--zinc-300) !important;
    }

    .clr-zinc-400 {
        color: var(--zinc-400) !important;
    }

    .clr-zinc-500 {
        color: var(--zinc-500) !important;
    }

    .clr-zinc-600 {
        color: var(--zinc-600) !important;
    }

    .clr-zinc-700 {
        color: var(--zinc-700) !important;
    }

    .clr-zinc-800 {
        color: var(--zinc-800) !important;
    }

    .clr-zinc-900 {
        color: var(--zinc-900) !important;
    }

    .clr-zinc-950 {
        color: var(--zinc-950) !important;
    }
    /* slate */
    .bg-slate-050 {
        background-color: var(--slate-050);
    }

    .bg-slate-100 {
        background-color: var(--slate-100);
    }

    .bg-slate-200 {
        background-color: var(--slate-200);
    }

    .bg-slate-300 {
        background-color: var(--slate-300);
    }

    .bg-slate-400 {
        background-color: var(--slate-400);
    }

    .bg-slate-500 {
        background-color: var(--slate-500);
    }

    .bg-slate-600 {
        background-color: var(--slate-600);
    }

    .bg-slate-700 {
        background-color: var(--slate-700);
    }

    .bg-slate-800 {
        background-color: var(--slate-800);
    }

    .bg-slate-900 {
        background-color: var(--slate-900);
    }

    .bg-slate-950 {
        background-color: var(--slate-950);
    }

    .clr-slate-050 {
        color: var(--slate-050);
    }

    .clr-slate-100 {
        color: var(--slate-100);
    }

    .clr-slate-200 {
        color: var(--slate-200);
    }

    .clr-slate-300 {
        color: var(--slate-300);
    }

    .clr-slate-400 {
        color: var(--slate-400);
    }

    .clr-slate-500 {
        color: var(--slate-500);
    }

    .clr-slate-600 {
        color: var(--slate-600);
    }

    .clr-slate-700 {
        color: var(--slate-700);
    }

    .clr-slate-800 {
        color: var(--slate-800);
    }

    .clr-slate-900 {
        color: var(--slate-900);
    }

    .clr-slate-950 {
        color: var(--slate-950);
    }
    /* gray */
    .bg-gray-050 {
        background-color: var(--gray-050) !important;
    }

    .bg-gray-100 {
        background-color: var(--gray-100) !important;
    }

    .bg-gray-200 {
        background-color: var(--gray-200) !important;
    }

    .bg-gray-300 {
        background-color: var(--gray-300) !important;
    }

    .bg-gray-400 {
        background-color: var(--gray-400) !important;
    }

    .bg-gray-500 {
        background-color: var(--gray-500) !important;
    }

    .bg-gray-600 {
        background-color: var(--gray-600) !important;
    }

    .bg-gray-700 {
        background-color: var(--gray-700) !important;
    }

    .bg-gray-800 {
        background-color: var(--gray-800) !important;
    }

    .bg-gray-900 {
        background-color: var(--gray-900) !important;
    }

    .bg-gray-950 {
        background-color: var(--gray-950) !important;
    }

    .clr-gray-050 {
        color: var(--gray-050) !important;
    }

    .clr-gray-100 {
        color: var(--gray-100) !important;
    }

    .clr-gray-200 {
        color: var(--gray-200) !important;
    }

    .clr-gray-300 {
        color: var(--gray-300) !important;
    }

    .clr-gray-400 {
        color: var(--gray-400) !important;
    }

    .clr-gray-500 {
        color: var(--gray-500) !important;
    }

    .clr-gray-600 {
        color: var(--gray-600) !important;
    }

    .clr-gray-700 {
        color: var(--gray-700) !important;
    }

    .clr-gray-800 {
        color: var(--gray-800) !important;
    }

    .clr-gray-900 {
        color: var(--gray-900) !important;
    }

    .clr-gray-950 {
        color: var(--gray-950) !important;
    }
    /* mauve */
    .bg-mauve-050 {
        background-color: var(--mauve-050);
    }

    .bg-mauve-100 {
        background-color: var(--mauve-100);
    }

    .bg-mauve-200 {
        background-color: var(--mauve-200);
    }

    .bg-mauve-300 {
        background-color: var(--mauve-300);
    }

    .bg-mauve-400 {
        background-color: var(--mauve-400);
    }

    .bg-mauve-500 {
        background-color: var(--mauve-500);
    }

    .bg-mauve-600 {
        background-color: var(--mauve-600);
    }

    .bg-mauve-700 {
        background-color: var(--mauve-700);
    }

    .bg-mauve-800 {
        background-color: var(--mauve-800);
    }

    .bg-mauve-900 {
        background-color: var(--mauve-900);
    }

    .bg-mauve-950 {
        background-color: var(--mauve-950);
    }

    .clr-mauve-050 {
        color: var(--mauve-050);
    }

    .clr-mauve-100 {
        color: var(--mauve-100);
    }

    .clr-mauve-200 {
        color: var(--mauve-200);
    }

    .clr-mauve-300 {
        color: var(--mauve-300);
    }

    .clr-mauve-400 {
        color: var(--mauve-400);
    }

    .clr-mauve-500 {
        color: var(--mauve-500);
    }

    .clr-mauve-600 {
        color: var(--mauve-600);
    }

    .clr-mauve-700 {
        color: var(--mauve-700);
    }

    .clr-mauve-800 {
        color: var(--mauve-800);
    }

    .clr-mauve-900 {
        color: var(--mauve-900);
    }

    .clr-mauve-950 {
        color: var(--mauve-950);
    }
    /* olive */
    .bg-olive-050 {
        background-color: var(--olive-050);
    }

    .bg-olive-100 {
        background-color: var(--olive-100);
    }

    .bg-olive-200 {
        background-color: var(--olive-200);
    }

    .bg-olive-300 {
        background-color: var(--olive-300);
    }

    .bg-olive-400 {
        background-color: var(--olive-400);
    }

    .bg-olive-500 {
        background-color: var(--olive-500);
    }

    .bg-olive-600 {
        background-color: var(--olive-600);
    }

    .bg-olive-700 {
        background-color: var(--olive-700);
    }

    .bg-olive-800 {
        background-color: var(--olive-800);
    }

    .bg-olive-900 {
        background-color: var(--olive-900);
    }

    .bg-olive-950 {
        background-color: var(--olive-950);
    }

    .clr-olive-050 {
        color: var(--olive-050);
    }

    .clr-olive-100 {
        color: var(--olive-100);
    }

    .clr-olive-200 {
        color: var(--olive-200);
    }

    .clr-olive-300 {
        color: var(--olive-300);
    }

    .clr-olive-400 {
        color: var(--olive-400);
    }

    .clr-olive-500 {
        color: var(--olive-500);
    }

    .clr-olive-600 {
        color: var(--olive-600);
    }

    .clr-olive-700 {
        color: var(--olive-700);
    }

    .clr-olive-800 {
        color: var(--olive-800);
    }

    .clr-olive-900 {
        color: var(--olive-900);
    }

    .clr-olive-950 {
        color: var(--olive-950);
    }
    /* mist */
    .bg-mist-050 {
        background-color: var(--mist-050);
    }

    .bg-mist-100 {
        background-color: var(--mist-100);
    }

    .bg-mist-200 {
        background-color: var(--mist-200);
    }

    .bg-mist-300 {
        background-color: var(--mist-300);
    }

    .bg-mist-400 {
        background-color: var(--mist-400);
    }

    .bg-mist-500 {
        background-color: var(--mist-500);
    }

    .bg-mist-600 {
        background-color: var(--mist-600);
    }

    .bg-mist-700 {
        background-color: var(--mist-700);
    }

    .bg-mist-800 {
        background-color: var(--mist-800);
    }

    .bg-mist-900 {
        background-color: var(--mist-900);
    }

    .bg-mist-950 {
        background-color: var(--mist-950);
    }

    .clr-mist-050 {
        color: var(--mist-050);
    }

    .clr-mist-100 {
        color: var(--mist-100);
    }

    .clr-mist-200 {
        color: var(--mist-200);
    }

    .clr-mist-300 {
        color: var(--mist-300);
    }

    .clr-mist-400 {
        color: var(--mist-400);
    }

    .clr-mist-500 {
        color: var(--mist-500);
    }

    .clr-mist-600 {
        color: var(--mist-600);
    }

    .clr-mist-700 {
        color: var(--mist-700);
    }

    .clr-mist-800 {
        color: var(--mist-800);
    }

    .clr-mist-900 {
        color: var(--mist-900);
    }

    .clr-mist-950 {
        color: var(--mist-950);
    }
    /* taupe */
    .bg-taupe-050 {
        background-color: var(--taupe-050);
    }

    .bg-taupe-100 {
        background-color: var(--taupe-100);
    }

    .bg-taupe-200 {
        background-color: var(--taupe-200);
    }

    .bg-taupe-300 {
        background-color: var(--taupe-300);
    }

    .bg-taupe-400 {
        background-color: var(--taupe-400);
    }

    .bg-taupe-500 {
        background-color: var(--taupe-500);
    }

    .bg-taupe-600 {
        background-color: var(--taupe-600);
    }

    .bg-taupe-700 {
        background-color: var(--taupe-700);
    }

    .bg-taupe-800 {
        background-color: var(--taupe-800);
    }

    .bg-taupe-900 {
        background-color: var(--taupe-900);
    }

    .bg-taupe-950 {
        background-color: var(--taupe-950);
    }

    .clr-taupe-050 {
        color: var(--taupe-050);
    }

    .clr-taupe-100 {
        color: var(--taupe-100);
    }

    .clr-taupe-200 {
        color: var(--taupe-200);
    }

    .clr-taupe-300 {
        color: var(--taupe-300);
    }

    .clr-taupe-400 {
        color: var(--taupe-400);
    }

    .clr-taupe-500 {
        color: var(--taupe-500);
    }

    .clr-taupe-600 {
        color: var(--taupe-600);
    }

    .clr-taupe-700 {
        color: var(--taupe-700);
    }

    .clr-taupe-800 {
        color: var(--taupe-800);
    }

    .clr-taupe-900 {
        color: var(--taupe-900);
    }

    .clr-taupe-950 {
        color: var(--taupe-950);
    }
    /* red */
    .bg-red-050 {
        background-color: var(--red-050);
    }

    .bg-red-100 {
        background-color: var(--red-100);
    }

    .bg-red-200 {
        background-color: var(--red-200);
    }

    .bg-red-300 {
        background-color: var(--red-300);
    }

    .bg-red-400 {
        background-color: var(--red-400);
    }

    .bg-red-500 {
        background-color: var(--red-500);
    }

    .bg-red-600 {
        background-color: var(--red-600);
    }

    .bg-red-700 {
        background-color: var(--red-700);
    }

    .bg-red-800 {
        background-color: var(--red-800);
    }

    .bg-red-900 {
        background-color: var(--red-900);
    }

    .bg-red-950 {
        background-color: var(--red-950);
    }

    .clr-red-050 {
        color: var(--red-050);
    }

    .clr-red-100 {
        color: var(--red-100);
    }

    .clr-red-200 {
        color: var(--red-200);
    }

    .clr-red-300 {
        color: var(--red-300);
    }

    .clr-red-400 {
        color: var(--red-400);
    }

    .clr-red-500 {
        color: var(--red-500);
    }

    .clr-red-600 {
        color: var(--red-600);
    }

    .clr-red-700 {
        color: var(--red-700);
    }

    .clr-red-800 {
        color: var(--red-800);
    }

    .clr-red-900 {
        color: var(--red-900);
    }

    .clr-red-950 {
        color: var(--red-950);
    }
    /* orange */
    .bg-orange-050 {
        background-color: var(--orange-050);
    }

    .bg-orange-100 {
        background-color: var(--orange-100);
    }

    .bg-orange-200 {
        background-color: var(--orange-200);
    }

    .bg-orange-300 {
        background-color: var(--orange-300);
    }

    .bg-orange-400 {
        background-color: var(--orange-400);
    }

    .bg-orange-500 {
        background-color: var(--orange-500);
    }

    .bg-orange-600 {
        background-color: var(--orange-600);
    }

    .bg-orange-700 {
        background-color: var(--orange-700);
    }

    .bg-orange-800 {
        background-color: var(--orange-800);
    }

    .bg-orange-900 {
        background-color: var(--orange-900);
    }

    .bg-orange-950 {
        background-color: var(--orange-950);
    }

    .clr-orange-050 {
        color: var(--orange-050);
    }

    .clr-orange-100 {
        color: var(--orange-100);
    }

    .clr-orange-200 {
        color: var(--orange-200);
    }

    .clr-orange-300 {
        color: var(--orange-300);
    }

    .clr-orange-400 {
        color: var(--orange-400);
    }

    .clr-orange-500 {
        color: var(--orange-500);
    }

    .clr-orange-600 {
        color: var(--orange-600);
    }

    .clr-orange-700 {
        color: var(--orange-700);
    }

    .clr-orange-800 {
        color: var(--orange-800);
    }

    .clr-orange-900 {
        color: var(--orange-900);
    }

    .clr-orange-950 {
        color: var(--orange-950);
    }
    /* amber */
    .bg-amber-050 {
        background-color: var(--amber-050);
    }

    .bg-amber-100 {
        background-color: var(--amber-100);
    }

    .bg-amber-200 {
        background-color: var(--amber-200);
    }

    .bg-amber-300 {
        background-color: var(--amber-300);
    }

    .bg-amber-400 {
        background-color: var(--amber-400);
    }

    .bg-amber-500 {
        background-color: var(--amber-500);
    }

    .bg-amber-600 {
        background-color: var(--amber-600);
    }

    .bg-amber-700 {
        background-color: var(--amber-700);
    }

    .bg-amber-800 {
        background-color: var(--amber-800);
    }

    .bg-amber-900 {
        background-color: var(--amber-900);
    }

    .bg-amber-950 {
        background-color: var(--amber-950);
    }

    .clr-amber-050 {
        color: var(--amber-050);
    }

    .clr-amber-100 {
        color: var(--amber-100);
    }

    .clr-amber-200 {
        color: var(--amber-200);
    }

    .clr-amber-300 {
        color: var(--amber-300);
    }

    .clr-amber-400 {
        color: var(--amber-400);
    }

    .clr-amber-500 {
        color: var(--amber-500);
    }

    .clr-amber-600 {
        color: var(--amber-600);
    }

    .clr-amber-700 {
        color: var(--amber-700);
    }

    .clr-amber-800 {
        color: var(--amber-800);
    }

    .clr-amber-900 {
        color: var(--amber-900);
    }

    .clr-amber-950 {
        color: var(--amber-950);
    }
    /* yellow */
    .bg-yellow-050 {
        background-color: var(--yellow-050);
    }

    .bg-yellow-100 {
        background-color: var(--yellow-100);
    }

    .bg-yellow-200 {
        background-color: var(--yellow-200);
    }

    .bg-yellow-300 {
        background-color: var(--yellow-300);
    }

    .bg-yellow-400 {
        background-color: var(--yellow-400);
    }

    .bg-yellow-500 {
        background-color: var(--yellow-500);
    }

    .bg-yellow-600 {
        background-color: var(--yellow-600);
    }

    .bg-yellow-700 {
        background-color: var(--yellow-700);
    }

    .bg-yellow-800 {
        background-color: var(--yellow-800);
    }

    .bg-yellow-900 {
        background-color: var(--yellow-900);
    }

    .bg-yellow-950 {
        background-color: var(--yellow-950);
    }

    .clr-yellow-050 {
        color: var(--yellow-050);
    }

    .clr-yellow-100 {
        color: var(--yellow-100);
    }

    .clr-yellow-200 {
        color: var(--yellow-200);
    }

    .clr-yellow-300 {
        color: var(--yellow-300);
    }

    .clr-yellow-400 {
        color: var(--yellow-400);
    }

    .clr-yellow-500 {
        color: var(--yellow-500);
    }

    .clr-yellow-600 {
        color: var(--yellow-600);
    }

    .clr-yellow-700 {
        color: var(--yellow-700);
    }

    .clr-yellow-800 {
        color: var(--yellow-800);
    }

    .clr-yellow-900 {
        color: var(--yellow-900);
    }

    .clr-yellow-950 {
        color: var(--yellow-950);
    }
    /* lime */
    .bg-lime-050 {
        background-color: var(--lime-050);
    }

    .bg-lime-100 {
        background-color: var(--lime-100);
    }

    .bg-lime-200 {
        background-color: var(--lime-200);
    }

    .bg-lime-300 {
        background-color: var(--lime-300);
    }

    .bg-lime-400 {
        background-color: var(--lime-400);
    }

    .bg-lime-500 {
        background-color: var(--lime-500);
    }

    .bg-lime-600 {
        background-color: var(--lime-600);
    }

    .bg-lime-700 {
        background-color: var(--lime-700);
    }

    .bg-lime-800 {
        background-color: var(--lime-800);
    }

    .bg-lime-900 {
        background-color: var(--lime-900);
    }

    .bg-lime-950 {
        background-color: var(--lime-950);
    }

    .clr-lime-050 {
        color: var(--lime-050);
    }

    .clr-lime-100 {
        color: var(--lime-100);
    }

    .clr-lime-200 {
        color: var(--lime-200);
    }

    .clr-lime-300 {
        color: var(--lime-300);
    }

    .clr-lime-400 {
        color: var(--lime-400);
    }

    .clr-lime-500 {
        color: var(--lime-500);
    }

    .clr-lime-600 {
        color: var(--lime-600);
    }

    .clr-lime-700 {
        color: var(--lime-700);
    }

    .clr-lime-800 {
        color: var(--lime-800);
    }

    .clr-lime-900 {
        color: var(--lime-900);
    }

    .clr-lime-950 {
        color: var(--lime-950);
    }
    /* green */
    .bg-green-050 {
        background-color: var(--green-050);
    }

    .bg-green-100 {
        background-color: var(--green-100);
    }

    .bg-green-200 {
        background-color: var(--green-200);
    }

    .bg-green-300 {
        background-color: var(--green-300);
    }

    .bg-green-400 {
        background-color: var(--green-400);
    }

    .bg-green-500 {
        background-color: var(--green-500);
    }

    .bg-green-600 {
        background-color: var(--green-600);
    }

    .bg-green-700 {
        background-color: var(--green-700);
    }

    .bg-green-800 {
        background-color: var(--green-800);
    }

    .bg-green-900 {
        background-color: var(--green-900);
    }

    .bg-green-950 {
        background-color: var(--green-950);
    }

    .clr-green-050 {
        color: var(--green-050);
    }

    .clr-green-100 {
        color: var(--green-100);
    }

    .clr-green-200 {
        color: var(--green-200);
    }

    .clr-green-300 {
        color: var(--green-300);
    }

    .clr-green-400 {
        color: var(--green-400);
    }

    .clr-green-500 {
        color: var(--green-500);
    }

    .clr-green-600 {
        color: var(--green-600);
    }

    .clr-green-700 {
        color: var(--green-700);
    }

    .clr-green-800 {
        color: var(--green-800);
    }

    .clr-green-900 {
        color: var(--green-900);
    }

    .clr-green-950 {
        color: var(--green-950);
    }
    /* emerald */
    .bg-emerald-050 {
        background-color: var(--emerald-050);
    }

    .bg-emerald-100 {
        background-color: var(--emerald-100);
    }

    .bg-emerald-200 {
        background-color: var(--emerald-200);
    }

    .bg-emerald-300 {
        background-color: var(--emerald-300);
    }

    .bg-emerald-400 {
        background-color: var(--emerald-400);
    }

    .bg-emerald-500 {
        background-color: var(--emerald-500);
    }

    .bg-emerald-600 {
        background-color: var(--emerald-600);
    }

    .bg-emerald-700 {
        background-color: var(--emerald-700);
    }

    .bg-emerald-800 {
        background-color: var(--emerald-800);
    }

    .bg-emerald-900 {
        background-color: var(--emerald-900);
    }

    .bg-emerald-950 {
        background-color: var(--emerald-950);
    }

    .clr-emerald-050 {
        color: var(--emerald-050);
    }

    .clr-emerald-100 {
        color: var(--emerald-100);
    }

    .clr-emerald-200 {
        color: var(--emerald-200);
    }

    .clr-emerald-300 {
        color: var(--emerald-300);
    }

    .clr-emerald-400 {
        color: var(--emerald-400);
    }

    .clr-emerald-500 {
        color: var(--emerald-500);
    }

    .clr-emerald-600 {
        color: var(--emerald-600);
    }

    .clr-emerald-700 {
        color: var(--emerald-700);
    }

    .clr-emerald-800 {
        color: var(--emerald-800);
    }

    .clr-emerald-900 {
        color: var(--emerald-900);
    }

    .clr-emerald-950 {
        color: var(--emerald-950);
    }
    /* teal */
    .bg-teal-050 {
        background-color: var(--teal-050);
    }

    .bg-teal-100 {
        background-color: var(--teal-100);
    }

    .bg-teal-200 {
        background-color: var(--teal-200);
    }

    .bg-teal-300 {
        background-color: var(--teal-300);
    }

    .bg-teal-400 {
        background-color: var(--teal-400);
    }

    .bg-teal-500 {
        background-color: var(--teal-500);
    }

    .bg-teal-600 {
        background-color: var(--teal-600);
    }

    .bg-teal-700 {
        background-color: var(--teal-700);
    }

    .bg-teal-800 {
        background-color: var(--teal-800);
    }

    .bg-teal-900 {
        background-color: var(--teal-900);
    }

    .bg-teal-950 {
        background-color: var(--teal-950);
    }

    .clr-teal-050 {
        color: var(--teal-050);
    }

    .clr-teal-100 {
        color: var(--teal-100);
    }

    .clr-teal-200 {
        color: var(--teal-200);
    }

    .clr-teal-300 {
        color: var(--teal-300);
    }

    .clr-teal-400 {
        color: var(--teal-400);
    }

    .clr-teal-500 {
        color: var(--teal-500);
    }

    .clr-teal-600 {
        color: var(--teal-600);
    }

    .clr-teal-700 {
        color: var(--teal-700);
    }

    .clr-teal-800 {
        color: var(--teal-800);
    }

    .clr-teal-900 {
        color: var(--teal-900);
    }

    .clr-teal-950 {
        color: var(--teal-950);
    }
    /* cyan */
    .bg-cyan-050 {
        background-color: var(--cyan-050);
    }

    .bg-cyan-100 {
        background-color: var(--cyan-100);
    }

    .bg-cyan-200 {
        background-color: var(--cyan-200);
    }

    .bg-cyan-300 {
        background-color: var(--cyan-300);
    }

    .bg-cyan-400 {
        background-color: var(--cyan-400);
    }

    .bg-cyan-500 {
        background-color: var(--cyan-500);
    }

    .bg-cyan-600 {
        background-color: var(--cyan-600);
    }

    .bg-cyan-700 {
        background-color: var(--cyan-700);
    }

    .bg-cyan-800 {
        background-color: var(--cyan-800);
    }

    .bg-cyan-900 {
        background-color: var(--cyan-900);
    }

    .bg-cyan-950 {
        background-color: var(--cyan-950);
    }

    .clr-cyan-050 {
        color: var(--cyan-050);
    }

    .clr-cyan-100 {
        color: var(--cyan-100);
    }

    .clr-cyan-200 {
        color: var(--cyan-200);
    }

    .clr-cyan-300 {
        color: var(--cyan-300);
    }

    .clr-cyan-400 {
        color: var(--cyan-400);
    }

    .clr-cyan-500 {
        color: var(--cyan-500);
    }

    .clr-cyan-600 {
        color: var(--cyan-600);
    }

    .clr-cyan-700 {
        color: var(--cyan-700);
    }

    .clr-cyan-800 {
        color: var(--cyan-800);
    }

    .clr-cyan-900 {
        color: var(--cyan-900);
    }

    .clr-cyan-950 {
        color: var(--cyan-950);
    }
    /* sky */
    .bg-sky-050 {
        background-color: var(--sky-050);
    }

    .bg-sky-100 {
        background-color: var(--sky-100);
    }

    .bg-sky-200 {
        background-color: var(--sky-200);
    }

    .bg-sky-300 {
        background-color: var(--sky-300);
    }

    .bg-sky-400 {
        background-color: var(--sky-400);
    }

    .bg-sky-500 {
        background-color: var(--sky-500);
    }

    .bg-sky-600 {
        background-color: var(--sky-600);
    }

    .bg-sky-700 {
        background-color: var(--sky-700);
    }

    .bg-sky-800 {
        background-color: var(--sky-800);
    }

    .bg-sky-900 {
        background-color: var(--sky-900);
    }

    .bg-sky-950 {
        background-color: var(--sky-950);
    }

    .clr-sky-050 {
        color: var(--sky-050);
    }

    .clr-sky-100 {
        color: var(--sky-100);
    }

    .clr-sky-200 {
        color: var(--sky-200);
    }

    .clr-sky-300 {
        color: var(--sky-300);
    }

    .clr-sky-400 {
        color: var(--sky-400);
    }

    .clr-sky-500 {
        color: var(--sky-500);
    }

    .clr-sky-600 {
        color: var(--sky-600);
    }

    .clr-sky-700 {
        color: var(--sky-700);
    }

    .clr-sky-800 {
        color: var(--sky-800);
    }

    .clr-sky-900 {
        color: var(--sky-900);
    }

    .clr-sky-950 {
        color: var(--sky-950);
    }
    /* blue */
    .bg-blue-050 {
        background-color: var(--blue-050);
    }

    .bg-blue-100 {
        background-color: var(--blue-100);
    }

    .bg-blue-200 {
        background-color: var(--blue-200);
    }

    .bg-blue-300 {
        background-color: var(--blue-300);
    }

    .bg-blue-400 {
        background-color: var(--blue-400);
    }

    .bg-blue-500 {
        background-color: var(--blue-500);
    }

    .bg-blue-600 {
        background-color: var(--blue-600);
    }

    .bg-blue-700 {
        background-color: var(--blue-700);
    }

    .bg-blue-800 {
        background-color: var(--blue-800);
    }

    .bg-blue-900 {
        background-color: var(--blue-900);
    }

    .bg-blue-950 {
        background-color: var(--blue-950);
    }

    .clr-blue-050 {
        color: var(--blue-050);
    }

    .clr-blue-100 {
        color: var(--blue-100);
    }

    .clr-blue-200 {
        color: var(--blue-200);
    }

    .clr-blue-300 {
        color: var(--blue-300);
    }

    .clr-blue-400 {
        color: var(--blue-400);
    }

    .clr-blue-500 {
        color: var(--blue-500);
    }

    .clr-blue-600 {
        color: var(--blue-600);
    }

    .clr-blue-700 {
        color: var(--blue-700);
    }

    .clr-blue-800 {
        color: var(--blue-800);
    }

    .clr-blue-900 {
        color: var(--blue-900);
    }

    .clr-blue-950 {
        color: var(--blue-950);
    }
    /* indigo */
    .bg-indigo-050 {
        background-color: var(--indigo-050);
    }

    .bg-indigo-100 {
        background-color: var(--indigo-100);
    }

    .bg-indigo-200 {
        background-color: var(--indigo-200);
    }

    .bg-indigo-300 {
        background-color: var(--indigo-300);
    }

    .bg-indigo-400 {
        background-color: var(--indigo-400);
    }

    .bg-indigo-500 {
        background-color: var(--indigo-500);
    }

    .bg-indigo-600 {
        background-color: var(--indigo-600);
    }

    .bg-indigo-700 {
        background-color: var(--indigo-700);
    }

    .bg-indigo-800 {
        background-color: var(--indigo-800);
    }

    .bg-indigo-900 {
        background-color: var(--indigo-900);
    }

    .bg-indigo-950 {
        background-color: var(--indigo-950);
    }

    .clr-indigo-050 {
        color: var(--indigo-050);
    }

    .clr-indigo-100 {
        color: var(--indigo-100);
    }

    .clr-indigo-200 {
        color: var(--indigo-200);
    }

    .clr-indigo-300 {
        color: var(--indigo-300);
    }

    .clr-indigo-400 {
        color: var(--indigo-400);
    }

    .clr-indigo-500 {
        color: var(--indigo-500);
    }

    .clr-indigo-600 {
        color: var(--indigo-600);
    }

    .clr-indigo-700 {
        color: var(--indigo-700);
    }

    .clr-indigo-800 {
        color: var(--indigo-800);
    }

    .clr-indigo-900 {
        color: var(--indigo-900);
    }

    .clr-indigo-950 {
        color: var(--indigo-950);
    }
    /* violet */
    .bg-violet-050 {
        background-color: var(--violet-050);
    }

    .bg-violet-100 {
        background-color: var(--violet-100);
    }

    .bg-violet-200 {
        background-color: var(--violet-200);
    }

    .bg-violet-300 {
        background-color: var(--violet-300);
    }

    .bg-violet-400 {
        background-color: var(--violet-400);
    }

    .bg-violet-500 {
        background-color: var(--violet-500);
    }

    .bg-violet-600 {
        background-color: var(--violet-600);
    }

    .bg-violet-700 {
        background-color: var(--violet-700);
    }

    .bg-violet-800 {
        background-color: var(--violet-800);
    }

    .bg-violet-900 {
        background-color: var(--violet-900);
    }

    .bg-violet-950 {
        background-color: var(--violet-950);
    }

    .clr-violet-050 {
        color: var(--violet-050);
    }

    .clr-violet-100 {
        color: var(--violet-100);
    }

    .clr-violet-200 {
        color: var(--violet-200);
    }

    .clr-violet-300 {
        color: var(--violet-300);
    }

    .clr-violet-400 {
        color: var(--violet-400);
    }

    .clr-violet-500 {
        color: var(--violet-500);
    }

    .clr-violet-600 {
        color: var(--violet-600);
    }

    .clr-violet-700 {
        color: var(--violet-700);
    }

    .clr-violet-800 {
        color: var(--violet-800);
    }

    .clr-violet-900 {
        color: var(--violet-900);
    }

    .clr-violet-950 {
        color: var(--violet-950);
    }
    /* purple */
    .bg-purple-050 {
        background-color: var(--purple-050);
    }

    .bg-purple-100 {
        background-color: var(--purple-100);
    }

    .bg-purple-200 {
        background-color: var(--purple-200);
    }

    .bg-purple-300 {
        background-color: var(--purple-300);
    }

    .bg-purple-400 {
        background-color: var(--purple-400);
    }

    .bg-purple-500 {
        background-color: var(--purple-500);
    }

    .bg-purple-600 {
        background-color: var(--purple-600);
    }

    .bg-purple-700 {
        background-color: var(--purple-700);
    }

    .bg-purple-800 {
        background-color: var(--purple-800);
    }

    .bg-purple-900 {
        background-color: var(--purple-900);
    }

    .bg-purple-950 {
        background-color: var(--purple-950);
    }

    .clr-purple-050 {
        color: var(--purple-050);
    }

    .clr-purple-100 {
        color: var(--purple-100);
    }

    .clr-purple-200 {
        color: var(--purple-200);
    }

    .clr-purple-300 {
        color: var(--purple-300);
    }

    .clr-purple-400 {
        color: var(--purple-400);
    }

    .clr-purple-500 {
        color: var(--purple-500);
    }

    .clr-purple-600 {
        color: var(--purple-600);
    }

    .clr-purple-700 {
        color: var(--purple-700);
    }

    .clr-purple-800 {
        color: var(--purple-800);
    }

    .clr-purple-900 {
        color: var(--purple-900);
    }

    .clr-purple-950 {
        color: var(--purple-950);
    }
    /* fuchsia */
    .bg-fuchsia-050 {
        background-color: var(--fuchsia-050);
    }

    .bg-fuchsia-100 {
        background-color: var(--fuchsia-100);
    }

    .bg-fuchsia-200 {
        background-color: var(--fuchsia-200);
    }

    .bg-fuchsia-300 {
        background-color: var(--fuchsia-300);
    }

    .bg-fuchsia-400 {
        background-color: var(--fuchsia-400);
    }

    .bg-fuchsia-500 {
        background-color: var(--fuchsia-500);
    }

    .bg-fuchsia-600 {
        background-color: var(--fuchsia-600);
    }

    .bg-fuchsia-700 {
        background-color: var(--fuchsia-700);
    }

    .bg-fuchsia-800 {
        background-color: var(--fuchsia-800);
    }

    .bg-fuchsia-900 {
        background-color: var(--fuchsia-900);
    }

    .bg-fuchsia-950 {
        background-color: var(--fuchsia-950);
    }

    .clr-fuchsia-050 {
        color: var(--fuchsia-050);
    }

    .clr-fuchsia-100 {
        color: var(--fuchsia-100);
    }

    .clr-fuchsia-200 {
        color: var(--fuchsia-200);
    }

    .clr-fuchsia-300 {
        color: var(--fuchsia-300);
    }

    .clr-fuchsia-400 {
        color: var(--fuchsia-400);
    }

    .clr-fuchsia-500 {
        color: var(--fuchsia-500);
    }

    .clr-fuchsia-600 {
        color: var(--fuchsia-600);
    }

    .clr-fuchsia-700 {
        color: var(--fuchsia-700);
    }

    .clr-fuchsia-800 {
        color: var(--fuchsia-800);
    }

    .clr-fuchsia-900 {
        color: var(--fuchsia-900);
    }

    .clr-fuchsia-950 {
        color: var(--fuchsia-950);
    }
    /* pink */
    .bg-pink-050 {
        background-color: var(--pink-050);
    }

    .bg-pink-100 {
        background-color: var(--pink-100);
    }

    .bg-pink-200 {
        background-color: var(--pink-200);
    }

    .bg-pink-300 {
        background-color: var(--pink-300);
    }

    .bg-pink-400 {
        background-color: var(--pink-400);
    }

    .bg-pink-500 {
        background-color: var(--pink-500);
    }

    .bg-pink-600 {
        background-color: var(--pink-600);
    }

    .bg-pink-700 {
        background-color: var(--pink-700);
    }

    .bg-pink-800 {
        background-color: var(--pink-800);
    }

    .bg-pink-900 {
        background-color: var(--pink-900);
    }

    .bg-pink-950 {
        background-color: var(--pink-950);
    }

    .clr-pink-050 {
        color: var(--pink-050);
    }

    .clr-pink-100 {
        color: var(--pink-100);
    }

    .clr-pink-200 {
        color: var(--pink-200);
    }

    .clr-pink-300 {
        color: var(--pink-300);
    }

    .clr-pink-400 {
        color: var(--pink-400);
    }

    .clr-pink-500 {
        color: var(--pink-500);
    }

    .clr-pink-600 {
        color: var(--pink-600);
    }

    .clr-pink-700 {
        color: var(--pink-700);
    }

    .clr-pink-800 {
        color: var(--pink-800);
    }

    .clr-pink-900 {
        color: var(--pink-900);
    }

    .clr-pink-950 {
        color: var(--pink-950);
    }
    /* rose */
    .bg-rose-050 {background-color: var(--rose-050);}
    .bg-rose-100 {background-color: var(--rose-100);}
    .bg-rose-200 {background-color: var(--rose-200);}
    .bg-rose-300 {background-color: var(--rose-300);}
    .bg-rose-400 {background-color: var(--rose-400);}
    .bg-rose-500 {background-color: var(--rose-500);}
    .bg-rose-600 {background-color: var(--rose-600);}
    .bg-rose-700 {background-color: var(--rose-700);}
    .bg-rose-800 {background-color: var(--rose-800);}
    .bg-rose-900 {background-color: var(--rose-900);}
    .bg-rose-950 {background-color: var(--rose-950);}
    .clr-rose-050 {color: var(--rose-050);}
    .clr-rose-100 {color: var(--rose-100);}
    .clr-rose-200 {color: var(--rose-200);}
    .clr-rose-300 {color: var(--rose-300);}
    .clr-rose-400 {color: var(--rose-400);}
    .clr-rose-500 {color: var(--rose-500);}
    .clr-rose-600 {color: var(--rose-600);}
    .clr-rose-700 {color: var(--rose-700);}
    .clr-rose-800 {color: var(--rose-800);}
    .clr-rose-900 {color: var(--rose-900);}
    .clr-rose-950 {color: var(--rose-950);}
    /* white */
    .bg-white {background-color: white;}
    .clr-white {color: white;}
    /* black     */
    .bg-black {background-color: black;}
    .clr-black {color: black;}
    /* accent (brand color) */
    .bg-accent {background-color: #4f46e5;}
    .clr-accent {color: #4f46e5;}

    .clr-gray-01 {color:var(--gray-01);}

    .bg-dark-4 {background-color:#0f0f0f;}
    .bg-dark-3 {background-color:#171717;}
    .bg-dark-2 {background-color:#1f1f1f;}
    .bg-dark-1 {background-color:#2f2f2f;}
}