:root {

  /* width
  ======================================== */

  /* raw */
  --_w-1: 320px;
  --_w-2: 360px;
  --_w-3: 480px;
  --_w-4: 640px;
  --_w-5: 720px;
  --_w-6: 840px;
  --_w-7: 960px;
  --_w-8: 1080px;
  --_w-9: 1120px;
  --_w-10: 1440px;

  /* scale */
  --width-min: var(--_w-1);
  --width-xs: var(--_w-2);
  --width-sm: var(--_w-4);
  --width-md: var(--_w-6);
  --width-lg: var(--_w-7);
  --width-xl: var(--_w-8);
  --width-max: var(--_w-10);

  /* space
  ======================================== */

  /* raw */
  --_sp-0: 0;
  --_sp-1: 4px;
  --_sp-2: 8px;
  --_sp-3: 16px;
  --_sp-4: 24px;
  --_sp-5: 32px;
  --_sp-6: 40px;
  --_sp-7: 48px;
  --_sp-8: 64px;
  --_sp-9: 80px;
  --_sp-10: 96px;
  --_sp-11: 120px;
  --_sp-12: 160px;

  /* scale */
  --space-0: var(--_sp-0);
  --space-min: var(--_sp-1);
  --space-3xs: var(--_sp-2);
  --space-2xs: var(--_sp-3);
  --space-xs: var(--_sp-4);
  --space-sm: var(--_sp-5);
  --space-md: var(--_sp-6);
  --space-lg: var(--_sp-7);
  --space-xl: var(--_sp-8);
  --space-2xl: var(--_sp-9);
  --space-3xl: var(--_sp-10);
  --space-4xl: var(--_sp-11);
  --space-max: var(--_sp-12);

  /* color
  ======================================== */

  /* raw */
  --_gray-0: #FFF;
  --_gray-1: #F5F5F5;
  --_gray-2: #DBDBDB;
  --_gray-3: #333;

  --_black: #000;

  --_green-1: #E5FFF1;
  --_green-2: #A3CCB6;
  --_green-3: #009944;
  --_green-4: #143322;

  --_blue-1: #1493F5;

  --_orange-1: #F54E14;

  --_red-1: #FF0000;

  /* scale */
  --color-white: var(--_gray-0);
  --color-gray-1: var(--_gray-1);
  --color-gray-2: var(--_gray-2);
  --color-gray-3: var(--_gray-3);

  --color-black-0: var(--_black);

  --color-green-1: var(--_green-1);
  --color-green-2: var(--_green-2);
  --color-green-3: var(--_green-3);
  --color-green-4: var(--_green-4);

  --color-blue-1: var(--_blue-1);

  --color-orange-1: var(--_orange-1);

  --color-red-1: var(--_red-1);

  /* size(font / icon )
  ======================================== */

  /* raw */
  --_fs-1: .6875rem; /* 11px */
  --_fs-2: .75rem; /* 12px */
  --_fs-3: .8175rem; /* 13px */
  --_fs-4: .875rem; /* 14px */
  --_fs-5: 1rem; /* 16px */
  --_fs-6: 1.125rem; /* 18px */
  --_fs-7: 1.25rem; /* 20px */
  --_fs-8: 1.5rem; /* 24px */
  --_fs-9: 2rem; /* 32px */
  --_fs-10: 2.5rem; /* 40px */
  --_fs-11: 3rem; /* 48px */
  --_fs-12: 4rem; /* 64px */
  --_fs-13: 5rem; /* 80px */
  --_fs-14: 6rem; /* 96px */
  --_fs-15: 7.5rem; /* 120px */

  /* scale */
  --size-min: var(--_fs-1);
  --size-4xs: var(--_fs-2);
  --size-3xs: var(--_fs-3);
  --size-2xs: var(--_fs-4);
  --size-xs: var(--_fs-5);
  --size-sm: var(--_fs-6);
  --size-md: var(--_fs-7);
  --size-lg: var(--_fs-8);
  --size-xl: var(--_fs-9);
  --size-2xl: var(--_fs-11);
  --size-3xl: var(--_fs-12);

  /* line-height
  ======================================== */

  /* raw */
  --_lh-1: 1;
  --_lh-2: 1.2;
  --_lh-3: 1.4;
  --_lh-4: 1.6;
  --_lh-5: 1.8;
  --_lh-6: 2;

  /* scale */
  --line-height-min: var(--_lh-1);
  --line-height-xs: var(--_lh-2);
  --line-height-sm: var(--_lh-3);
  --line-height-md: var(--_lh-4);
  --line-height-lg: var(--_lh-5);
  --line-height-xl: var(--_lh-6);

  /* letter-spacing
  ======================================== */

  /* raw */
  --_ls-0: 0;
  --_ls-1: .08em;
  --_ls-2: .16em;

  /* scale */
  --letter-spacing-0: var(--_ls-0);
  --letter-spacing-min: var(--_ls-1);
  --letter-spacing-max: var(--_ls-2);

  /* radius
  ======================================== */

  /* raw */
  --_r-1: 4px;
  --_r-2: 8px;
  --_r-3: 16px;
  --_r-4: 24px;
  --_r-5: 40px;
  --_r-6: 999px;

  /* scale */
  --radius-xs: var(--_r-1);
  --radius-sm: var(--_r-2);
  --radius-md: var(--_r-3);
  --radius-lg: var(--_r-4);
  --radius-xl: var(--_r-5);
  --radius-max: var(--_r-6);

  /* shadow
  ======================================== */

  /* raw */
  --_shadow-1: 0 4px 40px rgb(0 0 0 / 10%);

  /* scale */
  --shadow-1: var(--_shadow-1);

  /* opacity
  ======================================== */

  /* raw */
  --_op-0: 0;
  --_op-1: .4;
  --_op-2: .8;
  --_op-3: 1;

  /* scale */
  --opacity-0: var(--_op-0);
  --opacity-sm: var(--_op-1);
  --opacity-md: var(--_op-2);
  --opacity-1: var(--_op-3);

}