body {
  --default-primary-50: #f4eff9;
  --default-primary-100: #e1d2ed;
  --default-primary-200: #c3a5dc;
  --default-primary-300: #9f73c6;
  --default-primary-400: #7540a8;
  --default-primary-500: #330076;
  --default-primary-600: #2d0069;
  --default-primary-700: #260058;
  --default-primary-800: #1f0048;
  --default-primary-900: #170036;

  --primary-50: var(--custom-primary-50, var(--default-primary-50));
  --primary-100: var(--custom-primary-100, var(--default-primary-100));
  --primary-200: var(--custom-primary-200, var(--default-primary-200));
  --primary-300: var(--custom-primary-300, var(--default-primary-300));
  --primary-400: var(--custom-primary-400, var(--default-primary-400));
  --primary-500: var(--custom-primary-500, var(--default-primary-500));
  --primary-600: var(--custom-primary-600, var(--default-primary-600));
  --primary-700: var(--custom-primary-700, var(--default-primary-700));
  --primary-800: var(--custom-primary-800, var(--default-primary-800));
  --primary-900: var(--custom-primary-900, var(--default-primary-900));

  --primary-color: var(--primary-500);
  --primary-hover-color: var(--primary-600);
  --highlight-text-color: var(--primary-700);
  --highlight-bg-color: var(--primary-50);
  --highlight-focus-color: var(--primary-100);
  --button-hover: var(--primary-600);
  --button-line-hover: var(--primary-50);
  --p-focus-ring-color: var(--primary-900);

  --font-family: 'Pretendard Variable';
  --input-filter-height: 50px;
}