CSS code

:root {
  /* primary */
  --color-primary-50: #fdf4fa;
  --color-primary-100: #fae4f3;
  --color-primary-200: #f5bce3;
  --color-primary-300: #ef8fd3;
  --color-primary-400: #e45ac3;
  --color-primary-500: #c734a7;
  --color-primary-600: #a01e85;
  --color-primary-700: #771163;
  --color-primary-800: #4f0841;
  --color-primary-900: #27021f;
  --color-primary-950: #10010b;
  
  --color-primary-main: var(--color-primary-500);
  --color-primary-foreground: #ffffff;

  /* neutral */
  --color-neutral-50: #f9f6f8;
  --color-neutral-100: #efe9ed;
  --color-neutral-200: #d9ccd4;
  --color-neutral-300: #c0aeba;
  --color-neutral-400: #a6919f;
  --color-neutral-500: #8a7583;
  --color-neutral-600: #6d5b67;
  --color-neutral-700: #50414b;
  --color-neutral-800: #342931;
  --color-neutral-900: #181216;
  --color-neutral-950: #070507;
  
  --color-neutral-main: var(--color-neutral-500);
  --color-neutral-foreground: #ffffff;

  /* danger */
  --color-danger-50: #fef5f3;
  --color-danger-100: #fde5e1;
  --color-danger-200: #fac1b6;
  --color-danger-300: #f69788;
  --color-danger-400: #ea6c5a;
  --color-danger-500: #cd4b3a;
  --color-danger-600: #a43629;
  --color-danger-700: #7a261b;
  --color-danger-800: #51160f;
  --color-danger-900: #280704;
  --color-danger-950: #110201;
  
  --color-danger-main: var(--color-danger-500);
  --color-danger-foreground: #ffffff;
}