unich-ui-kit-web/dist/tailwind-colors.css

Mantine theme configuration and provider for Unich UI Kit

/**
 * Tailwind CSS v4 Color Configuration
 * Generated from unich-ui-kit-web color system
 * Using OKLCH color space for better color representation
 * 
 * Brand colors:
 * - Main (orange): #FF990A
 * - Blue accent: #0A85FF
 * - Light neutral: #ECECEC
 * - Dark: #171717
 */

@layer base {
  :root {
    /* Base Colors */

    /* neutral */
  --neutral-50: 94.309% 0 0;
  --color-neutral-50: oklch(var(--neutral-50));
  --neutral-100: 90.975% 0 0;
  --color-neutral-100: oklch(var(--neutral-100));
  --neutral-200: 83.901% 0 0;
  --color-neutral-200: oklch(var(--neutral-200));
  --neutral-300: 76.993% 0 0;
  --color-neutral-300: oklch(var(--neutral-300));
  --neutral-400: 70.251% 0 0;
  --color-neutral-400: oklch(var(--neutral-400));
  --neutral-500: 59.987% 0 0;
  --color-neutral-500: oklch(var(--neutral-500));
  --neutral-600: 52.081% 0 0;
  --color-neutral-600: oklch(var(--neutral-600));
  --neutral-700: 44.226% 0 0;
  --color-neutral-700: oklch(var(--neutral-700));
  --neutral-800: 36.386% 0 0;
  --color-neutral-800: oklch(var(--neutral-800));
  --neutral-900: 28.502% 0 0;
  --color-neutral-900: oklch(var(--neutral-900));
  --neutral-950: 20.463% 0 0;
  --color-neutral-950: oklch(var(--neutral-950));

    /* orange */
  --orange-50: 97.962% 0.016 73.684;
  --color-orange-50: oklch(var(--orange-50));
  --orange-100: 95.687% 0.034 74.418;
  --color-orange-100: oklch(var(--orange-100));
  --orange-200: 91.124% 0.069 71.749;
  --color-orange-200: oklch(var(--orange-200));
  --orange-300: 86.776% 0.102 70.045;
  --color-orange-300: oklch(var(--orange-300));
  --orange-400: 82.684% 0.134 68.169;
  --color-orange-400: oklch(var(--orange-400));
  --orange-500: 77.211% 0.173 64.166;
  --color-orange-500: oklch(var(--orange-500));
  --orange-600: 70.433% 0.159 63.297;
  --color-orange-600: oklch(var(--orange-600));
  --orange-700: 63.621% 0.146 61.881;
  --color-orange-700: oklch(var(--orange-700));
  --orange-800: 56.807% 0.132 60.764;
  --color-orange-800: oklch(var(--orange-800));
  --orange-900: 50.111% 0.118 59.57;
  --color-orange-900: oklch(var(--orange-900));
  --orange-950: 43.339% 0.104 57.506;
  --color-orange-950: oklch(var(--orange-950));

    /* blue */
  --blue-50: 97.318% 0.013 251.557;
  --color-blue-50: oklch(var(--blue-50));
  --blue-100: 93.855% 0.029 264.425;
  --color-blue-100: oklch(var(--blue-100));
  --blue-200: 86.794% 0.064 267.582;
  --color-blue-200: oklch(var(--blue-200));
  --blue-300: 79.864% 0.101 266.123;
  --color-blue-300: oklch(var(--blue-300));
  --blue-400: 72.818% 0.14 263.176;
  --color-blue-400: oklch(var(--blue-400));
  --blue-500: 62.636% 0.204 255.231;
  --color-blue-500: oklch(var(--blue-500));
  --blue-600: 57.208% 0.188 255.398;
  --color-blue-600: oklch(var(--blue-600));
  --blue-700: 51.863% 0.17 255.252;
  --color-blue-700: oklch(var(--blue-700));
  --blue-800: 46.456% 0.153 255.283;
  --color-blue-800: oklch(var(--blue-800));
  --blue-900: 41.207% 0.136 255.184;
  --color-blue-900: oklch(var(--blue-900));
  --blue-950: 35.859% 0.119 255.262;
  --color-blue-950: oklch(var(--blue-950));

    /* gray */
  --gray-50: 98.212% 0 0;
  --color-gray-50: oklch(var(--gray-50));
  --gray-100: 95.542% 0.001 286.375;
  --color-gray-100: oklch(var(--gray-100));
  --gray-200: 90.146% 0.004 286.318;
  --color-gray-200: oklch(var(--gray-200));
  --gray-300: 84.669% 0.007 286.252;
  --color-gray-300: oklch(var(--gray-300));
  --gray-400: 79.388% 0.008 286.207;
  --color-gray-400: oklch(var(--gray-400));
  --gray-500: 71.181% 0.013 286.067;
  --color-gray-500: oklch(var(--gray-500));
  --gray-600: 61.226% 0.01 286.087;
  --color-gray-600: oklch(var(--gray-600));
  --gray-700: 51.232% 0.009 286.065;
  --color-gray-700: oklch(var(--gray-700));
  --gray-800: 41.092% 0.008 286.031;
  --color-gray-800: oklch(var(--gray-800));
  --gray-900: 31.074% 0.007 285.981;
  --color-gray-900: oklch(var(--gray-900));
  --gray-950: 21.033% 0.006 285.885;
  --color-gray-950: oklch(var(--gray-950));

    /* red */
  --red-50: 97.053% 0.013 17.38;
  --color-red-50: oklch(var(--red-50));
  --red-100: 93.569% 0.032 24.794;
  --color-red-100: oklch(var(--red-100));
  --red-200: 86.689% 0.071 27.149;
  --color-red-200: oklch(var(--red-200));
  --red-300: 80.28% 0.113 27.151;
  --color-red-300: oklch(var(--red-300));
  --red-400: 73.671% 0.152 27.115;
  --color-red-400: oklch(var(--red-400));
  --red-500: 63.683% 0.208 25.331;
  --color-red-500: oklch(var(--red-500));
  --red-600: 56.022% 0.184 25.092;
  --color-red-600: oklch(var(--red-600));
  --red-700: 48.56% 0.16 24.724;
  --color-red-700: oklch(var(--red-700));
  --red-800: 40.9% 0.135 24.525;
  --color-red-800: oklch(var(--red-800));
  --red-900: 33.454% 0.112 24.438;
  --color-red-900: oklch(var(--red-900));
  --red-950: 25.752% 0.089 26.042;
  --color-red-950: oklch(var(--red-950));

    /* green */
  --green-50: 98.193% 0.018 155.826;
  --color-green-50: oklch(var(--green-50));
  --green-100: 95.644% 0.036 151.726;
  --color-green-100: oklch(var(--green-100));
  --green-200: 90.279% 0.072 149.783;
  --color-green-200: oklch(var(--green-200));
  --green-300: 85.063% 0.107 149.396;
  --color-green-300: oklch(var(--green-300));
  --green-400: 80.035% 0.142 149.323;
  --color-green-400: oklch(var(--green-400));
  --green-500: 72.275% 0.192 149.579;
  --color-green-500: oklch(var(--green-500));
  --green-600: 63.132% 0.166 149.937;
  --color-green-600: oklch(var(--green-600));
  --green-700: 53.929% 0.139 150.335;
  --color-green-700: oklch(var(--green-700));
  --green-800: 44.909% 0.115 150.596;
  --color-green-800: oklch(var(--green-800));
  --green-900: 35.742% 0.089 151.335;
  --color-green-900: oklch(var(--green-900));
  --green-950: 26.636% 0.063 152.934;
  --color-green-950: oklch(var(--green-950));

    /* yellow */
  --yellow-50: 98.73% 0.026 102.212;
  --color-yellow-50: oklch(var(--yellow-50));
  --yellow-100: 96.701% 0.042 92.199;
  --color-yellow-100: oklch(var(--yellow-100));
  --yellow-200: 93.039% 0.076 88.283;
  --color-yellow-200: oklch(var(--yellow-200));
  --yellow-300: 89.082% 0.105 87.009;
  --color-yellow-300: oklch(var(--yellow-300));
  --yellow-400: 85.148% 0.131 86.348;
  --color-yellow-400: oklch(var(--yellow-400));
  --yellow-500: 79.524% 0.162 86.047;
  --color-yellow-500: oklch(var(--yellow-500));
  --yellow-600: 69.372% 0.14 83.175;
  --color-yellow-600: oklch(var(--yellow-600));
  --yellow-700: 59.17% 0.119 79.162;
  --color-yellow-700: oklch(var(--yellow-700));
  --yellow-800: 48.865% 0.098 73.304;
  --color-yellow-800: oklch(var(--yellow-800));
  --yellow-900: 38.744% 0.079 64.347;
  --color-yellow-900: oklch(var(--yellow-900));
  --yellow-950: 28.565% 0.064 53.813;
  --color-yellow-950: oklch(var(--yellow-950));

    /* Semantic Colors */
  --primary-50: 97.962% 0.016 73.684;
  --color-primary-50: oklch(var(--primary-50));
  --primary-100: 95.687% 0.034 74.418;
  --color-primary-100: oklch(var(--primary-100));
  --primary-200: 91.124% 0.069 71.749;
  --color-primary-200: oklch(var(--primary-200));
  --primary-300: 86.776% 0.102 70.045;
  --color-primary-300: oklch(var(--primary-300));
  --primary-400: 82.684% 0.134 68.169;
  --color-primary-400: oklch(var(--primary-400));
  --primary-500: 77.211% 0.173 64.166;
  --color-primary-500: oklch(var(--primary-500));
  --primary-600: 70.433% 0.159 63.297;
  --color-primary-600: oklch(var(--primary-600));
  --primary-700: 63.621% 0.146 61.881;
  --color-primary-700: oklch(var(--primary-700));
  --primary-800: 56.807% 0.132 60.764;
  --color-primary-800: oklch(var(--primary-800));
  --primary-900: 50.111% 0.118 59.57;
  --color-primary-900: oklch(var(--primary-900));
  --primary-950: 43.339% 0.104 57.506;
  --color-primary-950: oklch(var(--primary-950));
  --secondary-50: 97.318% 0.013 251.557;
  --color-secondary-50: oklch(var(--secondary-50));
  --secondary-100: 93.855% 0.029 264.425;
  --color-secondary-100: oklch(var(--secondary-100));
  --secondary-200: 86.794% 0.064 267.582;
  --color-secondary-200: oklch(var(--secondary-200));
  --secondary-300: 79.864% 0.101 266.123;
  --color-secondary-300: oklch(var(--secondary-300));
  --secondary-400: 72.818% 0.14 263.176;
  --color-secondary-400: oklch(var(--secondary-400));
  --secondary-500: 62.636% 0.204 255.231;
  --color-secondary-500: oklch(var(--secondary-500));
  --secondary-600: 57.208% 0.188 255.398;
  --color-secondary-600: oklch(var(--secondary-600));
  --secondary-700: 51.863% 0.17 255.252;
  --color-secondary-700: oklch(var(--secondary-700));
  --secondary-800: 46.456% 0.153 255.283;
  --color-secondary-800: oklch(var(--secondary-800));
  --secondary-900: 41.207% 0.136 255.184;
  --color-secondary-900: oklch(var(--secondary-900));
  --secondary-950: 35.859% 0.119 255.262;
  --color-secondary-950: oklch(var(--secondary-950));
  --tertiary-50: 98.212% 0 0;
  --color-tertiary-50: oklch(var(--tertiary-50));
  --tertiary-100: 95.542% 0.001 286.375;
  --color-tertiary-100: oklch(var(--tertiary-100));
  --tertiary-200: 90.146% 0.004 286.318;
  --color-tertiary-200: oklch(var(--tertiary-200));
  --tertiary-300: 84.669% 0.007 286.252;
  --color-tertiary-300: oklch(var(--tertiary-300));
  --tertiary-400: 79.388% 0.008 286.207;
  --color-tertiary-400: oklch(var(--tertiary-400));
  --tertiary-500: 71.181% 0.013 286.067;
  --color-tertiary-500: oklch(var(--tertiary-500));
  --tertiary-600: 61.226% 0.01 286.087;
  --color-tertiary-600: oklch(var(--tertiary-600));
  --tertiary-700: 51.232% 0.009 286.065;
  --color-tertiary-700: oklch(var(--tertiary-700));
  --tertiary-800: 41.092% 0.008 286.031;
  --color-tertiary-800: oklch(var(--tertiary-800));
  --tertiary-900: 31.074% 0.007 285.981;
  --color-tertiary-900: oklch(var(--tertiary-900));
  --tertiary-950: 21.033% 0.006 285.885;
  --color-tertiary-950: oklch(var(--tertiary-950));
  --success-50: 98.193% 0.018 155.826;
  --color-success-50: oklch(var(--success-50));
  --success-100: 95.644% 0.036 151.726;
  --color-success-100: oklch(var(--success-100));
  --success-200: 90.279% 0.072 149.783;
  --color-success-200: oklch(var(--success-200));
  --success-300: 85.063% 0.107 149.396;
  --color-success-300: oklch(var(--success-300));
  --success-400: 80.035% 0.142 149.323;
  --color-success-400: oklch(var(--success-400));
  --success-500: 72.275% 0.192 149.579;
  --color-success-500: oklch(var(--success-500));
  --success-600: 63.132% 0.166 149.937;
  --color-success-600: oklch(var(--success-600));
  --success-700: 53.929% 0.139 150.335;
  --color-success-700: oklch(var(--success-700));
  --success-800: 44.909% 0.115 150.596;
  --color-success-800: oklch(var(--success-800));
  --success-900: 35.742% 0.089 151.335;
  --color-success-900: oklch(var(--success-900));
  --success-950: 26.636% 0.063 152.934;
  --color-success-950: oklch(var(--success-950));
  --info-50: 97.318% 0.013 251.557;
  --color-info-50: oklch(var(--info-50));
  --info-100: 93.855% 0.029 264.425;
  --color-info-100: oklch(var(--info-100));
  --info-200: 86.794% 0.064 267.582;
  --color-info-200: oklch(var(--info-200));
  --info-300: 79.864% 0.101 266.123;
  --color-info-300: oklch(var(--info-300));
  --info-400: 72.818% 0.14 263.176;
  --color-info-400: oklch(var(--info-400));
  --info-500: 62.636% 0.204 255.231;
  --color-info-500: oklch(var(--info-500));
  --info-600: 57.208% 0.188 255.398;
  --color-info-600: oklch(var(--info-600));
  --info-700: 51.863% 0.17 255.252;
  --color-info-700: oklch(var(--info-700));
  --info-800: 46.456% 0.153 255.283;
  --color-info-800: oklch(var(--info-800));
  --info-900: 41.207% 0.136 255.184;
  --color-info-900: oklch(var(--info-900));
  --info-950: 35.859% 0.119 255.262;
  --color-info-950: oklch(var(--info-950));
  --warning-50: 98.73% 0.026 102.212;
  --color-warning-50: oklch(var(--warning-50));
  --warning-100: 96.701% 0.042 92.199;
  --color-warning-100: oklch(var(--warning-100));
  --warning-200: 93.039% 0.076 88.283;
  --color-warning-200: oklch(var(--warning-200));
  --warning-300: 89.082% 0.105 87.009;
  --color-warning-300: oklch(var(--warning-300));
  --warning-400: 85.148% 0.131 86.348;
  --color-warning-400: oklch(var(--warning-400));
  --warning-500: 79.524% 0.162 86.047;
  --color-warning-500: oklch(var(--warning-500));
  --warning-600: 69.372% 0.14 83.175;
  --color-warning-600: oklch(var(--warning-600));
  --warning-700: 59.17% 0.119 79.162;
  --color-warning-700: oklch(var(--warning-700));
  --warning-800: 48.865% 0.098 73.304;
  --color-warning-800: oklch(var(--warning-800));
  --warning-900: 38.744% 0.079 64.347;
  --color-warning-900: oklch(var(--warning-900));
  --warning-950: 28.565% 0.064 53.813;
  --color-warning-950: oklch(var(--warning-950));
  --error-50: 97.053% 0.013 17.38;
  --color-error-50: oklch(var(--error-50));
  --error-100: 93.569% 0.032 24.794;
  --color-error-100: oklch(var(--error-100));
  --error-200: 86.689% 0.071 27.149;
  --color-error-200: oklch(var(--error-200));
  --error-300: 80.28% 0.113 27.151;
  --color-error-300: oklch(var(--error-300));
  --error-400: 73.671% 0.152 27.115;
  --color-error-400: oklch(var(--error-400));
  --error-500: 63.683% 0.208 25.331;
  --color-error-500: oklch(var(--error-500));
  --error-600: 56.022% 0.184 25.092;
  --color-error-600: oklch(var(--error-600));
  --error-700: 48.56% 0.16 24.724;
  --color-error-700: oklch(var(--error-700));
  --error-800: 40.9% 0.135 24.525;
  --color-error-800: oklch(var(--error-800));
  --error-900: 33.454% 0.112 24.438;
  --color-error-900: oklch(var(--error-900));
  --error-950: 25.752% 0.089 26.042;
  --color-error-950: oklch(var(--error-950));
  --neutral-50: 94.309% 0 0;
  --color-neutral-50: oklch(var(--neutral-50));
  --neutral-100: 90.975% 0 0;
  --color-neutral-100: oklch(var(--neutral-100));
  --neutral-200: 83.901% 0 0;
  --color-neutral-200: oklch(var(--neutral-200));
  --neutral-300: 76.993% 0 0;
  --color-neutral-300: oklch(var(--neutral-300));
  --neutral-400: 70.251% 0 0;
  --color-neutral-400: oklch(var(--neutral-400));
  --neutral-500: 59.987% 0 0;
  --color-neutral-500: oklch(var(--neutral-500));
  --neutral-600: 52.081% 0 0;
  --color-neutral-600: oklch(var(--neutral-600));
  --neutral-700: 44.226% 0 0;
  --color-neutral-700: oklch(var(--neutral-700));
  --neutral-800: 36.386% 0 0;
  --color-neutral-800: oklch(var(--neutral-800));
  --neutral-900: 28.502% 0 0;
  --color-neutral-900: oklch(var(--neutral-900));
  --neutral-950: 20.463% 0 0;
  --color-neutral-950: oklch(var(--neutral-950));
  --accent-50: 97.318% 0.013 251.557;
  --color-accent-50: oklch(var(--accent-50));
  --accent-100: 93.855% 0.029 264.425;
  --color-accent-100: oklch(var(--accent-100));
  --accent-200: 86.794% 0.064 267.582;
  --color-accent-200: oklch(var(--accent-200));
  --accent-300: 79.864% 0.101 266.123;
  --color-accent-300: oklch(var(--accent-300));
  --accent-400: 72.818% 0.14 263.176;
  --color-accent-400: oklch(var(--accent-400));
  --accent-500: 62.636% 0.204 255.231;
  --color-accent-500: oklch(var(--accent-500));
  --accent-600: 57.208% 0.188 255.398;
  --color-accent-600: oklch(var(--accent-600));
  --accent-700: 51.863% 0.17 255.252;
  --color-accent-700: oklch(var(--accent-700));
  --accent-800: 46.456% 0.153 255.283;
  --color-accent-800: oklch(var(--accent-800));
  --accent-900: 41.207% 0.136 255.184;
  --color-accent-900: oklch(var(--accent-900));
  --accent-950: 35.859% 0.119 255.262;
  --color-accent-950: oklch(var(--accent-950));
  --highlight-50: 98.73% 0.026 102.212;
  --color-highlight-50: oklch(var(--highlight-50));
  --highlight-100: 96.701% 0.042 92.199;
  --color-highlight-100: oklch(var(--highlight-100));
  --highlight-200: 93.039% 0.076 88.283;
  --color-highlight-200: oklch(var(--highlight-200));
  --highlight-300: 89.082% 0.105 87.009;
  --color-highlight-300: oklch(var(--highlight-300));
  --highlight-400: 85.148% 0.131 86.348;
  --color-highlight-400: oklch(var(--highlight-400));
  --highlight-500: 79.524% 0.162 86.047;
  --color-highlight-500: oklch(var(--highlight-500));
  --highlight-600: 69.372% 0.14 83.175;
  --color-highlight-600: oklch(var(--highlight-600));
  --highlight-700: 59.17% 0.119 79.162;
  --color-highlight-700: oklch(var(--highlight-700));
  --highlight-800: 48.865% 0.098 73.304;
  --color-highlight-800: oklch(var(--highlight-800));
  --highlight-900: 38.744% 0.079 64.347;
  --color-highlight-900: oklch(var(--highlight-900));
  --highlight-950: 28.565% 0.064 53.813;
  --color-highlight-950: oklch(var(--highlight-950));
  --link-50: 97.318% 0.013 251.557;
  --color-link-50: oklch(var(--link-50));
  --link-100: 93.855% 0.029 264.425;
  --color-link-100: oklch(var(--link-100));
  --link-200: 86.794% 0.064 267.582;
  --color-link-200: oklch(var(--link-200));
  --link-300: 79.864% 0.101 266.123;
  --color-link-300: oklch(var(--link-300));
  --link-400: 72.818% 0.14 263.176;
  --color-link-400: oklch(var(--link-400));
  --link-500: 62.636% 0.204 255.231;
  --color-link-500: oklch(var(--link-500));
  --link-600: 57.208% 0.188 255.398;
  --color-link-600: oklch(var(--link-600));
  --link-700: 51.863% 0.17 255.252;
  --color-link-700: oklch(var(--link-700));
  --link-800: 46.456% 0.153 255.283;
  --color-link-800: oklch(var(--link-800));
  --link-900: 41.207% 0.136 255.184;
  --color-link-900: oklch(var(--link-900));
  --link-950: 35.859% 0.119 255.262;
  --color-link-950: oklch(var(--link-950));
  --border-50: 98.212% 0 0;
  --color-border-50: oklch(var(--border-50));
  --border-100: 95.542% 0.001 286.375;
  --color-border-100: oklch(var(--border-100));
  --border-200: 90.146% 0.004 286.318;
  --color-border-200: oklch(var(--border-200));
  --border-300: 84.669% 0.007 286.252;
  --color-border-300: oklch(var(--border-300));
  --border-400: 79.388% 0.008 286.207;
  --color-border-400: oklch(var(--border-400));
  --border-500: 71.181% 0.013 286.067;
  --color-border-500: oklch(var(--border-500));
  --border-600: 61.226% 0.01 286.087;
  --color-border-600: oklch(var(--border-600));
  --border-700: 51.232% 0.009 286.065;
  --color-border-700: oklch(var(--border-700));
  --border-800: 41.092% 0.008 286.031;
  --color-border-800: oklch(var(--border-800));
  --border-900: 31.074% 0.007 285.981;
  --color-border-900: oklch(var(--border-900));
  --border-950: 21.033% 0.006 285.885;
  --color-border-950: oklch(var(--border-950));

    /* Background colors */
  --bg-page: 94.309% 0 0;
  --color-bg-page: oklch(var(--bg-page));
  --bg-card: 90.975% 0 0;
  --color-bg-card: oklch(var(--bg-card));
  --bg-active: 83.901% 0 0;
  --color-bg-active: oklch(var(--bg-active));
  --bg-dark: 20.463% 0 0;
  --color-bg-dark: oklch(var(--bg-dark));

    /* Text colors */
  --text-primary: 28.502% 0 0;
  --color-text-primary: oklch(var(--text-primary));
  --text-secondary: 44.226% 0 0;
  --color-text-secondary: oklch(var(--text-secondary));
  --text-tertiary: 59.987% 0 0;
  --color-text-tertiary: oklch(var(--text-tertiary));
  --text-disabled: 70.251% 0 0;
  --color-text-disabled: oklch(var(--text-disabled));
  --text-onDark: 94.309% 0 0;
  --color-text-onDark: oklch(var(--text-onDark));
  }
}

@layer utilities {

  /* neutral utilities */
  .bg-neutral-50 {
    background-color: var(--color-neutral-50);
  }
  .text-neutral-50 {
    color: var(--color-neutral-50);
  }
  .border-neutral-50 {
    border-color: var(--color-neutral-50);
  }
  .bg-neutral-100 {
    background-color: var(--color-neutral-100);
  }
  .text-neutral-100 {
    color: var(--color-neutral-100);
  }
  .border-neutral-100 {
    border-color: var(--color-neutral-100);
  }
  .bg-neutral-200 {
    background-color: var(--color-neutral-200);
  }
  .text-neutral-200 {
    color: var(--color-neutral-200);
  }
  .border-neutral-200 {
    border-color: var(--color-neutral-200);
  }
  .bg-neutral-300 {
    background-color: var(--color-neutral-300);
  }
  .text-neutral-300 {
    color: var(--color-neutral-300);
  }
  .border-neutral-300 {
    border-color: var(--color-neutral-300);
  }
  .bg-neutral-400 {
    background-color: var(--color-neutral-400);
  }
  .text-neutral-400 {
    color: var(--color-neutral-400);
  }
  .border-neutral-400 {
    border-color: var(--color-neutral-400);
  }
  .bg-neutral-500 {
    background-color: var(--color-neutral-500);
  }
  .text-neutral-500 {
    color: var(--color-neutral-500);
  }
  .border-neutral-500 {
    border-color: var(--color-neutral-500);
  }
  .bg-neutral-600 {
    background-color: var(--color-neutral-600);
  }
  .text-neutral-600 {
    color: var(--color-neutral-600);
  }
  .border-neutral-600 {
    border-color: var(--color-neutral-600);
  }
  .bg-neutral-700 {
    background-color: var(--color-neutral-700);
  }
  .text-neutral-700 {
    color: var(--color-neutral-700);
  }
  .border-neutral-700 {
    border-color: var(--color-neutral-700);
  }
  .bg-neutral-800 {
    background-color: var(--color-neutral-800);
  }
  .text-neutral-800 {
    color: var(--color-neutral-800);
  }
  .border-neutral-800 {
    border-color: var(--color-neutral-800);
  }
  .bg-neutral-900 {
    background-color: var(--color-neutral-900);
  }
  .text-neutral-900 {
    color: var(--color-neutral-900);
  }
  .border-neutral-900 {
    border-color: var(--color-neutral-900);
  }
  .bg-neutral-950 {
    background-color: var(--color-neutral-950);
  }
  .text-neutral-950 {
    color: var(--color-neutral-950);
  }
  .border-neutral-950 {
    border-color: var(--color-neutral-950);
  }

  /* orange utilities */
  .bg-orange-50 {
    background-color: var(--color-orange-50);
  }
  .text-orange-50 {
    color: var(--color-orange-50);
  }
  .border-orange-50 {
    border-color: var(--color-orange-50);
  }
  .bg-orange-100 {
    background-color: var(--color-orange-100);
  }
  .text-orange-100 {
    color: var(--color-orange-100);
  }
  .border-orange-100 {
    border-color: var(--color-orange-100);
  }
  .bg-orange-200 {
    background-color: var(--color-orange-200);
  }
  .text-orange-200 {
    color: var(--color-orange-200);
  }
  .border-orange-200 {
    border-color: var(--color-orange-200);
  }
  .bg-orange-300 {
    background-color: var(--color-orange-300);
  }
  .text-orange-300 {
    color: var(--color-orange-300);
  }
  .border-orange-300 {
    border-color: var(--color-orange-300);
  }
  .bg-orange-400 {
    background-color: var(--color-orange-400);
  }
  .text-orange-400 {
    color: var(--color-orange-400);
  }
  .border-orange-400 {
    border-color: var(--color-orange-400);
  }
  .bg-orange-500 {
    background-color: var(--color-orange-500);
  }
  .text-orange-500 {
    color: var(--color-orange-500);
  }
  .border-orange-500 {
    border-color: var(--color-orange-500);
  }
  .bg-orange-600 {
    background-color: var(--color-orange-600);
  }
  .text-orange-600 {
    color: var(--color-orange-600);
  }
  .border-orange-600 {
    border-color: var(--color-orange-600);
  }
  .bg-orange-700 {
    background-color: var(--color-orange-700);
  }
  .text-orange-700 {
    color: var(--color-orange-700);
  }
  .border-orange-700 {
    border-color: var(--color-orange-700);
  }
  .bg-orange-800 {
    background-color: var(--color-orange-800);
  }
  .text-orange-800 {
    color: var(--color-orange-800);
  }
  .border-orange-800 {
    border-color: var(--color-orange-800);
  }
  .bg-orange-900 {
    background-color: var(--color-orange-900);
  }
  .text-orange-900 {
    color: var(--color-orange-900);
  }
  .border-orange-900 {
    border-color: var(--color-orange-900);
  }
  .bg-orange-950 {
    background-color: var(--color-orange-950);
  }
  .text-orange-950 {
    color: var(--color-orange-950);
  }
  .border-orange-950 {
    border-color: var(--color-orange-950);
  }

  /* blue utilities */
  .bg-blue-50 {
    background-color: var(--color-blue-50);
  }
  .text-blue-50 {
    color: var(--color-blue-50);
  }
  .border-blue-50 {
    border-color: var(--color-blue-50);
  }
  .bg-blue-100 {
    background-color: var(--color-blue-100);
  }
  .text-blue-100 {
    color: var(--color-blue-100);
  }
  .border-blue-100 {
    border-color: var(--color-blue-100);
  }
  .bg-blue-200 {
    background-color: var(--color-blue-200);
  }
  .text-blue-200 {
    color: var(--color-blue-200);
  }
  .border-blue-200 {
    border-color: var(--color-blue-200);
  }
  .bg-blue-300 {
    background-color: var(--color-blue-300);
  }
  .text-blue-300 {
    color: var(--color-blue-300);
  }
  .border-blue-300 {
    border-color: var(--color-blue-300);
  }
  .bg-blue-400 {
    background-color: var(--color-blue-400);
  }
  .text-blue-400 {
    color: var(--color-blue-400);
  }
  .border-blue-400 {
    border-color: var(--color-blue-400);
  }
  .bg-blue-500 {
    background-color: var(--color-blue-500);
  }
  .text-blue-500 {
    color: var(--color-blue-500);
  }
  .border-blue-500 {
    border-color: var(--color-blue-500);
  }
  .bg-blue-600 {
    background-color: var(--color-blue-600);
  }
  .text-blue-600 {
    color: var(--color-blue-600);
  }
  .border-blue-600 {
    border-color: var(--color-blue-600);
  }
  .bg-blue-700 {
    background-color: var(--color-blue-700);
  }
  .text-blue-700 {
    color: var(--color-blue-700);
  }
  .border-blue-700 {
    border-color: var(--color-blue-700);
  }
  .bg-blue-800 {
    background-color: var(--color-blue-800);
  }
  .text-blue-800 {
    color: var(--color-blue-800);
  }
  .border-blue-800 {
    border-color: var(--color-blue-800);
  }
  .bg-blue-900 {
    background-color: var(--color-blue-900);
  }
  .text-blue-900 {
    color: var(--color-blue-900);
  }
  .border-blue-900 {
    border-color: var(--color-blue-900);
  }
  .bg-blue-950 {
    background-color: var(--color-blue-950);
  }
  .text-blue-950 {
    color: var(--color-blue-950);
  }
  .border-blue-950 {
    border-color: var(--color-blue-950);
  }

  /* gray utilities */
  .bg-gray-50 {
    background-color: var(--color-gray-50);
  }
  .text-gray-50 {
    color: var(--color-gray-50);
  }
  .border-gray-50 {
    border-color: var(--color-gray-50);
  }
  .bg-gray-100 {
    background-color: var(--color-gray-100);
  }
  .text-gray-100 {
    color: var(--color-gray-100);
  }
  .border-gray-100 {
    border-color: var(--color-gray-100);
  }
  .bg-gray-200 {
    background-color: var(--color-gray-200);
  }
  .text-gray-200 {
    color: var(--color-gray-200);
  }
  .border-gray-200 {
    border-color: var(--color-gray-200);
  }
  .bg-gray-300 {
    background-color: var(--color-gray-300);
  }
  .text-gray-300 {
    color: var(--color-gray-300);
  }
  .border-gray-300 {
    border-color: var(--color-gray-300);
  }
  .bg-gray-400 {
    background-color: var(--color-gray-400);
  }
  .text-gray-400 {
    color: var(--color-gray-400);
  }
  .border-gray-400 {
    border-color: var(--color-gray-400);
  }
  .bg-gray-500 {
    background-color: var(--color-gray-500);
  }
  .text-gray-500 {
    color: var(--color-gray-500);
  }
  .border-gray-500 {
    border-color: var(--color-gray-500);
  }
  .bg-gray-600 {
    background-color: var(--color-gray-600);
  }
  .text-gray-600 {
    color: var(--color-gray-600);
  }
  .border-gray-600 {
    border-color: var(--color-gray-600);
  }
  .bg-gray-700 {
    background-color: var(--color-gray-700);
  }
  .text-gray-700 {
    color: var(--color-gray-700);
  }
  .border-gray-700 {
    border-color: var(--color-gray-700);
  }
  .bg-gray-800 {
    background-color: var(--color-gray-800);
  }
  .text-gray-800 {
    color: var(--color-gray-800);
  }
  .border-gray-800 {
    border-color: var(--color-gray-800);
  }
  .bg-gray-900 {
    background-color: var(--color-gray-900);
  }
  .text-gray-900 {
    color: var(--color-gray-900);
  }
  .border-gray-900 {
    border-color: var(--color-gray-900);
  }
  .bg-gray-950 {
    background-color: var(--color-gray-950);
  }
  .text-gray-950 {
    color: var(--color-gray-950);
  }
  .border-gray-950 {
    border-color: var(--color-gray-950);
  }

  /* red utilities */
  .bg-red-50 {
    background-color: var(--color-red-50);
  }
  .text-red-50 {
    color: var(--color-red-50);
  }
  .border-red-50 {
    border-color: var(--color-red-50);
  }
  .bg-red-100 {
    background-color: var(--color-red-100);
  }
  .text-red-100 {
    color: var(--color-red-100);
  }
  .border-red-100 {
    border-color: var(--color-red-100);
  }
  .bg-red-200 {
    background-color: var(--color-red-200);
  }
  .text-red-200 {
    color: var(--color-red-200);
  }
  .border-red-200 {
    border-color: var(--color-red-200);
  }
  .bg-red-300 {
    background-color: var(--color-red-300);
  }
  .text-red-300 {
    color: var(--color-red-300);
  }
  .border-red-300 {
    border-color: var(--color-red-300);
  }
  .bg-red-400 {
    background-color: var(--color-red-400);
  }
  .text-red-400 {
    color: var(--color-red-400);
  }
  .border-red-400 {
    border-color: var(--color-red-400);
  }
  .bg-red-500 {
    background-color: var(--color-red-500);
  }
  .text-red-500 {
    color: var(--color-red-500);
  }
  .border-red-500 {
    border-color: var(--color-red-500);
  }
  .bg-red-600 {
    background-color: var(--color-red-600);
  }
  .text-red-600 {
    color: var(--color-red-600);
  }
  .border-red-600 {
    border-color: var(--color-red-600);
  }
  .bg-red-700 {
    background-color: var(--color-red-700);
  }
  .text-red-700 {
    color: var(--color-red-700);
  }
  .border-red-700 {
    border-color: var(--color-red-700);
  }
  .bg-red-800 {
    background-color: var(--color-red-800);
  }
  .text-red-800 {
    color: var(--color-red-800);
  }
  .border-red-800 {
    border-color: var(--color-red-800);
  }
  .bg-red-900 {
    background-color: var(--color-red-900);
  }
  .text-red-900 {
    color: var(--color-red-900);
  }
  .border-red-900 {
    border-color: var(--color-red-900);
  }
  .bg-red-950 {
    background-color: var(--color-red-950);
  }
  .text-red-950 {
    color: var(--color-red-950);
  }
  .border-red-950 {
    border-color: var(--color-red-950);
  }

  /* green utilities */
  .bg-green-50 {
    background-color: var(--color-green-50);
  }
  .text-green-50 {
    color: var(--color-green-50);
  }
  .border-green-50 {
    border-color: var(--color-green-50);
  }
  .bg-green-100 {
    background-color: var(--color-green-100);
  }
  .text-green-100 {
    color: var(--color-green-100);
  }
  .border-green-100 {
    border-color: var(--color-green-100);
  }
  .bg-green-200 {
    background-color: var(--color-green-200);
  }
  .text-green-200 {
    color: var(--color-green-200);
  }
  .border-green-200 {
    border-color: var(--color-green-200);
  }
  .bg-green-300 {
    background-color: var(--color-green-300);
  }
  .text-green-300 {
    color: var(--color-green-300);
  }
  .border-green-300 {
    border-color: var(--color-green-300);
  }
  .bg-green-400 {
    background-color: var(--color-green-400);
  }
  .text-green-400 {
    color: var(--color-green-400);
  }
  .border-green-400 {
    border-color: var(--color-green-400);
  }
  .bg-green-500 {
    background-color: var(--color-green-500);
  }
  .text-green-500 {
    color: var(--color-green-500);
  }
  .border-green-500 {
    border-color: var(--color-green-500);
  }
  .bg-green-600 {
    background-color: var(--color-green-600);
  }
  .text-green-600 {
    color: var(--color-green-600);
  }
  .border-green-600 {
    border-color: var(--color-green-600);
  }
  .bg-green-700 {
    background-color: var(--color-green-700);
  }
  .text-green-700 {
    color: var(--color-green-700);
  }
  .border-green-700 {
    border-color: var(--color-green-700);
  }
  .bg-green-800 {
    background-color: var(--color-green-800);
  }
  .text-green-800 {
    color: var(--color-green-800);
  }
  .border-green-800 {
    border-color: var(--color-green-800);
  }
  .bg-green-900 {
    background-color: var(--color-green-900);
  }
  .text-green-900 {
    color: var(--color-green-900);
  }
  .border-green-900 {
    border-color: var(--color-green-900);
  }
  .bg-green-950 {
    background-color: var(--color-green-950);
  }
  .text-green-950 {
    color: var(--color-green-950);
  }
  .border-green-950 {
    border-color: var(--color-green-950);
  }

  /* yellow utilities */
  .bg-yellow-50 {
    background-color: var(--color-yellow-50);
  }
  .text-yellow-50 {
    color: var(--color-yellow-50);
  }
  .border-yellow-50 {
    border-color: var(--color-yellow-50);
  }
  .bg-yellow-100 {
    background-color: var(--color-yellow-100);
  }
  .text-yellow-100 {
    color: var(--color-yellow-100);
  }
  .border-yellow-100 {
    border-color: var(--color-yellow-100);
  }
  .bg-yellow-200 {
    background-color: var(--color-yellow-200);
  }
  .text-yellow-200 {
    color: var(--color-yellow-200);
  }
  .border-yellow-200 {
    border-color: var(--color-yellow-200);
  }
  .bg-yellow-300 {
    background-color: var(--color-yellow-300);
  }
  .text-yellow-300 {
    color: var(--color-yellow-300);
  }
  .border-yellow-300 {
    border-color: var(--color-yellow-300);
  }
  .bg-yellow-400 {
    background-color: var(--color-yellow-400);
  }
  .text-yellow-400 {
    color: var(--color-yellow-400);
  }
  .border-yellow-400 {
    border-color: var(--color-yellow-400);
  }
  .bg-yellow-500 {
    background-color: var(--color-yellow-500);
  }
  .text-yellow-500 {
    color: var(--color-yellow-500);
  }
  .border-yellow-500 {
    border-color: var(--color-yellow-500);
  }
  .bg-yellow-600 {
    background-color: var(--color-yellow-600);
  }
  .text-yellow-600 {
    color: var(--color-yellow-600);
  }
  .border-yellow-600 {
    border-color: var(--color-yellow-600);
  }
  .bg-yellow-700 {
    background-color: var(--color-yellow-700);
  }
  .text-yellow-700 {
    color: var(--color-yellow-700);
  }
  .border-yellow-700 {
    border-color: var(--color-yellow-700);
  }
  .bg-yellow-800 {
    background-color: var(--color-yellow-800);
  }
  .text-yellow-800 {
    color: var(--color-yellow-800);
  }
  .border-yellow-800 {
    border-color: var(--color-yellow-800);
  }
  .bg-yellow-900 {
    background-color: var(--color-yellow-900);
  }
  .text-yellow-900 {
    color: var(--color-yellow-900);
  }
  .border-yellow-900 {
    border-color: var(--color-yellow-900);
  }
  .bg-yellow-950 {
    background-color: var(--color-yellow-950);
  }
  .text-yellow-950 {
    color: var(--color-yellow-950);
  }
  .border-yellow-950 {
    border-color: var(--color-yellow-950);
  }

  /* primary utilities */
  .bg-primary-50 {
    background-color: var(--color-primary-50);
  }
  .text-primary-50 {
    color: var(--color-primary-50);
  }
  .border-primary-50 {
    border-color: var(--color-primary-50);
  }
  .bg-primary-100 {
    background-color: var(--color-primary-100);
  }
  .text-primary-100 {
    color: var(--color-primary-100);
  }
  .border-primary-100 {
    border-color: var(--color-primary-100);
  }
  .bg-primary-200 {
    background-color: var(--color-primary-200);
  }
  .text-primary-200 {
    color: var(--color-primary-200);
  }
  .border-primary-200 {
    border-color: var(--color-primary-200);
  }
  .bg-primary-300 {
    background-color: var(--color-primary-300);
  }
  .text-primary-300 {
    color: var(--color-primary-300);
  }
  .border-primary-300 {
    border-color: var(--color-primary-300);
  }
  .bg-primary-400 {
    background-color: var(--color-primary-400);
  }
  .text-primary-400 {
    color: var(--color-primary-400);
  }
  .border-primary-400 {
    border-color: var(--color-primary-400);
  }
  .bg-primary-500 {
    background-color: var(--color-primary-500);
  }
  .text-primary-500 {
    color: var(--color-primary-500);
  }
  .border-primary-500 {
    border-color: var(--color-primary-500);
  }
  .bg-primary-600 {
    background-color: var(--color-primary-600);
  }
  .text-primary-600 {
    color: var(--color-primary-600);
  }
  .border-primary-600 {
    border-color: var(--color-primary-600);
  }
  .bg-primary-700 {
    background-color: var(--color-primary-700);
  }
  .text-primary-700 {
    color: var(--color-primary-700);
  }
  .border-primary-700 {
    border-color: var(--color-primary-700);
  }
  .bg-primary-800 {
    background-color: var(--color-primary-800);
  }
  .text-primary-800 {
    color: var(--color-primary-800);
  }
  .border-primary-800 {
    border-color: var(--color-primary-800);
  }
  .bg-primary-900 {
    background-color: var(--color-primary-900);
  }
  .text-primary-900 {
    color: var(--color-primary-900);
  }
  .border-primary-900 {
    border-color: var(--color-primary-900);
  }
  .bg-primary-950 {
    background-color: var(--color-primary-950);
  }
  .text-primary-950 {
    color: var(--color-primary-950);
  }
  .border-primary-950 {
    border-color: var(--color-primary-950);
  }

  /* secondary utilities */
  .bg-secondary-50 {
    background-color: var(--color-secondary-50);
  }
  .text-secondary-50 {
    color: var(--color-secondary-50);
  }
  .border-secondary-50 {
    border-color: var(--color-secondary-50);
  }
  .bg-secondary-100 {
    background-color: var(--color-secondary-100);
  }
  .text-secondary-100 {
    color: var(--color-secondary-100);
  }
  .border-secondary-100 {
    border-color: var(--color-secondary-100);
  }
  .bg-secondary-200 {
    background-color: var(--color-secondary-200);
  }
  .text-secondary-200 {
    color: var(--color-secondary-200);
  }
  .border-secondary-200 {
    border-color: var(--color-secondary-200);
  }
  .bg-secondary-300 {
    background-color: var(--color-secondary-300);
  }
  .text-secondary-300 {
    color: var(--color-secondary-300);
  }
  .border-secondary-300 {
    border-color: var(--color-secondary-300);
  }
  .bg-secondary-400 {
    background-color: var(--color-secondary-400);
  }
  .text-secondary-400 {
    color: var(--color-secondary-400);
  }
  .border-secondary-400 {
    border-color: var(--color-secondary-400);
  }
  .bg-secondary-500 {
    background-color: var(--color-secondary-500);
  }
  .text-secondary-500 {
    color: var(--color-secondary-500);
  }
  .border-secondary-500 {
    border-color: var(--color-secondary-500);
  }
  .bg-secondary-600 {
    background-color: var(--color-secondary-600);
  }
  .text-secondary-600 {
    color: var(--color-secondary-600);
  }
  .border-secondary-600 {
    border-color: var(--color-secondary-600);
  }
  .bg-secondary-700 {
    background-color: var(--color-secondary-700);
  }
  .text-secondary-700 {
    color: var(--color-secondary-700);
  }
  .border-secondary-700 {
    border-color: var(--color-secondary-700);
  }
  .bg-secondary-800 {
    background-color: var(--color-secondary-800);
  }
  .text-secondary-800 {
    color: var(--color-secondary-800);
  }
  .border-secondary-800 {
    border-color: var(--color-secondary-800);
  }
  .bg-secondary-900 {
    background-color: var(--color-secondary-900);
  }
  .text-secondary-900 {
    color: var(--color-secondary-900);
  }
  .border-secondary-900 {
    border-color: var(--color-secondary-900);
  }
  .bg-secondary-950 {
    background-color: var(--color-secondary-950);
  }
  .text-secondary-950 {
    color: var(--color-secondary-950);
  }
  .border-secondary-950 {
    border-color: var(--color-secondary-950);
  }

  /* tertiary utilities */
  .bg-tertiary-50 {
    background-color: var(--color-tertiary-50);
  }
  .text-tertiary-50 {
    color: var(--color-tertiary-50);
  }
  .border-tertiary-50 {
    border-color: var(--color-tertiary-50);
  }
  .bg-tertiary-100 {
    background-color: var(--color-tertiary-100);
  }
  .text-tertiary-100 {
    color: var(--color-tertiary-100);
  }
  .border-tertiary-100 {
    border-color: var(--color-tertiary-100);
  }
  .bg-tertiary-200 {
    background-color: var(--color-tertiary-200);
  }
  .text-tertiary-200 {
    color: var(--color-tertiary-200);
  }
  .border-tertiary-200 {
    border-color: var(--color-tertiary-200);
  }
  .bg-tertiary-300 {
    background-color: var(--color-tertiary-300);
  }
  .text-tertiary-300 {
    color: var(--color-tertiary-300);
  }
  .border-tertiary-300 {
    border-color: var(--color-tertiary-300);
  }
  .bg-tertiary-400 {
    background-color: var(--color-tertiary-400);
  }
  .text-tertiary-400 {
    color: var(--color-tertiary-400);
  }
  .border-tertiary-400 {
    border-color: var(--color-tertiary-400);
  }
  .bg-tertiary-500 {
    background-color: var(--color-tertiary-500);
  }
  .text-tertiary-500 {
    color: var(--color-tertiary-500);
  }
  .border-tertiary-500 {
    border-color: var(--color-tertiary-500);
  }
  .bg-tertiary-600 {
    background-color: var(--color-tertiary-600);
  }
  .text-tertiary-600 {
    color: var(--color-tertiary-600);
  }
  .border-tertiary-600 {
    border-color: var(--color-tertiary-600);
  }
  .bg-tertiary-700 {
    background-color: var(--color-tertiary-700);
  }
  .text-tertiary-700 {
    color: var(--color-tertiary-700);
  }
  .border-tertiary-700 {
    border-color: var(--color-tertiary-700);
  }
  .bg-tertiary-800 {
    background-color: var(--color-tertiary-800);
  }
  .text-tertiary-800 {
    color: var(--color-tertiary-800);
  }
  .border-tertiary-800 {
    border-color: var(--color-tertiary-800);
  }
  .bg-tertiary-900 {
    background-color: var(--color-tertiary-900);
  }
  .text-tertiary-900 {
    color: var(--color-tertiary-900);
  }
  .border-tertiary-900 {
    border-color: var(--color-tertiary-900);
  }
  .bg-tertiary-950 {
    background-color: var(--color-tertiary-950);
  }
  .text-tertiary-950 {
    color: var(--color-tertiary-950);
  }
  .border-tertiary-950 {
    border-color: var(--color-tertiary-950);
  }

  /* success utilities */
  .bg-success-50 {
    background-color: var(--color-success-50);
  }
  .text-success-50 {
    color: var(--color-success-50);
  }
  .border-success-50 {
    border-color: var(--color-success-50);
  }
  .bg-success-100 {
    background-color: var(--color-success-100);
  }
  .text-success-100 {
    color: var(--color-success-100);
  }
  .border-success-100 {
    border-color: var(--color-success-100);
  }
  .bg-success-200 {
    background-color: var(--color-success-200);
  }
  .text-success-200 {
    color: var(--color-success-200);
  }
  .border-success-200 {
    border-color: var(--color-success-200);
  }
  .bg-success-300 {
    background-color: var(--color-success-300);
  }
  .text-success-300 {
    color: var(--color-success-300);
  }
  .border-success-300 {
    border-color: var(--color-success-300);
  }
  .bg-success-400 {
    background-color: var(--color-success-400);
  }
  .text-success-400 {
    color: var(--color-success-400);
  }
  .border-success-400 {
    border-color: var(--color-success-400);
  }
  .bg-success-500 {
    background-color: var(--color-success-500);
  }
  .text-success-500 {
    color: var(--color-success-500);
  }
  .border-success-500 {
    border-color: var(--color-success-500);
  }
  .bg-success-600 {
    background-color: var(--color-success-600);
  }
  .text-success-600 {
    color: var(--color-success-600);
  }
  .border-success-600 {
    border-color: var(--color-success-600);
  }
  .bg-success-700 {
    background-color: var(--color-success-700);
  }
  .text-success-700 {
    color: var(--color-success-700);
  }
  .border-success-700 {
    border-color: var(--color-success-700);
  }
  .bg-success-800 {
    background-color: var(--color-success-800);
  }
  .text-success-800 {
    color: var(--color-success-800);
  }
  .border-success-800 {
    border-color: var(--color-success-800);
  }
  .bg-success-900 {
    background-color: var(--color-success-900);
  }
  .text-success-900 {
    color: var(--color-success-900);
  }
  .border-success-900 {
    border-color: var(--color-success-900);
  }
  .bg-success-950 {
    background-color: var(--color-success-950);
  }
  .text-success-950 {
    color: var(--color-success-950);
  }
  .border-success-950 {
    border-color: var(--color-success-950);
  }

  /* info utilities */
  .bg-info-50 {
    background-color: var(--color-info-50);
  }
  .text-info-50 {
    color: var(--color-info-50);
  }
  .border-info-50 {
    border-color: var(--color-info-50);
  }
  .bg-info-100 {
    background-color: var(--color-info-100);
  }
  .text-info-100 {
    color: var(--color-info-100);
  }
  .border-info-100 {
    border-color: var(--color-info-100);
  }
  .bg-info-200 {
    background-color: var(--color-info-200);
  }
  .text-info-200 {
    color: var(--color-info-200);
  }
  .border-info-200 {
    border-color: var(--color-info-200);
  }
  .bg-info-300 {
    background-color: var(--color-info-300);
  }
  .text-info-300 {
    color: var(--color-info-300);
  }
  .border-info-300 {
    border-color: var(--color-info-300);
  }
  .bg-info-400 {
    background-color: var(--color-info-400);
  }
  .text-info-400 {
    color: var(--color-info-400);
  }
  .border-info-400 {
    border-color: var(--color-info-400);
  }
  .bg-info-500 {
    background-color: var(--color-info-500);
  }
  .text-info-500 {
    color: var(--color-info-500);
  }
  .border-info-500 {
    border-color: var(--color-info-500);
  }
  .bg-info-600 {
    background-color: var(--color-info-600);
  }
  .text-info-600 {
    color: var(--color-info-600);
  }
  .border-info-600 {
    border-color: var(--color-info-600);
  }
  .bg-info-700 {
    background-color: var(--color-info-700);
  }
  .text-info-700 {
    color: var(--color-info-700);
  }
  .border-info-700 {
    border-color: var(--color-info-700);
  }
  .bg-info-800 {
    background-color: var(--color-info-800);
  }
  .text-info-800 {
    color: var(--color-info-800);
  }
  .border-info-800 {
    border-color: var(--color-info-800);
  }
  .bg-info-900 {
    background-color: var(--color-info-900);
  }
  .text-info-900 {
    color: var(--color-info-900);
  }
  .border-info-900 {
    border-color: var(--color-info-900);
  }
  .bg-info-950 {
    background-color: var(--color-info-950);
  }
  .text-info-950 {
    color: var(--color-info-950);
  }
  .border-info-950 {
    border-color: var(--color-info-950);
  }

  /* warning utilities */
  .bg-warning-50 {
    background-color: var(--color-warning-50);
  }
  .text-warning-50 {
    color: var(--color-warning-50);
  }
  .border-warning-50 {
    border-color: var(--color-warning-50);
  }
  .bg-warning-100 {
    background-color: var(--color-warning-100);
  }
  .text-warning-100 {
    color: var(--color-warning-100);
  }
  .border-warning-100 {
    border-color: var(--color-warning-100);
  }
  .bg-warning-200 {
    background-color: var(--color-warning-200);
  }
  .text-warning-200 {
    color: var(--color-warning-200);
  }
  .border-warning-200 {
    border-color: var(--color-warning-200);
  }
  .bg-warning-300 {
    background-color: var(--color-warning-300);
  }
  .text-warning-300 {
    color: var(--color-warning-300);
  }
  .border-warning-300 {
    border-color: var(--color-warning-300);
  }
  .bg-warning-400 {
    background-color: var(--color-warning-400);
  }
  .text-warning-400 {
    color: var(--color-warning-400);
  }
  .border-warning-400 {
    border-color: var(--color-warning-400);
  }
  .bg-warning-500 {
    background-color: var(--color-warning-500);
  }
  .text-warning-500 {
    color: var(--color-warning-500);
  }
  .border-warning-500 {
    border-color: var(--color-warning-500);
  }
  .bg-warning-600 {
    background-color: var(--color-warning-600);
  }
  .text-warning-600 {
    color: var(--color-warning-600);
  }
  .border-warning-600 {
    border-color: var(--color-warning-600);
  }
  .bg-warning-700 {
    background-color: var(--color-warning-700);
  }
  .text-warning-700 {
    color: var(--color-warning-700);
  }
  .border-warning-700 {
    border-color: var(--color-warning-700);
  }
  .bg-warning-800 {
    background-color: var(--color-warning-800);
  }
  .text-warning-800 {
    color: var(--color-warning-800);
  }
  .border-warning-800 {
    border-color: var(--color-warning-800);
  }
  .bg-warning-900 {
    background-color: var(--color-warning-900);
  }
  .text-warning-900 {
    color: var(--color-warning-900);
  }
  .border-warning-900 {
    border-color: var(--color-warning-900);
  }
  .bg-warning-950 {
    background-color: var(--color-warning-950);
  }
  .text-warning-950 {
    color: var(--color-warning-950);
  }
  .border-warning-950 {
    border-color: var(--color-warning-950);
  }

  /* error utilities */
  .bg-error-50 {
    background-color: var(--color-error-50);
  }
  .text-error-50 {
    color: var(--color-error-50);
  }
  .border-error-50 {
    border-color: var(--color-error-50);
  }
  .bg-error-100 {
    background-color: var(--color-error-100);
  }
  .text-error-100 {
    color: var(--color-error-100);
  }
  .border-error-100 {
    border-color: var(--color-error-100);
  }
  .bg-error-200 {
    background-color: var(--color-error-200);
  }
  .text-error-200 {
    color: var(--color-error-200);
  }
  .border-error-200 {
    border-color: var(--color-error-200);
  }
  .bg-error-300 {
    background-color: var(--color-error-300);
  }
  .text-error-300 {
    color: var(--color-error-300);
  }
  .border-error-300 {
    border-color: var(--color-error-300);
  }
  .bg-error-400 {
    background-color: var(--color-error-400);
  }
  .text-error-400 {
    color: var(--color-error-400);
  }
  .border-error-400 {
    border-color: var(--color-error-400);
  }
  .bg-error-500 {
    background-color: var(--color-error-500);
  }
  .text-error-500 {
    color: var(--color-error-500);
  }
  .border-error-500 {
    border-color: var(--color-error-500);
  }
  .bg-error-600 {
    background-color: var(--color-error-600);
  }
  .text-error-600 {
    color: var(--color-error-600);
  }
  .border-error-600 {
    border-color: var(--color-error-600);
  }
  .bg-error-700 {
    background-color: var(--color-error-700);
  }
  .text-error-700 {
    color: var(--color-error-700);
  }
  .border-error-700 {
    border-color: var(--color-error-700);
  }
  .bg-error-800 {
    background-color: var(--color-error-800);
  }
  .text-error-800 {
    color: var(--color-error-800);
  }
  .border-error-800 {
    border-color: var(--color-error-800);
  }
  .bg-error-900 {
    background-color: var(--color-error-900);
  }
  .text-error-900 {
    color: var(--color-error-900);
  }
  .border-error-900 {
    border-color: var(--color-error-900);
  }
  .bg-error-950 {
    background-color: var(--color-error-950);
  }
  .text-erro