Color System Toolkit

:root {
  /* Primary */
  --color-primary-50: #f7f7f8;
  --color-primary-100: #ececf2;
  --color-primary-200: #d2d3e9;
  --color-primary-300: #b3b4e7;
  --color-primary-400: #8e90e9;
  --color-primary-500: #6467f2;
  --color-primary-600: #2e31e2;
  --color-primary-700: #2123a8;
  --color-primary-800: #1b1c68;
  --color-primary-900: #0f102e;
  --color-primary-950: #070713;
  /* Secondary */
  --color-secondary-50: #f7f7f8;
  --color-secondary-100: #efecf2;
  --color-secondary-200: #ddd2e9;
  --color-secondary-300: #ccb3e7;
  --color-secondary-400: #ba8eea;
  --color-secondary-500: #a863f2;
  --color-secondary-600: #852ce3;
  --color-secondary-700: #6220a9;
  --color-secondary-800: #401b68;
  --color-secondary-900: #1e0f2e;
  --color-secondary-950: #0d0713;
  /* Success */
  --color-success-50: #f7f8f7;
  --color-success-100: #e5ece8;
  --color-success-200: #bcdac7;
  --color-success-300: #8bd1a4;
  --color-success-400: #51cf7f;
  --color-success-500: #21c45d;
  --color-success-600: #21974c;
  --color-success-700: #1e6d3b;
  --color-success-800: #184629;
  --color-success-900: #0e2215;
  --color-success-950: #08120b;
  /* Warning */
  --color-warning-50: #f8f8f7;
  --color-warning-100: #eeebe6;
  --color-warning-200: #e2d4bd;
  --color-warning-300: #dec08b;
  --color-warning-400: #e5ae4f;
  --color-warning-500: #f59f0a;
  --color-warning-600: #ba7d12;
  --color-warning-700: #855c14;
  --color-warning-800: #543c12;
  --color-warning-900: #281d0b;
  --color-warning-950: #130e06;
  /* Danger */
  --color-danger-50: #f8f7f7;
  --color-danger-100: #f0eaea;
  --color-danger-200: #e5caca;
  --color-danger-300: #e2a4a4;
  --color-danger-400: #e57777;
  --color-danger-500: #ef4343;
  --color-danger-600: #d61e1e;
  --color-danger-700: #981e1e;
  --color-danger-800: #5e1919;
  --color-danger-900: #2b0e0e;
  --color-danger-950: #130707;
  /* Neutral */
  --color-neutral-50: #f7f7f7;
  --color-neutral-100: #e9eaeb;
  --color-neutral-200: #cdcdd2;
  --color-neutral-300: #afb0ba;
  --color-neutral-400: #9091a4;
  --color-neutral-500: #70718f;
  --color-neutral-600: #5b5c71;
  --color-neutral-700: #454654;
  --color-neutral-800: #2f2f37;
  --color-neutral-900: #18181b;
  --color-neutral-950: #0c0c0e;
}