:root {
  --mobile-01: 450px;
  --tablet-01: 850px;
  --desktop-01: 1000px;
  --desktop-large-01: 1200px;

  --spacing-01: 2px;
  --spacing-02: 4px;
  --spacing-03: 8px;
  --spacing-04: 12px;
  --spacing-05: 16px;
  --spacing-06: 22px;
  --spacing-07: 30px;
  --spacing-08: 38px;
  --spacing-09: 46px;
  --spacing-010: 92px;

  /* font-size */
  --font-size-01: 1rem;
  --font-size-02: 1.5rem;
  --font-size-03: 2.5rem;
  --font-size-04: 4rem;
  --font-size-05: 5rem;
  --font-size-06: 6rem;
  --font-size-title1: 1.2rem;
  --font-size-title2: 1.1rem;
  --font-size-subtitle1: 0.7rem;
  --font-size-subtitle2: 0.6rem;
  --font-size-body1: 1rem;
  --font-size-body2: 0.8rem;

  --font-size-label: 0.75rem;
  --font-size-chip: 0.8rem;
  --font-size-tag: 0.8rem;

  /* size */
  --custom-xs-height-size: 25px;
  --custom-s-height-size: 28px;
  --custom-m-height-size: 38px;
  --custom-l-height-size: 45px;
  --custom-xl-height-size: 55px;
  --font-size-xs: 15px;
  --font-size-s: 16px;
  --font-size-m: 20px;
  --font-size-l: 25px;
  --font-size-xl: 35px;

  /* font-family */
  --roboto-sans-serif: Roboto, Helvetica, Arial, sans-serif;

  /* font-weight */
  --font-weight-01: 100;
  --font-weight-02: 200;
  --font-weight-03: 300;
  --font-weight-04: 400;
  --font-weight-05: 500;
  --font-weight-06: 600;

  /* color must be for each  */
  --color-white-background: rgb(255, 255, 255);

  --grey: #c8c8c8;
  --checkbox-disabled-background: #d8d8d8;
  --black: #000;
  --color-default-text: rgba(0, 0, 0, 0.88);
  --color-withe-text: rgb(255, 255, 255);
  --color-text-description: rgba(0, 0, 0, 0.45);
  --color-disabled: rgba(0, 0, 0, 0.25);
  --color-warning: #faad14;
  --color-text-success: #52c41a;
  --color-text-error: #ff4d4f;
  --color-primary: rgb(25, 118, 210);
  --color-primary-hover: rgba(25, 118, 210, 0.856);
  --color-secondary: #040404d2;
  --color-secondary-hover: rgba(4, 16, 29, 0.699);
  --color-success: rgb(46, 125, 50);
  --color-success-hover: rgba(46, 125, 50, 0.829);
  --color-error: rgb(211, 47, 47);
  --color-error-hover: rgba(211, 47, 47, 0.815);

  --color-blue-light-4: 247 249 252;
  --border-color: #dcdfe3;
  --light-grey-background: #f9fafb;

  /* box-shadow */
  --box-shadow-button:
    rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px,
    rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
  --box-shadow-button-hover:
    0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12);

  /*transition*/
  --transition-button:
    background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

body {
  background-color: rgb(var(--color-blue-light-4));
}