CSS code

:root {
  /* primary */
  --color-primary-50: #f4f7ff;
  --color-primary-100: #e2ecff;
  --color-primary-200: #bbd0fe;
  --color-primary-300: #91b3fe;
  --color-primary-400: #6692fd;
  --color-primary-500: #3c6ef9;
  --color-primary-600: #1a45ec;
  --color-primary-700: #0c28be;
  --color-primary-800: #051780;
  --color-primary-900: #010843;
  --color-primary-950: #000220;
  
  --color-primary-main: var(--color-primary-600);
  --color-primary-foreground: #ffffff;

  /* neutral */
  --color-neutral-50: #f6f7fa;
  --color-neutral-100: #e7ebf3;
  --color-neutral-200: #c8d1e3;
  --color-neutral-300: #a7b5d1;
  --color-neutral-400: #8898bb;
  --color-neutral-500: #6b7ca0;
  --color-neutral-600: #516181;
  --color-neutral-700: #3a4660;
  --color-neutral-800: #242d40;
  --color-neutral-900: #0f141e;
  --color-neutral-950: #04060b;
  
  --color-neutral-main: var(--color-neutral-600);
  --color-neutral-foreground: #ffffff;

  /* danger */
  --color-danger-50: #fff5f3;
  --color-danger-100: #ffe4e1;
  --color-danger-200: #ffbeb8;
  --color-danger-300: #fe9188;
  --color-danger-400: #fc5754;
  --color-danger-500: #e41a2b;
  --color-danger-600: #b50f1f;
  --color-danger-700: #870814;
  --color-danger-800: #5a030a;
  --color-danger-900: #2d0103;
  --color-danger-950: #130001;
  
  --color-danger-main: var(--color-danger-500);
  --color-danger-foreground: #ffffff;
}