/* theme color */
:root,
[data-1-mode="light"] {
  /* light */
  --back-color: #ffffff;
  --light-color:#edebf8;
  --gray-100: #e6e6e6;
  --gray-300: #b3b3b3;
  --gray-500: #808080;
  --gray-700: #4d4d4d;
  --gray-800: #252525;
  --gray-900: #1a1a1a;
  --primary-color01: #031591;
  --primary-color02: #1814b2;
  --primary-color03: #2c12d2;
  --primary-color04: #4111f3;
  --primary-color05: #6741f5;
  --primary-color06: #8d70f8;
  --primary-color07: #b3a0fa;
  --primary-color08: #d9cffd;
  --primary-color09: #f0ecfe;
  --secondary-color01: #4d0037;
  --secondary-color02: #750053;
  --secondary-color03: #9e0070;
  --secondary-color04: #c6008a;
  --secondary-color05: #eb00a6;
  --secondary-color06: #ed3aac;
  --secondary-color07: #f16cc2;
  --secondary-color08: #f59cd9;
  --secondary-color09: #facff0;
  --secondary-color10: #fde6f6;
  --third-color01: #ffc928;
  --third-color02: #ffeea8;
  --theme-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.2);
}

/* number */
@media (min-width:1201px){
  :root{
    --size-xl: 48px;
    --size-lg: 40px;
    --size-md: 32px;
    --size-sm: 28px;
    --size-xs: 20px;
  }
}
@media (max-width:1200px) and (min-width:721px){
  :root{
    --size-xl: 48px;
    --size-lg: 36px;
    --size-md: 32px;
    --size-sm: 24px;
    --size-xs: 18px;
  }
}
@media (max-width:720px){
  :root{
    --size-xl: 26px;
    --size-lg: 22px;
    --size-md: 18px;
    --size-sm: 16px;
    --size-xs: 14px;
  }
}

/* box */
:root {
  --drop-shadow-box-shadow: 5px 4px 20px 0px rgba(44, 18, 210, 1),
    0px 4px 4px 0px rgba(0, 0, 0, 0), 0px 4px 10px 0px rgba(0, 0, 0, 0.25);
}