:root {
  /* primitive */
  --color-white: #ffffff;
  --color-black: #000000;

  --color-navy-50: #e9f0f7;
  --color-navy-100: #cddded;
  --color-navy-200: #b1c9e3;
  --color-navy-300: #95b5d9;
  --color-navy-400: #7991c0;
  --color-navy-500: #406398;
  --color-navy-600: #365580;
  --color-navy-700: #2c4768;
  --color-navy-800: #223950;
  --color-navy-900: #182b38;

  --color-orange-50: #fdf4eb;
  --color-orange-100: #fbe6d3;
  --color-orange-200: #f7d6b8;
  --color-orange-300: #f3c69d;
  --color-orange-400: #efb684;
  --color-orange-500: #eaa86d;
  --color-orange-600: #e49757;
  --color-orange-700: #dd8642;
  --color-orange-800: #d6752e;
  --color-orange-900: #c9651c;

  --color-red-50: #ffebee;
  --color-red-100: #ffcdd2;
  --color-red-200: #ef9a9a;
  --color-red-300: #e57373;
  --color-red-400: #ef5350;
  --color-red-500: #f44336;
  --color-red-600: #e53935;
  --color-red-700: #d32f2f;
  --color-red-800: #c62828;
  --color-red-900: #b71c1c;

  --color-green-50: #e8f5e9;
  --color-green-100: #c8e6c9;
  --color-green-200: #a5d6a7;
  --color-green-300: #81c784;
  --color-green-400: #66bb6a;
  --color-green-500: #4caf50;
  --color-green-600: #43a047;
  --color-green-700: #388e3c;
  --color-green-800: #2e7d32;
  --color-green-900: #1b5e20;

  --color-grey-50: #f0f0f0;
  --color-grey-100: #dddddd;
  --color-grey-200: #c4c4c4;
  --color-grey-300: #acacac;
  --color-grey-400: #949494;
  --color-grey-500: #7b7b7b;
  --color-grey-600: #636363;
  --color-grey-700: #4b4b4b;
  --color-grey-800: #323232;
  --color-grey-900: #1a1a1a;

  --color-neutral-50: var(--color-grey-50);
  --color-neutral-100: var(--color-grey-100);
  --color-neutral-200: var(--color-grey-200);
  --color-neutral-300: var(--color-grey-300);
  --color-neutral-400: var(--color-grey-400);
  --color-neutral-500: var(--color-grey-500);
  --color-neutral-600: var(--color-grey-600);
  --color-neutral-700: var(--color-grey-700);
  --color-neutral-800: var(--color-grey-800);
  --color-neutral-900: var(--color-grey-900);

  --color-primary-50: var(--color-navy-50);
  --color-primary-100: var(--color-navy-100);
  --color-primary-200: var(--color-navy-200);
  --color-primary-300: var(--color-navy-300);
  --color-primary-400: var(--color-navy-400);
  --color-primary-500: var(--color-navy-500);
  --color-primary-600: var(--color-navy-600);
  --color-primary-700: var(--color-navy-700);
  --color-primary-800: var(--color-navy-800);
  --color-primary-900: var(--color-navy-900);

  --color-secondary-50: var(--color-orange-50);
  --color-secondary-100: var(--color-orange-100);
  --color-secondary-200: var(--color-orange-200);
  --color-secondary-300: var(--color-orange-300);
  --color-secondary-400: var(--color-orange-400);
  --color-secondary-500: var(--color-orange-500);
  --color-secondary-600: var(--color-orange-600);
  --color-secondary-700: var(--color-orange-700);
  --color-secondary-800: var(--color-orange-800);
  --color-secondary-900: var(--color-orange-900);

  --font-size-100: 1rem;
  --font-size-200: 1.2rem;
  --font-size-300: 1.4rem;
  --font-size-400: 1.6rem;
  --font-size-500: 1.8rem;
  --font-size-600: 2rem;
  --font-size-700: 2.4rem;
  --font-size-800: 2.8rem;

  --border-radius-100: 2px;
  --border-radius-200: 4px;
  --border-radius-300: 8px;
  --border-radius-400: 12px;
  --border-radius-500: 16px;
  --border-radius-600: 24px;

  /* alias */

  --color-primary: var(--color-navy-500);
  --color-primary-foreground: var(--color-white);
  --color-primary-hover: var(--color-navy-400);
  --color-primary-light: var(--color-navy-100);
  --color-primary-dark: var(--color-navy-700);
  --color-secondary: var(--color-orange-500);
  --color-secondary-foreground: var(--color-black);
  --color-secondary-hover: var(--color-orange-400);
  --color-secondary-light: var(--color-orange-100);
  --color-secondary-dark: var(--color-orange-700);

  --statusColor-success: var(--color-green-500);
  --statusColor-success-foreground: var(--color-black);
  --statusColor-success-light: var(--color-green-100);
  --statusColor-success-dark: var(--color-green-700);
  --statusColor-completed: var(--color-neutral-500);
  --statusColor-completed-foreground: var(--color-white);
  --statusColor-completed-light: var(--color-neutral-100);
  --statusColor-completed-dark: var(--color-neutral-900);
  /* TODO: 今回不要かも */
  --statusColor-info: var(--color-navy-500);
  --statusColor-info-foreground: var(--color-white);
  --statusColor-info-light: var(--color-navy-100);
  --statusColor-info-dark: var(--color-navy-700);
  --statusColor-warning: var(--color-orange-600);
  --statusColor-warning-foreground: var(--color-white);
  --statusColor-warning-light: var(--color-orange-200);
  --statusColor-warning-dark: var(--color-orange-800);
  --statusColor-danger: var(--color-red-600);
  --statusColor-danger-foreground: var(--color-white);
  --statusColor-danger-light: var(--color-red-100);
  --statusColor-danger-dark: var(--color-red-900);
  /* TODO: 今回不要かも */
  --statusColor-important: var(--color-red-600);
  --statusColor-important-foreground: var(--color-white);
  --statusColor-important-light: var(--color-red-100);
  --statusColor-important-dark: var(--color-red-900);

  --base-font-color: var(--color-grey-700);
  --base-font-color-strong: var(--color-grey-900);
  --base-font-color-low: var(--color-grey-500);
  --base-font-color-error: var(--color-red-900);
  --base-bg-color: var(--color-white);
  --base-bg-color-dark: var(--color-grey-50);
  --base-bg-color-primary: var(--color-primary-50);

  --base-font-size: var(--font-size-300);
  --base-font-size-mobile: var(--font-size-400);

  /* TODO: divider系に置換するか検討 */
  --base-border-color: var(--color-neutral-100);
  --base-border-color-light: var(--color-neutral-50);
  --base-border-color-strong: var(--color-neutral-200);
  --base-shadow-color: rgb(0 0 0 / 0.3);
  --base-shadow-color-dark: rgb(0 0 0 / 0.4);
  --base-mask-color: rgb(0 0 0 / 0.4);
  --base-mask-color-light: rgb(255 255 255 / 0.4);
  --base-mask-color-dark: rgb(0 0 0 / 0.5);
  --base-hover-color: var(--color-navy-50);
  --base-hover-foreground-color: var(--base-font-color);
  --base-current-color: var(--color-navy-100);
  --base-current-foreground-color: var(--base-font-color);
  --base-disabled-font-color: var(--color-grey-300);
  --base-placeholder-font-color: var(--color-grey-500);

  --divider-low-color: var(--color-neutral-50);
  --divider-medium-color: var(--color-neutral-100);
  --divider-high-color: var(--color-neutral-200);

  --box-shadow: -1px 3px 12px -4px var(--base-shadow-color);
  --box-shadow-strong: -2px 4px 14px -2px var(--base-shadow-color-dark);

  --button-bg-color: var(--color-white);
  --button-bg-color-hover: var(--color-primary-light);
  --button-border-color: var(--color-primary);
  --button-font-color: var(--color-black);
  --button-primary-bg-color: var(--statusColor-success);
  --button-primary-bg-color-hover: var(--statusColor-success-dark);
  --button-primary-border-color: transparent;
  --button-primary-font-color: var(--color-white);

  --input-disabled-bg-color: #f9f9f9;
  --grid-header-border-bottom-color: var(--divider-medium-color);
  --grid-border-color: var(--divider-low-color);
  --editorjs-drop-target-color: #388ae5;
}