@start-base/start-ui/variables.css

<p align="center"> <a href="https://startbase.dev" target="_blank"> <img src="https://startbase.dev/apple-touch-icon.png" width="60px" style="padding-top: 60px" /> </a> </p>

/* src/style/variables.scss */
:root {
  --sui-white: #fff;
  --sui-black: #000;
  --sui-success: #22c55e;
  --sui-info: #3b82f6;
  --sui-warning: #f97316;
  --sui-error: #ef4444;
  --sui-primary: #952fd3;
  --sui-secondary: #145477;
}
:root {
  --sui-success-50: color-mix(in srgb, var(--sui-success) 5%, var(--sui-white));
  --sui-success-100: color-mix( in srgb, var(--sui-success) 10%, var(--sui-white) );
  --sui-success-150: color-mix( in srgb, var(--sui-success) 15%, var(--sui-white) );
  --sui-success-200: color-mix( in srgb, var(--sui-success) 20%, var(--sui-white) );
  --sui-success-250: color-mix( in srgb, var(--sui-success) 25%, var(--sui-white) );
  --sui-success-300: color-mix( in srgb, var(--sui-success) 30%, var(--sui-white) );
  --sui-success-350: color-mix( in srgb, var(--sui-success) 35%, var(--sui-white) );
  --sui-success-400: color-mix( in srgb, var(--sui-success) 40%, var(--sui-white) );
  --sui-success-450: color-mix( in srgb, var(--sui-success) 45%, var(--sui-white) );
  --sui-success-500: color-mix( in srgb, var(--sui-success) 50%, var(--sui-white) );
  --sui-success-550: color-mix( in srgb, var(--sui-success) 55%, var(--sui-white) );
  --sui-success-600: color-mix( in srgb, var(--sui-success) 60%, var(--sui-white) );
  --sui-success-650: color-mix( in srgb, var(--sui-success) 65%, var(--sui-white) );
  --sui-success-700: color-mix( in srgb, var(--sui-success) 70%, var(--sui-white) );
  --sui-success-750: color-mix( in srgb, var(--sui-success) 75%, var(--sui-white) );
  --sui-success-800: color-mix( in srgb, var(--sui-success) 80%, var(--sui-white) );
  --sui-success-850: color-mix( in srgb, var(--sui-success) 85%, var(--sui-white) );
  --sui-success-900: color-mix( in srgb, var(--sui-success) 90%, var(--sui-white) );
  --sui-success-950: color-mix( in srgb, var(--sui-success) 95%, var(--sui-white) );
  --sui-info-50: color-mix(in srgb, var(--sui-info) 5%, var(--sui-white));
  --sui-info-100: color-mix(in srgb, var(--sui-info) 10%, var(--sui-white));
  --sui-info-150: color-mix(in srgb, var(--sui-info) 15%, var(--sui-white));
  --sui-info-200: color-mix(in srgb, var(--sui-info) 20%, var(--sui-white));
  --sui-info-250: color-mix(in srgb, var(--sui-info) 25%, var(--sui-white));
  --sui-info-300: color-mix(in srgb, var(--sui-info) 30%, var(--sui-white));
  --sui-info-350: color-mix(in srgb, var(--sui-info) 35%, var(--sui-white));
  --sui-info-400: color-mix(in srgb, var(--sui-info) 40%, var(--sui-white));
  --sui-info-450: color-mix(in srgb, var(--sui-info) 45%, var(--sui-white));
  --sui-info-500: color-mix(in srgb, var(--sui-info) 50%, var(--sui-white));
  --sui-info-550: color-mix(in srgb, var(--sui-info) 55%, var(--sui-white));
  --sui-info-600: color-mix(in srgb, var(--sui-info) 60%, var(--sui-white));
  --sui-info-650: color-mix(in srgb, var(--sui-info) 65%, var(--sui-white));
  --sui-info-700: color-mix(in srgb, var(--sui-info) 70%, var(--sui-white));
  --sui-info-750: color-mix(in srgb, var(--sui-info) 75%, var(--sui-white));
  --sui-info-800: color-mix(in srgb, var(--sui-info) 80%, var(--sui-white));
  --sui-info-850: color-mix(in srgb, var(--sui-info) 85%, var(--sui-white));
  --sui-info-900: color-mix(in srgb, var(--sui-info) 90%, var(--sui-white));
  --sui-info-950: color-mix(in srgb, var(--sui-info) 95%, var(--sui-white));
  --sui-warning-50: color-mix(in srgb, var(--sui-warning) 5%, var(--sui-white));
  --sui-warning-100: color-mix( in srgb, var(--sui-warning) 10%, var(--sui-white) );
  --sui-warning-150: color-mix( in srgb, var(--sui-warning) 15%, var(--sui-white) );
  --sui-warning-200: color-mix( in srgb, var(--sui-warning) 20%, var(--sui-white) );
  --sui-warning-250: color-mix( in srgb, var(--sui-warning) 25%, var(--sui-white) );
  --sui-warning-300: color-mix( in srgb, var(--sui-warning) 30%, var(--sui-white) );
  --sui-warning-350: color-mix( in srgb, var(--sui-warning) 35%, var(--sui-white) );
  --sui-warning-400: color-mix( in srgb, var(--sui-warning) 40%, var(--sui-white) );
  --sui-warning-450: color-mix( in srgb, var(--sui-warning) 45%, var(--sui-white) );
  --sui-warning-500: color-mix( in srgb, var(--sui-warning) 50%, var(--sui-white) );
  --sui-warning-550: color-mix( in srgb, var(--sui-warning) 55%, var(--sui-white) );
  --sui-warning-600: color-mix( in srgb, var(--sui-warning) 60%, var(--sui-white) );
  --sui-warning-650: color-mix( in srgb, var(--sui-warning) 65%, var(--sui-white) );
  --sui-warning-700: color-mix( in srgb, var(--sui-warning) 70%, var(--sui-white) );
  --sui-warning-750: color-mix( in srgb, var(--sui-warning) 75%, var(--sui-white) );
  --sui-warning-800: color-mix( in srgb, var(--sui-warning) 80%, var(--sui-white) );
  --sui-warning-850: color-mix( in srgb, var(--sui-warning) 85%, var(--sui-white) );
  --sui-warning-900: color-mix( in srgb, var(--sui-warning) 90%, var(--sui-white) );
  --sui-warning-950: color-mix( in srgb, var(--sui-warning) 95%, var(--sui-white) );
  --sui-error-50: color-mix(in srgb, var(--sui-error) 5%, var(--sui-white));
  --sui-error-100: color-mix(in srgb, var(--sui-error) 10%, var(--sui-white));
  --sui-error-150: color-mix(in srgb, var(--sui-error) 15%, var(--sui-white));
  --sui-error-200: color-mix(in srgb, var(--sui-error) 20%, var(--sui-white));
  --sui-error-250: color-mix(in srgb, var(--sui-error) 25%, var(--sui-white));
  --sui-error-300: color-mix(in srgb, var(--sui-error) 30%, var(--sui-white));
  --sui-error-350: color-mix(in srgb, var(--sui-error) 35%, var(--sui-white));
  --sui-error-400: color-mix(in srgb, var(--sui-error) 40%, var(--sui-white));
  --sui-error-450: color-mix(in srgb, var(--sui-error) 45%, var(--sui-white));
  --sui-error-500: color-mix(in srgb, var(--sui-error) 50%, var(--sui-white));
  --sui-error-550: color-mix(in srgb, var(--sui-error) 55%, var(--sui-white));
  --sui-error-600: color-mix(in srgb, var(--sui-error) 60%, var(--sui-white));
  --sui-error-650: color-mix(in srgb, var(--sui-error) 65%, var(--sui-white));
  --sui-error-700: color-mix(in srgb, var(--sui-error) 70%, var(--sui-white));
  --sui-error-750: color-mix(in srgb, var(--sui-error) 75%, var(--sui-white));
  --sui-error-800: color-mix(in srgb, var(--sui-error) 80%, var(--sui-white));
  --sui-error-850: color-mix(in srgb, var(--sui-error) 85%, var(--sui-white));
  --sui-error-900: color-mix(in srgb, var(--sui-error) 90%, var(--sui-white));
  --sui-error-950: color-mix(in srgb, var(--sui-error) 95%, var(--sui-white));
  --sui-primary-50: color-mix(in srgb, var(--sui-primary) 5%, var(--sui-white));
  --sui-primary-100: color-mix( in srgb, var(--sui-primary) 10%, var(--sui-white) );
  --sui-primary-150: color-mix( in srgb, var(--sui-primary) 15%, var(--sui-white) );
  --sui-primary-200: color-mix( in srgb, var(--sui-primary) 20%, var(--sui-white) );
  --sui-primary-250: color-mix( in srgb, var(--sui-primary) 25%, var(--sui-white) );
  --sui-primary-300: color-mix( in srgb, var(--sui-primary) 30%, var(--sui-white) );
  --sui-primary-350: color-mix( in srgb, var(--sui-primary) 35%, var(--sui-white) );
  --sui-primary-400: color-mix( in srgb, var(--sui-primary) 40%, var(--sui-white) );
  --sui-primary-450: color-mix( in srgb, var(--sui-primary) 45%, var(--sui-white) );
  --sui-primary-500: color-mix( in srgb, var(--sui-primary) 50%, var(--sui-white) );
  --sui-primary-550: color-mix( in srgb, var(--sui-primary) 55%, var(--sui-white) );
  --sui-primary-600: color-mix( in srgb, var(--sui-primary) 60%, var(--sui-white) );
  --sui-primary-650: color-mix( in srgb, var(--sui-primary) 65%, var(--sui-white) );
  --sui-primary-700: color-mix( in srgb, var(--sui-primary) 70%, var(--sui-white) );
  --sui-primary-750: color-mix( in srgb, var(--sui-primary) 75%, var(--sui-white) );
  --sui-primary-800: color-mix( in srgb, var(--sui-primary) 80%, var(--sui-white) );
  --sui-primary-850: color-mix( in srgb, var(--sui-primary) 85%, var(--sui-white) );
  --sui-primary-900: color-mix( in srgb, var(--sui-primary) 90%, var(--sui-white) );
  --sui-primary-950: color-mix( in srgb, var(--sui-primary) 95%, var(--sui-white) );
  --sui-secondary-50: color-mix( in srgb, var(--sui-secondary) 5%, var(--sui-white) );
  --sui-secondary-100: color-mix( in srgb, var(--sui-secondary) 10%, var(--sui-white) );
  --sui-secondary-150: color-mix( in srgb, var(--sui-secondary) 15%, var(--sui-white) );
  --sui-secondary-200: color-mix( in srgb, var(--sui-secondary) 20%, var(--sui-white) );
  --sui-secondary-250: color-mix( in srgb, var(--sui-secondary) 25%, var(--sui-white) );
  --sui-secondary-300: color-mix( in srgb, var(--sui-secondary) 30%, var(--sui-white) );
  --sui-secondary-350: color-mix( in srgb, var(--sui-secondary) 35%, var(--sui-white) );
  --sui-secondary-400: color-mix( in srgb, var(--sui-secondary) 40%, var(--sui-white) );
  --sui-secondary-450: color-mix( in srgb, var(--sui-secondary) 45%, var(--sui-white) );
  --sui-secondary-500: color-mix( in srgb, var(--sui-secondary) 50%, var(--sui-white) );
  --sui-secondary-550: color-mix( in srgb, var(--sui-secondary) 55%, var(--sui-white) );
  --sui-secondary-600: color-mix( in srgb, var(--sui-secondary) 60%, var(--sui-white) );
  --sui-secondary-650: color-mix( in srgb, var(--sui-secondary) 65%, var(--sui-white) );
  --sui-secondary-700: color-mix( in srgb, var(--sui-secondary) 70%, var(--sui-white) );
  --sui-secondary-750: color-mix( in srgb, var(--sui-secondary) 75%, var(--sui-white) );
  --sui-secondary-800: color-mix( in srgb, var(--sui-secondary) 80%, var(--sui-white) );
  --sui-secondary-850: color-mix( in srgb, var(--sui-secondary) 85%, var(--sui-white) );
  --sui-secondary-900: color-mix( in srgb, var(--sui-secondary) 90%, var(--sui-white) );
  --sui-secondary-950: color-mix( in srgb, var(--sui-secondary) 95%, var(--sui-white) );
  --sui-gray-950: #0a0a0a;
  --sui-gray-900: #171717;
  --sui-gray-850: #1f1f1f;
  --sui-gray-800: #262626;
  --sui-gray-750: #333;
  --sui-gray-700: #404040;
  --sui-gray-650: #4b4b4b;
  --sui-gray-600: #525252;
  --sui-gray-550: #5f5f5f;
  --sui-gray-500: #737373;
  --sui-gray-450: #8c8c8c;
  --sui-gray-400: #a3a3a3;
  --sui-gray-350: #bfbfbf;
  --sui-gray-300: #d4d4d4;
  --sui-gray-250: #e0e0e0;
  --sui-gray-200: #e5e5e5;
  --sui-gray-150: #ededed;
  --sui-gray-100: #f5f5f5;
  --sui-gray-50: #fafafa;
}
:root {
  --sui-success-dark-50: color-mix( in srgb, var(--sui-success) 5%, var(--sui-black) );
  --sui-success-dark-100: color-mix( in srgb, var(--sui-success) 10%, var(--sui-black) );
  --sui-success-dark-150: color-mix( in srgb, var(--sui-success) 15%, var(--sui-black) );
  --sui-success-dark-200: color-mix( in srgb, var(--sui-success) 20%, var(--sui-black) );
  --sui-success-dark-250: color-mix( in srgb, var(--sui-success) 25%, var(--sui-black) );
  --sui-success-dark-300: color-mix( in srgb, var(--sui-success) 30%, var(--sui-black) );
  --sui-success-dark-350: color-mix( in srgb, var(--sui-success) 35%, var(--sui-black) );
  --sui-success-dark-400: color-mix( in srgb, var(--sui-success) 40%, var(--sui-black) );
  --sui-success-dark-450: color-mix( in srgb, var(--sui-success) 45%, var(--sui-black) );
  --sui-success-dark-500: color-mix( in srgb, var(--sui-success) 50%, var(--sui-black) );
  --sui-success-dark-550: color-mix( in srgb, var(--sui-success) 55%, var(--sui-black) );
  --sui-success-dark-600: color-mix( in srgb, var(--sui-success) 60%, var(--sui-black) );
  --sui-success-dark-650: color-mix( in srgb, var(--sui-success) 65%, var(--sui-black) );
  --sui-success-dark-700: color-mix( in srgb, var(--sui-success) 70%, var(--sui-black) );
  --sui-success-dark-750: color-mix( in srgb, var(--sui-success) 75%, var(--sui-black) );
  --sui-success-dark-800: color-mix( in srgb, var(--sui-success) 80%, var(--sui-black) );
  --sui-success-dark-850: color-mix( in srgb, var(--sui-success) 85%, var(--sui-black) );
  --sui-success-dark-900: color-mix( in srgb, var(--sui-success) 90%, var(--sui-black) );
  --sui-success-dark-950: color-mix( in srgb, var(--sui-success) 95%, var(--sui-black) );
  --sui-info-dark-50: color-mix(in srgb, var(--sui-info) 5%, var(--sui-black));
  --sui-info-dark-100: color-mix( in srgb, var(--sui-info) 10%, var(--sui-black) );
  --sui-info-dark-150: color-mix( in srgb, var(--sui-info) 15%, var(--sui-black) );
  --sui-info-dark-200: color-mix( in srgb, var(--sui-info) 20%, var(--sui-black) );
  --sui-info-dark-250: color-mix( in srgb, var(--sui-info) 25%, var(--sui-black) );
  --sui-info-dark-300: color-mix( in srgb, var(--sui-info) 30%, var(--sui-black) );
  --sui-info-dark-350: color-mix( in srgb, var(--sui-info) 35%, var(--sui-black) );
  --sui-info-dark-400: color-mix( in srgb, var(--sui-info) 40%, var(--sui-black) );
  --sui-info-dark-450: color-mix( in srgb, var(--sui-info) 45%, var(--sui-black) );
  --sui-info-dark-500: color-mix( in srgb, var(--sui-info) 50%, var(--sui-black) );
  --sui-info-dark-550: color-mix( in srgb, var(--sui-info) 55%, var(--sui-black) );
  --sui-info-dark-600: color-mix( in srgb, var(--sui-info) 60%, var(--sui-black) );
  --sui-info-dark-650: color-mix( in srgb, var(--sui-info) 65%, var(--sui-black) );
  --sui-info-dark-700: color-mix( in srgb, var(--sui-info) 70%, var(--sui-black) );
  --sui-info-dark-750: color-mix( in srgb, var(--sui-info) 75%, var(--sui-black) );
  --sui-info-dark-800: color-mix( in srgb, var(--sui-info) 80%, var(--sui-black) );
  --sui-info-dark-850: color-mix( in srgb, var(--sui-info) 85%, var(--sui-black) );
  --sui-info-dark-900: color-mix( in srgb, var(--sui-info) 90%, var(--sui-black) );
  --sui-info-dark-950: color-mix( in srgb, var(--sui-info) 95%, var(--sui-black) );
  --sui-warning-dark-50: color-mix( in srgb, var(--sui-warning) 5%, var(--sui-black) );
  --sui-warning-dark-100: color-mix( in srgb, var(--sui-warning) 10%, var(--sui-black) );
  --sui-warning-dark-150: color-mix( in srgb, var(--sui-warning) 15%, var(--sui-black) );
  --sui-warning-dark-200: color-mix( in srgb, var(--sui-warning) 20%, var(--sui-black) );
  --sui-warning-dark-250: color-mix( in srgb, var(--sui-warning) 25%, var(--sui-black) );
  --sui-warning-dark-300: color-mix( in srgb, var(--sui-warning) 30%, var(--sui-black) );
  --sui-warning-dark-350: color-mix( in srgb, var(--sui-warning) 35%, var(--sui-black) );
  --sui-warning-dark-400: color-mix( in srgb, var(--sui-warning) 40%, var(--sui-black) );
  --sui-warning-dark-450: color-mix( in srgb, var(--sui-warning) 45%, var(--sui-black) );
  --sui-warning-dark-500: color-mix( in srgb, var(--sui-warning) 50%, var(--sui-black) );
  --sui-warning-dark-550: color-mix( in srgb, var(--sui-warning) 55%, var(--sui-black) );
  --sui-warning-dark-600: color-mix( in srgb, var(--sui-warning) 60%, var(--sui-black) );
  --sui-warning-dark-650: color-mix( in srgb, var(--sui-warning) 65%, var(--sui-black) );
  --sui-warning-dark-700: color-mix( in srgb, var(--sui-warning) 70%, var(--sui-black) );
  --sui-warning-dark-750: color-mix( in srgb, var(--sui-warning) 75%, var(--sui-black) );
  --sui-warning-dark-800: color-mix( in srgb, var(--sui-warning) 80%, var(--sui-black) );
  --sui-warning-dark-850: color-mix( in srgb, var(--sui-warning) 85%, var(--sui-black) );
  --sui-warning-dark-900: color-mix( in srgb, var(--sui-warning) 90%, var(--sui-black) );
  --sui-warning-dark-950: color-mix( in srgb, var(--sui-warning) 95%, var(--sui-black) );
  --sui-error-dark-50: color-mix( in srgb, var(--sui-error) 5%, var(--sui-black) );
  --sui-error-dark-100: color-mix( in srgb, var(--sui-error) 10%, var(--sui-black) );
  --sui-error-dark-150: color-mix( in srgb, var(--sui-error) 15%, var(--sui-black) );
  --sui-error-dark-200: color-mix( in srgb, var(--sui-error) 20%, var(--sui-black) );
  --sui-error-dark-250: color-mix( in srgb, var(--sui-error) 25%, var(--sui-black) );
  --sui-error-dark-300: color-mix( in srgb, var(--sui-error) 30%, var(--sui-black) );
  --sui-error-dark-350: color-mix( in srgb, var(--sui-error) 35%, var(--sui-black) );
  --sui-error-dark-400: color-mix( in srgb, var(--sui-error) 40%, var(--sui-black) );
  --sui-error-dark-450: color-mix( in srgb, var(--sui-error) 45%, var(--sui-black) );
  --sui-error-dark-500: color-mix( in srgb, var(--sui-error) 50%, var(--sui-black) );
  --sui-error-dark-550: color-mix( in srgb, var(--sui-error) 55%, var(--sui-black) );
  --sui-error-dark-600: color-mix( in srgb, var(--sui-error) 60%, var(--sui-black) );
  --sui-error-dark-650: color-mix( in srgb, var(--sui-error) 65%, var(--sui-black) );
  --sui-error-dark-700: color-mix( in srgb, var(--sui-error) 70%, var(--sui-black) );
  --sui-error-dark-750: color-mix( in srgb, var(--sui-error) 75%, var(--sui-black) );
  --sui-error-dark-800: color-mix( in srgb, var(--sui-error) 80%, var(--sui-black) );
  --sui-error-dark-850: color-mix( in srgb, var(--sui-error) 85%, var(--sui-black) );
  --sui-error-dark-900: color-mix( in srgb, var(--sui-error) 90%, var(--sui-black) );
  --sui-error-dark-950: color-mix( in srgb, var(--sui-error) 95%, var(--sui-black) );
  --sui-primary-dark-50: color-mix( in srgb, var(--sui-primary) 5%, var(--sui-black) );
  --sui-primary-dark-100: color-mix( in srgb, var(--sui-primary) 10%, var(--sui-black) );
  --sui-primary-dark-150: color-mix( in srgb, var(--sui-primary) 15%, var(--sui-black) );
  --sui-primary-dark-200: color-mix( in srgb, var(--sui-primary) 20%, var(--sui-black) );
  --sui-primary-dark-250: color-mix( in srgb, var(--sui-primary) 25%, var(--sui-black) );
  --sui-primary-dark-300: color-mix( in srgb, var(--sui-primary) 30%, var(--sui-black) );
  --sui-primary-dark-350: color-mix( in srgb, var(--sui-primary) 35%, var(--sui-black) );
  --sui-primary-dark-400: color-mix( in srgb, var(--sui-primary) 40%, var(--sui-black) );
  --sui-primary-dark-450: color-mix( in srgb, var(--sui-primary) 45%, var(--sui-black) );
  --sui-primary-dark-500: color-mix( in srgb, var(--sui-primary) 50%, var(--sui-black) );
  --sui-primary-dark-550: color-mix( in srgb, var(--sui-primary) 55%, var(--sui-black) );
  --sui-primary-dark-600: color-mix( in srgb, var(--sui-primary) 60%, var(--sui-black) );
  --sui-primary-dark-650: color-mix( in srgb, var(--sui-primary) 65%, var(--sui-black) );
  --sui-primary-dark-700: color-mix( in srgb, var(--sui-primary) 70%, var(--sui-black) );
  --sui-primary-dark-750: color-mix( in srgb, var(--sui-primary) 75%, var(--sui-black) );
  --sui-primary-dark-800: color-mix( in srgb, var(--sui-primary) 80%, var(--sui-black) );
  --sui-primary-dark-850: color-mix( in srgb, var(--sui-primary) 85%, var(--sui-black) );
  --sui-primary-dark-900: color-mix( in srgb, var(--sui-primary) 90%, var(--sui-black) );
  --sui-primary-dark-950: color-mix( in srgb, var(--sui-primary) 95%, var(--sui-black) );
  --sui-secondary-dark-50: color-mix( in srgb, var(--sui-secondary) 5%, var(--sui-black) );
  --sui-secondary-dark-100: color-mix( in srgb, var(--sui-secondary) 10%, var(--sui-black) );
  --sui-secondary-dark-150: color-mix( in srgb, var(--sui-secondary) 15%, var(--sui-black) );
  --sui-secondary-dark-200: color-mix( in srgb, var(--sui-secondary) 20%, var(--sui-black) );
  --sui-secondary-dark-250: color-mix( in srgb, var(--sui-secondary) 25%, var(--sui-black) );
  --sui-secondary-dark-300: color-mix( in srgb, var(--sui-secondary) 30%, var(--sui-black) );
  --sui-secondary-dark-350: color-mix( in srgb, var(--sui-secondary) 35%, var(--sui-black) );
  --sui-secondary-dark-400: color-mix( in srgb, var(--sui-secondary) 40%, var(--sui-black) );
  --sui-secondary-dark-450: color-mix( in srgb, var(--sui-secondary) 45%, var(--sui-black) );
  --sui-secondary-dark-500: color-mix( in srgb, var(--sui-secondary) 50%, var(--sui-black) );
  --sui-secondary-dark-550: color-mix( in srgb, var(--sui-secondary) 55%, var(--sui-black) );
  --sui-secondary-dark-600: color-mix( in srgb, var(--sui-secondary) 60%, var(--sui-black) );
  --sui-secondary-dark-650: color-mix( in srgb, var(--sui-secondary) 65%, var(--sui-black) );
  --sui-secondary-dark-700: color-mix( in srgb, var(--sui-secondary) 70%, var(--sui-black) );
  --sui-secondary-dark-750: color-mix( in srgb, var(--sui-secondary) 75%, var(--sui-black) );
  --sui-secondary-dark-800: color-mix( in srgb, var(--sui-secondary) 80%, var(--sui-black) );
  --sui-secondary-dark-850: color-mix( in srgb, var(--sui-secondary) 85%, var(--sui-black) );
  --sui-secondary-dark-900: color-mix( in srgb, var(--sui-secondary) 90%, var(--sui-black) );
  --sui-secondary-dark-950: color-mix( in srgb, var(--sui-secondary) 95%, var(--sui-black) );
}
.light,
:root,
[data-theme=light] {
  --sui-accordion-fg: var(--sui-black);
  --sui-accordion-bg: var(--sui-white);
  --sui-accordion-border: var(--sui-gray-300);
  --sui-accordion-summary-fg: inherit;
  --sui-accordion-summary-bg: transparent;
  --sui-accordion-summary-disabled: var(--sui-gray-400);
  --sui-accordion-summary-focus-outline: var(--sui-info);
}
.dark,
[data-theme=dark] {
  --sui-accordion-fg: var(--sui-white);
  --sui-accordion-bg: var(--sui-black);
  --sui-accordion-border: var(--sui-gray-700);
  --sui-accordion-summary-fg: inherit;
  --sui-accordion-summary-bg: transparent;
  --sui-accordion-summary-disabled: var(--sui-gray-600);
  --sui-accordion-summary-focus-outline: var(--sui-info);
}
.light,
:root,
[data-theme=light] {
  --sui-button-primary-default-bg: var(--sui-black);
  --sui-button-primary-default-text: var(--sui-white);
  --sui-button-primary-default-hover-bg: var(--sui-gray-750);
  --sui-button-secondary-default-bg: var(--sui-gray-200);
  --sui-button-secondary-default-text: var(--sui-black);
  --sui-button-secondary-default-hover-bg: var(--sui-gray-100);
  --sui-button-destructive-default-bg: var(--sui-error);
  --sui-button-destructive-default-text: var(--sui-white);
  --sui-button-destructive-default-hover-bg: var(--sui-error-800);
  --sui-button-primary-outline-bg: var(--sui-gray-500);
  --sui-button-primary-outline-text: var(--sui-white);
  --sui-button-primary-outline-border: var(--sui-gray-800);
  --sui-button-primary-outline-hover-bg: var(--sui-gray-800);
  --sui-button-primary-outline-hover-text: var(--sui-white);
  --sui-button-secondary-outline-bg: var(--sui-gray-50);
  --sui-button-secondary-outline-text: var(--sui-black);
  --sui-button-secondary-outline-border: var(--sui-gray-200);
  --sui-button-secondary-outline-hover-bg: var(--sui-gray-200);
  --sui-button-destructive-outline-bg: var(--sui-error-50);
  --sui-button-destructive-outline-text: var(--sui-error);
  --sui-button-destructive-outline-border: var(--sui-error-200);
  --sui-button-destructive-outline-hover-border: var(--sui-error-800);
  --sui-button-destructive-outline-hover-bg: var(--sui-error-800);
  --sui-button-destructive-outline-hover-text: var(--sui-white);
  --sui-button-primary-ghost-bg: var(--sui-transparent);
  --sui-button-primary-ghost-text: var(--sui-black);
  --sui-button-primary-ghost-hover-bg: var(--sui-gray-850);
  --sui-button-primary-ghost-hover-text: var(--sui-white);
  --sui-button-secondary-ghost-bg: var(--sui-transparent);
  --sui-button-secondary-ghost-text: var(--sui-black);
  --sui-button-secondary-ghost-hover-bg: var(--sui-gray-150);
  --sui-button-secondary-ghost-hover-text: var(--sui-black);
  --sui-button-destructive-ghost-bg: var(--sui-transparent);
  --sui-button-destructive-ghost-text: var(--sui-error-850);
  --sui-button-destructive-ghost-hover-bg: var(--sui-error-850);
  --sui-button-destructive-ghost-hover-text: var(--sui-white);
  --sui-button-disabled-bg: var(--sui-gray-600);
  --sui-button-disabled-text: var(--sui-black);
}
.dark,
[data-theme=dark] {
  --sui-button-primary-default-bg: var(--sui-gray-100);
  --sui-button-primary-default-text: var(--sui-black);
  --sui-button-primary-default-hover-bg: var(--sui-gray-200);
  --sui-button-secondary-default-bg: var(--sui-gray-700);
  --sui-button-secondary-default-text: var(--sui-white);
  --sui-button-secondary-default-hover-bg: var(--sui-gray-750);
  --sui-button-destructive-default-bg: var(--sui-error-dark-650);
  --sui-button-destructive-default-text: var(--sui-white);
  --sui-button-destructive-default-hover-bg: var(--sui-error-dark-600);
  --sui-button-primary-outline-bg: var(--sui-gray-400);
  --sui-button-primary-outline-text: var(--sui-white);
  --sui-button-primary-outline-border: var(--sui-gray-100);
  --sui-button-primary-outline-hover-bg: var(--sui-gray-100);
  --sui-button-primary-outline-hover-text: var(--sui-black);
  --sui-button-secondary-outline-bg: var(--sui-gray-800);
  --sui-button-secondary-outline-text: var(--sui-gray-100);
  --sui-button-secondary-outline-border: var(--sui-gray-500);
  --sui-button-secondary-outline-hover-bg: var(--sui-gray-500);
  --sui-button-destructive-outline-bg: var(--sui-error-dark-300);
  --sui-button-destructive-outline-text: var(--sui-error);
  --sui-button-destructive-outline-border: var(--sui-error-dark-600);
  --sui-button-destructive-outline-hover-bg: var(--sui-error-dark-600);
  --sui-button-destructive-outline-hover-border: var(--sui-error-dark-600);
  --sui-button-destructive-outline-hover-text: var(--sui-white);
  --sui-button-primary-ghost-bg: var(--sui-transparent);
  --sui-button-primary-ghost-text: var(--sui-white);
  --sui-button-primary-ghost-hover-bg: var(--sui-gray-200);
  --sui-button-primary-ghost-hover-text: var(--sui-black);
  --sui-button-secondary-ghost-bg: var(--sui-transparent);
  --sui-button-secondary-ghost-text: var(--sui-white);
  --sui-button-secondary-ghost-hover-bg: var(--sui-gray-750);
  --sui-button-secondary-ghost-hover-text: var(--sui-white);
  --sui-button-destructive-ghost-bg: var(--sui-transparent);
  --sui-button-destructive-ghost-text: var(--sui-error-dark-600);
  --sui-button-destructive-ghost-hover-bg: var(--sui-error-dark-600);
  --sui-button-destructive-ghost-hover-text: var(--sui-white);
  --sui-button-disabled-bg: var(--sui-gray-600);
  --sui-button-disabled-text: var(--sui-white);
}
.light,
:root,
[data-theme=light] {
  --sui-context-menu-bg: var(--sui-white);
  --sui-context-menu-border: var(--sui-gray-200);
}
.dark,
[data-theme=dark] {
  --sui-context-menu-bg: var(--sui-black);
  --sui-context-menu-border: var(--sui-gray-700);
}
.light,
:root,
[data-theme=light] {
  --sui-dropdown-menu-bg: var(--sui-white);
  --sui-dropdown-menu-border: var(--sui-gray-200);
}
.dark,
[data-theme=dark] {
  --sui-dropdown-menu-bg: var(--sui-black);
  --sui-dropdown-menu-border: var(--sui-gray-700);
}
.light,
:root,
[data-theme=light] {
  --sui-floating-menu-item-active: var(--sui-gray-200);
  --sui-floating-menu-item-disabled: var(--sui-gray-100);
}
.dark,
[data-theme=dark] {
  --sui-floating-menu-item-active: var(--sui-gray-700);
  --sui-floating-menu-item-disabled: var(--sui-gray-600);
}
.light,
:root,
[data-theme=light] {
  --sui-popover-bg: var(--sui-white);
  --sui-popover-text: var(--sui-black);
  --sui-popover-border: var(--sui-gray-200);
}
.dark,
[data-theme=dark] {
  --sui-popover-bg: var(--sui-black);
  --sui-popover-text: var(--sui-white);
  --sui-popover-border: var(--sui-gray-700);
}
.light,
:root,
[data-theme=light] {
  --sui-progress-circular-default-track-bg: var(--sui-gray-150);
  --sui-progress-circular-default-progress-bg: var(--sui-black);
  --sui-progress-circular-success-track-bg: var(--sui-gray-150);
  --sui-progress-circular-success-progress-bg: var(--sui-success);
  --sui-progress-circular-info-track-bg: var(--sui-gray-150);
  --sui-progress-circular-info-progress-bg: var(--sui-info);
  --sui-progress-circular-warning-track-bg: var(--sui-gray-150);
  --sui-progress-circular-warning-progress-bg: var(--sui-warning);
  --sui-progress-circular-error-track-bg: var(--sui-gray-150);
  --sui-progress-circular-error-progress-bg: var(--sui-error);
  --sui-progress-linear-default-track-bg: var(--sui-gray-150);
  --sui-progress-linear-default-progress-bg: var(--sui-black);
  --sui-progress-linear-success-track-bg: var(--sui-gray-150);
  --sui-progress-linear-success-progress-bg: var(--sui-success);
  --sui-progress-linear-info-track-bg: var(--sui-gray-150);
  --sui-progress-linear-info-progress-bg: var(--sui-info);
  --sui-progress-linear-warning-track-bg: var(--sui-gray-150);
  --sui-progress-linear-warning-progress-bg: var(--sui-warning);
  --sui-progress-linear-error-track-bg: var(--sui-gray-150);
  --sui-progress-linear-error-progress-bg: var(--sui-error);
}
.dark,
[data-theme=dark] {
  --sui-progress-circular-default-track-bg: var(--sui-gray-800);
  --sui-progress-circular-default-progress-bg: var(--sui-white);
  --sui-progress-circular-success-track-bg: var(--sui-gray-800);
  --sui-progress-circular-success-progress-bg: var(--sui-success);
  --sui-progress-circular-info-track-bg: var(--sui-gray-800);
  --sui-progress-circular-info-progress-bg: var(--sui-info);
  --sui-progress-circular-warning-track-bg: var(--sui-gray-800);
  --sui-progress-circular-warning-progress-bg: var(--sui-warning);
  --sui-progress-circular-error-track-bg: var(--sui-gray-800);
  --sui-progress-circular-error-progress-bg: var(--sui-error);
  --sui-progress-linear-default-track-bg: var(--sui-gray-800);
  --sui-progress-linear-default-progress-bg: var(--sui-white);
  --sui-progress-linear-success-track-bg: var(--sui-gray-800);
  --sui-progress-linear-success-progress-bg: var(--sui-success);
  --sui-progress-linear-info-track-bg: var(--sui-gray-800);
  --sui-progress-linear-info-progress-bg: var(--sui-info);
  --sui-progress-linear-warning-track-bg: var(--sui-gray-800);
  --sui-progress-linear-warning-progress-bg: var(--sui-warning);
  --sui-progress-linear-error-track-bg: var(--sui-gray-800);
  --sui-progress-linear-error-progress-bg: var(--sui-error);
}
.light,
:root,
[data-theme=light] {
  --sui-skeleton-start-bg: #f0f0f0;
  --sui-skeleton-center-bg: #e0e0e0;
  --sui-skeleton-end-bg: #f0f0f0;
}
.dark,
[data-theme=dark] {
  --sui-skeleton-start-bg: #323232;
  --sui-skeleton-center-bg: #242424;
  --sui-skeleton-end-bg: #323232;
}
.light,
:root,
[data-theme=light] {
  --sui-tab-buttons-bg: var(--sui-gray-100);
  --sui-tab-button-border: var(--sui-transparent);
  --sui-tab-button-fg: var(--sui-black);
  --sui-tab-button-bg: var(--sui-transparent);
  --sui-tab-button-disabled-fg: var(--sui-gray-500);
  --sui-tab-button-selected-fg: var(--sui-black);
  --sui-tab-button-selected-bg: var(--sui-white);
  --sui-tab-content-bg: var(--sui-white);
  --sui-tab-content-fg: var(--sui-black);
  --sui-tab-content-border: var(--sui-gray-300);
}
.dark,
[data-theme=dark] {
  --sui-tab-buttons-bg: var(--sui-gray-800);
  --sui-tab-button-fg: var(--sui-white);
  --sui-tab-button-selected-fg: var(--sui-white);
  --sui-tab-button-selected-bg: var(--sui-black);
  --sui-tab-content-bg: var(--sui-black);
  --sui-tab-content-fg: var(--sui-white);
  --sui-tab-content-border: var(--sui-gray-700);
}
.light,
:root,
[data-theme=light] {
  --sui-bento-card-bg: var(--sui-white);
  --sui-bento-card-border: var(--sui-gray-300);
  --sui-bento-card-content: var(--sui-black);
  --sui-bento-card-bg-active: var(--sui-primary);
  --sui-bento-card-title: var(--sui-black);
  --sui-bento-card-title-active: var(--sui-white);
  --sui-bento-card-button-bg: var(--sui-gray-500);
  --sui-bento-card-button-bg-hover: var(--sui-gray-600);
  --sui-bento-card-button-icon: var(--sui-white);
  --sui-bento-card-button-active-bg: var(--sui-gray-500);
  --sui-bento-card-button-active-bg-hover: var(--sui-gray-600);
  --sui-bento-card-button-active-icon: var(--sui-white);
}
.dark,
[data-theme=dark] {
  --sui-bento-card-bg: var(--sui-black);
  --sui-bento-card-border: var(--sui-gray-300);
  --sui-bento-card-content: var(--sui-black);
  --sui-bento-card-bg-active: var(--sui-primary);
  --sui-bento-card-title: var(--sui-white);
  --sui-bento-card-title-active: var(--sui-black);
  --sui-bento-card-button-bg: var(--sui-gray-500);
  --sui-bento-card-button-bg-hover: var(--sui-gray-600);
  --sui-bento-card-button-icon: var(--sui-black);
  --sui-bento-card-button-active-bg: var(--sui-gray-500);
  --sui-bento-card-button-active-bg-hover: var(--sui-gray-600);
  --sui-bento-card-button-active-icon: var(--sui-black);
}
.light,
:root,
[data-theme=light] {
  --sui-countdown-bg: var(--sui-black);
  --sui-countdown-border: var(--sui-border);
  --sui-countdown-label: var(--sui-white);
}
.dark,
[data-theme=dark] {
  --sui-countdown-bg: var(--sui-white);
  --sui-countdown-border: var(--sui-gray-500);
  --sui-countdown-label: var(--sui-black);
}
.light,
:root,
[data-theme=light] {
  --sui-tooltip-bg: var(--sui-white);
  --sui-tooltip-text: var(--sui-black);
  --sui-tooltip-border: var(--sui-gray-200);
}
.dark,
[data-theme=dark] {
  --sui-tooltip-bg: var(--sui-black);
  --sui-tooltip-text: var(--sui-white);
  --sui-tooltip-border: var(--sui-gray-700);
}
.light,
.dark,
:root,
[data-theme=light] {
  --sui-alert-success-50: color-mix( in srgb, var(--sui-success) 5%, var(--sui-white) );
  --sui-alert-info-50: color-mix(in srgb, var(--sui-info) 5%, var(--sui-white));
  --sui-alert-warning-50: color-mix( in srgb, var(--sui-warning) 5%, var(--sui-white) );
  --sui-alert-error-50: color-mix( in srgb, var(--sui-error) 5%, var(--sui-white) );
  --sui-alert-success-200: color-mix( in srgb, var(--sui-success) 20%, var(--sui-white) );
  --sui-alert-info-200: color-mix( in srgb, var(--sui-info) 20%, var(--sui-white) );
  --sui-alert-warning-200: color-mix( in srgb, var(--sui-warning) 20%, var(--sui-white) );
  --sui-alert-error-200: color-mix( in srgb, var(--sui-error) 20%, var(--sui-white) );
  --sui-alert-success-d600: color-mix( in srgb, var(--sui-success) 60%, var(--sui-black) );
  --sui-alert-info-d600: color-mix( in srgb, var(--sui-info) 60%, var(--sui-black) );
  --sui-alert-warning-d600: color-mix( in srgb, var(--sui-warning) 60%, var(--sui-black) );
  --sui-alert-error-d600: color-mix( in srgb, var(--sui-error) 60%, var(--sui-black) );
  --sui-alert-active-unfocused: red;
}
.light,
:root,
[data-theme=light] {
  --sui-table-black: var(--sui-white);
  --sui-table-white: var(--sui-black);
  --sui-table-border: color-mix( in srgb, var(--sui-white) 75%, var(--sui-black) );
}
.dark,
[data-theme=dark] {
  --sui-table-black: var(--sui-black);
  --sui-table-white: var(--sui-white);
  --sui-table-border: color-mix( in srgb, var(--sui-black) 75%, var(--sui-white) );
}
.light,
:root,
[data-theme=light] {
  --sui-breadCrumbs-fg: var(--sui-black);
}
.dark,
[data-theme=dark] {
  --sui-breadCrumbs-fg: var(--sui-white);
}
.light,
:root,
[data-theme=light] {
  --sui-datatable-black: var(--sui-white);
  --sui-datatable-white: var(--sui-black);
  --sui-datatable-border: color-mix( in srgb, var(--sui-white) 75%, var(--sui-black) );
  --sui-datatable-filter-hover: color-mix( in srgb, var(--sui-white) 94%, var(--sui-black) );
}
.dark,
[data-theme=dark] {
  --sui-datatable-black: var(--sui-black);
  --sui-datatable-white: var(--sui-white);
  --sui-datatable-border: color-mix( in srgb, var(--sui-black) 75%, var(--sui-white) );
}
:root {
  --sui-title-lead-fs: 4rem;
  --sui-title-lead-lh: 5rem;
  --sui-h1-fs: 2.25rem;
  --sui-h1-lh: 2.8125rem;
  --sui-h2-fs: 2rem;
  --sui-h2-lh: 2.5rem;
  --sui-h3-fs: 1.75rem;
  --sui-h3-lh: 2.1875rem;
  --sui-h4-fs: 1.5rem;
  --sui-h4-lh: 1.875rem;
  --sui-h5-fs: 1.25rem;
  --sui-h5-lh: 1.5625rem;
  --sui-h6-fs: 1rem;
  --sui-h6-lh: 1.25rem;
  --sui-text-small-fs: 0.875rem;
  --sui-text-small-lh: 1rem;
  --sui-text-fs: 1rem;
  --sui-text-lh: 1.25rem;
  --sui-text-large-fs: 1.5rem;
  --sui-text-large-lh: 1.875rem;
  --sui-text-lead-fs: 2.25rem;
  --sui-text-lead-lh: 2.8125rem;
  --sui-padding-small: 0.25rem;
  --sui-padding: 0.5rem;
  --sui-padding-large: 1rem;
  --sui-elevation-1:
    rgb(0 0 0 / 0%) 0px 0px 0px 0px,
    rgb(0 0 0 / 0%) 0px 0px 0px 0px,
    rgb(0 0 0 / 10%) 0px 4px 6px -1px,
    rgb(0 0 0 / 10%) 0px 2px 4px -2px;
  --sui-elevation-2: rgb(0 0 0 / 10%) 0 3px 3px 0;
  --sui-elevation-3: rgb(0 0 0 / 10%) 0 8px 8px 0;
  --sui-elevation-4: rgb(0 0 0 / 10%) 0 16px 16px 0;
  --sui-elevation-5: rgb(0 0 0 / 10%) 0 32px 32px 0;
  --sui-elevation-6: rgb(0 0 0 / 10%) 0 64px 64px 0;
  --sui-border-radius-small: 0.4rem;
  --sui-border-radius-medium: 0.6rem;
  --sui-border-radius-large: 0.8rem;
  --sui-border-radius-full: 100%;
  --sui-text-margin: 0.5rem;
  --sui-gap: 1rem;
  --sui-transition: all 0.3s ease-in-out;
  --sui-font-family:
    galanogrotesque,
    "Noto Sans",
    -apple-system,
    blinkmacsystemfont,
    "Segoe UI",
    roboto,
    oxygen,
    ubuntu,
    cantarell,
    "Fira Sans",
    "Droid Sans",
    "Helvetica Neue",
    sans-serif;
  --sui-transparent: transparent;
  --sui-current: currentcolor;
  --sui-border: var(--sui-gray-200);
}