:root {
  --color-primary-800: #E1CBD8;
  --color-secondary-800: #C0777C;
  --color-tertiary-800: #e7d2b0;
  --color-quaternary-800: #a8bba5;

  /* default shades are using mix with white to get the shades */
  --color-primary-200: color-mix(in srgb, var(--color-primary-800) 90%, white);
  --color-primary-200: color-mix(in srgb, var(--color-primary-800) 80%, white);
  --color-primary-300: color-mix(in srgb, var(--color-primary-800) 60%, white);
  --color-primary-400: color-mix(in srgb, var(--color-primary-800) 40%, white);
  --color-primary-500: color-mix(in srgb, var(--color-primary-800) 30%, white);
  --color-primary-600: color-mix(in srgb, var(--color-primary-800) 20%, white);
  --color-primary-700: color-mix(in srgb, var(--color-primary-800) 10%, white);
  --color-secondary-100: color-mix(in srgb, var(--color-secondary-800) 90%, white);
  --color-secondary-200: color-mix(in srgb, var(--color-secondary-800) 80%, white);
  --color-secondary-300: color-mix(in srgb, var(--color-secondary-800) 60%, white);
  --color-secondary-400: color-mix(in srgb, var(--color-secondary-800) 40%, white);
  --color-secondary-500: color-mix(in srgb, var(--color-secondary-800) 30%, white);
  --color-secondary-600: color-mix(in srgb, var(--color-secondary-800) 20%, white);
  --color-secondary-700: color-mix(in srgb, var(--color-secondary-800) 10%, white);


  /* dark shades are using mix with black to get the shades */
  --color-dark-secondary-100: color-mix(in srgb, var(--color-secondary-800) 90%, black);
  --color-dark-secondary-200: color-mix(in srgb, var(--color-secondary-800) 80%, black);
  --color-dark-secondary-300: color-mix(in srgb, var(--color-secondary-800) 70%, black);
  --color-dark-secondary-400: color-mix(in srgb, var(--color-secondary-800) 60%, black);
  --color-dark-secondary-500: color-mix(in srgb, var(--color-secondary-800) 50%, black);
  --color-dark-secondary-600: color-mix(in srgb, var(--color-secondary-800) 40%, black);
  --color-dark-secondary-700: color-mix(in srgb, var(--color-secondary-800) 30%, black);
  --color-dark-secondary-800: color-mix(in srgb, var(--color-secondary-800) 20%, black);
  --color-dark-secondary-900: color-mix(in srgb, var(--color-secondary-800) 10%, black);
  --color-dark-primary-100: color-mix(in srgb, var(--color-primary-800) 90%, black);
  --color-dark-primary-200: color-mix(in srgb, var(--color-primary-800) 80%, black);
  --color-dark-primary-300: color-mix(in srgb, var(--color-primary-800) 70%, black);
  --color-dark-primary-400: color-mix(in srgb, var(--color-primary-800) 60%, black);
  --color-dark-primary-500: color-mix(in srgb, var(--color-primary-800) 50%, black);
  --color-dark-primary-600: color-mix(in srgb, var(--color-primary-800) 40%, black);
  --color-dark-primary-700: color-mix(in srgb, var(--color-primary-800) 30%, black);
  --color-dark-primary-800: color-mix(in srgb, var(--color-primary-800) 20%, black);
  --color-dark-primary-900: color-mix(in srgb, var(--color-primary-800) 10%, black);

  /* default shades are using mix with white to get the shades */
  --color-tertiary-200: color-mix(in srgb, var(--color-tertiary-800) 90%, white);
  --color-tertiary-300: color-mix(in srgb, var(--color-tertiary-800) 80%, white);
  --color-tertiary-400: color-mix(in srgb, var(--color-tertiary-800) 70%, white);
  --color-tertiary-500: color-mix(in srgb, var(--color-tertiary-800) 60%, white);
  --color-tertiary-600: color-mix(in srgb, var(--color-tertiary-800) 50%, white);
  --color-tertiary-700: color-mix(in srgb, var(--color-tertiary-800) 40%, white);
  --color-quaternary-200: color-mix(in srgb, var(--color-secondary-800) 90%, white);
  --color-quaternary-300: color-mix(in srgb, var(--color-quaternary-800) 80%, white);
  --color-quaternary-400: color-mix(in srgb, var(--color-quaternary-800) 70%, white);
  --color-quaternary-500: color-mix(in srgb, var(--color-quaternary-800) 60%, white);
  --color-quaternary-600: color-mix(in srgb, var(--color-quaternary-800) 50%, white);
  --color-quaternary-700: color-mix(in srgb, var(--color-quaternary-800) 40%, white);


  /* dark shades are using mix with black to get the shades */
  --color-dark-quaternary-100: color-mix(in srgb, var(--color-quaternary-800) 90%, black);
  --color-dark-quaternary-200: color-mix(in srgb, var(--color-quaternary-800) 80%, black);
  --color-dark-quaternary-300: color-mix(in srgb, var(--color-quaternary-800) 70%, black);
  --color-dark-quaternary-400: color-mix(in srgb, var(--color-quaternary-800) 60%, black);
  --color-dark-quaternary-500: color-mix(in srgb, var(--color-quaternary-800) 50%, black);
  --color-dark-quaternary-600: color-mix(in srgb, var(--color-quaternary-800) 40%, black);
  --color-dark-quaternary-700: color-mix(in srgb, var(--color-quaternary-800) 30%, black);
  --color-dark-quaternary-800: color-mix(in srgb, var(--color-quaternary-800) 20%, black);
  --color-dark-quaternary-900: color-mix(in srgb, var(--color-quaternary-800) 10%, black);
  --color-dark-tertiary-100: color-mix(in srgb, var(--color-tertiary-800) 90%, black);
  --color-dark-tertiary-200: color-mix(in srgb, var(--color-tertiary-800) 80%, black);
  --color-dark-tertiary-300: color-mix(in srgb, var(--color-tertiary-800) 70%, black);
  --color-dark-tertiary-400: color-mix(in srgb, var(--color-tertiary-800) 60%, black);
  --color-dark-tertiary-500: color-mix(in srgb, var(--color-tertiary-800) 50%, black);
  --color-dark-tertiary-600: color-mix(in srgb, var(--color-tertiary-800) 40%, black);
  --color-dark-tertiary-700: color-mix(in srgb, var(--color-tertiary-800) 30%, black);
  --color-dark-tertiary-800: color-mix(in srgb, var(--color-tertiary-800) 20%, black);
  --color-dark-tertiary-900: color-mix(in srgb, var(--color-tertiary-800) 10%, black);
}